101 lines
2.4 KiB
JavaScript
101 lines
2.4 KiB
JavaScript
function Popup(){
|
|
|
|
/* (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);
|
|
|
|
}
|
|
|
|
Popup.prototype = {
|
|
|
|
handler: null,
|
|
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) 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();
|
|
}
|
|
|
|
}; |