[init.channels] implemented init script + [mockup.channels] format + navigation issues
This commit is contained in:
parent
e5867beeb9
commit
ee0191280e
|
@ -23,18 +23,5 @@ gs.set('router', new VueRouter({
|
||||||
|
|
||||||
/* (2) Main components
|
/* (2) Main components
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
/* (1) Menu - channel list */
|
/* (1) Initialize channels & channel menu */
|
||||||
gs.set('channel', {
|
require('./init/channels.js');
|
||||||
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];
|
|
|
@ -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();
|
|
@ -23,3 +23,6 @@ new Vue({
|
||||||
router: gs.get.router,
|
router: gs.get.router,
|
||||||
render(h){ return h(wrapper); }
|
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: [
|
export default{ 0: [
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/channel/:id',
|
path: '/channel/:label',
|
||||||
component: require('./vue/channel.vue').default
|
component: require('./vue/channel.vue').default
|
||||||
}, {
|
}, {
|
||||||
path: '*',
|
path: '*',
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class='dialog'>
|
<div class='dialog'>
|
||||||
|
|
||||||
<div class='header'>
|
<div class='header'>
|
||||||
|
<div class='title'></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='body'>
|
<div class='body'>
|
||||||
|
|
|
@ -7,14 +7,15 @@
|
||||||
<!-- First elements -->
|
<!-- First elements -->
|
||||||
|
|
||||||
<!-- Channel List -->
|
<!-- Channel List -->
|
||||||
<span v-for='(c,link) in gs.channel.list'
|
<span v-for='c in gs.channel.list'
|
||||||
@click='$router.push(`/channel/${link}`); gs.channel.active=link'
|
@click='gs.channel.nav(c.id);'
|
||||||
:class='link == gs.channel.active ? `channel active` : `channel`'
|
:class='c.id == gs.channel.active ? `channel active` : `channel`'
|
||||||
:data-sub='c.label'
|
:data-sub='c.sub'
|
||||||
:data-special='link == `me`?1:0'
|
:data-special='c.id == -1?1:0'
|
||||||
:data-add='c.add'
|
:data-add='c.add'
|
||||||
:data-icon='c.icon'
|
:data-icon='c.icon'
|
||||||
>{{ c.name }}</span>
|
:title='c.id<0?``:c.label'
|
||||||
|
></span>
|
||||||
|
|
||||||
<!-- Last elements -->
|
<!-- Last elements -->
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue