feat: added minimal library functionality

package.json

@@ -1,7 +1,7 @@
 {
   "name": "keukenhof",
   "version": "1.0.0",
-  "description": "GitHub template for starting new projects",
+  "description": "Lightweight modal library 🌷",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -15,9 +15,10 @@
   "author": "Alex Shualev <alexandrshy@gmail.com>",
   "license": "MIT",
   "keywords": [
-    "template",
     "javascript",
-    "package"
+    "modal",
+    "dialog",
+    "popup"
   ],
   "bugs": {
     "url": "https://github.com/Alexandrshy/keukenhof/issues"
@@ -72,4 +73,4 @@
     "semantic-release": "^17.0.7",
     "typescript": "^3.9.3"
   }
-}
+}

src/consts.ts

@@ -0,0 +1,4 @@
+export const ATTRIBUTES = {
+    OPEN: 'data-keukenhof-open',
+    CLOSE: 'data-keukenhof-close',
+};

src/index.ts

@@ -1,5 +1,133 @@
-export const log = (a: string): string => {
-    console.log('a:', a);
+import {ConfigType, ModalType, KeukenhofType} from './types';
+import {ATTRIBUTES} from './consts';
 
-    return a;
-};
+export const Keukenhof = ((): KeukenhofType => {
+    /**
+     * Modal window
+     */
+    class Modal {
+        $modal: HTMLElement | null;
+        openAttribute: string;
+        closeAttribute: string;
+        openClass: string;
+
+        /**
+         * Modal constructor
+         *
+         * @param {ConfigType} param - config
+         */
+        constructor({
+            selector = '',
+            triggers = [],
+            openAttribute = ATTRIBUTES.OPEN,
+            closeAttribute = ATTRIBUTES.CLOSE,
+            openClass = 'isOpen',
+        }: ConfigType) {
+            this.$modal = document.querySelector(selector);
+            this.openAttribute = openAttribute;
+            this.closeAttribute = closeAttribute;
+            this.openClass = openClass;
+
+            this.registerNodes(triggers);
+
+            this.onClick = this.onClick.bind(this);
+        }
+
+        /**
+         * Add handlers for clicking on elements to open related modal windows
+         *
+         * @param {Array} nodeList  - list of elements for opening modal windows
+         */
+        registerNodes(nodeList: HTMLElement[]) {
+            nodeList
+                .filter(Boolean)
+                .forEach((element) =>
+                    element.addEventListener('click', (event) => this.open(event)),
+                );
+        }
+
+        /**
+         * Open moda window
+         */
+        open() {
+            this.$modal?.classList.add(this.openClass);
+            this.addEventListeners();
+        }
+
+        /**
+         * Close modal window
+         */
+        close() {
+            this.$modal?.classList.remove(this.openClass);
+            this.removeEventListeners();
+        }
+
+        /**
+         * Click handler
+         *
+         * @param {object} event - Event data
+         */
+        onClick(event: Event) {
+            if ((event.target as Element).closest(`[${this.closeAttribute}]`)) this.close();
+        }
+
+        /**
+         * Add event listeners for an open modal
+         */
+        addEventListeners() {
+            this.$modal?.addEventListener('touchstart', this.onClick);
+            this.$modal?.addEventListener('click', this.onClick);
+        }
+
+        /**
+         * Remove event listener for an open modal
+         */
+        removeEventListeners() {
+            this.$modal?.removeEventListener('touchstart', this.onClick);
+            this.$modal?.removeEventListener('click', this.onClick);
+        }
+    }
+
+    let modal: ModalType;
+
+    /**
+     * Create a map for registering modal windows
+     *
+     * @param {Array} nodeList - list of items
+     * @param {string} attribute - selector for opening
+     * @returns {object} - nodes map
+     */
+    const createRegisterMap = (nodeList: HTMLElement[], attribute: string) => {
+        return nodeList.reduce((acc: {[key: string]: HTMLElement[]}, element: HTMLElement): {
+            [key: string]: HTMLElement[];
+        } => {
+            const attributeValue = element.getAttribute(attribute);
+            if (!attributeValue) return acc;
+            if (!acc[attributeValue]) acc[attributeValue] = [];
+            acc[attributeValue].push(element);
+            return acc;
+        }, {});
+    };
+
+    /**
+     * Initialize modal windows according to markup
+     *
+     * @param {ConfigType} config - modal window configur
+     */
+    const init = (config?: ConfigType) => {
+        const options = {openAttribute: ATTRIBUTES.OPEN, ...config};
+        const nodeList = document.querySelectorAll<HTMLElement>(`[${options.openAttribute}]`);
+        const registeredMap = createRegisterMap(Array.from(nodeList), options.openAttribute);
+
+        for (const selector in registeredMap) {
+            const value = registeredMap[selector];
+            options.selector = selector;
+            options.triggers = [...value];
+            modal = new Modal(options);
+        }
+    };
+
+    return {init};
+})();
+
+window.Keukenhof = Keukenhof;

src/types.ts

@@ -0,0 +1,16 @@
+export type ConfigType = {
+    selector?: string;
+    triggers?: HTMLElement[];
+    openAttribute?: string;
+    closeAttribute?: string;
+    openClass?: string;
+};
+
+export type ModalType = {
+    open: (event: Event) => void;
+    close: (event: Event) => void;
+};
+
+export type KeukenhofType = {
+    init: (config?: ConfigType) => void;
+};

typeScript/global.d.ts

@@ -0,0 +1,5 @@
+interface Window {
+    Keukenhof: {
+        init: (config?: any) => void;
+    };
+}