HelPHP Javascript Documentation

Class: H_ui_window

H_ui_window

UI class for modal windows and dialogs.
Handles modal logic, alignment, content, and close behavior.
Possible settings for H_ui_window:
- title: {string|HTMLElement|Array} Accepts string, DOM element, or array to add a title on top - class: string (additional CSS classes for the modal)
- modal: boolean (show as modal with background mask)
- close: string|boolean (label for the close button, or true for default)
- on_close: function (callback executed when the modal is closed)
- hidden: boolean (start hidden)
- content_resizable: boolean to make the window partialy resizable (it depends its CSS, if there is min-width or min-height set)
- remove_on_close: boolean (remove from DOM when closed)
- nodrag: boolean (disable drag)
- disable_background_click: boolean (disable closing by clicking background and pressing ESC key)
- auto_alignement: boolean (enable auto-alignment on content change)
- special: boolean (special modal, higher z-index)
- special_level: number|string (priority level for special modals, or 'err' for error modals)
Used as h.libs.ui_window.

new H_ui_window()

ui.js, line 968

Members

close

Sets the close button for the modal window.

current_open_z_indexnumber

Current open z-index for modals.
Adds or removes the modal mask as needed.

visible

Gets the visibility state of the modal window.

zindex

Change the zindex for the modal and overlay

Methods

hide(at_start)

ui.js, line 1213
Hides the modal window.
Optionally triggers on_close callback.
Name Type Default Description
at_start boolean false optional If true, hides at start.

mutation(records)

ui.js, line 1158
Mutation observer callback for modal content changes.
Name Type Description
records Array Mutation records.

on_double_click_mask(event)

ui.js, line 1275
Handles double click on the modal mask.
Hides the modal.
Name Type Description
event Event The double click event.

on_key_press(evt)

ui.js, line 1081
Handles key press events for the modal.
Closes modal on ESC key.
Name Type Description
evt KeyboardEvent The keyboard event.

remove()

ui.js, line 1253
Removes the modal window from the DOM.
Cleans up event handlers and observers.

set_alignment(align_vertical, align_horizontal)

ui.js, line 1175
Sets the alignment of the modal window.
Name Type Description
align_vertical number Vertical alignment.
align_horizontal number Horizontal alignment.

set_content(content)

ui.js, line 1094
Sets the content of the modal window.
Accepts string, DOM element, or array.
Name Type Description
content string | HTMLElement | Array Content to display.

set_parent(parentNode, align_horizontal, align_vertical)

ui.js, line 1142
Sets the parent node for the modal window. Optionally aligns the modal.
Name Type Description
parentNode HTMLElement Parent node.
align_horizontal number optional Horizontal alignment.
align_vertical number optional Vertical alignment.

set_title(title)

ui.js, line 1117
Sets the title of the modal window if it's set in the settings
Accepts string, DOM element, or array.
Name Type Description
title string | HTMLElement | Array Content to display.

show()

ui.js, line 1232
Shows the modal window.
Makes the modal visible and brings it to front.

toggle()

ui.js, line 1199
Toggles the modal window's visibility.
Shows or hides the modal.

update_scroll_position()

ui.js, line 1185
Updates the scroll position of the modal window.
Adjusts top position if the page is scrolled.

staticH_ui_window.handle_key_press(evt)

ui.js, line 1358
Handle key event for all the modal, determine wich modal will receive the event. (generally the last opened)
Name Type Description
evt KeyboardEvent

H_ui_window

new H_ui_window(settings)

ui.js, line 1016
Name Type Description
settings Object Window's settings
Name Type Description
title String | Array | HTMLElement Add a title on top
class String Additional CSS classes for the modal
modal Boolean Display as modal with background mask
close Boolean | String Label for the close button, or true for default
on_close function | String Callback executed when closed
hidden Boolean Hide it on create
content_resizable Boolean Make the window partialy resizable. Depends its CSS, if there is min-width or min-height set
remove_on_close Boolean Remove from DOM when closed
nodrag Boolean Disable drag of whole modal
disable_background_click Boolean Disable closing by clicking background and pressing ESC key
auto_alignement Boolean Enable auto-alignment on content change
special Boolean special modal, higher z-index
special_level Number | String Priority level for special modals, or 'err' for error modals

Members

close

Sets the close button for the modal window.

current_open_z_indexnumber

Current open z-index for modals.
Adds or removes the modal mask as needed.

visible

Gets the visibility state of the modal window.

zindex

Change the zindex for the modal and overlay

Methods

hide(at_start)

ui.js, line 1213
Hides the modal window.
Optionally triggers on_close callback.
Name Type Default Description
at_start boolean false optional If true, hides at start.

mutation(records)

ui.js, line 1158
Mutation observer callback for modal content changes.
Name Type Description
records Array Mutation records.

on_double_click_mask(event)

ui.js, line 1275
Handles double click on the modal mask.
Hides the modal.
Name Type Description
event Event The double click event.

on_key_press(evt)

ui.js, line 1081
Handles key press events for the modal.
Closes modal on ESC key.
Name Type Description
evt KeyboardEvent The keyboard event.

remove()

ui.js, line 1253
Removes the modal window from the DOM.
Cleans up event handlers and observers.

set_alignment(align_vertical, align_horizontal)

ui.js, line 1175
Sets the alignment of the modal window.
Name Type Description
align_vertical number Vertical alignment.
align_horizontal number Horizontal alignment.

set_content(content)

ui.js, line 1094
Sets the content of the modal window.
Accepts string, DOM element, or array.
Name Type Description
content string | HTMLElement | Array Content to display.

set_parent(parentNode, align_horizontal, align_vertical)

ui.js, line 1142
Sets the parent node for the modal window. Optionally aligns the modal.
Name Type Description
parentNode HTMLElement Parent node.
align_horizontal number optional Horizontal alignment.
align_vertical number optional Vertical alignment.

set_title(title)

ui.js, line 1117
Sets the title of the modal window if it's set in the settings
Accepts string, DOM element, or array.
Name Type Description
title string | HTMLElement | Array Content to display.

show()

ui.js, line 1232
Shows the modal window.
Makes the modal visible and brings it to front.

toggle()

ui.js, line 1199
Toggles the modal window's visibility.
Shows or hides the modal.

update_scroll_position()

ui.js, line 1185
Updates the scroll position of the modal window.
Adjusts top position if the page is scrolled.

staticH_ui_window.handle_key_press(evt)

ui.js, line 1358
Handle key event for all the modal, determine wich modal will receive the event. (generally the last opened)
Name Type Description
evt KeyboardEvent