Module: /ui/elements/drawer

/ui/elements/drawer

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

Source: ui/elements/drawer.mjs, line 1

Methods

(inner) drawer(params) → {HTMLElement}

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.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. `disableOnHide` sets the drawer to disabled when a layer is turned off. By default, all style drawers are given `disableOnHide` behaviour. This can be revoked by passing an empty string or any other value e.g. `showOnHide` to the drawer property.
`params.view`	HTMLElement	<optional>	The layer view the drawer is in.

Source: ui/elements/drawer.mjs, line 9

Returns:

The drawer element.

Type:: HTMLElement

(inner) drawerDialog(params) → {HTMLElement}

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.

Source: ui/elements/drawer.mjs, line 278

Returns:

The button element to toggle the dialog display.

Type:: HTMLElement

(inner) onClick(e)

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

Parameters:

Name	Type	Description
`e`	Object	The click event.

Source: ui/elements/drawer.mjs, line 97

(inner) openDialog(params)

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.

Source: ui/elements/drawer.mjs, line 351

(inner) popout(params)

The method assigns the popout behaviour to the drawer element if the popout property is not falsy.

Parameters:

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

Properties

Name	Type	Attributes	Description
`params.drawer`	HTML		The drawer element.
`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.

Source: ui/elements/drawer.mjs, line 112

(inner) popoutDialog(params)

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.

Source: ui/elements/drawer.mjs, line 180