From 68fc9e55e538e03f94509731ab41a0c8cf96710f Mon Sep 17 00:00:00 2001 From: George Halkiadakis Date: Mon, 17 Apr 2023 12:12:22 +0300 Subject: setup a real server environment (apache DocumentRoot=/var/www/public) --- html/assets/js/modals/modal.js | 24 --- html/assets/js/modals/modal_handling.js | 268 -------------------------------- html/assets/js/modals/some_modal.js | 100 ------------ 3 files changed, 392 deletions(-) delete mode 100644 html/assets/js/modals/modal.js delete mode 100644 html/assets/js/modals/modal_handling.js delete mode 100644 html/assets/js/modals/some_modal.js (limited to 'html/assets/js/modals') diff --git a/html/assets/js/modals/modal.js b/html/assets/js/modals/modal.js deleted file mode 100644 index ee4cfdc..0000000 --- a/html/assets/js/modals/modal.js +++ /dev/null @@ -1,24 +0,0 @@ -$$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/html/assets/js/modals/modal_handling.js b/html/assets/js/modals/modal_handling.js deleted file mode 100644 index 0009be6..0000000 --- a/html/assets/js/modals/modal_handling.js +++ /dev/null @@ -1,268 +0,0 @@ -$$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 = ``; - - const submodal_html = `
-
-
- -
-
`; - - - /** setup a subdiv - * - * @param {string} message : message html - * @param {string} btn : button label - */ - const subdiv = (message, btn) => { - let modal_div = [ - `

${message}

`, - (btn == '' ? '' : `
`) - ].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/html/assets/js/modals/some_modal.js b/html/assets/js/modals/some_modal.js deleted file mode 100644 index 112a408..0000000 --- a/html/assets/js/modals/some_modal.js +++ /dev/null @@ -1,100 +0,0 @@ -// delivery options modal -// ----------------------------------------------------------------------------- - -// html -var some_modal__inner_html = ` -
- -
-
-

Πώς επιθυμείτε να πραγματοποιήσετε τις online αγορές σας;

-

Επιλέξτε μια υπηρεσία για να δείτε την διαθέσιμη ποικιλία προϊόντων!

-
-
- -
-
- - - - - -
-
-
-

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

-
- - -
-
`; - - - -// 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