[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
parent
e221452295
commit
4280bbb5f6
|
|
@ -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);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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] );
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue