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 / css z_index for special modals, or 'err' for error modals with +100 as z_index)
Used as h.libs.ui_window.

new H_ui_window()

ui.js, line 917

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. if the special_level is not an int but 'err' like error, the z_index += 100 !

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 1161
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 1106
Mutation observer callback for modal content changes.
Name Type Description
records Array Mutation records.

on_double_click_mask(event)

ui.js, line 1223
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 1029
Handles key press events for the modal.
Closes modal on ESC key.
Name Type Description
evt KeyboardEvent The keyboard event.

remove()

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

set_alignment(align_vertical, align_horizontal)

ui.js, line 1123
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 1042
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 1090
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 1065
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 1180
Shows the modal window.
Makes the modal visible and brings it to front.

toggle()

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

update_scroll_position()

ui.js, line 1133
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 1307
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 964
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. if the special_level is not an int but 'err' like error, the z_index += 100 !

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 1161
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 1106
Mutation observer callback for modal content changes.
Name Type Description
records Array Mutation records.

on_double_click_mask(event)

ui.js, line 1223
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 1029
Handles key press events for the modal.
Closes modal on ESC key.
Name Type Description
evt KeyboardEvent The keyboard event.

remove()

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

set_alignment(align_vertical, align_horizontal)

ui.js, line 1123
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 1042
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 1090
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 1065
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 1180
Shows the modal window.
Makes the modal visible and brings it to front.

toggle()

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

update_scroll_position()

ui.js, line 1133
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 1307
Handle key event for all the modal, determine wich modal will receive the event. (generally the last opened)
Name Type Description
evt KeyboardEvent