Manages the opening and closing of embedded contexts, i.e. 'buildermenu' and 'overlay.' Additionally, the script ensures all contexts except for the active one use position: absolute to hide them from the document flow, which ensures the active context is setting the document height and not any of the contexts in the background.
| Hook | Element | Function |
|---|---|---|
data-triggermenu |
Hamburger icon button in module 'builderbar' | Opens 'buildermenu' inside main context |
data-triggerembeddedmenu |
Hamburger icon button in module 'builderbar' that is inside the embedded context | Opens 'buildermenu' inside embedded context |
data-buildermenuoverlay |
Scrim for the 'buildermenu'; should be paired with '.overlay .overlay-nav' | Displays the scrim and 'buildermenu' when '.overlay-is-active' is added |
data-embeddedbuildermenuoverlay |
Scrim for the 'buildermenu' inside the embedded context; should be paired with '.overlay .overlay-nav' and nested inside of '.l-embeddedcontext-x-nofocus' of '.l-embeddedcontext' that is nested inside of '.l-embeddedcontext-x-nofocus' | Displays the scrim and 'buildermenu' inside the embedded context when '.overlay-is-active' is added |
data-maincontext |
Container for the content displayed in the main default context that is not embedded; should be nested inside of '.l-embeddedcontext-x-focus' of '.l-embeddedcontext' | Provides a hook to make the main context inert and take it out of the document flow so that it doesn't affect the height when it is not the context in focus |
data-embeddedmaincontext |
Container for the content displayed in the embedded context; should be paired with '.l-embeddedcontext-x-focus' and nested inside of '.l-embeddedcontext' | Provides a hook to make the embedded not inert and place it in the document flow so that its height dictactes the document height |
data-contextcontroller |
Container that wraps all contexts—the parent element of all the context elements; should be paired with '.l-embeddedcontext' | Provides a hook to toggle states of '.l-embeddedcontext' that display or hide the contexts within |
data-buildercontextcontroller |
Container that wraps the contents of the 'builder' context; should be paired with '.l-embeddedcontext' and nested inside '.l-embeddedcontext-x-focus' of the 'contextcontroller' element | Provides a hook to toggle states of '.l-embeddedcontext' that is embedded in '.l-embeddedcontext-x-focus' that display or hide the contexts within |
data-embeddedcontextcontroller |
Container that wraps the contents of the embedded context; should be paired with '.l-embeddedcontext' and nested inside '.l-embeddedcontext-x-nofocus' of the 'contextcontroller' element | Provides a hook to toggle states of '.l-embeddedcontext' that is embedded in '.l-embeddedcontext-x-nofocus' that display or hide the contexts within |
data-triggerclosemenu |
Button in module 'buildermenu' | Closes 'buildermenu' inside main context |
data-triggercloseembeddedmenu |
Button in module 'buildermenu' that is nested inside of the embedded context | Closes 'buildermenu' inside embedded context |
data-triggerembeddedcontext |
Button in main context | Opens embedded context |
.overlay-embeddedcontext |
Scrim and UI for the embedded context; should paired with '.l-embeddedcontext-x-nofocus' and nested inside '.l-embeddedcontext' | Displays the scrim and UI for the embedded context when '.overlay-is-active' is added |
data-triggerembeddedcontextclose |
Button inside '.overlay-embeddedcontext' | Closes embedded context |
Controls graphical transition animations of the 'stepgraphic' that is featured in the both the 'buildermenu' inside the main context and the 'buildermenu' inside the embedded context.
| Hook | Element | Function |
|---|---|---|
nav.buildermenu li.menuitem a |
Anchor links inside main context 'buildermenu' | On 'mouseenter' event, listener fires that highlights appropriate group of SVG elements in 'buildermenu' 'stepgraphic' |
.l-embeddedcontext-x-nofocus |
Container that wraps contents of embedded context | Disambiguates selection of the anchor links in embedded 'buildermenu' from selection of the anchor links 'buildermenu' that is in the main context |
nav.buildermenu li.menuitem a (inside embedded context) |
Anchor links inside embedded context 'buildermenu' | On 'mouseenter' event, listener fires that highlights appropriate group of SVG elements in embedded 'buildermenu' 'stepgraphic' |
menugraphic_step1 |
Group of SVG elements inside 'buildermenu' 'stepgraphic' that represent step 1 | Changes colors when class '.step-is-active' is added |
menugraphic_step2 |
Group of SVG elements inside 'buildermenu' 'stepgraphic' that represent step 2 | Changes colors when class '.step-is-active' is added |
menugraphic_step3 |
Group of SVG elements inside 'buildermenu' 'stepgraphic' that represent step 3 | Changes colors when class '.step-is-active' is added |
menugraphic_step4 |
Group of SVG elements inside 'buildermenu' 'stepgraphic' that represent step 4 | Changes colors when class '.step-is-active' is added |
menugraphic_step5 |
Group of SVG elements inside 'buildermenu' 'stepgraphic' that represent step 5 | Changes colors when class '.step-is-active' is added |
menugraphic_step6 |
Group of SVG elements inside 'buildermenu' 'stepgraphic' that represent step 6 | Changes colors when class '.step-is-active' is added |
embedded_menugraphic_step1 |
Group of SVG elements inside embedded 'buildermenu' 'stepgraphic' that represent step 1 | Changes colors when class '.step-is-active' is added |
embedded_menugraphic_step2 |
Group of SVG elements inside embedded 'buildermenu' 'stepgraphic' that represent step 2 | Changes colors when class '.step-is-active' is added |
embedded_menugraphic_step3 |
Group of SVG elements inside embedded 'buildermenu' 'stepgraphic' that represent step 3 | Changes colors when class '.step-is-active' is added |
embedded_menugraphic_step4 |
Group of SVG elements inside embedded 'buildermenu' 'stepgraphic' that represent step 4 | Changes colors when class '.step-is-active' is added |
embedded_menugraphic_step5 |
Group of SVG elements inside embedded 'buildermenu' 'stepgraphic' that represent step 5 | Changes colors when class '.step-is-active' is added |
embedded_menugraphic_step6 |
Group of SVG elements inside embedded 'buildermenu' 'stepgraphic' that represent step 6 | Changes colors when class '.step-is-active' is added |
Enables functionality of the visual and text-based character count and limit indicator for inputs that accept text content.
| Hook | Element | Function |
|---|---|---|
data-limitinput |
Input of which we wish to monitor the length of text content | Provide a hook for the script to easily load this element for monitoring |
.ql-editor |
Input of which we wish to monitor the length of text content | Provide a hook in the case we're using the WYSIWYG editor |
data-completeindicator |
Visual indicator of progress inside module 'progress' | Provide a hook for the script to easily load this element for width adjustments |
data-countandlimit |
Text that represents the number of characters input and the limit | Provide a hook for the script to easily load this element for reading and updating |
data-limitindicator |
Visual indicator of input limit set behind the complete indicator | Provide a hook for the script to easily load this element for calculation of complete indicator width by comparison |
.progress |
Module that displays visual indicator of progress | Provide a hook for the script to easily swap classes to change module states |
Instantiates and customizes Quill WYSIWYG editor
| Hook | Element | Function |
|---|---|---|
.formwysiwyg |
Element to be replaced by Quill DOM structure | Is replaced by Quill DOM structure upon instantiation using new Quill() |
Handles dialog elements, non-dialog containers, inert containers, and open/close triggers.
| Data Attribute | Element | Function |
|---|---|---|
data-dialog="container" |
Parent element of the dialog | Receives an active class when the dialog is open preventing scroll on the document |
data-dialog="inertcontainer" |
Non-dialog content | Sets non-dialog content to inert preventing focus |
data-dialog="open" |
Button that opens the dialog | Binds a click event that searches for the associated dialog (via the data-dialog-target attribute) and opens it settings containers to active |
data-dialog="close" |
Button that closes the dialog | Binds a click event that searches for the associated dialog (via the data-dialog-target attribute) and close it settings containers to their default states. If the user had clicked a data-dialog="open" element their focus returns to it. |
data-dialog-target="[id]" |
Elements that have data-dialog="open" or data-dialog="close" attributes |
Determines which dialog to open or close by ID |
quill is our chosen WYSIWYG editor
inert-polyfill allows for use the inert attribute
svgxuse allows for use of external svg files on the use element