HelPHP Javascript Documentation

Class: H_ui

H_ui

Utility class for complex UI objects and methods not related to a single DOM element (see dom.js for that).
Provides static methods for color pickers, modals, popups, accordions, tooltips, clipboard, and more.
H_ui contains tons of little utils and UI tools, and when a widget become too much complex, it has become a subclass, like H_ui_tabs, H_ui_autocomplete etc...
those subclasses are most of the time the controler conterpart of H.php widgets and initialized by them.
Used as h.libs.ui.

new H_ui()

ui.js, line 29

Members

translate_blockObject

Block for translation UI logic.
Contains methods for changing language and translating content.

Methods

staticH_ui.add_window(parent_node, settings){H_ui_window}

ui.js, line 487
Adds a new window (modal/dialog) to the UI.
Name Type Description
parent_node HTMLElement Parent node to append to.
settings Object Window 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
disable_auto_resize Boolean Disable auto-resize/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
Returns:
Type Description
H_ui_window The created window instance.

staticH_ui.change_multi_radio(event)

ui.js, line 191
Updates the selected state for multi-radio blocks.
Toggles the 'selected' class on labels.
Name Type Description
event Event The change event.

staticH_ui.clean_color_pickers()

ui.js, line 123
Cleans up unused color pickers.
Destroys pickers that are no longer open or present in the DOM.

staticH_ui.clean_tox()

ui.js, line 461
Cleans up TinyMCE auxiliary elements. Removes all elements with class 'tox-tinymce-aux' left by tynimce.

staticH_ui.confirm_popup(message, ok_handler, cancel_handler)

ui.js, line 555
Displays a confirmation popup with OK and Cancel buttons.
Name Type Description
message string | Array Message to display.
ok_handler function Handler for OK button.
cancel_handler function Handler for Cancel button.

staticH_ui.copy_to_clipboard(content, popup, html)

ui.js, line 930
Copies content to the clipboard.
Optionally shows a popup and supports HTML content.
Name Type Default Description
content string Content to copy.
popup boolean | string true optional Show popup or custom message.
html boolean false optional Copy as HTML.

staticH_ui.detect_screen_infos()

ui.js, line 830
Detects screen info and sets CSS variables.
window screen logarythmique ratio calculator is used to create some CSS vars that can reduce issues with some screens.
e.g : for a 4k screen, you don't display the navigator in full screen size, in general the user reduce the window size because it's more easy.
but in this case all vars based on screen width height should be reduced by a ratio based on fullHD as base.
--fhd-hr and --fhd-vr are those horizontal and vertical ratio that can be used to multiple othe size vars in your theme to auto adapt it to huge screen.
Called from init.js to set screen and window size variables.

staticH_ui.display_color_picker(evt, dom_id)

ui.js, line 63
Displays a color picker for a given input.
Initializes and manages the color picker instance.
the colorpicker source in in /js/externals/alwan
as there is already tons of colopicker, we choose this one : https://github.com/sefianecho/alwan
Name Type Description
evt Event The triggering event.
dom_id string The DOM id of the input.

staticH_ui.get_token(evt, from_form)

ui.js, line 293
Retrieves a token via AJAX and inserts it into the form.
this token will permit to identify one authorized submit, and reduce DDOS risk.
Name Type Default Description
evt Event The triggering event.
from_form boolean false optional Whether the event is from a form.

staticH_ui.init_input_order(base_name, base_id, editable, callback)

ui.js, line 373
Initializes input order management for a group of inputs.
Name Type Description
base_name string Base name for the group.
base_id string Base id for the input.
editable boolean Whether the input is editable.
callback function Callback on order change.

staticH_ui.init_range_tracks()

ui.js, line 955
Initializes styled input range tracks.
Updates CSS variables for custom range inputs.

staticH_ui.input_copy_to_clipboard(id, popup, html)

ui.js, line 890
Copies the value of an input to the clipboard.
Optionally shows a popup and supports HTML content.
Name Type Default Description
id string Input element id.
popup boolean | string true optional Show popup or custom message.
html boolean false optional Copy as HTML.

staticH_ui.message_popup(message, ok_handler){H_ui_prompt}

ui.js, line 503
Displays a message popup with an OK button.
Name Type Description
message string | Array Message to display.
ok_handler function Handler for OK button.
Returns:
Type Description
H_ui_prompt The prompt instance.

staticH_ui.message_popup_timed(message, ok_handler, time)

ui.js, line 530
Displays a timed message popup.
Name Type Default Description
message string | Array Message to display.
ok_handler function Handler for OK button.
time number 3000 optional Time in ms before auto-close.

staticH_ui.new_tab(url)

ui.js, line 361
Opens a new browser tab.
Name Type Description
url string URL to open.

staticH_ui.open_popup_modal(evt, module_name, params, special, special_level)

ui.js, line 389
Opens a popup modal for a public module.
Supports special modals (saved as special instances), with level of display priority (z-index).
Name Type Default Description
evt Event The triggering event.
module_name string Module name.
params Object Parameters for the module.
special boolean | number false optional Special modal index.
special_level number 1 optional Special modal level.

staticH_ui.popup(lapage, titre, w, h, scroll)

ui.js, line 327
Opens a popup window.
Name Type Description
lapage string URL to open.
titre string Window title.
w number Width.
h number Height.
scroll boolean | number Enable scrollbars.

staticH_ui.scroll_to(dom_id, offset)

ui.js, line 278
Scrolls to a DOM element with an optional offset.
Name Type Default Description
dom_id string Target element id.
offset number 0 optional Offset in pixels.

staticH_ui.scroll_toggle_class(elem_id, nbr_px, class_name)

ui.js, line 259
Adds or removes a CSS class on scroll.
Toggles the class when scrolling past a threshold.
Name Type Description
elem_id string Target element id.
nbr_px number Scroll threshold in pixels.
class_name string CSS class to toggle.

staticH_ui.show_big_image(evt, new_url)

ui.js, line 210
Displays a big image overlay.
Creates and shows a modal for the image.
Name Type Default Description
evt Event The triggering event.
new_url string | boolean false optional Optional new image URL.

staticH_ui.toggle_accordion(target, css_class, custom_func, indicator)

ui.js, line 142
Initializes an accordion UI component.
Adds toggling and indicator logic to elements with the given class.
The target must have "data-target_id" that points to the element to toggle
Name Type Default Description
target string CSS class of toggler elements.
css_class string CSS class to toggle.
custom_func function | boolean false optional Custom function on open.
indicator string | boolean false optional Id of the collapse indicator

staticH_ui.tooltip(evt, id)

ui.js, line 586
Displays a tooltip for a DOM element.
Positions and shows the tooltip content.
Name Type Description
evt Event The triggering event.
id string Tooltip content element id.

staticH_ui.update_css_fhd_vr()

ui.js, line 867
Updates CSS variable for FHD vertical ratio.
Called on window resize.