diff options
Diffstat (limited to 'html/assets/js/modals/modal_handling.js')
| -rw-r--r-- | html/assets/js/modals/modal_handling.js | 268 |
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 |