Added popup js lib

webpack/lib/pop-up.js

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