[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

This commit is contained in:
xdrm-brackets 2018-03-17 18:26:09 +01:00
parent e221452295
commit 4280bbb5f6
4 changed files with 132 additions and 15 deletions

View File

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

View File

@ -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

81
webpack/lib/onblur.js Normal file
View File

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

View File

@ -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>