FwFullscreenModal Class

Extends: LiquidTetherComponent
Module: Components
Defined In: addon\components\fw-fullscreen-modal.js:6

Component that handles rendering of modals. To use this you must define a component that extends the BaseModal component and call this component with the following basic usage:

<FwFullscreenModal @modal="modal-name" @size="md" @close={{action 'closeModal'}} @model={{model}} />

Alternatively, if it is a very simple modal, it is possible to pass in a yield block and circumvent creating a modal component file (with this use the model attribute and modal attribute do not work). That would be with the following usage:

<FwFullscreenModal @size="md" @close={{action 'closeModal'}}>
   {{!modal content here}}
</FwFullscreenModal>

Note: Once this component appears in the DOM it will be rendered and shown, so for most usage you should wrap it in an {{if}} helper and render it conditionally

{{#if shouldRenderModal}}
    <FwFullScreenModal @modal="modal-name" @size="md" ... />
{{/if}}

When shouldRenderModal is true, the modal will appear, otherwise it will stay hidden. So the action to "open" the modal should within it set the variable shouldRenderModal to true, and the action to "close" the modal should set shouldRenderModal to false.

Show:
didInsertElement () private

Defined in addon\components\fw-fullscreen-modal.js:132

After the component's element has been inserted into the DOM, it deals with various config settings that were passed in: scrollTop, scrollTopReturn, and hideBackgroundScroll.

init () private

Defined in addon\components\fw-fullscreen-modal.js:121

Initializes the component and loads the modal path.

willDestroyElement () private

Defined in addon\components\fw-fullscreen-modal.js:153

Once the component is being exited, it returns the scrollbar to the proper settings if scrollTopReturn is set.

close

Action

Defined in addon\components\fw-fullscreen-modal.js:41

Action called on close. This is passed to the modal component as closeModal, so it can be accessed there under that name.

closeOnClick

Boolean

Defined in addon\components\fw-fullscreen-modal.js:85

Whether or not the modal should be able to be closed by clicking on the background around it. Set this to be false if you do not want people to be able to click out of the modal without prompting them first.


Default: false

confirm

Action

Defined in addon\components\fw-fullscreen-modal.js:48

Action called on modal confirm.

hideBackgroundScroll

Boolean

Defined in addon\components\fw-fullscreen-modal.js:113

Hides the scrollbar for modals


Default: true

modal

String

Defined in addon\components\fw-fullscreen-modal.js:55

Modal component name. If there is not a file located in components/modals folder, it will throw an error. If using the block form of this component, this attribute is unnecessary.

modalPath

String protected

Defined in addon\components\fw-fullscreen-modal.js:67

Path to the currently rendered modal component. This is set automatically by the init function.


Default: 'unknown'

model

Dynamic

Defined in addon\components\fw-fullscreen-modal.js:61

This is a required element that passes data to the modal. This model property is accessible in the modal component as the variable "model". If multiple values are needed, it can be used with the hash helper to combine multiple values to the model. If using the block form with the yield, this parameter will not work.

scrollTop

Boolean

Defined in addon\components\fw-fullscreen-modal.js:95

Whether or not the browser will scroll to the top of the page when this modal opens.


Default: false

scrollTopReturn

Boolean

Defined in addon\components\fw-fullscreen-modal.js:104

If true the browser will scroll to the top of the screen while the modal is open and then return to where it was when the modal is closed again. scrollTop must be set to false for this to work properly.


Default: false

size

String

Defined in addon\components\fw-fullscreen-modal.js:77

Size of the modal. The size available are 'xs' (maxwidth is set to 300px), 'sm' (maxwidth is 600px), 'md' (maxwidth is 900px), 'lg' (maxwidth is 1200px), 'xl' (maxwidth is 1500px) and 'full' (maxwidth is 95vw). Default is used if not set or if option not allowed is used


Default: 'md'

sizeClass

String private

Defined in addon\components\fw-fullscreen-modal.js:170

Returns the proper class based on the size attribute that was passed in. Watches: size.