npm package: @sycoraxya/iaspect-modal
Description: i-aspect modal
Author: Stefan Verweij
Latest version: 1.1.4

# iaspect-modal

### Installation:
`npm install @sycoraxya/iaspect-modal`

or

`yarn add @sycoraxya/iaspect-modal`

<br>
**Specific version:**

`npm install @sycoraxya/iaspect-modal@v1.1.1`

or

`yarn add @sycoraxya/iaspect-modal@v1.1.1`

See tags for version numbers


### Usage:
Add the following line to your script
```javascript
import Modal from "@sycoraxya/iaspect-modal";
```

Or add the folder to your webpack.config:
```javascript
resolve: {
  modulesDirectories: [
    'node_modules/@sycoraxya'
  ]
}

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

### API: 

```javascript
// 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:

```html
<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.

```javascript
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

```javascript
/* 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)