Finish FileSource_modal_dialog_with_source_selection

packages/file-handling/src/file-source.js

@@ -7,7 +7,7 @@ import {Icon, MiniSpinner} from 'vpu-common';
 import * as commonStyles from 'vpu-common/styles';
 import {NextcloudFilePicker} from "./vpu-nextcloud-file-picker";
 import {classMap} from 'lit-html/directives/class-map.js';
-
+import MicroModal from './micromodal.es'
 
 function mimeTypesToAccept(mimeTypes) {
     // Some operating systems can't handle mime types and
@@ -43,6 +43,8 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
         this.disabled = false;
         this.decompressZip = false;
         this._queueKey = 0;
+        this.activeSource = 'local';
+        this.isDialogOpen = false;
     }
 
     static get scopedElements() {
@@ -66,6 +68,8 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             buttonLabel: { type: String, attribute: 'button-label' },
             disabled: { type: Boolean },
             decompressZip: { type: Boolean, attribute: 'decompress-zip' },
+            activeSource: { type: Boolean, attribute: false },
+            isDialogOpen: { type: Boolean, attribute: 'dialog-open' },
         };
     }
 
@@ -75,6 +79,14 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             switch (propName) {
                 case "lang":
                     i18n.changeLanguage(this.lang);
+                    break;
+                case "isDialogOpen":
+                    if (this.isDialogOpen) {
+                        this.openDialog();
+                    } else {
+                        this.removeAttribute("dialog-open");
+                    }
+
                     break;
             }
         });
@@ -278,6 +290,14 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
         this.dispatchEvent(event);
     }
 
+    openDialog() {
+        console.log("openDialog");
+        console.log(this._('#modal-picker'));
+        MicroModal.show(this._('#modal-picker'), {
+            onClose: modal => { this.isDialogOpen = false; }
+        });
+    }
+
     static get styles() {
         // language=css
         return css`
@@ -287,9 +307,19 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             #dropArea {
                 border: var(--FUBorderWidth, 2px) var(--FUBorderStyle, dashed) var(--FUBBorderColor, black);
                 border-radius: var(--FUBorderRadius, 0);
-                width: var(--FUWidth, auto);
+                width: auto;
                 margin: var(--FUMargin, 0px);
                 padding: var(--FUPadding, 20px);
+                /*flex-grow: 1;*/
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
+            #nextcloud-file-picker {
+                /*width: 100%;*/
             }
 
             #dropArea.highlight {
@@ -316,6 +346,145 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
             .block {
                 margin-bottom: 10px;
             }
+
+            /**************************\\
+              Modal Styles
+            \\**************************/
+
+            .modal-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0,0,0,0.6);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 10000;
+            }
+            
+            .modal-container {
+                background-color: #fff;
+                max-width: 600px;
+                max-height: 100vh;
+                min-width: 60%;
+                min-height: 50%;
+                overflow-y: auto;
+                box-sizing: border-box;
+                display: grid;
+                grid-template-columns: 50px auto;
+                grid-template-rows: auto;
+                grid-template-areas: "sidebar main";
+            }
+            
+            .modal-nav {
+                cursor: pointer;
+                overflow: hidden;
+                background-color: #eee;
+            }
+            
+            .modal-nav > div {
+                padding: 5px;
+                text-align: center;
+            }
+
+            .modal-nav .nav-icon {
+                width: 35px;
+                height: 35px;
+            }
+            
+            .modal-nav .active {
+                background-color: #777;
+                color: white;
+            }
+
+            .modal-close {
+                position: absolute;
+                background: transparent;
+                border: none;
+                float: right;
+                top: 10px;
+                right: 10px;
+            }
+            
+            .modal-close:hover {
+                font-weight: bold;
+            }
+            
+            button.modal-close:focus {
+                outline: none;
+            }
+            
+            .modal-close:before { content: "\\2715"; }
+            
+            .modal-content {
+                padding: 10px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                /*height: 50vh;*/
+            }
+
+            .modal-content .source-main {
+                /*flex-grow: 1;*/
+                /*justify-content: center;*/
+                /*align-items: center;*/
+                height: 100%;
+                width: 100%;
+            }
+
+            /**************************\\
+              Modal Animation Style
+            \\**************************/
+            @keyframes mmfadeIn {
+                from { opacity: 0; }
+                  to { opacity: 1; }
+            }
+            
+            @keyframes mmfadeOut {
+                from { opacity: 1; }
+                  to { opacity: 0; }
+            }
+            
+            @keyframes mmslideIn {
+              from { transform: translateY(15%); }
+                to { transform: translateY(0); }
+            }
+            
+            @keyframes mmslideOut {
+                from { transform: translateY(0); }
+                to { transform: translateY(-10%); }
+            }
+            
+            .micromodal-slide {
+                display: none;
+            }
+            
+            .micromodal-slide.is-open {
+                display: block;
+            }
+            
+            .micromodal-slide[aria-hidden="false"] .modal-overlay {
+                animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+            }
+            
+            .micromodal-slide[aria-hidden="false"] .modal-container {
+                animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
+            }
+            
+            .micromodal-slide[aria-hidden="true"] .modal-overlay {
+              animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+            }
+            
+            .micromodal-slide[aria-hidden="true"] .modal-container {
+                animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
+            }
+            
+            .micromodal-slide .modal-container,
+            .micromodal-slide .modal-overlay {
+                will-change: transform;
+            }
         `;
     }
 
@@ -327,32 +496,61 @@ export class FileSource extends ScopedElementsMixin(VPULitElement) {
         }
 
         return html`
-            <div id="dropArea">
-                <div>
-                    <div class="block">
-                        ${this.text || i18n.t('intro')}
+<!--
+            <button class="button"
+                ?disabled="${this.disabled}"
+                @click="${() => { this.openDialog(); }}">${i18n.t('file-source.open-menu')}</button>
+-->
+            <div class="modal micromodal-slide" id="modal-picker" aria-hidden="true">
+                <div class="modal-overlay" tabindex="-1" data-micromodal-close>
+                    <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-picker-title">
+                        <nav class="modal-nav">
+                            <div title="${i18n.t('file-source.nav-local')}"
+                                 @click="${() => { this.activeSource = "local"; }}"
+                                 class="${classMap({"active": this.activeSource === "local"})}">
+                                <vpu-icon class="nav-icon" name="laptop"></vpu-icon>
+                            </div>
+                            <div title="Nextcloud"
+                                 @click="${() => { this.activeSource = "nextcloud"; }}"
+                                 class="${classMap({"active": this.activeSource === "nextcloud", hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}">
+                                <vpu-icon class="nav-icon" name="cloud"></vpu-icon>
+                            </div>
+                        </nav>
+                        <main class="modal-content" id="modal-picker-content">
+                            <button title="${i18n.t('file-source.modal-close')}" class="modal-close" aria-label="Close modal" data-micromodal-close></button>
+                            <div class="source-main ${classMap({"hidden": this.activeSource !== "local"})}">
+                                <div id="dropArea">
+                                    <div class="block">
+                                        ${this.text || i18n.t('intro')}
+                                    </div>
+                                    <input ?disabled="${this.disabled}"
+                                           type="file"
+                                           id="fileElem"
+                                           multiple
+                                           accept="${mimeTypesToAccept(allowedMimeTypes)}"
+                                           name='file'>
+                                    <label class="button is-primary" for="fileElem" ?disabled="${this.disabled}">
+                                        ${this.buttonLabel || i18n.t('upload-label')}
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="source-main ${classMap({"hidden": this.activeSource !== "nextcloud"})}">
+                                <vpu-nextcloud-file-picker id="nextcloud-file-picker"
+                                       class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
+                                       ?disabled="${this.disabled}"
+                                       lang="${this.lang}"
+                                       auth-url="${this.nextcloudAuthUrl}"
+                                       web-dav-url="${this.nextcloudWebDavUrl}"
+                                       allowed-mime-types="${this.allowedMimeTypes}"
+                                       @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
+                                    this.sendFileEvent(event.detail.file);
+                                }}"></vpu-nextcloud-file-picker>
+                            </div>
+                        </main>
                     </div>
-                    <input ?disabled="${this.disabled}"
-                           type="file"
-                           id="fileElem"
-                           multiple
-                           accept="${mimeTypesToAccept(allowedMimeTypes)}"
-                           name='file'>
-                    <label class="button is-primary" for="fileElem" ?disabled="${this.disabled}">
-                        ${this.buttonLabel || i18n.t('upload-label')}
-                    </label>
-                    <vpu-nextcloud-file-picker id="nextcloud-file-picker"
-                                               class="${classMap({hidden: this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}"
-                                               ?disabled="${this.disabled}"
-                                               lang="${this.lang}"
-                                               auth-url="${this.nextcloudAuthUrl}"
-                                               web-dav-url="${this.nextcloudWebDavUrl}"
-                                               allowed-mime-types="${this.allowedMimeTypes}"                                        
-                                               @vpu-nextcloud-file-picker-file-downloaded="${(event) => {
-                                                   this.sendFileEvent(event.detail.file);
-                                               }}"></vpu-nextcloud-file-picker>
                 </div>
             </div>
-        `;
+
+          `;
     }
 }
\ No newline at end of file

packages/file-handling/src/i18n/de/translation.json

@@ -10,6 +10,11 @@
   "intro": "Laden Sie mehrere Dateien mit dem Auswahldialog oder durch Ziehen und Fallenlassen in diesem Bereich hoch",
   "upload-label": "Dateiauswahl",
   "upload-disabled-title": "Die Dateiauswahl ist während dem Hochladvorgang gesperrt!",
+  "file-source": {
+    "modal-select-files": "Dateien auswählen",
+    "modal-close": "Dialog schließen",
+    "nav-local": "Lokaler Computer"
+  },
   "nextcloud-file-picker": {
     "open": "Nextcloud",
     "open-nextcloud-file-picker": "Dateien von Ihrer Nextcloud auswählen",

packages/file-handling/src/i18n/en/translation.json

@@ -10,6 +10,11 @@
   "intro": "Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region",
   "upload-label": "Select some files",
   "upload-disabled-title": "The file selection is disabled while uploading!",
+  "file-source": {
+    "modal-select-files": "Select files",
+    "modal-close": "Close dialog",
+    "nav-local": "My device"
+  },
   "nextcloud-file-picker": {
     "open": "Nextcloud",
     "open-nextcloud-file-picker": "Select files from your Nextcloud",

packages/file-handling/src/micromodal.es.js

+// see https://github.com/ghosh/Micromodal/pull/351
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var MicroModal = function () {
+
+  var FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
+
+  var Modal = /*#__PURE__*/function () {
+    function Modal(_ref) {
+      var targetModal = _ref.targetModal,
+          _ref$triggers = _ref.triggers,
+          triggers = _ref$triggers === void 0 ? [] : _ref$triggers,
+          _ref$onShow = _ref.onShow,
+          onShow = _ref$onShow === void 0 ? function () {} : _ref$onShow,
+          _ref$onClose = _ref.onClose,
+          onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+          _ref$openTrigger = _ref.openTrigger,
+          openTrigger = _ref$openTrigger === void 0 ? 'data-micromodal-trigger' : _ref$openTrigger,
+          _ref$closeTrigger = _ref.closeTrigger,
+          closeTrigger = _ref$closeTrigger === void 0 ? 'data-micromodal-close' : _ref$closeTrigger,
+          _ref$openClass = _ref.openClass,
+          openClass = _ref$openClass === void 0 ? 'is-open' : _ref$openClass,
+          _ref$disableScroll = _ref.disableScroll,
+          disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll,
+          _ref$disableFocus = _ref.disableFocus,
+          disableFocus = _ref$disableFocus === void 0 ? false : _ref$disableFocus,
+          _ref$awaitCloseAnimat = _ref.awaitCloseAnimation,
+          awaitCloseAnimation = _ref$awaitCloseAnimat === void 0 ? false : _ref$awaitCloseAnimat,
+          _ref$awaitOpenAnimati = _ref.awaitOpenAnimation,
+          awaitOpenAnimation = _ref$awaitOpenAnimati === void 0 ? false : _ref$awaitOpenAnimati,
+          _ref$debugMode = _ref.debugMode,
+          debugMode = _ref$debugMode === void 0 ? false : _ref$debugMode;
+
+      _classCallCheck(this, Modal);
+
+      // Save a reference of the modal
+      this.modal = this.modal = typeof targetModal === "string" ? document.getElementById(targetModal) : targetModal; // Save a reference to the passed config
+
+      this.config = {
+        debugMode: debugMode,
+        disableScroll: disableScroll,
+        openTrigger: openTrigger,
+        closeTrigger: closeTrigger,
+        openClass: openClass,
+        onShow: onShow,
+        onClose: onClose,
+        awaitCloseAnimation: awaitCloseAnimation,
+        awaitOpenAnimation: awaitOpenAnimation,
+        disableFocus: disableFocus
+      }; // Register click events only if pre binding eventListeners
+
+      if (triggers.length > 0) this.registerTriggers.apply(this, _toConsumableArray(triggers)); // pre bind functions for event listeners
+
+      this.onClick = this.onClick.bind(this);
+      this.onKeydown = this.onKeydown.bind(this);
+    }
+    /**
+     * Loops through all openTriggers and binds click event
+     * @param  {array} triggers [Array of node elements]
+     * @return {void}
+     */
+
+
+    _createClass(Modal, [{
+      key: "registerTriggers",
+      value: function registerTriggers() {
+        var _this = this;
+
+        for (var _len = arguments.length, triggers = new Array(_len), _key = 0; _key < _len; _key++) {
+          triggers[_key] = arguments[_key];
+        }
+
+        triggers.filter(Boolean).forEach(function (trigger) {
+          trigger.addEventListener('click', function (event) {
+            return _this.showModal(event);
+          });
+        });
+      }
+    }, {
+      key: "showModal",
+      value: function showModal() {
+        var _this2 = this;
+
+        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        this.activeElement = document.activeElement;
+        this.modal.setAttribute('aria-hidden', 'false');
+        this.modal.classList.add(this.config.openClass);
+        this.scrollBehaviour('disable');
+        this.addEventListeners();
+
+        if (this.config.awaitOpenAnimation) {
+          var handler = function handler() {
+            _this2.modal.removeEventListener('animationend', handler, false);
+
+            _this2.setFocusToFirstNode();
+          };
+
+          this.modal.addEventListener('animationend', handler, false);
+        } else {
+          this.setFocusToFirstNode();
+        }
+
+        this.config.onShow(this.modal, this.activeElement, event);
+      }
+    }, {
+      key: "closeModal",
+      value: function closeModal() {
+        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+        var modal = this.modal;
+        this.modal.setAttribute('aria-hidden', 'true');
+        this.removeEventListeners();
+        this.scrollBehaviour('enable');
+
+        if (this.activeElement && this.activeElement.focus) {
+          this.activeElement.focus();
+        }
+
+        this.config.onClose(this.modal, this.activeElement, event);
+
+        if (this.config.awaitCloseAnimation) {
+          var openClass = this.config.openClass; // <- old school ftw
+
+          this.modal.addEventListener('animationend', function handler() {
+            modal.classList.remove(openClass);
+            modal.removeEventListener('animationend', handler, false);
+          }, false);
+        } else {
+          modal.classList.remove(this.config.openClass);
+        }
+      }
+    }, {
+      key: "closeModalById",
+      value: function closeModalById(targetModal) {
+        this.modal = document.getElementById(targetModal);
+        if (this.modal) this.closeModal();
+      }
+    }, {
+      key: "scrollBehaviour",
+      value: function scrollBehaviour(toggle) {
+        if (!this.config.disableScroll) return;
+        var body = document.querySelector('body');
+
+        switch (toggle) {
+          case 'enable':
+            Object.assign(body.style, {
+              overflow: ''
+            });
+            break;
+
+          case 'disable':
+            Object.assign(body.style, {
+              overflow: 'hidden'
+            });
+            break;
+        }
+      }
+    }, {
+      key: "addEventListeners",
+      value: function addEventListeners() {
+        this.modal.addEventListener('touchstart', this.onClick);
+        this.modal.addEventListener('click', this.onClick);
+        document.addEventListener('keydown', this.onKeydown);
+      }
+    }, {
+      key: "removeEventListeners",
+      value: function removeEventListeners() {
+        this.modal.removeEventListener('touchstart', this.onClick);
+        this.modal.removeEventListener('click', this.onClick);
+        document.removeEventListener('keydown', this.onKeydown);
+      }
+    }, {
+      key: "onClick",
+      value: function onClick(event) {
+        if (event.target.hasAttribute(this.config.closeTrigger)) {
+          this.closeModal(event);
+        }
+      }
+    }, {
+      key: "onKeydown",
+      value: function onKeydown(event) {
+        if (event.keyCode === 27) this.closeModal(event); // esc
+
+        if (event.keyCode === 9) this.retainFocus(event); // tab
+      }
+    }, {
+      key: "getFocusableNodes",
+      value: function getFocusableNodes() {
+        var nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS);
+        return Array.apply(void 0, _toConsumableArray(nodes));
+      }
+      /**
+       * Tries to set focus on a node which is not a close trigger
+       * if no other nodes exist then focuses on first close trigger
+       */
+
+    }, {
+      key: "setFocusToFirstNode",
+      value: function setFocusToFirstNode() {
+        var _this3 = this;
+
+        if (this.config.disableFocus) return;
+        var focusableNodes = this.getFocusableNodes(); // no focusable nodes
+
+        if (focusableNodes.length === 0) return; // remove nodes on whose click, the modal closes
+        // could not think of a better name :(
+
+        var nodesWhichAreNotCloseTargets = focusableNodes.filter(function (node) {
+          return !node.hasAttribute(_this3.config.closeTrigger);
+        });
+        if (nodesWhichAreNotCloseTargets.length > 0) nodesWhichAreNotCloseTargets[0].focus();
+        if (nodesWhichAreNotCloseTargets.length === 0) focusableNodes[0].focus();
+      }
+    }, {
+      key: "retainFocus",
+      value: function retainFocus(event) {
+        var focusableNodes = this.getFocusableNodes(); // no focusable nodes
+
+        if (focusableNodes.length === 0) return;
+        /**
+         * Filters nodes which are hidden to prevent
+         * focus leak outside modal
+         */
+
+        focusableNodes = focusableNodes.filter(function (node) {
+          return node.offsetParent !== null;
+        }); // if disableFocus is true
+
+        if (!this.modal.contains(document.activeElement)) {
+          focusableNodes[0].focus();
+        } else {
+          var focusedItemIndex = focusableNodes.indexOf(document.activeElement);
+
+          if (event.shiftKey && focusedItemIndex === 0) {
+            focusableNodes[focusableNodes.length - 1].focus();
+            event.preventDefault();
+          }
+
+          if (!event.shiftKey && focusableNodes.length > 0 && focusedItemIndex === focusableNodes.length - 1) {
+            focusableNodes[0].focus();
+            event.preventDefault();
+          }
+        }
+      }
+    }]);
+
+    return Modal;
+  }();
+  /**
+   * Modal prototype ends.
+   * Here on code is responsible for detecting and
+   * auto binding event handlers on modal triggers
+   */
+  // Keep a reference to the opened modal
+
+
+  var activeModal = null;
+  /**
+   * Generates an associative array of modals and it's
+   * respective triggers
+   * @param  {array} triggers     An array of all triggers
+   * @param  {string} triggerAttr The data-attribute which triggers the module
+   * @return {array}
+   */
+
+  var generateTriggerMap = function generateTriggerMap(triggers, triggerAttr) {
+    var triggerMap = [];
+    triggers.forEach(function (trigger) {
+      var targetModal = trigger.attributes[triggerAttr].value;
+      if (triggerMap[targetModal] === undefined) triggerMap[targetModal] = [];
+      triggerMap[targetModal].push(trigger);
+    });
+    return triggerMap;
+  };
+  /**
+   * Validates whether a modal of the given id exists
+   * in the DOM
+   * @param  {number} id  The id of the modal
+   * @return {boolean}
+   */
+
+
+  var validateModalPresence = function validateModalPresence(id) {
+    if (!document.getElementById(id)) {
+      console.warn("MicroModal: \u2757Seems like you have missed %c'".concat(id, "'"), 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'ID somewhere in your code. Refer example below to resolve it.');
+      console.warn("%cExample:", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', "<div class=\"modal\" id=\"".concat(id, "\"></div>"));
+      return false;
+    }
+  };
+  /**
+   * Validates if there are modal triggers present
+   * in the DOM
+   * @param  {array} triggers An array of data-triggers
+   * @return {boolean}
+   */
+
+
+  var validateTriggerPresence = function validateTriggerPresence(triggers) {
+    if (triggers.length <= 0) {
+      console.warn("MicroModal: \u2757Please specify at least one %c'micromodal-trigger'", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'data attribute.');
+      console.warn("%cExample:", 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', "<a href=\"#\" data-micromodal-trigger=\"my-modal\"></a>");
+      return false;
+    }
+  };
+  /**
+   * Checks if triggers and their corresponding modals
+   * are present in the DOM
+   * @param  {array} triggers   Array of DOM nodes which have data-triggers
+   * @param  {array} triggerMap Associative array of modals and their triggers
+   * @return {boolean}
+   */
+
+
+  var validateArgs = function validateArgs(triggers, triggerMap) {
+    validateTriggerPresence(triggers);
+    if (!triggerMap) return true;
+
+    for (var id in triggerMap) {
+      validateModalPresence(id);
+    }
+
+    return true;
+  };
+  /**
+   * Binds click handlers to all modal triggers
+   * @param  {object} config [description]
+   * @return void
+   */
+
+
+  var init = function init(config) {
+    // Create an config object with default openTrigger
+    var options = Object.assign({}, {
+      openTrigger: 'data-micromodal-trigger'
+    }, config); // Collects all the nodes with the trigger
+
+    var triggers = _toConsumableArray(document.querySelectorAll("[".concat(options.openTrigger, "]"))); // Makes a mappings of modals with their trigger nodes
+
+
+    var triggerMap = generateTriggerMap(triggers, options.openTrigger); // Checks if modals and triggers exist in dom
+
+    if (options.debugMode === true && validateArgs(triggers, triggerMap) === false) return; // For every target modal creates a new instance
+
+    for (var key in triggerMap) {
+      var value = triggerMap[key];
+      options.targetModal = key;
+      options.triggers = _toConsumableArray(value);
+      activeModal = new Modal(options); // eslint-disable-line no-new
+    }
+  };
+  /**
+   * Shows a particular modal
+   * @param  {string} targetModal [The id of the modal to display]
+   * @param  {object} config [The configuration object to pass]
+   * @return {void}
+   */
+
+
+  var show = function show(targetModal, config) {
+    var options = config || {};
+    options.targetModal = targetModal; // Checks if modals and triggers exist in dom
+
+    if (options.debugMode === true && validateModalPresence(targetModal) === false) return; // clear events in case previous modal wasn't close
+
+    if (activeModal) activeModal.removeEventListeners(); // stores reference to active modal
+
+    activeModal = new Modal(options); // eslint-disable-line no-new
+
+    activeModal.showModal();
+  };
+  /**
+   * Closes the active modal
+   * @param  {string} targetModal [The id of the modal to close]
+   * @return {void}
+   */
+
+
+  var close = function close(targetModal) {
+    targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal();
+  };
+
+  return {
+    init: init,
+    show: show,
+    close: close
+  };
+}();
+window.MicroModal = MicroModal;
+
+export default MicroModal;