Added popup js lib
This commit is contained in:
parent
4576e20253
commit
cf8a349868
|
@ -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<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();
|
||||
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in New Issue