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

webpack/common.js

@@ -1,6 +1,6 @@
 import {GlobalStore} from './lib/gstore'
-import VueRouter   from 'vue-router'
+import VueRouter     from 'vue-router'
-import routes      from './routes'
+import routes        from './routes'
 
 
 window.gs = new GlobalStore();
@@ -23,18 +23,5 @@ gs.set('router', new VueRouter({
 
 /* (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];

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<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();

webpack/main.js

@@ -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();

webpack/mockup/channels.json

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

webpack/routes.js

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

webpack/vue/dialog.vue

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

webpack/vue/menu.vue

@@ -7,14 +7,15 @@
 		<!-- First elements -->
 
 		<!-- 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-icon='c.icon'
-			>{{ c.name }}</span>
+			:title='c.id<0?``:c.label'
+			></span>
 
 		<!-- Last elements -->