diff options
Diffstat (limited to 'public/assets/js/modals/modal_handling.js')
| -rw-r--r-- | public/assets/js/modals/modal_handling.js | 268 |
1 files changed, 0 insertions, 268 deletions
diff --git a/public/assets/js/modals/modal_handling.js b/public/assets/js/modals/modal_handling.js deleted file mode 100644 index 0009be6..0000000 --- a/public/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 = `<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 |