[init.channels] implemented init script + [mockup.channels] format + navigation issues

This commit is contained in:
xdrm-brackets 2018-03-21 20:25:01 +01:00
parent e5867beeb9
commit ee0191280e
7 changed files with 179 additions and 26 deletions

View File

@ -23,18 +23,5 @@ gs.set('router', new VueRouter({
/* (2) Main components
---------------------------------------------------------*/
/* (1) Menu - channel list */
gs.set('channel', {
list: {
me: { label: '0 online', icon: 'group' },
test1: { label: null, icon: '' },
test2: { label: null, icon: '' },
add: { label: null, icon: 'add', add: 1 }
},
active: 'me'
});
/* (2) Set current active menu item from URL */
if( gs.get.URI.length > 1 && gs.get.channel.list.hasOwnProperty(gs.get.URI[gs.get.URI.length-1]) )
gs.get.channel.active = gs.get.URI[gs.get.URI.length-1];
/* (1) Initialize channels & channel menu */
require('./init/channels.js');

156
webpack/init/channels.js Normal file
View File

@ -0,0 +1,156 @@
/* (1) Initialisation
---------------------------------------------------------*/
/* (1) Init @channel object */
gs.set('channel', {});
/* (2) Set default active channel */
gs.get.channel.active = null;
/* (3) Initialize list */
gs.get.channel.list = [
{ id: -1, label: 'me', sub: '0 online', icon: 'group' },
{ id: 0, label: 'test1', sub: null, icon: 'test1' },
{ id: 1, label: 'test2', sub: null, icon: 'test2' },
{ id: -2, label: 'add', sub: null, icon: 'add', add: 1 }
];
/* (4) Initialize vue-router channel navigation */
gs.get.channel.nav = function(){};
/* (5) Initialize adding fetched channel */
gs.get.channel.dump = function(){};
/* (6) Initialize accessor for channel data */
gs.get.channel.get = function(){};
/* (2) Channel navigation
---------------------------------------------------------*/
gs.get.channel.nav = function(channel_id=null){
/* (1) Get channel data */
var channel = this.get(channel_id);
/* (3) Abort if same channel */
if( gs.get.router.history.current.params.label === channel.label )
return false;
/* (3) Navigate vue-router */
gs.get.router.push(`/channel/${channel.label}`);
/* (4) Update active element */
this.active = channel.id;
/* (5) Log channel */
console.log(`[channel.current] ${channel.label}`);
return true;
};
/* (3) Dump/Update channel data
*
* @channels<array> Channels data
*
* @return udpated<boolean> Whether channels have been updated
*
---------------------------------------------------------*/
gs.get.channel.dump = function(channels){
/* (1) Check @channels type */
if( !(channels instanceof Array) )
return false;
/* (2) Store LAST item */
let last_item = this.list.pop();
/* (3) Clear list (except FIRST) */
this.list.splice(1);
/* (4) Apply new channels */
for(let c of channels)
this.list.push(c);
/* (5) Restore LAST */
this.list.push(last_item);
return true;
};
/* (4) Get channel data
*
* @channel_id<int> Channel ID
* NULL: current channel || from URL (and set current)
*
* @return channel<array> Channel data
*
---------------------------------------------------------*/
gs.get.channel.get = function(channel_id=null){
if( channel_id === null ){
/* (1) Get @active channel
---------------------------------------------------------*/
/* (1) If @active is set */
if( !isNaN(this.active) ){
/* (2) Return matching id in list */
for( let c of this.list ){
if( c.id === this.active )
return c; // exit point
}
}
/* (2) Get from URL
---------------------------------------------------------*/
/* (1) If vue-router has @label param */
if( gs.get.router.history.current.params.label ){
/* (2) Extract @label */
let label = gs.get.router.history.current.params.label;
/* (3) Return matching label in list */
for( let c of this.list ){
if( c.label === label ){
this.active = c.id; // set @active
return c; // exit point
}
}
}
}
/* (3) Get channel data
---------------------------------------------------------*/
/* (1) Return channel matching id */
for( let c of this.list )
if( c.id === channel_id )
return c; // exit point
/* (2) Return default: if ID not found */
this.active = this.list[0].id;
return this.list[0];
}
/* (N) Manage active channel from URL
---------------------------------------------------------*/
/* (1) Set current active channel item from URL */
// gs.get.channel.nav();

View File

@ -23,3 +23,6 @@ new Vue({
router: gs.get.router,
render(h){ return h(wrapper); }
})
/* (2) Initialize channel_id guess */
gs.get.channel.nav();

View File

@ -0,0 +1,6 @@
[
{
"id": 0,
"label": "channel 1"
}
]

View File

@ -1,7 +1,7 @@
export default{ 0: [
{
path: '/channel/:id',
path: '/channel/:label',
component: require('./vue/channel.vue').default
}, {
path: '*',

View File

@ -5,7 +5,7 @@
<div class='dialog'>
<div class='header'>
<div class='title'></div>
</div>
<div class='body'>

View File

@ -7,14 +7,15 @@
<!-- First elements -->
<!-- Channel List -->
<span v-for='(c,link) in gs.channel.list'
@click='$router.push(`/channel/${link}`); gs.channel.active=link'
:class='link == gs.channel.active ? `channel active` : `channel`'
:data-sub='c.label'
:data-special='link == `me`?1:0'
<span v-for='c in gs.channel.list'
@click='gs.channel.nav(c.id);'
:class='c.id == gs.channel.active ? `channel active` : `channel`'
:data-sub='c.sub'
:data-special='c.id == -1?1:0'
:data-add='c.add'
:data-icon='c.icon'
>{{ c.name }}</span>
:title='c.id<0?``:c.label'
></span>
<!-- Last elements -->