diff --git a/webpack/common.js b/webpack/common.js index 92313ac..b7f73ee 100644 --- a/webpack/common.js +++ b/webpack/common.js @@ -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]; \ No newline at end of file +/* (1) Initialize channels & channel menu */ +require('./init/channels.js'); \ No newline at end of file diff --git a/webpack/init/channels.js b/webpack/init/channels.js new file mode 100644 index 0000000..7e37f0d --- /dev/null +++ b/webpack/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 Channels data +* +* @return udpated 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 Channel ID +* NULL: current channel || from URL (and set current) +* +* @return channel 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(); \ No newline at end of file diff --git a/webpack/main.js b/webpack/main.js index 3bd0100..5cd07d4 100644 --- a/webpack/main.js +++ b/webpack/main.js @@ -22,4 +22,7 @@ new Vue({ el: '#vue', router: gs.get.router, render(h){ return h(wrapper); } -}) \ No newline at end of file +}) + +/* (2) Initialize channel_id guess */ +gs.get.channel.nav(); \ No newline at end of file diff --git a/webpack/mockup/channels.json b/webpack/mockup/channels.json new file mode 100644 index 0000000..7e9fd7b --- /dev/null +++ b/webpack/mockup/channels.json @@ -0,0 +1,6 @@ +[ + { + "id": 0, + "label": "channel 1" + } +] \ No newline at end of file diff --git a/webpack/routes.js b/webpack/routes.js index 05e935d..532096f 100644 --- a/webpack/routes.js +++ b/webpack/routes.js @@ -1,7 +1,7 @@ export default{ 0: [ { - path: '/channel/:id', + path: '/channel/:label', component: require('./vue/channel.vue').default }, { path: '*', diff --git a/webpack/vue/dialog.vue b/webpack/vue/dialog.vue index 188bdac..e8ffa36 100644 --- a/webpack/vue/dialog.vue +++ b/webpack/vue/dialog.vue @@ -5,7 +5,7 @@
- +
diff --git a/webpack/vue/menu.vue b/webpack/vue/menu.vue index fe5cc66..08a3a58 100644 --- a/webpack/vue/menu.vue +++ b/webpack/vue/menu.vue @@ -7,14 +7,15 @@ - {{ c.name }} + :title='c.id<0?``:c.label' + >