diff --git a/webpack/lib/pop-up.js b/webpack/lib/pop-up.js new file mode 100644 index 0000000..a5ec0fb --- /dev/null +++ b/webpack/lib/pop-up.js @@ -0,0 +1,134 @@ +/* classe API */ +export class PopUp{ + + constructor(){ + + /* (1) Fetch DOM elements */ + this.element = { + background: document.querySelector('#POPUP-BG'), + frame: document.querySelector('#POPUP'), + header: document.querySelector('#POPUP .header'), + body: document.querySelector('#POPUP .body'), + footer: document.querySelector('#POPUP .footer') + }; + + /* (2) Set background click === to CANCEL action */ + this.element.background.addEventListener('click', function(e){ + this.hide().handler(false); + }.bind(this), false); + + /* (3) Init. handler */ + this.handler = null; + + } + + /* (1) Show the popup on screen + * + * @return this current instance + * + ---------------------------------------------------------*/ + show(){ + + this.element.frame.className = 'active'; + + return this; + + } + + /* (2) Hide the popup from screen + * + * @return this current instance + * + ---------------------------------------------------------*/ + hide(){ + + this.element.frame.className = ''; + + return this; + + } + + /* (3) PopUp dialog + * + * @pObject { + * title: 'popUp title', + * content: 'popUp content', + * type: 'popUp content', + * action: 'action button content', + * } + * + * @pHandler + * + * @return this current instance + * + ---------------------------------------------------------*/ + ask(pObject, pHandler){ + + /* (1) Check argument + ---------------------------------------------------------*/ + /* (1) Check type */ + if( !(pObject instanceof Object) ) + return null; + + /* (2) Check Title */ + if( pObject.title == null ) + return null; + + /* (3) Check Content */ + if( pObject.content == null ) + return null; + + /* (4) Check Type */ + if( pObject.type == null ) + return null; + + /* (5) Check Action */ + if( pObject.action == null ) + return null; + + /* (6) Check handler */ + if( !(pHandler instanceof Function) ) + return null; + + + /* (2) Set the content + ---------------------------------------------------------*/ + /* (1) Title */ + this.element.header.innerHTML = pObject.title; + + /* (2) Content */ + this.element.body.innerHTML = pObject.content; + + /* (3) Store the handler */ + this.handler = pHandler; + + + + /* (3) Set the buttons (action) + ---------------------------------------------------------*/ + /* (1) Define action button */ + var action_btn = document.createElement('button'); + action_btn.className = pObject.type; + action_btn.innerHTML = pObject.action; + + /* (2) Define cancel button */ + var cancel_btn = document.createElement('button'); + cancel_btn.className = 'grey'; + cancel_btn.innerHTML = 'Annuler'; + + /* (3) Bind events */ + function handler(e){ this.hide(); this.handler( e.target.className != 'grey' ); } + + action_btn.addEventListener('click', handler.bind(this), false); + cancel_btn.addEventListener('click', handler.bind(this), false); + + /* (4) Add elements to the object */ + this.element.footer.innerHTML = ''; + this.element.footer.appendChild(action_btn); + this.element.footer.appendChild(cancel_btn); + + return this.show(); + + } + +} \ No newline at end of file