error pages; js system to support back/front-end

1 files changed, 268 insertions, 0 deletions

diff --git a/html/assets/js/modals/modal_handling.js b/html/assets/js/modals/modal_handling.js
new file mode 100644
index 0000000..0009be6
--- /dev/null
+++ b/html/assets/js/modals/modal_handling.js
@@ -0,0 +1,268 @@
+$$plugins.define('modal_handling', [], function (element, options) {
+
+    /** Modal Handling
+     * (impementation of Builder design pattern)
+     * -------------------------------------------------------------------------
+     * 
+     * Modal_handling requires a '#lazymodal' modal to be attached into dom
+     */
+
+    const modal_html = `<div id="lazymodal" class="modal" data-plugin-modal="">
+        <div class="modal__bg modal__close"></div>
+        <div class="modal__wrap">
+            <button class="modal__close modal__closeButton iconButton iconButton--s iconButton--black icon-close"></button>
+            <div class="modal__content">
+            </div>
+        </div>
+    </div>`;
+
+    const submodal_html = `<div class="modal modal--l message-modal" data-plugin-modal="">
+        <div class="modal__bg modal__close"></div>
+        <div class="modal__wrap">
+            <button class="modal__close modal__closeButton iconButton iconButton--s iconButton--black icon-close"></button>
+        </div>
+    </div>`;
+
+        
+    /** setup a subdiv
+     * 
+     * @param {string} message : message html
+     * @param {string} btn : button label
+     */
+    const subdiv = (message, btn) => {
+        let modal_div = [
+            `<h2 class="modal__title">${message}</h2>`,
+            (btn == '' ? '' : `<div class="btnWrap btnWrap--hCenter"><button class="button modal__close">${btn}</button></div>`)
+        ].join('\n');
+    }
+
+    // TODO:
+    // atach modal & submodal divs as html-nodes into document
+
+
+
+    var _Modals_ = {
+
+        /** variables and constants
+         * ---------------------------------------------------------------------
+         */
+
+        loaded : [],    // list of loaded modals; acts as caching mechanism too
+
+
+        classes : [     // all posible modal classes (various designs)
+            "modal--l",
+            "modal--noSpaces",
+            "modal--full",
+            "open"
+        ],
+
+
+        current : '',   // current modal (label)
+
+
+        status : -1,    // modal status (-1:idle, 0:initializing, 1:ready)
+            // NOTE: property reserved for future development
+            // TODO: track modal status
+                        
+
+
+
+        /** methods
+         * ---------------------------------------------------------------------
+         */
+
+        /** attach
+         * -- --- -- -- - - -
+         * @param modal (string) : label, modal friendly name
+         * @param director (object) : the director for the modal Builder
+         */
+        attach : (modal, director) => {
+            if (typeof window._Modals_.loaded[modal] == 'undefined') {
+                window._Modals_.loaded[modal] = director;
+            }
+        },
+
+
+        /** exist
+         * check if modal is loaded
+         * --- -- -- - - -
+         * @param modal (string) : label
+         * @returns true|false
+         */
+        exist : (modal) => {
+            return (typeof window._Modals_.loaded[modal] == 'undefined') ? false : true;
+        },
+
+
+        /** use
+         * 
+         * @param modal : modal label
+         * @param luggage : passed data (any type; default: null)
+         * 
+         * NOTE:
+         * luggage will be passed to the init function
+         */
+        use : (modal, luggage = null) => {
+            const this_ = window._Modals_;
+            // this_.status = 0;
+
+            if (!this_.exist(modal)) {
+                require(modal, function() {
+                    this_.open(modal, luggage);
+                });
+
+            } else {
+                this_.open(modal, luggage);
+            }
+        },
+
+
+        /** use_modal
+         * --- -- -- - - -
+         * 1. load modal object (if not loaded already)
+         * 2. setup modal
+         * 3. constuct html content
+         * 4, initiaize status of modal's elements
+         * 5. prepare event listeners of modal
+         * 
+         * @param modal (string) : modal label
+         */
+        open : (modal, luggage) => {
+            const this_ = window._Modals_;
+            // if (this_.status !== 0) { return false; }
+
+            const modalDiv = document.querySelector('#lazymodal');
+            const modalContentDiv = document.querySelector('#lazymodal .modal__content');
+
+            if (typeof this_.loaded[modal] == 'undefined') { return false; }
+
+            // remove previous modal handlers
+            if (this_.current != modal) {
+                this_.destroy_modal_events(this_.current);
+            }
+
+            // set display classes; +open
+            this_.set_modal_classes(this_.loaded[modal]['classes']);
+            modalDiv.classList.add("open");
+        
+            // constuct html
+            if (this_.current != modal) {
+                modalContentDiv.innerHTML = (this_.loaded[modal]['html'] instanceof Function)
+                    ? this_.loaded[modal]['html']()
+                    : this_.loaded[modal]['html'];
+            }
+
+            // init (ex. load values on forms)
+            if (this_.loaded[modal]['init']) {
+                this_.loaded[modal]['init'](luggage);
+            }
+
+            // prepare events (if not the same modal)
+            if (this_.current != modal) { this_.prepare_modal_events(modal); }
+
+            // set current model
+            if (this_.current != modal) { this_.current = modal; }
+
+            // this_.status = 1;
+            // return true;
+        },
+
+
+        /** set classes to modal
+         * ---------------------------------------------------------------------
+         * @param classes (array)
+         */
+        set_modal_classes : (classes) => {
+            const this_ = window._Modals_;
+            const modalDiv = document.querySelector('#lazymodal');
+
+                // remove old classes if existed
+            this_.classes.forEach( c => { modalDiv.classList.remove(c); });
+
+                // add new classes
+            classes.forEach( c => { modalDiv.classList.add(c); });   
+        },
+
+
+        /** prepare (create) event listenerts for the specified modal
+         * ---------------------------------------------------------------------
+         */ 
+        prepare_modal_events : ( modal ) => {
+            if (!window._Modals_.loaded[modal]) { return false; }
+            if (!window._Modals_.loaded[modal]['events']) { return false; }
+
+            if (!window._Modals_.loaded[modal]['events']) { return false; }
+
+            let evTree = window._Modals_.loaded[modal]['events'];
+
+            for (selector in evTree) {
+                let collection = document.querySelectorAll(selector);
+
+                for (ev in evTree[selector]) {
+                    // add event listener for eadh item of collection
+                    collection.forEach( el => {
+                        el.addEventListener( ev, evTree[selector][ev] );
+                    });
+                }
+            }
+        },
+
+
+        // destroy (remove) event listeners for the specified modal
+        // ---------------------------------------------------------------------
+        destroy_modal_events : (modal) => {
+            if (!window._Modals_.loaded[modal]) { return false; }
+            if (!window._Modals_.loaded[modal]['events']) { return false; }
+
+
+            let evTree = window._Modals_.loaded[modal]['events'];
+
+            for (selector in evTree) {
+                let collection = document.querySelectorAll(selector);
+
+                for (ev in evTree[selector]) {
+                    // remove event listener for eadh item of collection
+                    collection.forEach( el => {
+                        el.removeEventListener( ev, evTree[selector][ev] );
+                    });
+                }
+            }
+
+            return true;
+        },
+
+
+        // sub-modals
+        ////////////////////////////////////////////////////////////////////////
+
+        /** show mini
+         * 
+         * @param {obj} director 
+         * 
+         * director structure: {
+         *   message : html
+         *   button : ...
+         * }
+         */
+        show_mini : (director) => {
+            console.log(director);
+        },
+
+        /** close_mini
+         * 
+         * closes the opened mini-modal
+         * 
+         * @param (void)
+         */
+        close_mini: () => {
+            console.log('message modal closed');
+        }
+        
+    }
+
+    // attach/install _Modals_ object onto window
+    window._Modals_ = _Modals_;
+
+
+});
\ No newline at end of file