Class: Popup

Responsiville. Popup

A popup utility which takes a piece of HTML and shows it in a new layer on top of the rest of the contents of a web page.
Creates and initialises the popup.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
activator string The selector of the element which acticates, that is opens, the popup.
element string The element that holds the popup contents. Usually stays hidden somewhere inside the page.
contents string The HTML with the popup contents, if the element property is not set.
layerEffect string The effect of the background layer opening.
layerDelay int The delay before the background layer opens and closes.
layerDuration int The duration of the background layer effect.
popupEffect string The effect of the popup contents opening.
popupDelay int The delay before the popup contents open and close.
popupDuration int The duration of the popup contents effect.
popupDuration string The duration of the popup contents effect.
resizeDelay int The delay before the popup resize action occurs.
resizeDuration int The duration of the popup resize action.
width int The desired width of the popup in px, vh, vw, %.
height int The desired height of the popup in px, vh, vw, %.
maxWidth int The desired max width of the popup in px, vh, vw, %.
maxHeight int The desired max height of the popup in px, vh, vw, %.
minWidth int The desired min width of the popup in px, vh, vw, %.
minHeight int The desired min height of the popup in px, vh, vw, %.
overflow boolean If set to false, the default, the popup respects the max width and height properties and allows for internal overflow scroll. If set to true then the popup can stretch its contents further from the max width and height and cause the page to overflow scroll instead. Useful when you know that you are going to have long contents.
closePosition string Whether the popup close button will be positioned in the popup or out of it.
startZIndex int The z-index from which the popup should beging its layout and be safely visible on top of everything else.
enter string Comma separated list of breakpoints in which the popup enters, wihch means it is enabled.
leave string Comma separated list of breakpoints in which the popup leaves, which means it is disabled.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Popup.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Popup.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Popup.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

staticResponsiville.Popup.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Popup.autoRun(){void}

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

staticResponsiville.Popup.autoRun(){void}

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

calculateContentsDimensions(){object}

Calculates the dimensions that the popup contents will need when they appear in order for the popup to proactively grow to them in advance. It takes under consideration both the contents themselves as well as limitations provided by the given popup options that relate to its dimensions.
Returns:
Type Description
object An asspociative array with the calculated width and height of the current popup contents.

closePopup(){void}

Closes the popup. First hides the popup contents container and then the popup contents wrapper.
Fires:
Returns:
Type Description
void

contentsClick(event){void}

Handles the click event on the popup contents in order to stop it from propagating behind the popup and towards the rest of the page.
Name Type Description
event Event The click event sent by the browser.
Returns:
Type Description
void

disable(){void}

Disables the popup. It does not deactivate it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the popup might be a required feature in desktops but useless in mobile devices.
Returns:
Type Description
void

documentKeyDown(event){void}

Handles keyboard events on the document level in order to close the popup when the escape key is pressed.
Name Type Description
event Event The keyboard event sent by the browser.
Returns:
Type Description
void
Enables the popup. It does not activate it. It simply enables it, so when the necessary trigger is fired then the popup opens/closes. Useful in responsive design where the popup might be a required feature in desktops but useless in mobile devices. By default a popup is always enabled.
Returns:
Type Description
void

hideContents(callback){void}

Hides the popup contents container.
Name Type Description
callback function A function to execute after the popup contents container has finshed hiding.
Returns:
Type Description
void

hideContentsWrapper(callback){void}

Hides the popup contents wrapper.
Name Type Description
callback function A function to execute after the popup contents wrapper has finshed hiding.
Returns:
Type Description
void
Inittialises the contents of the popup based on the given options.
Sets up the necessary helper HTML elements for the function of the popup.

openPopup(){void}

Opens the popup. First shows the popup contents wrapper and then the popup contents container.
Fires:
Returns:
Type Description
void

parseInt(number){int}

Wraps around the window.paresInt() function and returns zero (0) when the given argument is not a number (NaN).
Name Type Description
number Number The number to parse as an integer.
Returns:
Type Description
int
Re-arranges the popup, its layout position and dimensions to the screen as its options dictate. It is called every time the popup contents change or the window is resized or whenever the popup needs to update its view.
Fires:
Returns:
Type Description
void

setContents(contents){void}

Sets and updates the contents of the popup. Can be called either when the popup is open or when it is closed. If open then the popup will automatically resize itseld appropriately. if the contents contain images then the popup will watch them until they load and then resize itself again.
Name Type Description
contents mixed The new popup contents. Can be anything that makes sense, an HTML string, a DOM element or a set of jQuery elements.
Returns:
Type Description
void

setupEvents(){void}

Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

showContents(callback){void}

Shows the popup contents, that is the actual popup contents container.
Name Type Description
callback function A function to execute after the popup contents container has finshed showing.
Returns:
Type Description
void

showContentsWrapper(callback){void}

Shows the popup contents wrapper, the layer that contains the popup and makes it stick above the rest of the page contents.
Name Type Description
callback function A function to execute after the popup contents wrapper has finshed showing.
Returns:
Type Description
void

Events

Called before the popup starts opening.
Called after the popup has been closed.
Called before the popup starts closing.
Called after the popup has been created.
Called after the popup has been opened.
Called before the popup starts opening.
Called before the popup starts opening.

Responsiville. Popup

A popup utility which takes a piece of HTML and shows it in a new layer on top of the rest of the contents of a web page.
Creates and initialises the popup.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
debug boolean Whether to print debug messages in the browser console.
enter string Comma separated list of breakpoints in which the popup enters, wihch means it is enabled.
leave string Comma separated list of breakpoints in which the popup leaves, which means it is disabled.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Popup.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Popup.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Popup.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

staticResponsiville.Popup.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Popup.autoRun(){void}

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

staticResponsiville.Popup.autoRun(){void}

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

calculateContentsDimensions(){object}

Calculates the dimensions that the popup contents will need when they appear in order for the popup to proactively grow to them in advance. It takes under consideration both the contents themselves as well as limitations provided by the given popup options that relate to its dimensions.
Returns:
Type Description
object An asspociative array with the calculated width and height of the current popup contents.

closePopup(){void}

Closes the popup. First hides the popup contents container and then the popup contents wrapper.
Fires:
Returns:
Type Description
void

contentsClick(event){void}

Handles the click event on the popup contents in order to stop it from propagating behind the popup and towards the rest of the page.
Name Type Description
event Event The click event sent by the browser.
Returns:
Type Description
void

disable(){void}

Disables the popup. It does not deactivate it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the popup might be a required feature in desktops but useless in mobile devices.
Returns:
Type Description
void

documentKeyDown(event){void}

Handles keyboard events on the document level in order to close the popup when the escape key is pressed.
Name Type Description
event Event The keyboard event sent by the browser.
Returns:
Type Description
void
Enables the popup. It does not activate it. It simply enables it, so when the necessary trigger is fired then the popup opens/closes. Useful in responsive design where the popup might be a required feature in desktops but useless in mobile devices. By default a popup is always enabled.
Returns:
Type Description
void

hideContents(callback){void}

Hides the popup contents container.
Name Type Description
callback function A function to execute after the popup contents container has finshed hiding.
Returns:
Type Description
void

hideContentsWrapper(callback){void}

Hides the popup contents wrapper.
Name Type Description
callback function A function to execute after the popup contents wrapper has finshed hiding.
Returns:
Type Description
void
Inittialises the contents of the popup based on the given options.
Sets up the necessary helper HTML elements for the function of the popup.

openPopup(){void}

Opens the popup. First shows the popup contents wrapper and then the popup contents container.
Fires:
Returns:
Type Description
void

parseInt(number){int}

Wraps around the window.paresInt() function and returns zero (0) when the given argument is not a number (NaN).
Name Type Description
number Number The number to parse as an integer.
Returns:
Type Description
int
Re-arranges the popup, its layout position and dimensions to the screen as its options dictate. It is called every time the popup contents change or the window is resized or whenever the popup needs to update its view.
Fires:
Returns:
Type Description
void

setContents(contents){void}

Sets and updates the contents of the popup. Can be called either when the popup is open or when it is closed. If open then the popup will automatically resize itseld appropriately. if the contents contain images then the popup will watch them until they load and then resize itself again.
Name Type Description
contents mixed The new popup contents. Can be anything that makes sense, an HTML string, a DOM element or a set of jQuery elements.
Returns:
Type Description
void

setupEvents(){void}

Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

showContents(callback){void}

Shows the popup contents, that is the actual popup contents container.
Name Type Description
callback function A function to execute after the popup contents container has finshed showing.
Returns:
Type Description
void

showContentsWrapper(callback){void}

Shows the popup contents wrapper, the layer that contains the popup and makes it stick above the rest of the page contents.
Name Type Description
callback function A function to execute after the popup contents wrapper has finshed showing.
Returns:
Type Description
void

Events

Called before the popup starts opening.
Called after the popup has been closed.
Called before the popup starts closing.
Called after the popup has been created.
Called after the popup has been opened.
Called before the popup starts opening.
Called before the popup starts opening.