Added popup js lib

This commit is contained in:
xdrm-brackets 2018-02-20 22:56:13 +01:00
parent 4576e20253
commit cf8a349868
1 changed files with 134 additions and 0 deletions

134
webpack/lib/pop-up.js Normal file
View File

@ -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();
}
}