@avvio-reply/popups v1.9.0

Popups

Standardised popup manager. Requires standard HTML Script tagged popup content.

Automatically templates popup source html in script block with id 'popups'. Provides helper method to open a popup by its declared name.

Can be instantiated at any time because page-load is awaited internally.

OPTIONS

__Object__:

    **onClosed**: {Function} Callback - Popups fires this event for any 'button' (<button>/<a>/<span> etc) with attribute [data-popup-close]

**Callbacks**:

**onClosed** has the signature:

    function({String} name)

**name**: the name of the popup as declared by the [data-popup] attribute of the source html.  This allows identification of the popup within the user implementation.

METHODS

**showPopup**({String} name, {Object} model)

**name**: the name of the popup as declared by the [data-popup] attribute of the source html
**model**: json model to apply to the popup source html, which may contain Handlebar fields.


showPopup applies the model to the popup template (based on source markup) and adds the result to the document at the location specified by the [data-location] attribute.

EXAMPLE USAGE:

var Popups = require('@avvio-reply/popups');

/**
* Begin popups - script template sources registered and compiled automatically - no specific intruction required from the user implementation.
*/
var popups = new Popups({

    /**
    * User clicked [data-popup-close] element
    */
    "onClosed":function(_nameOfPopup_){
        console.log('popup closed: '+ nameOfPopup);

        if (_someCondition_){

            /**
            * Show another popup with model..
            */
            popups.showPopup('complete', {
                "usercode":generateCode(10)
            });
        }
    }
});


/**
* Show a popup with a model (user defines both source template and model)
*/
popups.showPopup('picture-found', {
    "title":zone.title
    ,"description":zone.description
    ,"image":'content/images/pages/home/popups/' + zone.class + '.png'
});

###SCRIPT BLOCK TEMPLATES

The scripted template block must have an id value of 'popups'.

Multiple popups should be defined in the same block because other script blocks are ignored.


A popup is defined as a child element (of <script>) with attribute [data-popup]. Optional attributes are [data-location] and [data-modal].

**[data-popup]** REQUIRED Contains the name of the popup.  This must be a unique value because it is used to identify the popup within the block.
**[data-location]** OPTIONAL Selector for the element where the rendered popup html will be appended by Popups->showPopup. Default is 'body'.
**[data-modal]** OPTIONAL Currently sets a flag against the internal popup object but is not implemented at this time.


The example below defines two popups.  The first includes Handlebars fields, which are applied by showPopup when producing output html to add to the document.

<script type="text/template" id="popups">

		<div data-popup="picture-found" data-location=".picture__container" data-modal>
			<div class="picture__overlay picture__overlay--show">
				<div class="picture__overlay-content picture__overlay-content--show">
					<h2 class="picture__overlay-title">{{title}}</h2>
					<div class="picture__overlay-inner">
						<div class="picture__overlay-image-container">
							<img src="{{image}}" class="picture__overlay-image">
						</div>
						<div class="picture__overlay-text">
							<h3 class="picture__overlay-body-title">{{title}}</h3>
							<p class="picture__overlay-body">{{description}}</p>
							<span class="picture__overlay-close" data-popup-close></span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div data-popup="complete" data-location=".picture__container" data-modal>
			<div class="complete__overlay complete__overlay--show">
				<h3 class="complete__title">Congratulations</h3>
				<p class="complete__body"><strong>Thank you for taking part. You found all 9 Xs.</strong></p>
				<p class="complete__body">Your unique code is: <strong data-complete-code>{{usercode}}</strong></p>
				<p class="complete__body">To enter the competition, post your unique code onto the <a href="https://today.at.sky/article/corporate-news/blt80b1c32710306c46" target="_blank">today@sky</a> message board.</p>
				<p class="complete__body">The winner will be randomly selected and announced on today@sky.</p>
				<p class="complete__body"><strong>Good luck.</strong></p>
			</div>
		</div>
	</script>

###EXAMPLE HTML OUTPUT

Popups->showPopup   will render a div tag with an identifier (this is generated internally and is not required by the user). The identifier is used to reconnect the internal object with rendered markup.

Inside the div is the rendered popup source html with model, if any, applied.

<div data-popup="1ed32cdd-7f5f-40e2-871e-841801365cb7">
    <div class="picture__overlay picture__overlay--show">
        <div class="picture__overlay-content picture__overlay-content--show">
            <h2 class="picture__overlay-title">Smart Home</h2>
            <div class="picture__overlay-inner">
                <div class="picture__overlay-image-container">
                    <img src="content/images/pages/home/popups/6.png" class="picture__overlay-image">
                </div>
                <div class="picture__overlay-text">
                    <h3 class="picture__overlay-body-title">Smart Home</h3>
                    <p class="picture__overlay-body">You can see the most recent activity across your WiFi networks, how much time you’re really spending on content and briefly check on the status of your smart control technology.</p>
                    <span class="picture__overlay-close" data-popup-close=""></span>
                </div>
            </div>
        </div>
    </div>
</div>

###LOCAL DEV DEPENDENCY:

"@avvio-reply/popups": "file:///development/node/modules/popups"