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) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, 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({ this.$layout = $(options.template({
tabs: options.tabs tabsmarkup: _.template(_template_tabs)({items: options.tabs})
})); }));
config.tabs = options.tabs; config.tabs = options.tabs;
@ -120,7 +135,7 @@ define([
return t.length && t.data('tab') == tag; return t.length && t.data('tab') == tag;
}, },
setFolded: function(value, defNum) { setFolded: function(value, deftab) {
this.isFolded = value; this.isFolded = value;
var me = this; var me = this;
@ -178,9 +193,8 @@ define([
if ( active_panel.length ) { if ( active_panel.length ) {
var tab = active_panel.data('tab'); var tab = active_panel.data('tab');
me.$tabs.find('> a[data-tab=' + tab + ']').parent().toggleClass('active', true); me.$tabs.find('> a[data-tab=' + tab + ']').parent().toggleClass('active', true);
} else if (defNum!==undefined && defNum<me.$tabs.length) { } else {
var t = $(me.$tabs[defNum]).find('> a'); me.setTab(deftab);
t.length && me.setTab(t.data('tab'));
} }
} }
}, },
@ -214,28 +228,40 @@ define([
}, },
onTabClick: function (e) { onTabClick: function (e) {
var _is_active = $(e.currentTarget).hasClass('active'); var me = this;
if ( _is_active ) {
if ( this.isFolded ) { var $target = $(e.currentTarget);
// this.collapse(); 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 { } else {
var tab = $(e.target).data('tab'); if ( !$target.hasClass('active') && !islone ) {
this.setTab(tab); me.setTab(tab);
}
} }
}, },
setTab: function (tab) { setTab: function (tab) {
var me = this;
if ( !tab ) { if ( !tab ) {
onShowFullviewPanel.call(this, false); // onShowFullviewPanel.call(this, false);
if ( this.isFolded ) { this.collapse(); } if ( this.isFolded ) { this.collapse(); }
else tab = this.lastPanel; else tab = this.lastPanel;
} }
if ( tab ) { if ( tab ) {
this.$tabs.removeClass('active'); me.$tabs.removeClass('active');
this.$panels.removeClass('active'); me.$panels.removeClass('active');
var panel = this.$panels.filter('[data-tab=' + tab + ']'); var panel = this.$panels.filter('[data-tab=' + tab + ']');
if ( panel.length ) { if ( panel.length ) {
@ -244,10 +270,10 @@ define([
} }
if ( panel.length ) { if ( panel.length ) {
if ( this.isFolded ) this.expand(); if ( me.isFolded ) me.expand();
} else { } else {
onShowFullviewPanel.call(this, true); // onShowFullviewPanel.call(this, true);
if ( this.isFolded ) this.collapse(); if ( me.isFolded ) me.collapse();
} }
var $tp = this.$tabs.find('> a[data-tab=' + tab + ']').parent(); 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) { 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]); this.toolbar.fireEvent('view:compact', [this, compact]);
Common.localStorage.setBool('de-compact-toolbar', compact); Common.localStorage.setBool('de-compact-toolbar', compact);
@ -2741,6 +2741,7 @@ define([
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
me.appOptions = config;
if ( config.canCoAuthoring && config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
this.btnsComment = createButtonSet(); this.btnsComment = createButtonSet();
@ -2791,7 +2792,11 @@ define([
}, },
onFileMenu: function (opts) { 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.', 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="toolbar">
<div class="box-tabs"> <div class="box-tabs">
<div class="extra left"></div> <div class="extra left"></div>
<section class="tabs"> <%= tabsmarkup %>
<a class="scroll left"> <div class="extra right"></div>
<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>
</div> </div>
<section class="box-controls"> <section class="box-controls">
<section class="panel static"> <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, { Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template), template: _.template(template),
tabs: [ 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.textTabHome, action: 'home', extcls: 'canedit'},
{caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}, {caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
{caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}, {caption: me.textTabLayout, action: 'layout', extcls: 'canedit'},
@ -1147,7 +1147,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, { Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template_view), template: _.template(template_view),
tabs: [ tabs: [
{caption: me.textTabFile, action: 'file', extcls: ''} {caption: me.textTabFile, action: 'file', haspanel: false}
] ]
} }
); );
@ -1160,7 +1160,7 @@ define([
compactview = true; compactview = true;
if (!compactview) { if (!compactview) {
me.setFolded(false, 1); me.setFolded(false);
me.setTab('plugins'); me.setTab('plugins');
me.fireEvent('view:compact', [me, compactview]); me.fireEvent('view:compact', [me, compactview]);
Common.NotificationCenter.trigger('layout:changed', 'toolbar'); Common.NotificationCenter.trigger('layout:changed', 'toolbar');
@ -1226,19 +1226,20 @@ define([
}, },
onTabClick: function (e) { onTabClick: function (e) {
var tab = $(e.target).data('tab'), var me = this,
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); 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')) if ( me.isTabActive('home'))
me.fireEvent('home:open'); me.fireEvent('home:open');
}, },

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

@ -354,7 +354,7 @@ define([
}, },
onChangeCompactView: function(view, compact) { 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]); this.toolbar.fireEvent('view:compact', [this.toolbar, compact]);
Common.localStorage.setBool('pe-compact-toolbar', compact); Common.localStorage.setBool('pe-compact-toolbar', compact);
@ -2029,6 +2029,7 @@ define([
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
me.appOptions = config;
this.btnsComment = []; this.btnsComment = [];
if ( config.canCoAuthoring && config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
@ -2064,7 +2065,11 @@ define([
}, },
onFileMenu: function (opts) { 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.', textEmptyImgUrl : 'You need to specify image URL.',

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

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

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

@ -1458,7 +1458,7 @@ define([
}, },
onChangeViewMode: function(item, compact) { 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]); this.toolbar.fireEvent('view:compact', [this, compact]);
Common.localStorage.setBool('sse-compact-toolbar', compact); Common.localStorage.setBool('sse-compact-toolbar', compact);
@ -2994,6 +2994,7 @@ define([
onAppReady: function (config) { onAppReady: function (config) {
var me = this; var me = this;
me.appOptions = config;
this.btnsComment = []; this.btnsComment = [];
if ( config.canCoAuthoring && config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
@ -3034,7 +3035,11 @@ define([
}, },
onFileMenu: function (opts) { 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.', 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="toolbar">
<section class="box-tabs"> <section class="box-tabs">
<div class="extra left"></div> <div class="extra left"></div>
<section class="tabs"> <%= tabsmarkup %>
<a href="#" class="scroll left"> <div class="extra right"></div>
<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>
</section> </section>
<section class="box-controls"> <section class="box-controls">
<section class="panel static"> <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, { Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template), template: _.template(template),
tabs: [ 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.textTabHome, action: 'home', extcls: 'canedit'},
{ caption: me.textTabInsert, action: 'ins', extcls: 'canedit'} { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
]} ]}
@ -1206,7 +1206,7 @@ define([
Common.UI.Mixtbar.prototype.initialize.call(this, { Common.UI.Mixtbar.prototype.initialize.call(this, {
template: _.template(template_view), template: _.template(template_view),
tabs: [ tabs: [
{caption: me.textTabFile, action: 'file', extcls: ''} {caption: me.textTabFile, action: 'file', haspanel:false}
] ]
} }
); );
@ -1309,18 +1309,19 @@ define([
}, },
onTabClick: function (e) { onTabClick: function (e) {
var tab = $(e.target).data('tab'), var me = this,
me = this; tab = $(e.currentTarget).find('> a[data-tab]').data('tab'),
is_file_active = me.isTabActive('file');
if ( !me.isTabActive(tab) ) { Common.UI.Mixtbar.prototype.onTabClick.apply(me, arguments);
if ( tab == 'file' ) {
me.fireEvent('file:open'); if ( is_file_active ) {
} else me.fireEvent('file:close');
if ( me.isTabActive('file') ) } else
me.fireEvent('file:close'); if ( tab == 'file' ) {
me.fireEvent('file:open');
me.setTab(tab);
} }
Common.UI.Mixtbar.prototype.onTabClick.apply(this, arguments);
}, },
rendererComponents: function(html) { rendererComponents: function(html) {