134 lines
3.0 KiB
JavaScript
134 lines
3.0 KiB
JavaScript
|
/* 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<PopUp> current instance
|
||
|
|
*
|
||
|
|
---------------------------------------------------------*/
|
||
|
|
show(){
|
||
|
|
|
||
|
|
this.element.frame.className = 'active';
|
||
|
|
|
||
|
|
return this;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* (2) Hide the popup from screen
|
||
|
|
*
|
||
|
|
* @return this<PopUp> 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<PopUp> 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();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|