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

[PE] implemented Mixtbar

Browse source
This commit is contained in:
Maxim Kadushkin 2017-04-22 16:11:04 +03:00
parent 096060a55f
commit 42d9631455
3 changed files with 40 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/common/main/lib/util/utils.js
View file

@ -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) {

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

@ -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);

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

@ -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 = '<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;