Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[All] refactoring tabs redering and selection

Browse source
This commit is contained in:
Maxim Kadushkin 2018-05-16 17:41:47 +03:00
parent 0f788bd32f
commit 345e19e135
10 changed files with 110 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
apps/common/main/lib/component/Mixtbar.js
View file

@ -86,8 +86,23 @@ define([
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
var _template_tabs =
'<section class="tabs">' +
'<a class="scroll left"><i class="icon">&lt;</i></a>' +
'<ul>' +
'<% for(var i in items) { %>' +
'<li class="ribtab' +
'<% if (items[i].haspanel===false) print(" x-lone") %>' +
'<% if (items[i].extcls) print(\' \' + items[i].extcls) %>">' +
'<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>"><%= items[i].caption %></a>' +
'</li>' +
'<% } %>' +
'</ul>' +
'<a class="scroll right"><i class="icon">&gt;</i></a>' +
'</section>';
this.$layout = $(options.template({
tabs: options.tabs
tabsmarkup: _.template(_template_tabs)({items: options.tabs})
}));
config.tabs = options.tabs;
@ -120,7 +135,7 @@ define([
return t.length && t.data('tab') == tag;
},
setFolded: function(value, defNum) {
setFolded: function(value, deftab) {
this.isFolded = value;
var me = this;
@ -178,9 +193,8 @@ define([
if ( active_panel.length ) {
var tab = active_panel.data('tab');
me.$tabs.find('> a[data-tab=' + tab + ']').parent().toggleClass('active', true);
} else if (defNum!==undefined && defNum<me.$tabs.length) {
var t = $(me.$tabs[defNum]).find('> a');
t.length && me.setTab(t.data('tab'));
} else {
me.setTab(deftab);
}
}
},
@ -214,28 +228,40 @@ define([
},
onTabClick: function (e) {
var _is_active = $(e.currentTarget).hasClass('active');
if ( _is_active ) {
if ( this.isFolded ) {
// this.collapse();
var me = this;
var $target = $(e.currentTarget);
var tab = $target.find('> a[data-tab]').data('tab');
var islone = $target.hasClass('x-lone');
if ( me.isFolded ) {
if ( $target.hasClass('x-lone') ) {
me.collapse();
// me.fireEvent('')
} else
if ( $target.hasClass('active') ) {
me.collapse();
} else {
me.setTab(tab);
}
} else {
var tab = $(e.target).data('tab');
this.setTab(tab);
if ( !$target.hasClass('active') && !islone ) {
me.setTab(tab);
}
}
},
setTab: function (tab) {
var me = this;
if ( !tab ) {
onShowFullviewPanel.call(this, false);
// onShowFullviewPanel.call(this, false);
if ( this.isFolded ) { this.collapse(); }
else tab = this.lastPanel;
}
if ( tab ) {
this.$tabs.removeClass('active');
this.$panels.removeClass('active');
me.$tabs.removeClass('active');
me.$panels.removeClass('active');
var panel = this.$panels.filter('[data-tab=' + tab + ']');
if ( panel.length ) {
@ -244,10 +270,10 @@ define([
}
if ( panel.length ) {
if ( this.isFolded ) this.expand();
if ( me.isFolded ) me.expand();
} else {
onShowFullviewPanel.call(this, true);
if ( this.isFolded ) this.collapse();
// onShowFullviewPanel.call(this, true);
if ( me.isFolded ) me.collapse();
}
var $tp = this.$tabs.find('> a[data-tab=' + tab + ']').parent();

9
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -364,7 +364,7 @@ define([
},
onChangeCompactView: function(view, compact) {
this.toolbar.setFolded(compact, 1);
this.toolbar.setFolded(compact, this.appOptions.isEdit ? 'home' : 'plugins');
this.toolbar.fireEvent('view:compact', [this, compact]);
Common.localStorage.setBool('de-compact-toolbar', compact);
@ -2741,6 +2741,7 @@ define([
onAppReady: function (config) {
var me = this;
me.appOptions = config;
if ( config.canCoAuthoring && config.canComments ) {
this.btnsComment = createButtonSet();
@ -2791,7 +2792,11 @@ define([
},
onFileMenu: function (opts) {
this.toolbar.setTab( opts == 'show' ? 'file' : undefined );
if ( opts == 'show' ) {}
else {
if ( this.toolbar.isTabActive('file') )
this.toolbar.setTab();
}
},
textEmptyImgUrl : 'You need to specify image URL.',

19
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -1,23 +1,8 @@
<div class="toolbar">
<div class="box-tabs">
<div class="extra left"></div>
<section class="tabs">
<a class="scroll left">
<i class="icon">&lt;</i>
</a>
<ul>
<% for(var i in tabs) { %>
<li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
<a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li>
<% } %>
</ul>
<a class="scroll right">
<i class="icon">&gt;</i>
</a>
</section>
<div class="extra right">
</div>
<%= tabsmarkup %>
<div class="extra right"></div>
</div>
<section class="box-controls">
<section class="panel static">

27
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -109,7 +109,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template),
tabs: [
{caption: me.textTabFile, action: 'file', extcls: 'canedit'},
{caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
{caption: me.textTabHome, action: 'home', extcls: 'canedit'},
{caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
{caption: me.textTabLayout, action: 'layout', extcls: 'canedit'},
@ -1147,7 +1147,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template_view),
tabs: [
{caption: me.textTabFile, action: 'file', extcls: ''}
{caption: me.textTabFile, action: 'file', haspanel: false}
]
}
);
@ -1160,7 +1160,7 @@ define([
compactview = true;
if (!compactview) {
me.setFolded(false, 1);
me.setFolded(false);
me.setTab('plugins');
me.fireEvent('view:compact', [me, compactview]);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
@ -1226,19 +1226,20 @@ define([
},
onTabClick: function (e) {
var tab = $(e.target).data('tab'),
me = this;
if ( !me.isTabActive(tab) ) {
if ( tab == 'file' ) {
me.fireEvent('file:open');
} else
if ( me.isTabActive('file') )
me.fireEvent('file:close');
}
var me = this,
tab = $(e.currentTarget).find('> a[data-tab]').data('tab'),
is_file_active = me.isTabActive('file');
Common.UI.Mixtbar.prototype.onTabClick.apply(me, arguments);
if ( is_file_active ) {
me.fireEvent('file:close');
} else
if ( tab == 'file' ) {
me.fireEvent('file:open');
me.setTab(tab);
}
if ( me.isTabActive('home'))
me.fireEvent('home:open');
},

9
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -354,7 +354,7 @@ define([
},
onChangeCompactView: function(view, compact) {
this.toolbar.setFolded(compact, 1);
this.toolbar.setFolded(compact, this.appOptions.isEdit ? 'home' : 'plugins');
this.toolbar.fireEvent('view:compact', [this.toolbar, compact]);
Common.localStorage.setBool('pe-compact-toolbar', compact);
@ -2029,6 +2029,7 @@ define([
onAppReady: function (config) {
var me = this;
me.appOptions = config;
this.btnsComment = [];
if ( config.canCoAuthoring && config.canComments ) {
@ -2064,7 +2065,11 @@ define([
},
onFileMenu: function (opts) {
this.toolbar.setTab( opts == 'show' ? 'file' : undefined );
if ( opts == 'show' ) {}
else {
if ( this.toolbar.isTabActive('file') )
this.toolbar.setTab();
}
},
textEmptyImgUrl : 'You need to specify image URL.',

16
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -1,21 +1,7 @@
<div class="toolbar">
<section class="box-tabs">
<div class="extra left"></div>
<section class="tabs">
<a class="scroll left">
<i class="icon">&lt;</i>
</a>
<ul>
<% for(var i in tabs) { %>
<li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
<a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li>
<% } %>
</ul>
<a class="scroll right">
<i class="icon">&gt;</i>
</a>
</section>
<%= tabsmarkup %>
<div class="extra right"></div>
</section>
<section class="box-controls">

27
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -125,7 +125,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template),
tabs: [
{caption: me.textTabFile, action: 'file', extcls: 'canedit'},
{caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
{caption: me.textTabHome, action: 'home', extcls: 'canedit'},
{caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
]
@ -791,7 +791,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template_view),
tabs: [
{caption: me.textTabFile, action: 'file', extcls: ''}
{caption: me.textTabFile, action: 'file', haspanel:false}
]
}
);
@ -804,7 +804,7 @@ define([
compactview = true;
if (!compactview) {
me.setFolded(false, 1);
me.setFolded(false);
me.setTab('plugins');
me.fireEvent('view:compact', [me, compactview]);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
@ -894,18 +894,19 @@ define([
},
onTabClick: function (e) {
var tab = $(e.target).data('tab'),
me = this;
var me = this,
tab = $(e.currentTarget).find('> a[data-tab]').data('tab'),
is_file_active = me.isTabActive('file');
if ( !me.isTabActive(tab) ) {
if ( tab == 'file' ) {
me.fireEvent('file:open');
} else
if ( me.isTabActive('file') )
me.fireEvent('file:close');
Common.UI.Mixtbar.prototype.onTabClick.apply(me, arguments);
if ( is_file_active ) {
me.fireEvent('file:close');
} else
if ( tab == 'file' ) {
me.fireEvent('file:open');
me.setTab(tab);
}
Common.UI.Mixtbar.prototype.onTabClick.apply(this, arguments);
},
rendererComponents: function (html) {

9
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -1458,7 +1458,7 @@ define([
},
onChangeViewMode: function(item, compact) {
this.toolbar.setFolded(compact, 1);
this.toolbar.setFolded(compact, this.appOptions.isEdit ? 'home' : 'plugins');
this.toolbar.fireEvent('view:compact', [this, compact]);
Common.localStorage.setBool('sse-compact-toolbar', compact);
@ -2994,6 +2994,7 @@ define([
onAppReady: function (config) {
var me = this;
me.appOptions = config;
this.btnsComment = [];
if ( config.canCoAuthoring && config.canComments ) {
@ -3034,7 +3035,11 @@ define([
},
onFileMenu: function (opts) {
this.toolbar.setTab( opts == 'show' ? 'file' : undefined );
if ( opts == 'show' ) {}
else {
if ( this.toolbar.isTabActive('file') )
this.toolbar.setTab();
}
},
textEmptyImgUrl : 'You need to specify image URL.',

19
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -1,23 +1,8 @@
<section class="toolbar">
<section class="box-tabs">
<div class="extra left"></div>
<section class="tabs">
<a href="#" class="scroll left">
<i class="icon">&lt;</i>
</a>
<ul>
<% for(var i in tabs) { %>
<li class="ribtab<% if (tabs[i].extcls) print(' ' + tabs[i].extcls) %>">
<a data-tab="<%= tabs[i].action %>" data-title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li>
<% } %>
</ul>
<a href="#" class="scroll right">
<i class="icon">&gt;</i>
</a>
</section>
<div class="extra right">
</div>
<%= tabsmarkup %>
<div class="extra right"></div>
</section>
<section class="box-controls">
<section class="panel static">

25
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -336,7 +336,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template),
tabs: [
{ caption: me.textTabFile, action: 'file', extcls: 'canedit'},
{ caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
{ caption: me.textTabHome, action: 'home', extcls: 'canedit'},
{ caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
]}
@ -1206,7 +1206,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template_view),
tabs: [
{caption: me.textTabFile, action: 'file', extcls: ''}
{caption: me.textTabFile, action: 'file', haspanel:false}
]
}
);
@ -1309,18 +1309,19 @@ define([
},
onTabClick: function (e) {
var tab = $(e.target).data('tab'),
me = this;
var me = this,
tab = $(e.currentTarget).find('> a[data-tab]').data('tab'),
is_file_active = me.isTabActive('file');
if ( !me.isTabActive(tab) ) {
if ( tab == 'file' ) {
me.fireEvent('file:open');
} else
if ( me.isTabActive('file') )
me.fireEvent('file:close');
Common.UI.Mixtbar.prototype.onTabClick.apply(me, arguments);
if ( is_file_active ) {
me.fireEvent('file:close');
} else
if ( tab == 'file' ) {
me.fireEvent('file:open');
me.setTab(tab);
}
Common.UI.Mixtbar.prototype.onTabClick.apply(this, arguments);
},
rendererComponents: function(html) {