Pop-Up manages 'background.click' to send FALSE to the 'handler' + hide (equivalent to CANCEL action)

This commit is contained in:
xdrm-brackets 2017-11-11 13:03:30 +01:00
parent a2d575e94f
commit 6b9bd03d9e
2 changed files with 18 additions and 6 deletions

View File

@ -1 +1 @@
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(){return this.element.frame.addClass("active"),this},hide:function(){return this.element.frame.remClass("active"),this},ask:function(e,t){function n(e){this.hide(),t("grey"!=e.target.className)}if(!(e instanceof Object))return null;if(null==e.title)return null;if(null==e.content)return null;if(null==e.type)return null;if(null==e.action)return null;if(!(t instanceof Function))return null;this.element.header.innerHTML=e.title,this.element.body.innerHTML=e.content;var r=document.createElement("button");r.className=e.type,r.innerHTML=e.action;var l=document.createElement("button");return l.className="grey",l.innerHTML="Annuler",r.addEventListener("click",n.bind(this),!1),l.addEventListener("click",n.bind(this),!1),this.element.footer.innerHTML="",this.element.footer.appendChild(r),this.element.footer.appendChild(l),this.show()}}; function Popup(){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")},this.element.background.addEventListener("click",function(e){this.hide().handler(!1)}.bind(this),!1)}Popup.prototype={handler:null,element:{frame:null,header:null,body:null,footer:null},show:function(){return this.element.frame.addClass("active"),this},hide:function(){return this.element.frame.remClass("active"),this},ask:function(e,n){function t(e){this.hide(),this.handler("grey"!=e.target.className)}if(!(e instanceof Object))return null;if(null==e.title)return null;if(null==e.content)return null;if(null==e.type)return null;if(null==e.action)return null;if(!(n instanceof Function))return null;this.element.header.innerHTML=e.title,this.element.body.innerHTML=e.content,this.handler=n;var r=document.createElement("button");r.className=e.type,r.innerHTML=e.action;var l=document.createElement("button");return l.className="grey",l.innerHTML="Annuler",r.addEventListener("click",t.bind(this),!1),l.addEventListener("click",t.bind(this),!1),this.element.footer.innerHTML="",this.element.footer.appendChild(r),this.element.footer.appendChild(l),this.show()}};

View File

@ -1,16 +1,24 @@
function Popup(){ function Popup(){
/* (1) Fetch DOM elements */
this.element = { this.element = {
background: document.querySelector('#POPUP-BG'),
frame: document.querySelector('#POPUP'), frame: document.querySelector('#POPUP'),
header: document.querySelector('#POPUP .header'), header: document.querySelector('#POPUP .header'),
body: document.querySelector('#POPUP .body'), body: document.querySelector('#POPUP .body'),
footer: document.querySelector('#POPUP .footer') 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 = { Popup.prototype = {
handler: null,
element: { frame: null, header: null, body: null, footer: null }, element: { frame: null, header: null, body: null, footer: null },
show: function(){ show: function(){
@ -59,6 +67,10 @@ Popup.prototype = {
/* (2) Content */ /* (2) Content */
this.element.body.innerHTML = pObject.content; this.element.body.innerHTML = pObject.content;
/* (3) Store the handler */
this.handler = pHandler;
/* (3) Set the buttons (action) /* (3) Set the buttons (action)
---------------------------------------------------------*/ ---------------------------------------------------------*/
@ -73,7 +85,7 @@ Popup.prototype = {
cancel_btn.innerHTML = 'Annuler'; cancel_btn.innerHTML = 'Annuler';
/* (3) Bind events */ /* (3) Bind events */
function handler(e){ this.hide(); pHandler( e.target.className != 'grey' ); } function handler(e){ this.hide(); this.handler( e.target.className != 'grey' ); }
action_btn.addEventListener('click', handler.bind(this), false); action_btn.addEventListener('click', handler.bind(this), false);
cancel_btn.addEventListener('click', handler.bind(this), false); cancel_btn.addEventListener('click', handler.bind(this), false);