[init.channels] implemented init script + [mockup.channels] format + navigation issues
This commit is contained in:
parent
e5867beeb9
commit
ee0191280e
|
@ -1,6 +1,6 @@
|
|||
import {GlobalStore} from './lib/gstore'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
|
||||
|
||||
window.gs = new GlobalStore();
|
||||
|
@ -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');
|
|
@ -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();
|
|
@ -22,4 +22,7 @@ new Vue({
|
|||
el: '#vue',
|
||||
router: gs.get.router,
|
||||
render(h){ return h(wrapper); }
|
||||
})
|
||||
})
|
||||
|
||||
/* (2) Initialize channel_id guess */
|
||||
gs.get.channel.nav();
|
|
@ -0,0 +1,6 @@
|
|||
[
|
||||
{
|
||||
"id": 0,
|
||||
"label": "channel 1"
|
||||
}
|
||||
]
|
|
@ -1,7 +1,7 @@
|
|||
export default{ 0: [
|
||||
|
||||
{
|
||||
path: '/channel/:id',
|
||||
path: '/channel/:label',
|
||||
component: require('./vue/channel.vue').default
|
||||
}, {
|
||||
path: '*',
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<div class='dialog'>
|
||||
|
||||
<div class='header'>
|
||||
|
||||
<div class='title'></div>
|
||||
</div>
|
||||
|
||||
<div class='body'>
|
||||
|
|
|
@ -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 -->
|
||||
|
||||
|
|
Loading…
Reference in New Issue