function Popup(){ this.element = { frame: document.querySelector('#POPUP'), header: document.querySelector('#POPUP .header'), body: document.querySelector('#POPUP .body'), footer: document.querySelector('#POPUP .footer') }; } Popup.prototype = { element: { frame: null, header: null, body: null, footer: null }, show: function(){ this.element.frame.addClass('active'); return this; }, hide: function(){ this.element.frame.remClass('active'); return this; }, ask: function(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) 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(); pHandler( 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(); } };