[init.channels | mockup.channel | vue.menu] added channel 'link' (can be used in URL) in opposite to 'label' that is meant to be displayed
This commit is contained in:
xdrm-brackets
parent
4fb99407f4
commit
a5702d5a0f
|
|
@ -8,10 +8,10 @@ gs.get.channel.current = 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 }
|
||||
{ id: -1, link: 'me', label: 'My data', sub: '0 online', icon: 'group' },
|
||||
{ id: 0, link: 'test-1', label: 'test 1', sub: null, icon: 'test1' },
|
||||
{ id: 1, link: 'test-2', label: 'test 2', sub: null, icon: 'test2' },
|
||||
{ id: -2, link: null, label: 'add', sub: null, icon: 'add', add: 1 }
|
||||
];
|
||||
|
||||
/* (4) Initialize vue-router channel navigation */
|
||||
|
|
@ -33,17 +33,17 @@ gs.get.channel.nav = function(channel_id=null){
|
|||
var channel = this.get(channel_id);
|
||||
|
||||
/* (3) Abort if same channel */
|
||||
if( gs.get.router.history.current.params.label === channel.label )
|
||||
if( gs.get.router.history.current.params.link === channel.link )
|
||||
return false;
|
||||
|
||||
/* (3) Navigate vue-router */
|
||||
gs.get.router.push(`/channel/${channel.label}`);
|
||||
gs.get.router.push(`/channel/${channel.link}`);
|
||||
|
||||
/* (4) Update active element */
|
||||
this.current = channel.id;
|
||||
|
||||
/* (5) Log channel */
|
||||
console.log(`[channel.current] ${channel.label}`);
|
||||
console.log(`[channel.current] ${channel.link} (${channel.label})`);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
|
@ -92,9 +92,9 @@ gs.get.channel.get = function(channel_id=null){
|
|||
|
||||
if( channel_id === null ){
|
||||
|
||||
/* (1) Get @active channel
|
||||
/* (1) Get @current channel
|
||||
---------------------------------------------------------*/
|
||||
/* (1) If @active is set */
|
||||
/* (1) If @current is set */
|
||||
if( !isNaN(this.current) ){
|
||||
|
||||
/* (2) Return matching id in list */
|
||||
|
|
@ -110,18 +110,18 @@ gs.get.channel.get = function(channel_id=null){
|
|||
|
||||
/* (2) Get from URL
|
||||
---------------------------------------------------------*/
|
||||
/* (1) If vue-router has @label param */
|
||||
if( gs.get.router.history.current.params.label ){
|
||||
/* (1) If vue-router has @link param */
|
||||
if( gs.get.router.history.current.params.link ){
|
||||
|
||||
/* (2) Extract @label */
|
||||
let label = gs.get.router.history.current.params.label;
|
||||
/* (2) Extract @link */
|
||||
let link = gs.get.router.history.current.params.link;
|
||||
|
||||
/* (3) Return matching label in list */
|
||||
/* (3) Return matching link in list */
|
||||
for( let c of this.list ){
|
||||
|
||||
if( c.label === label ){
|
||||
if( c.link === link ){
|
||||
|
||||
this.current = c.id; // set @active
|
||||
this.current = c.id; // set @current
|
||||
return c; // exit point
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
[
|
||||
{
|
||||
"id": 0,
|
||||
"link": "channel-1",
|
||||
"label": "channel 1"
|
||||
}
|
||||
]
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
export default{ 0: [
|
||||
|
||||
{
|
||||
path: '/channel/:label',
|
||||
path: '/channel/:link',
|
||||
component: require('./vue/channel.vue').default
|
||||
}, {
|
||||
path: '*',
|
||||
|
|
|
|||
|
|
@ -17,14 +17,18 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
width: calc( 100% - 2*1em );
|
||||
height: calc( #{$header-height} - #{$header-height/2} );
|
||||
|
||||
border-bottom: #{$bb-height} solid darken($dialog-header-bg, 5%);
|
||||
box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($dialog-header-bg, 2%);
|
||||
|
||||
z-index: 200;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
padding: #{$header-height/4} 1em;
|
||||
|
||||
}
|
||||
|
||||
/* (2) Container BODY */
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class='dialog'>
|
||||
|
||||
<div class='header'>
|
||||
<div class='title'></div>
|
||||
<div class='title'>{{ gs.channel.get().id < 0 ? '' : gs.channel.get().label }}</div>
|
||||
</div>
|
||||
|
||||
<div class='body'>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
|
||||
<!-- Channel List -->
|
||||
<span v-for='c in gs.channel.list'
|
||||
@click='gs.channel.nav(c.id);'
|
||||
@click='c.link && gs.channel.nav(c.id);'
|
||||
:class='c.id == gs.channel.current ? `channel active` : `channel`'
|
||||
:data-sub='c.sub'
|
||||
:data-special='c.id == -1?1:0'
|
||||
:data-add='c.add'
|
||||
:data-icon='c.icon'
|
||||
:title='c.id<0?``:c.label'
|
||||
:title='c.label'
|
||||
></span>
|
||||
|
||||
<!-- Last elements -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue