Module: /ui/elements/drawer

The drawer element module exports the drawer method for the mapp.ui.elements{} library object.

Methods

The drawer method will create and return drawer element with a header and content.

Parameters:

Name	Type	Description
`params`	Object	The configuration params for the drawer element.

Properties

Name	Type	Attributes	Description
`params.data_id`	string		The data-id for drawer element.
`params.header`	HTML		The header element[s].
`params.content`	HTML		The content element[s] for the drawer.
`params.popout`	boolean	<optional>	Whether the drawer can be popped out into a dialog.
`params.drawer`	boolean	<optional>	Optional flag to skip creation of the expandable container and/or header. Set to `false` creates header and content. Set to `null` creates content only.
`params.view`	HTMLElement	<optional>	The layer view the drawer is in.

Returns:

The drawer element.

Creates the button for creating the dialog, which contains the content of the drawer.

A dialog configuration object with defaults will be created if the dialog property value is true.

Several options can be specified in the dialog:

dialog: {
  btn_title: "My panel Dialog",
  btn_label: "Open my panel dialog",
  title: "My dialog title",
  icon: "thumbs_up" 
}

A dialog associated with a layer will be closed in the layer hideCallbacks methods.

A dialog will be displayed in the layer showCallbacks methods with the showOnLayerDisplay flag.

Parameters:

Name	Type	Description
`params`	object

Properties

Name	Type	Description
`params.layer`	layer	A mapp layer associated with the dialog.
`params.dialog`	object	The configuration for the dialog.
`dialog.showOnLayerDisplay`	boolean	Show dialog when the layer display is toggled on.
`dialog.icon`	string	material-symbols-outlined icon to show in the button.
`dialog.btn_label`	string	Text shown in the button.
`dialog.btn_title`	string	Title text assigned to the button element.

Returns:

The button element to toggle the dialog display.

The [drawer] onClick event method will shortcircuit if the parentElement has the empty class.

Parameters:

Name	Type	Description
`e`	Object	The click event.

Instatiates the dialog for the drawer, or if the dialog already exists calls the dialog show function.

Parameters:

Name	Type	Description
`params`	object

Properties

Name	Type	Attributes	Default	Description
`params.layer`	layer			The layer holding the configuration for the drawer.
`params.dialog`	object			Configuration for the dialog element.
`dialog.title`	string	<optional>	"Dialog"	Text shown in the dialog header.
`dialog.header`	HTMLElement	<optional>		Header element foor the dialog.

the popoutDialog creates the popout element for a drawer and appends the popout button to the header of the drawer.

Parameters:

Name	Type	Description
`params`	Object	The configuration params for the popout element.

Properties

Name	Type	Description
`params.data_id`	string	The data-id for popout element.
`params.header`	HTML	The header element[s].
`params.content`	HTML	The content element[s] for the popout.
`params.drawer`	HTML	The drawer element being popped out.
`params.originalTarget`	HTML	The element that holds the content within the drawer being popped out.