iaspect-modal

Installation:

npm install @sycoraxya/iaspect-modal

or

yarn add @sycoraxya/iaspect-modal

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 Modal from "@sycoraxya/iaspect-modal";

Or add the folder to your webpack.config:

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

// And add the following line to your scripts
import Modal from "iaspect-modal";

API:

// 2 ways of instantiating a modal

// 1) by passing an element
const modalWrapper = document.querySelector('.modal-wrapper');

new Modal(modalWrapper);

// 2) by passing a selector
new Modal('.modal-wrapper');

// Both methods support passing an optional prefix. This determines the prefix of all modal classes.
new Modal('.modal-wrapper', 'add-to-cart'); // This will change selectors like modal__content to add-to-cart__content

The standard way of creating a new Modal is having the HTML already present on the page. The other way is extending the base Modal class and doing whatever you want with it. See 'Extending the modal' for an example

The HTML should look like this:

<div class="modal-wrapper">
    <div class="modal js-modal">
        <div class="modal__header">
            <h3 class="modal__title text-transform--none">
                <!-- Header text goes here -->
            </h3>
            <i class="fa fa-fw fa-times modal__close js-close-modal"></i>
        </div>
        <div class="modal__content">
            <!-- Content goes here -->
        </div>
        <div class="modal__footer">
            <!-- Buttons go here -->
        </div>
    </div>
</div>

And then you can just use 1 of the 2 ways of instantiating a modal as shown above.

open() // Opens the modal

close() // Closes the modal

reset() // Resets the modal's content to the initial state

/**
Adds a button to the footer. Should only be used when extending the modal

text {String} - The button's text
classes {Array<string>} - The classes to add to the button. A button always gets the classes 'button' & 'd--inline-block'
callback: {Function} - What to do when the button is clicked
*/
createFooterButton(text, classes, callback)

setContent(string) // Sets the content modal's main content (.modal__content)

Extending the modal

See the following example

/* whitelabel/product/AddToCartModal.js */

import Modal from "@sycoraxya/iaspect-modal";

/**
 * @class
 * @name AddToCartModal
 */
class AddToCartModal extends Modal{
    constructor ({selector, product}: {selector?: string | Element, product: Product} = {}) {
        super(selector);

        this.product = product;

        this.createFooterButton(
            'Naar winkelwagen', 
            ['button--primary'], 
            () => window.location.href = 'https://www.i-aspect.com'
        );
        this.createFooterButton(
            'Verder winkelen', 
            ['button--gray'], 
            () => this.close()
        );

        this.defineContent();
    }

    defineContent (): void {
        this.setContent(`
            <div class="modal__product modal-product">
                <img class="modal-product__image" src="${this.product.image.url}" />
                <div class="modal-product__data">
                    <div class="modal-product__name">${this.product.name}</div>
                    <div class="modal-product__model">${this.product.model}</div>
                    <div class="modal-product__price">${this.product.price}</div>
                </div>
            </div>
        `);
    }
}

TODOS:

• [ ] Add styles (like iaspect-popup)