From 4280bbb5f6e65e06f4f7108cc6003c7fab531dc9 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Sat, 17 Mar 2018 18:26:09 +0100
Subject: [PATCH] [webpack.lib.onblur] js lib to call 'callbacks' when unblur
 (for example <div> that shows only on click, but now it allows us to hide
 them when clicking outside this element) [webpack.data.common] added lib in
 'window.unblur' [webpack.teacher.view] used the lib for 'filter' list that
 shows when clicking on filter name [webpack.header] used for 'department' and
 'version' popup lists

---
 webpack/component/teacher/view.vue | 23 +++++++--
 webpack/data/common.js             | 11 ++--
 webpack/lib/onblur.js              | 81 ++++++++++++++++++++++++++++++
 webpack/vue/header.vue             | 32 +++++++++---
 4 files changed, 132 insertions(+), 15 deletions(-)
 create mode 100644 webpack/lib/onblur.js

diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue
index f0b94f2..674b6fa 100644
--- a/webpack/component/teacher/view.vue
+++ b/webpack/component/teacher/view.vue
@@ -4,12 +4,12 @@
 
 		<div class='card filter'>
 
-			<div v-for='(filter_grp, gname) in gstore.filters' :title='gname'>
+			<div v-for='(filter_grp, gname) in gstore.filters' :title='gname' data-unblur-filter>
 
-				<div class='fold-toggle' :data-show='gstore.filters[gname][0].visible?1:0' @click='gstore.show_fgroup(gname)' :data-count='gstore.filters[gname][0].active.length'>{{ gname }}</div>
+				<div class='fold-toggle' :data-show='gstore.filters[gname][0].visible?1:0' @click='gstore.show_fgroup(gname)' :data-count='gstore.filters[gname][0].active.length' data-unblur-filter>{{ gname }}</div>
 
-				<div class='fold'>
-					<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='gstore.toggle_filter(gname, i); gstore.filter_handler(gname);' :title='data.code'>{{ data.name }}</span>
+				<div class='fold' data-unblur-filter>
+					<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='gstore.toggle_filter(gname, i); gstore.filter_handler(gname);' :title='data.code' data-unblur-filter>{{ data.name }}</span>
 				</div>
 
 			</div>
@@ -133,6 +133,21 @@
 		name: 'CONTAINER_VIEW',
 		data(){
 			return { gstore: gstore.get }
+		},
+		beforeMount(){
+
+			// set onblur to hide filter
+			window.onblur.link('teacher.filter', (e) => {
+
+				// ignore [data-unblur-filter] elements
+				if( e.target.getAttribute('data-unblur-filter') !== null )
+					return;
+
+				// else: hide
+				gstore.get.show_fgroup(-1);
+
+			});
+
 		}
 	}
 
diff --git a/webpack/data/common.js b/webpack/data/common.js
index 4ba3139..70e9b69 100644
--- a/webpack/data/common.js
+++ b/webpack/data/common.js
@@ -1,6 +1,7 @@
-import {GlobalStore} from '../lib/gstore'
-import {APIClient}   from '../lib/api-client'
-import {PopUp}       from '../lib/pop-up'
+import {GlobalStore}   from '../lib/gstore'
+import {APIClient}     from '../lib/api-client'
+import {PopUp}         from '../lib/pop-up'
+import {OnBlurManager} from '../lib/onblur'
 require('../lib/css-class-override')
 
 window.gstore = new GlobalStore();
@@ -20,6 +21,10 @@ window.api = new APIClient(gstore.get.is_local ? 'http://ptut.com:8080/api/v/1.0
 /* (4) PopUp instance */
 window.popup = new PopUp();
 
+/* (5) Create class in window */
+window.onblur = new OnBlurManager(document.body);
+
+
 
 
 /* (2) Main components
diff --git a/webpack/lib/onblur.js b/webpack/lib/onblur.js
new file mode 100644
index 0000000..71a3e52
--- /dev/null
+++ b/webpack/lib/onblur.js
@@ -0,0 +1,81 @@
+/* OnBlur Manager Class */
+export class OnBlurManager{
+
+	/* (1) Initialize an OnBlurManager
+	*
+	* @root<Element>					The root element to work in
+	*
+	---------------------------------------------------------*/
+	constructor(root){
+
+		/* (1) Error: invalid @root argument */
+		if( !(root instanceof Element) )
+			throw new Error(`[OnBlurManager::new] expected argument to be of type (Element), received (${typeof root})`);
+
+		/* (2) Store as attribute */
+		this.root = root;
+
+		/* (3) Initialize @callback list */
+		this.callback = {};
+
+		/* (4) Bind to event */
+		this.root.addEventListener('click', function(e){
+
+			// launch each callback
+			for( var c of Object.keys(this.callback) )
+				this.callback[c](e);
+
+		}.bind(this) );
+
+
+	}
+
+
+
+
+	/* (2) Add a @callback
+	*
+	* @index<String>					String to name the callback for removing
+	* @callback<Function>				Function to link to callback
+	*
+	* @return linked<bool>				Whether the callback has been linked
+	*
+	---------------------------------------------------------*/
+	link(index, callback){
+
+		/* (1) Fail: invalid @index or @callback arguments */
+		if( typeof index !== 'string' || !(callback instanceof Function) ){
+			console.error(`[OnBlurManager::link] expected (String, Function), received (${typeof index}, ${typeof callback})`);
+			return false;
+		}
+
+		/* (2) Add to list of callbacks */
+		return ( this.callback[index] = callback ) instanceof Function;
+
+	}
+
+
+
+
+	/* (3) Unlink a @callback
+	*
+	* @index<String>					Name of the callback to remove
+	*
+	* @return unlinked<bool>			Whether the callback has been unlinked
+	*
+	---------------------------------------------------------*/
+	unlink(index, callback){
+
+		/* (1) Fail: invalid @index argument */
+		if( typeof index !== 'string' ){
+			console.error(`[OnBlurManager::unlink] expected (String), received (${typeof index})`);
+			return false;
+		}
+
+		/* (2) Remove from list of callbacks */
+		return ( delete this.callback[index] );
+
+	}
+
+
+}
\ No newline at end of file
diff --git a/webpack/vue/header.vue b/webpack/vue/header.vue
index f258283..5db7a07 100644
--- a/webpack/vue/header.vue
+++ b/webpack/vue/header.vue
@@ -3,21 +3,21 @@
 	<div id='HEADER'>
 
 		<!-- Department management -->
-		<div class='departments'>
+		<div class='departments' data-unblur-department>
 
-			<div class='current' @click='d_dialog=!d_dialog'>{{ get_dcurrent().label || 'département à jour' }}</div>
-			<div class='department-dialog' v-show='d_dialog'>
-				<span v-for='d in dpts' @click='d_switch(d.id)'>{{ d.label }}</span>
+			<div class='current' @click='d_dialog=!d_dialog' data-unblur-department>{{ get_dcurrent().label || 'département à jour' }}</div>
+			<div class='department-dialog' v-show='d_dialog' data-unblur-department>
+				<span v-for='d in dpts' @click='d_switch(d.id)' data-unblur-department>{{ d.label }}</span>
 			</div>
 
 		</div>
 
 		<!-- Version management -->
-		<div class='versions'>
+		<div class='versions' data-unblur-version>
 
-			<div class='current' @click='v_dialog=!v_dialog' :data-id='get_vcurrent().id'>{{ get_vcurrent().date || 'version à jour' }}</div>
-			<div class='version-dialog' v-show='v_dialog'>
-				<span v-for='v in vers' v-show='v.id!=ver_id' @click='v_switch(v.id)' :data-id='v.id'>{{ v.date || 'version à jour' }}</span>
+			<div class='current' @click='v_dialog=!v_dialog' :data-id='get_vcurrent().id' data-unblur-version>{{ get_vcurrent().date || 'version à jour' }}</div>
+			<div class='version-dialog' v-show='v_dialog' data-unblur-version>
+				<span v-for='v in vers' v-show='v.id!=ver_id' @click='v_switch(v.id)' :data-id='v.id' data-unblur-version>{{ v.date || 'version à jour' }}</span>
 			</div>
 
 		</div>
@@ -116,6 +116,22 @@ export default {
 			// 3. Update GUI
 			this.ver_id = id;
 		}
+	},
+	beforeMount(){
+
+		// set onblur to hide department lists
+		window.onblur.link('header.department', (e) => {
+
+			// only hide not [data-unblur-department] elements
+			if( e.target.getAttribute('data-unblur-department') === null )
+				this.d_dialog = false;
+
+			// only hide not [data-unblur-version] elements
+			if( e.target.getAttribute('data-unblur-version') === null )
+				this.v_dialog = false;
+
+		});
+
 	}
 }
 </script>
\ No newline at end of file