iaspect-popup

Installation:

npm install @sycoraxya/iaspect-popup

or

yarn add @sycoraxya/iaspect-popup

npm install @sycoraxya/[email protected]

or

yarn add @sycoraxya/[email protected]

See tags for version numbers

Usage:

Add the following line to your script

import Popup from "@sycoraxya/iaspect-popup";

// Or

import { CookiesPopup, Popup } from "@sycoraxya/iaspect-popup";

Or add the folder to your webpack.config:

resolve: {
  modulesDirectories: [
    'node_modules/@sycoraxya'
  ]
}

// And add the following line to your scripts
import Popup from "iaspect-popup";

To add the styles:

@import "~iaspect-popup/src/popup.scss";

API:

CookiesPopup

CookiesPopup extends the base Popup. All public methods are chainable.

const cookiesPopup = new CookiesPopup(
    'This site uses cookies to ...' // the popup's main content, can also be null
    {} // optional settings
)

Folded

The popup has 2 modes: folded and unfolded. The folded status can be passed as a setting (see 'Settings') and will determine how the popup is displayed.

Example:
folded = true
The popup will initially show a small popup with the set shortText (see setShortText() method) and a 'read more' button (see 'readMoreText' setting). After the user clicks on the read more link, the popup will unfold and show the set content (see setContent() method).

folded = false
The popup will just show the set content and ignore the shortText method & readMoreText setting.

Methods

After instantiation, the following methods can be used:

setContent(string) // Equivalent to providing the content in the popup's constructor

setShortText(string) // The text that's visible when the popup is folded

build() // Builds the popup element and appends it to the dom

unfold() // Unfolds the popup and shows its main content

open() // Shows the popup

close() // Hides the popup

addSettings(object) // Adds or overrides settings set earlier (seet 'Settings' below)

Settings

The following settings can be passed to the popup's constructor or the addSettings method:

{
    title: 'Cookies' // The title that shows at the top of the unfolded popup
    position: 'bottom-fw' // An extra class the wrapper gets: popup-wrapper--bottom-fw
    
    /* 
    If you want to instantiate the entire popup in a JS file and don't want it to fold, keep this set to true.
    Otherwise, set it to false. If this is set to false, build() must be called before you can call open(). 
    */
    autoBuild: true 

    /** Buttons:
    A popup has 2 buttons by default: an Accept button and a cancel button.
    A button has multiple settings:
    {
        show: boolean // Whether or not to show the button
        callback: popup => () // The button's default callback. The popup's instance is always passed to it.
        classes: string // The classes the button should have
        value: string // The button's value
    }
    */

    // Settings for the accept button
    acceptButton : {
        show: true,
        callback: popup => popup.close(),
        classes: 'button button--primary',
        value: 'Accepteer' 
    },

    // Settings for the cancel button
    cancelButton: {
        show : false
        callback : popup => popup.close(),
        classes  : 'button button--gray',
        value    : 'Annuleer'
    },
    folded: true, // Whether the popup should be folded or not, see the 'folded' example above for details
    readMoreText: 'Lees meer' // The text that's displayed in the 'read more' button
}

All these settings can be overridden in the constructor or with the addSettings() method.

Example

Simplified example of CookiesPopup as used in crossretail templates, together with the iaspect-cookies module:

/* common/cookiesPopup.js */

const cookiesPopup = new CookiesPopup(null, {
    autoBuild: false,
    acceptButton: {
        classes : 'button button--primary button--size-s d--inline-block',
        callback: popup => {
            Cookies.set({name: 'cookiesSetting', value: 'accepted', exDays: 200});
            popup.close();
        },
    }
})

<!-- footer_after.tpl -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        cookiesPopup
            .setContent('Content from language file')
            .setShortText('Short text from language file')
            .addSettings({
                acceptButton: {
                    value   : "Accept button value from language file"
                },
                readMoreText: 'Read more text from language file'
            })
            .build()
            .open();
    });
</script>

Styles

The following styles can be overridden:

$iaspect-popup-background: #333333 !default;
$iaspect-popup-text-color: #ffffff !default;
$iaspect-popup-max-width: 1200px !default;
$iaspect-popup-wrapper-display: block !default;