Merge remote-tracking branch 'origin/feature/new-toolbar' into feature/new-toolbar
This commit is contained in:
Julia Radzhabova
commit
aa74d1271e
295
apps/common/main/lib/component/Mixtbar.js
Normal file
295
apps/common/main/lib/component/Mixtbar.js
Normal file
|
|
@ -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('<li class="ribtab"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>');
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}()));
|
||||
});
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ define([
|
|||
'</div>' +
|
||||
'</section>';
|
||||
|
||||
var templateLeftBox = '<section>' +
|
||||
'<div id="header-logo"></div>' +
|
||||
var templateLeftBox = '<section class="logo">' +
|
||||
'<div id="header-logo"><img></div>' +
|
||||
'</section>';
|
||||
|
||||
function onAddUser(model, collection, opts) {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 747 B After Width: | Height: | Size: 864 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 = '<li class="ribtab"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>';
|
||||
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 = '<li class="ribtab"><a href="#" data-tab="<%= action %>" data-title="<%= caption %>"><%= caption %></a></li>';
|
||||
|
||||
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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue