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/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 8c0cbc028..c836266c9 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 = []; @@ -1072,39 +958,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 ) @@ -1744,94 +1623,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;