SwiftOtter Popup Module
This module is quite powerful and very customizable. Some inspiration from: http://zurb.com/playground/reveal-modal-plugin
Three entry points:
-
modules/popup-click.js
: watches elements with the.js-popup-click
class for a click event -
modules/popup-hover.js
: watches elements with the.js-popup-hover
class for a hover event- The idea behind this entry-point is that the system waits for a specified amount of time to ensure that the mouse is still in the
-
modules/popup-manual.js
: listens toPubSub
forpopupbox:open
event (data parameter is used for options)
Options:
(specified in global PopupOptions
node or passed in via watch()
function):
-
addPopupAfter
: the element after which to add the popup area -
url
: url to load data from -
selector
: element to load data from -
visibleBodyClasses
: classes to apply to the</body>
tag when a popup box is visible -
hideLoading
: whether to hide the loading indicator -
loadingImageUrl
: the url of the loading indicator (if no url is present, no loading indicator will be shown) -
showBackground
: whether or not to show the background -
hover
: whether or not this was triggered by a mouse event -
background
: options for the background-
className
(defaultjs-modal-background
): class that is applied to the background</div>
element -
additionalClasses
(default['js-cover-screen']
): additional classes to apply to the background element -
bodyClassName
(defaultjs-background-visible
): class that is apply to the</body>
tag when the background is visible
-
Callbacks:
-
positionCallback
: the callback to position the popup box (left, top, width, height)- This is called twice: after the popup-box is visible and after the data has loaded (as they will likely be different sizes).
-
afterShowCallback
: the callback to run events after the popup box is done showing (but might not have content yet) -
completeCallback
: the callback that is run when the popup box is done loading
Classes:
-
.js-popup-visible
: applied to popup container when visible -
.js-popup-box
: the popup container -
.js-popup-loading
: the loading indicator -
.jsjs-popup-close-box
: the close popup link -
.js-modal-background
: (a default): applied to the background element. -
.js-cover-screen
: (a default): also applied to the background element. -
.js-background-visible
: (a default): applied to the</body>
element when background is visible. -
.js-popup-click
: applied to an element so that clicking it makes the popup box appear -
.js-popup-hover
: applied to an element so that hovering over it makes the popup box appear -
.js-popup-disable-background
: applied to a click or hover element to disable the loading of the background (only for click elements)
Notes:
- Two areas of events:
- Internal events: these originate from within a popup instance (such as
_uniqueID:_internal:close
). The easiest way to subscribe to these is by calling the popupinstance.addEventListener('close', callback);
- External events: make an action happen on the popup instance, like closing it (
_uniqueID:popup:close
).
- Internal events: these originate from within a popup instance (such as