From 2b6970d33afd75be5bfef951dc3691d492004d43 Mon Sep 17 00:00:00 2001
From: George Halkiadakis <gchalkiadakis@sklavenitis.co.gr>
Date: Tue, 18 Apr 2023 01:11:37 +0300
Subject: admin back-office environment (skeleton); admin categories

---
 .../assets/js/_dependency-control/modals/modal.js  |  24 ++
 .../_dependency-control/modals/modal_handling.js   | 268 +++++++++++++++++++++
 .../js/_dependency-control/modals/some_modal.js    | 100 ++++++++
 3 files changed, 392 insertions(+)
 create mode 100644 public/assets/js/_dependency-control/modals/modal.js
 create mode 100644 public/assets/js/_dependency-control/modals/modal_handling.js
 create mode 100644 public/assets/js/_dependency-control/modals/some_modal.js

(limited to 'public/assets/js/_dependency-control/modals')

diff --git a/public/assets/js/_dependency-control/modals/modal.js b/public/assets/js/_dependency-control/modals/modal.js
new file mode 100644
index 0000000..ee4cfdc
--- /dev/null
+++ b/public/assets/js/_dependency-control/modals/modal.js
@@ -0,0 +1,24 @@
+$$plugins.define('modal', ['jQuery', 'domHelper'], function (element, options) {
+
+    var close = $(element).find('.modal__close');    
+    close.on('click', function (e) {
+        $(element).removeClass('open');
+        // todo check if any bug occured
+        e.stopPropagation();
+	});
+
+    jQuery(function(){
+
+        $('.modal').show();
+        
+        $('body').on('click', '.open_modal', function(){
+            target = $(this).attr('data-target');
+            close_target = $(this).attr('data-close-target');
+            $('#'+target).addClass('open');
+            if(typeof close_target != 'undefined') {
+                $('#'+close_target).removeClass('open');
+            }
+        });
+        
+    })
+});
diff --git a/public/assets/js/_dependency-control/modals/modal_handling.js b/public/assets/js/_dependency-control/modals/modal_handling.js
new file mode 100644
index 0000000..0009be6
--- /dev/null
+++ b/public/assets/js/_dependency-control/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
diff --git a/public/assets/js/_dependency-control/modals/some_modal.js b/public/assets/js/_dependency-control/modals/some_modal.js
new file mode 100644
index 0000000..112a408
--- /dev/null
+++ b/public/assets/js/_dependency-control/modals/some_modal.js
@@ -0,0 +1,100 @@
+// delivery options modal
+// -----------------------------------------------------------------------------
+
+// html
+var some_modal__inner_html = `
+    <div class="wrapper">
+
+        <div class="sectionTitle">
+            <div class="sectionTitle__main">
+                <h2>Πώς επιθυμείτε να πραγματοποιήσετε τις online αγορές σας;</h2>
+                <p>Επιλέξτε μια υπηρεσία για να δείτε την διαθέσιμη ποικιλία προϊόντων!</p>
+            </div>
+        </div>
+
+        <div class="radio-cards">
+            <div class="radio-cards--container outputsRow">
+
+                <label class="radio-card output output--init">
+                    <input class="state" type="radio" value="1" name="output" />
+                    
+                    <div class="output__inner">                        
+                        <p class="output__banner output--delivery"></p>
+                        <p class="output__title">Lorem Ipsum</p>
+                        <ul class="hide--under-M">
+                            <li>Vivamus nunc justo, scelerisque ut erat et, sagittis fermentum sem.</b>.</li>
+                        </ul>
+                    </div>
+                </label>
+
+                <label class="radio-card output output--init">
+                    <input class="state" type="radio" value="2" name="output" />
+                    
+                    <div class="output__inner">
+                        <p class="output__banner output--pickup"></p>
+                        <p class="output__title">Nunc eleifend</p>
+                        <ul class="hide--under-M">
+                            <li>Fusce arcu urna, pharetra nec nisi id, congue iaculis mauris.</b></li>
+                        </ul>
+                    </div>
+                </label>
+
+            </div>
+        </div>
+        <hr />
+        <p>
+        	Donec arcu magna, pretium a arcu et, tristique malesuada dolor.
+        	In fermentum ante ut dignissim laoreet.
+        	Morbi sodales ex sem, non commodo ex hendrerit eu.
+        </p>
+        <div class="btnWrap btnWrap--hCenter">
+            <button data-qa="form_back" class="button button--border">επιστροφή</button>
+            <button id="registration_submit" data-qa="form_submit" class="button widthAuto" type="submit">Επόμενο</button>
+        </div>
+    </div>`;
+
+
+
+// the modal object ------------------------------------------------------------
+////////////////////////////////////////////////////////////////////////////////
+
+var delivery_options_modal = {
+
+    classes : [ 'modal--l' ],
+
+    html : () => { return delivery_options__inner_html; },
+
+    init : function() {
+        // if cokie exist, mark slection
+        console.log('set values from cookie');
+    },
+
+    events : {
+
+        'input[name="output"]' : {
+            change : function () { 
+                v = document.querySelector('input[name="output"]:checked').value;
+                // setup cookie; keep the selected value;
+                // + set reset timeslot )in case selection is aproved
+                console.log(v);
+            }
+        },
+        
+        '.go-back' : {
+            click: function () {
+                console.log('close modal');
+            }
+        },
+
+        '#registration_submit': {
+            click: function() { window._Modals_.use('some_other_modal'); }
+        }
+
+    }
+
+}
+
+
+// attach to _Modals_
+// -----------------------------------------------------------------------------
+window._Modals_.attach('delivery-options', delivery_options_modal);
-- 
cgit v1.2.3