diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
new file mode 100644
index 000000000..59120a311
--- /dev/null
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -0,0 +1,295 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ * Mixtbar.js
+ *
+ * Combined component for toolbar's and header's elements
+ *
+ *
+ * Created by Maxim.Kadushkin on 4/11/2017.
+ * Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+ 'backbone',
+], function (Backbone) {
+ 'use strict';
+
+ Common.UI.Mixtbar = Common.UI.BaseView.extend((function () {
+ var $boxTabs;
+ var $scrollL;
+ var optsFold = {timeout: 2000};
+ var config = {};
+
+ var onScrollTabs = function(opts, e) {
+ var sv = $boxTabs.scrollLeft();
+ if ( sv || opts == 'right' ) {
+ $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
+ }
+ }
+
+ function onTabDblclick(e) {
+ this.fireEvent('change:compact', [$(e.target).data('tab')]);
+ }
+
+ function onShowFullviewPanel(state) {
+ this.collapseToolbar();
+
+ if ( state )
+ optsFold.$bar.addClass('cover'); else
+ optsFold.$bar.removeClass('cover');
+ }
+
+ function onClickDocument(e) {
+ if ( this.isFolded ) {
+ if ( $(e.target).parents('.toolbar').length ){
+ } else {
+ this.collapseToolbar();
+ }
+ }
+ }
+
+ return {
+ $tabs: undefined,
+ $panels: undefined,
+ $marker: undefined,
+ lastTab: undefined,
+ isFolded: false,
+
+ initialize : function(options) {
+ Common.UI.BaseView.prototype.initialize.call(this, options);
+
+ this.$layout = $(options.template({
+ tabs: options.tabs
+ }));
+
+ config.tabs = options.tabs;
+ $(document.body).on('click', onClickDocument.bind(this));
+ },
+
+ afterRender: function() {
+ var me = this;
+
+ $boxTabs = me.$('.tabs > ul');
+ me.$tabs = $boxTabs.find('> li');
+ me.$panels = me.$('.box-panels > .panel');
+ me.$marker = me.$('.tabs .marker');
+ var $scrollR = me.$('.tabs .scroll.right');
+ $scrollL = me.$('.tabs .scroll.left');
+
+ $scrollL.on('click', onScrollTabs.bind(this, 'left'));
+ $scrollR.on('click', onScrollTabs.bind(this, 'right'));
+
+ me.$tabs.on('dblclick', onTabDblclick.bind(this));
+ },
+
+ isTabActive: function(tag) {
+ var t = this.$tabs.filter('.active').find('> a');
+ return t.length && t.data('tab') == tag;
+ },
+
+ setFolded: function(value) {
+ this.isFolded = value;
+
+ var me = this;
+ if ( this.isFolded ) {
+ if (!optsFold.$bar) optsFold.$bar = me.$el.find('.toolbar');
+ if (!optsFold.$box) optsFold.$box = me.$el.find('.box-controls');
+
+ optsFold.$bar.addClass('folded');
+ optsFold.$box.on({
+ mouseleave: function (e) {
+ optsFold.timer = setTimeout(me.collapseToolbar, optsFold.timeout);
+ },
+ mouseenter: function (e) {
+ clearTimeout(optsFold.timer);
+ }
+ });
+
+ // $(document.body).on('focus', 'input, textarea', function(e) {
+ // });
+ //
+ // $(document.body).on('blur', 'input, textarea', function(e) {
+ // });
+ //
+ // Common.NotificationCenter.on({
+ // 'modal:show': function(){
+ // },
+ // 'modal:close': function(dlg) {
+ // },
+ // 'modal:hide': function(dlg) {
+ // },
+ // 'dataview:focus': function(e){
+ // },
+ // 'dataview:blur': function(e){
+ // },
+ // 'menu:show': function(e){
+ // },
+ // 'menu:hide': function(e){
+ // },
+ // 'edit:complete': _.bind(me.onEditComplete, me)
+ // });
+
+ } else {
+ clearTimeout(optsFold.timer);
+ optsFold.$bar.removeClass('folded');
+ optsFold.$box.off();
+ }
+ },
+
+ collapseToolbar: function() {
+ optsFold.$bar.removeClass('expanded');
+ },
+
+ expandToolbar: function() {
+ clearTimeout(optsFold.timer);
+
+ optsFold.$bar.addClass('expanded');
+ optsFold.timer = setTimeout(this.collapseToolbar, optsFold.timeout);
+ },
+
+ onResize: function(e) {
+ if ( this.hasTabInvisible() ) {
+ if ( !$boxTabs.parent().hasClass('short') )
+ $boxTabs.parent().addClass('short');
+ } else
+ if ( $boxTabs.parent().hasClass('short') ) {
+ $boxTabs.parent().removeClass('short');
+ }
+ },
+
+ setTab: function (tab) {
+ if (!tab || !tab.length) {
+ if ( this.isFolded ) onShowFullviewPanel.call(this, false);
+ else tab = this.lastPanel;
+ }
+
+ if ( tab ) {
+ this.$tabs.removeClass('active');
+ this.$panels.removeClass('active');
+
+ var panel = this.$panels.filter('[data-tab=' + tab + ']');
+ if ( panel.length ) {
+ this.lastPanel = tab;
+ panel.addClass('active');
+ }
+
+ var $tp = this.$tabs.find('> a[data-tab=' + tab + ']').parent();
+ if ( $tp.length ) {
+ $tp.addClass('active');
+
+ this.$marker.width($tp.width());
+
+ if ( $scrollL.is(':visible') )
+ this.$marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
+ else this.$marker.css({left: $tp.position().left});
+ }
+
+ if ( this.isFolded ) {
+ if ( panel.length )
+ this.expandToolbar(); else
+ onShowFullviewPanel.call(this, true);
+ }
+ }
+ },
+
+ addTab: function (tab, panel, after) {
+ function _get_tab_action(index) {
+ if (!config.tabs[index])
+ return _get_tab_action(--index);
+
+ return config.tabs[index].action;
+ }
+
+ var _tabTemplate = _.template('<%= caption %>');
+
+ config.tabs[after + 1] = tab;
+ var _after_action = _get_tab_action(after);
+
+ var _elements = this.$tabs || this.$layout.find('.tabs');
+ var $target = _elements.find('a[data-tab=' + _after_action + ']');
+ if ( $target.length ) {
+ $target.parent().after( _tabTemplate(tab) );
+
+ if (panel) {
+ _elements = this.$panels || this.$layout.find('.box-panels > .panel');
+ $target = _elements.filter('[data-tab=' + _after_action + ']');
+
+ if ($target.length) {
+ $target.after(panel);
+ }
+ }
+
+ // synchronize matched elements
+ this.$tabs && (this.$tabs = $boxTabs.find('> li'));
+ this.$panels && (this.$panels = this.$el.find('.box-panels > .panel'));
+ }
+ },
+
+ isCompact: function () {
+ return this.isFolded;
+ },
+
+ hasTabInvisible: function() {
+ var _left_bound_ = $boxTabs.offset().left,
+ _right_bound_ = _left_bound_ + $boxTabs.width();
+
+ var tab = this.$tabs.first().get(0);
+ var rect = tab.getBoundingClientRect();
+
+ if ( !(rect.left < _left_bound_) ) {
+ tab = this.$tabs.last().get(0);
+ rect = tab.getBoundingClientRect();
+
+ if (!(rect.right > _right_bound_))
+ return false;
+ }
+
+ return true;
+ },
+
+ setExtra: function (place, el) {
+ if ( this.$tabs ) {
+ } else {
+ if ( place == 'right' ) {
+ this.$layout.find('.extra.right').html(el);
+ } else
+ if ( place == 'left' ) {
+ this.$layout.find('.extra.left').html(el);
+ }
+ }
+ }
+ };
+ }()));
+});
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index f34d4f1d3..0afe4a7ff 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -701,6 +701,14 @@ Common.Utils.createXhr = function () {
return xmlhttp;
}
+Common.Utils.asyncCall = function (callback, scope, args) {
+ (new Promise(function (resolve, reject) {
+ resolve();
+ })).then(function () {
+ callback.apply(scope, args);
+ });
+}
+
// Extend javascript String type
String.prototype.strongMatch = function(regExp){
if (regExp && regExp instanceof RegExp) {
diff --git a/apps/common/main/lib/view/Header.js b/apps/common/main/lib/view/Header.js
index ee3ed54e5..e05dad4ba 100644
--- a/apps/common/main/lib/view/Header.js
+++ b/apps/common/main/lib/view/Header.js
@@ -89,8 +89,8 @@ define([
'' +
'';
- var templateLeftBox = '' +
- '' +
+ var templateLeftBox = '';
function onAddUser(model, collection, opts) {
diff --git a/apps/common/main/resources/img/header/header-logo.png b/apps/common/main/resources/img/header/header-logo.png
index ba5493b30..5baf86a66 100644
Binary files a/apps/common/main/resources/img/header/header-logo.png and b/apps/common/main/resources/img/header/header-logo.png differ
diff --git a/apps/common/main/resources/img/header/header-logo@2x.png b/apps/common/main/resources/img/header/header-logo@2x.png
index c4cd01329..212d5180e 100644
Binary files a/apps/common/main/resources/img/header/header-logo@2x.png and b/apps/common/main/resources/img/header/header-logo@2x.png differ
diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less
index be78c32a1..be04a942c 100644
--- a/apps/common/main/resources/less/header.less
+++ b/apps/common/main/resources/less/header.less
@@ -77,9 +77,19 @@
height: 100%;
cursor: pointer;
- .background-ximage('@{common-image-path}/header/logo.png', '@{common-image-path}/header/logo.png', 240px);
- background-size: contain;
- background-repeat: no-repeat;
+ line-height: @height-tabs;
+ text-align: center;
+
+ img {
+ content: data-uri('@{common-image-path}/header/header-logo.png');
+
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 2),
+ only screen and (min-resolution: 2dppx),
+ only screen and (min-resolution: 192dpi) {
+ content: data-uri('@{common-image-path}/header/header-logo@2x.png');
+ }
+ }
}
.status-label {
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index b40682baa..be8289b7a 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -105,7 +105,8 @@ define([
this.addListeners({
'Toolbar': {
- 'insert:break' : this.onClickPageBreak
+ 'insert:break' : this.onClickPageBreak,
+ 'change:compact' : this.onClickChangeCompact
},
'FileMenu': {
'filemenu:hide': function () {
@@ -336,6 +337,16 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
+ onClickChangeCompact: function (from) {
+ if ( from != 'file' ) {
+ var me = this;
+ setTimeout(function () {
+ me.onChangeCompactView(null, !me.toolbar.isCompact());
+ me.toolbar.mnuitemCompactToolbar.setChecked(me.toolbar.isCompact(), true);
+ }, 0);
+ }
+ },
+
onApiFontSize: function(size) {
if (this._state.fontsize !== size) {
this.toolbar.cmbFontSize.setValue(size);
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index d7cd3d807..d1430a726 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -57,124 +57,11 @@ define([
'common/main/lib/component/ComboBoxFonts',
'common/main/lib/component/ComboDataView'
,'common/main/lib/component/SynchronizeTip'
+ ,'common/main/lib/component/Mixtbar'
], function ($, _, Backbone, template) {
'use strict';
- DE.Views.Toolbar = Backbone.View.extend(_.extend((function(){
- var $tabs, $boxTabs;
- var $panels, $marker, $scrollL;
- var lastPanel;
- var isFolded = false;
- var optsFold = {timeout: 2000};
-
- var config = {};
-
- function hasTabInvisible() {
- var _left_bound_ = $boxTabs.offset().left,
- _right_bound_ = _left_bound_ + $boxTabs.width();
-
- var tab = $tabs.first().get(0);
- var rect = tab.getBoundingClientRect();
-
- if (!(rect.left < _left_bound_)) {
- tab = $tabs.last().get(0);
- rect = tab.getBoundingClientRect();
-
- if (!(rect.right > _right_bound_))
- return false;
- }
-
- return true;
- }
-
- function isTabActive(tab) {
- var t = $tabs.filter('.active').find('> a');
- return t.length && t.data('tab') == tab;
- }
-
- function onResize(e) {
- if ( hasTabInvisible() ){
- if ( !$boxTabs.parent().hasClass('short') )
- $boxTabs.parent().addClass('short');
- } else
- if ( $boxTabs.parent().hasClass('short') ) {
- $boxTabs.parent().removeClass('short');
- }
- }
-
- function onScrollTabs(opts, e) {
- var sv = $boxTabs.scrollLeft();
- if ( sv || opts == 'right') {
- $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
- }
- }
-
- function collapseToolbar() {
- optsFold.$bar.removeClass('expanded');
- }
-
- function expandToolbar() {
- clearTimeout(optsFold.timer);
-
- optsFold.$bar.addClass('expanded');
- optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
- }
-
- function onShowCoveredPanel(state) {
- collapseToolbar();
-
- if ( state )
- optsFold.$bar.addClass('cover'); else
- optsFold.$bar.removeClass('cover');
- }
-
- function setFolded(value) {
- isFolded = value;
-
- if ( isFolded ) {
- if ( !optsFold.$bar ) optsFold.$bar = this.$el.find('.toolbar');
- if ( !optsFold.$box ) optsFold.$box = this.$el.find('.box-controls');
-
- optsFold.$bar.addClass('folded');
- optsFold.$box.on({
- mouseleave: function (e) {
- optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
- },
- mouseenter: function (e) {
- clearTimeout(optsFold.timer);
- }
- });
-
- // $(document.body).on('focus', 'input, textarea', function(e) {
- // });
- //
- // $(document.body).on('blur', 'input, textarea', function(e) {
- // });
- //
- // Common.NotificationCenter.on({
- // 'modal:show': function(){
- // },
- // 'modal:close': function(dlg) {
- // },
- // 'modal:hide': function(dlg) {
- // },
- // 'dataview:focus': function(e){
- // },
- // 'dataview:blur': function(e){
- // },
- // 'menu:show': function(e){
- // },
- // 'menu:hide': function(e){
- // },
- // 'edit:complete': _.bind(me.onEditComplete, me)
- // });
-
- } else {
- clearTimeout(optsFold.timer);
- optsFold.$bar.removeClass('folded');
- optsFold.$box.off();
- }
- }
+ DE.Views.Toolbar = Common.UI.Mixtbar.extend(_.extend((function(){
return {
el: '#toolbar',
@@ -190,12 +77,15 @@ define([
initialize: function () {
var me = this;
- config.tabs = [
- { caption: me.textTabFile, action: 'file'},
- { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
- { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
- { caption: me.textTabLayout, action: 'layout', extcls: 'canedit'} ];
- config.$dom = $(_.template(template)(config));
+ Common.UI.Mixtbar.prototype.initialize.call(this, {
+ template: _.template(template),
+ tabs: [
+ { caption: me.textTabFile, action: 'file'},
+ { caption: me.textTabHome, action: 'home', extcls: 'canedit'},
+ { caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
+ { caption: me.textTabLayout, action: 'layout', extcls: 'canedit'}
+ ]}
+ );
/**
* UI Components
@@ -1324,44 +1214,37 @@ define([
me.isCompactView = mode.isCompactView;
if ( mode.isEdit ) {
- me.$el.html(me.rendererComponents(config.$dom));
+ me.$el.html(me.rendererComponents(me.$layout));
} else {
- config.$dom.find('.canedit').hide();
- config.$dom.addClass('folded');
+ me.$layout.find('.canedit').hide();
+ me.$layout.addClass('folded');
- me.$el.html(config.$dom);
+ me.$el.html(me.$layout);
}
this.fireEvent('render:after', [this]);
+ Common.UI.Mixtbar.prototype.afterRender.call(this);
/** coauthoring begin **/
this.showSynchTip = !Common.localStorage.getBool("de-hide-synch");
this.needShowSynchTip = false;
/** coauthoring end **/
- $boxTabs = me.$el.find('.tabs > ul');
- $tabs = $boxTabs.find('> li');
- $panels = me.$el.find('.box-panels > .panel');
- $tabs.parent().on('click', '.ribtab', function (e) {
+ me.$tabs.parent().on('click', '.ribtab', function (e) {
var tab = $(e.target).data('tab');
if (tab == 'file') {
me.fireEvent('file:open');
} else
- if ( isTabActive('file') )
+ if ( me.isTabActive('file') )
me.fireEvent('file:close');
me.setTab(tab);
});
- $marker = me.$el.find('.tabs .marker');
- var $scrollR = me.$el.find('.tabs .scroll.right');
- $scrollL = me.$el.find('.tabs .scroll.left');
-
- $scrollL.on('click', onScrollTabs.bind(this, 'left'));
- $scrollR.on('click', onScrollTabs.bind(this, 'right'));
-
Common.NotificationCenter.on({
- 'window:resize': onResize
+ 'window:resize': function() {
+ Common.UI.Mixtbar.prototype.onResize.apply(me, arguments);
+ }
});
if ( me.isCompactView )
@@ -2425,94 +2308,6 @@ define([
this.api.asc_RemoveAllCustomStyles();
},
- setTab: function (tab) {
- if ( !tab || !tab.length ) {
- if ( isFolded ) onShowCoveredPanel(false);
- else tab = lastPanel;
- }
-
- if ( tab ) {
- $tabs.removeClass('active');
- $panels.removeClass('active');
-
- var panel = $panels.filter('[data-tab=' + tab + ']');
- if (panel.length) {
- lastPanel = tab;
- panel.addClass('active');
- }
-
- var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
- if ($tp.length) {
- $tp.addClass('active');
-
- $marker.width($tp.width());
-
- if ($scrollL.is(':visible'))
- $marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
- else $marker.css({left: $tp.position().left});
- }
-
- if ( isFolded ) {
- if ( panel.length )
- expandToolbar(); else
- onShowCoveredPanel(true);
- }
- }
- },
-
- addTab: function (tab, panel, after) {
- function _get_tab_action(index) {
- if ( !config.tabs[index] )
- return _get_tab_action(--index);
-
- return config.tabs[index].action;
- }
-
- var _tplTab = '<%= caption %>';
-
- config.tabs[after + 1] = tab;
- var _after_action = _get_tab_action( after );
-
- var _elements = $tabs || config.$dom.find('.tabs');
- var $target = _elements.find('a[data-tab=' + _after_action + ']');
- if ( $target.length ) {
- $target.parent().after( _.template(_tplTab)(tab) );
-
- if ( panel ) {
- _elements = $panels || config.$dom.find('.box-panels > .panel');
- $target = _elements.filter('[data-tab=' + _after_action + ']');
-
- if ( $target.length ) {
- $target.after(panel);
- }
- }
-
- // synchronize matched elements
- $tabs && ($tabs = $boxTabs.find('> li'));
- $panels && ($panels = this.$el.find('.box-panels > .panel'));
- }
- },
-
- setFolded: function (f) {
- setFolded.call(this, f);
- },
-
- setExtra: function (place, el) {
- if ( $tabs ) {
- } else {
- if ( place == 'right' ) {
- config.$dom.find('.extra.right').html(el);
- } else
- if ( place == 'left' ) {
- config.$dom.find('.extra.left').html(el);
- }
- }
- },
-
- isCompact: function () {
- return isFolded;
- },
-
textBold: 'Bold',
textItalic: 'Italic',
textUnderline: 'Underline',
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 853343d78..97ed38515 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -117,7 +117,8 @@ define([
'insert:image' : this.onInsertImageClick.bind(this),
'insert:text' : this.onInsertText.bind(this),
'insert:textart' : this.onInsertTextart.bind(this),
- 'insert:shape' : this.onInsertShape.bind(this)
+ 'insert:shape' : this.onInsertShape.bind(this),
+ 'change:compact' : this.onClickChangeCompact
},
'FileMenu': {
'filemenu:hide': function () {
@@ -323,6 +324,16 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
+ onClickChangeCompact: function (from) {
+ if ( from != 'file' ) {
+ var me = this;
+ Common.Utils.asyncCall(function () {
+ me.onChangeCompactView(null, !me.toolbar.isCompact());
+ me.toolbar.mnuitemCompactToolbar.setChecked(me.toolbar.isCompact(), true);
+ });
+ }
+ },
+
onApiFontSize: function(size) {
if (this._state.fontsize !== size) {
this.toolbar.cmbFontSize.setValue(size);
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index a0c4e63aa..cda76c556 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -54,10 +54,8 @@ define([
'common/main/lib/component/Window',
'common/main/lib/component/ComboBoxFonts',
'common/main/lib/component/ComboDataView'
-/** coauthoring begin **/
,'common/main/lib/component/SynchronizeTip'
-/** coauthoring end **/
-
+ ,'common/main/lib/component/Mixtbar'
], function (Backbone, template) {
'use strict';
@@ -119,121 +117,7 @@ define([
});
};
- PE.Views.Toolbar = Backbone.View.extend(_.extend((function(){
- var $tabs, $boxTabs;
- var $panels, $marker, $scrollL;
- var lastPanel;
- var isFolded = false;
- var optsFold = {timeout: 2000};
-
- var config = {};
-
- function hasTabInvisible() {
- var _left_bound_ = $boxTabs.offset().left,
- _right_bound_ = _left_bound_ + $boxTabs.width();
-
- var tab = $tabs.first().get(0);
- var rect = tab.getBoundingClientRect();
-
- if (!(rect.left < _left_bound_)) {
- tab = $tabs.last().get(0);
- rect = tab.getBoundingClientRect();
-
- if (!(rect.right > _right_bound_))
- return false;
- }
-
- return true;
- }
-
- function isTabActive(tab) {
- var t = $tabs.filter('.active').find('> a');
- return t.length && t.data('tab') == tab;
- }
-
- function onResize(e) {
- if ( hasTabInvisible() ){
- if ( !$boxTabs.parent().hasClass('short') )
- $boxTabs.parent().addClass('short');
- } else
- if ( $boxTabs.parent().hasClass('short') ) {
- $boxTabs.parent().removeClass('short');
- }
- }
-
- function onScrollTabs(opts, e) {
- var sv = $boxTabs.scrollLeft();
- if ( sv || opts == 'right') {
- $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
- }
- }
-
- function collapseToolbar() {
- optsFold.$bar.removeClass('expanded');
- }
-
- function expandToolbar() {
- clearTimeout(optsFold.timer);
-
- optsFold.$bar.addClass('expanded');
- optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
- }
-
- function onShowCoveredPanel(state) {
- collapseToolbar();
-
- if ( state )
- optsFold.$bar.addClass('cover'); else
- optsFold.$bar.removeClass('cover');
- }
-
- function setFolded(value) {
- isFolded = value;
-
- if ( isFolded ) {
- if ( !optsFold.$bar ) optsFold.$bar = this.$el.find('.toolbar');
- if ( !optsFold.$box ) optsFold.$box = this.$el.find('.box-controls');
-
- optsFold.$bar.addClass('folded');
- optsFold.$box.on({
- mouseleave: function (e) {
- optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
- },
- mouseenter: function (e) {
- clearTimeout(optsFold.timer);
- }
- });
-
- // $(document.body).on('focus', 'input, textarea', function(e) {
- // });
- //
- // $(document.body).on('blur', 'input, textarea', function(e) {
- // });
- //
- // Common.NotificationCenter.on({
- // 'modal:show': function(){
- // },
- // 'modal:close': function(dlg) {
- // },
- // 'modal:hide': function(dlg) {
- // },
- // 'dataview:focus': function(e){
- // },
- // 'dataview:blur': function(e){
- // },
- // 'menu:show': function(e){
- // },
- // 'menu:hide': function(e){
- // },
- // 'edit:complete': _.bind(me.onEditComplete, me)
- // });
-
- } else {
- clearTimeout(optsFold.timer);
- optsFold.$bar.removeClass('folded');
- optsFold.$box.off();
- }
- }
+ PE.Views.Toolbar = Common.UI.Mixtbar.extend(_.extend((function(){
return {
el: '#toolbar',
@@ -246,12 +130,14 @@ define([
initialize: function () {
var me = this;
- config.tabs = [
- { caption: 'File', action: 'file'},
- { caption: 'Home', action: 'home', extcls: 'canedit'},
- { caption: 'Insert', action: 'ins', extcls: 'canedit'} ];
-
- config.$layout = $(_.template(template)(config));
+ Common.UI.Mixtbar.prototype.initialize.call(this, {
+ template: _.template(template),
+ tabs: [
+ { caption: 'File', action: 'file'},
+ { caption: 'Home', action: 'home', extcls: 'canedit'},
+ { caption: 'Insert', action: 'ins', extcls: 'canedit'}
+ ]}
+ );
me.paragraphControls = [];
me.shapeControls = [];
@@ -1019,39 +905,32 @@ define([
me.isCompactView = mode.compactview;
if ( mode.isEdit ) {
- me.$el.html(me.rendererComponents(config.$layout));
+ me.$el.html(me.rendererComponents(me.$layout));
} else {
- config.$layout.find('.canedit').hide();
- config.$layout.addClass('folded');
+ me.$layout.find('.canedit').hide();
+ me.$layout.addClass('folded');
- me.$el.html(config.$layout);
+ me.$el.html(me.$layout);
}
this.fireEvent('render:after', [this]);
+ Common.UI.Mixtbar.prototype.afterRender.call(this);
- $boxTabs = me.$el.find('.tabs > ul');
- $tabs = $boxTabs.find('> li');
- $panels = me.$el.find('.box-panels > .panel');
- $tabs.parent().on('click', '.ribtab', function (e) {
+ me.$tabs.parent().on('click', '.ribtab', function (e) {
var tab = $(e.target).data('tab');
if (tab == 'file') {
me.fireEvent('file:open');
} else
- if ( isTabActive('file') )
+ if ( me.isTabActive('file') )
me.fireEvent('file:close');
me.setTab(tab);
});
- $marker = me.$el.find('.tabs .marker');
- var $scrollR = me.$el.find('.tabs .scroll.right');
- $scrollL = me.$el.find('.tabs .scroll.left');
-
- $scrollL.on('click', onScrollTabs.bind(this, 'left'));
- $scrollR.on('click', onScrollTabs.bind(this, 'right'));
-
Common.NotificationCenter.on({
- 'window:resize': onResize
+ 'window:resize': function() {
+ Common.UI.Mixtbar.prototype.onResize.apply(me, arguments);
+ }
});
if ( me.isCompactView )
@@ -1743,94 +1622,6 @@ define([
}
},
- setTab: function (tab) {
- if ( !tab || !tab.length ) {
- if ( isFolded ) onShowCoveredPanel(false);
- else tab = lastPanel;
- }
-
- if ( tab ) {
- $tabs.removeClass('active');
- $panels.removeClass('active');
-
- var panel = $panels.filter('[data-tab=' + tab + ']');
- if (panel.length) {
- lastPanel = tab;
- panel.addClass('active');
- }
-
- var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
- if ($tp.length) {
- $tp.addClass('active');
-
- $marker.width($tp.width());
-
- if ($scrollL.is(':visible'))
- $marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
- else $marker.css({left: $tp.position().left});
- }
-
- if ( isFolded ) {
- if ( panel.length )
- expandToolbar(); else
- onShowCoveredPanel(true);
- }
- }
- },
-
- addTab: function (tab, panel, after) {
- function _get_tab_action(index) {
- if ( !config.tabs[index] )
- return _get_tab_action(--index);
-
- return config.tabs[index].action;
- }
-
- var _tplTab = '<%= caption %>';
-
- config.tabs[after + 1] = tab;
- var _after_action = _get_tab_action( after );
-
- var _elements = $tabs || config.$layout.find('.tabs');
- var $target = _elements.find('a[data-tab=' + _after_action + ']');
- if ( $target.length ) {
- $target.parent().after( _.template(_tplTab)(tab) );
-
- if ( panel ) {
- _elements = $panels || config.$layout.find('.box-panels > .panel');
- $target = _elements.filter('[data-tab=' + _after_action + ']');
-
- if ( $target.length ) {
- $target.after(panel);
- }
- }
-
- // synchronize matched elements
- $tabs && ($tabs = $boxTabs.find('> li'));
- $panels && ($panels = this.$el.find('.box-panels > .panel'));
- }
- },
-
- setFolded: function (f) {
- setFolded.call(this, f);
- },
-
- setExtra: function (place, el) {
- if ( $tabs ) {
- } else {
- if ( place == 'right' ) {
- config.$layout.find('.extra.right').html(el);
- } else
- if ( place == 'left' ) {
- config.$layout.find('.extra.left').html(el);
- }
- }
- },
-
- isCompact: function () {
- return isFolded;
- },
-
updateTextartMenu: function (collection) {
var me = this;