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

[DE] Refactoring DataViewSimple. Optimize equation loading.

Browse source
This commit is contained in:
Julia Radzhabova 2019-08-15 15:54:53 +03:00
parent 4a59da29c2
commit faecea9e11
2 changed files with 48 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/common/main/lib/component/DataView.js
View file

@ -768,13 +768,10 @@ define([
Common.UI.DataViewSimple = Common.UI.BaseView.extend({ Common.UI.DataViewSimple = Common.UI.BaseView.extend({
options : { options : {
multiSelect: false,
handleSelect: true, handleSelect: true,
enableKeyEvents: true, enableKeyEvents: true,
keyMoveDirection: 'both', // 'vertical', 'horizontal' keyMoveDirection: 'both', // 'vertical', 'horizontal'
restoreHeight: 0, restoreHeight: 0,
emptyText: '',
allowScrollbar: true,
scrollAlwaysVisible: false, scrollAlwaysVisible: false,
useBSKeydown: false useBSKeydown: false
}, },
@ -800,8 +797,6 @@ define([
me.enableKeyEvents= me.options.enableKeyEvents; me.enableKeyEvents= me.options.enableKeyEvents;
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
me.style = me.options.style || ''; me.style = me.options.style || '';
me.emptyText = me.options.emptyText || '';
me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false; me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
if (me.parentMenu) if (me.parentMenu)
me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0); me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
@ -819,7 +814,6 @@ define([
render: function (parentEl) { render: function (parentEl) {
var me = this; var me = this;
this.trigger('render:before', this); this.trigger('render:before', this);
if (parentEl) { if (parentEl) {
this.setElement(parentEl, false); this.setElement(parentEl, false);
this.cmpEl = $(this.template({ this.cmpEl = $(this.template({
@ -867,7 +861,7 @@ define([
this.attachKeyEvents(); this.attachKeyEvents();
this.cmpEl.on( "click", "div.item", _.bind(me.onClickItem, me)); this.cmpEl.on( "click", "div.item", _.bind(me.onClickItem, me));
} }
if (_.isUndefined(this.scroller) && this.allowScrollbar) { if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({ this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.inner').addBack().filter('.inner'), el: $(this.el).find('.inner').addBack().filter('.inner'),
useKeyboard: this.enableKeyEvents && !this.handleSelect, useKeyboard: this.enableKeyEvents && !this.handleSelect,
@ -949,7 +943,7 @@ define([
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>', '<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<% }) %>' '<% }) %>'
].join('')); ].join(''));
this.cmpEl && this.cmpEl.html(template({ this.cmpEl && this.cmpEl.find('.inner').html(template({
items: this.store.toJSON(), items: this.store.toJSON(),
itemTemplate: this.itemTemplate, itemTemplate: this.itemTemplate,
style : this.style style : this.style
@ -960,7 +954,6 @@ define([
delete this.scroller; delete this.scroller;
} }
if (this.allowScrollbar) {
this.scroller = new Common.UI.Scroller({ this.scroller = new Common.UI.Scroller({
el: $(this.el).find('.inner').addBack().filter('.inner'), el: $(this.el).find('.inner').addBack().filter('.inner'),
useKeyboard: this.enableKeyEvents && !this.handleSelect, useKeyboard: this.enableKeyEvents && !this.handleSelect,
@ -968,11 +961,9 @@ define([
wheelSpeed: 10, wheelSpeed: 10,
alwaysVisibleY: this.scrollAlwaysVisible alwaysVisibleY: this.scrollAlwaysVisible
}); });
}
if (this.parentMenu && this.store.length>0) if (!this.parentMenu && this.store.length>0)
this.onAfterShowMenu(); this.onAfterShowMenu();
this.attachKeyEvents();
this._layoutParams = undefined; this._layoutParams = undefined;
}, },
@ -1033,7 +1024,7 @@ define([
div_first = this.dataViewItems[0].el, div_first = this.dataViewItems[0].el,
div_first_top = (div_first.length>0) ? div_first[0].offsetTop : 0; div_first_top = (div_first.length>0) ? div_first[0].offsetTop : 0;
if (div_top < inner_top + div_first_top || div_top+div.outerHeight() > inner_top + innerEl.height()) { if (div_top < inner_top + div_first_top || div_top+div.outerHeight() > inner_top + innerEl.height()) {
if (this.scroller && this.allowScrollbar) { if (this.scroller) {
this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0); this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0);
} else { } else {
innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top); innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top);
@ -1159,10 +1150,10 @@ define([
if (top + menuH > docH ) { if (top + menuH > docH ) {
innerEl.css('max-height', (docH - top - paddings - margins) + 'px'); innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
if (this.allowScrollbar) this.scroller.update(props); this.scroller.update(props);
} else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) { } else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px'); innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
if (this.allowScrollbar) this.scroller.update(props); this.scroller.update(props);
} }
}, },

63
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2352,54 +2352,20 @@ define([
if (!this.toolbar.btnInsertEquation.rendered || this.toolbar.btnInsertEquation.menu.items.length>0) return; if (!this.toolbar.btnInsertEquation.rendered || this.toolbar.btnInsertEquation.menu.items.length>0) return;
var me = this, equationsStore = this.getApplication().getCollection('EquationGroups'); var me = this, equationsStore = this.getApplication().getCollection('EquationGroups');
me.equationPickers = [];
me.toolbar.btnInsertEquation.menu.removeAll(); me.toolbar.btnInsertEquation.menu.removeAll();
var onShowAfter = function(menu) {
for (var i = 0; i < equationsStore.length; ++i) { for (var i = 0; i < equationsStore.length; ++i) {
var equationGroup = equationsStore.at(i);
var menuItem = new Common.UI.MenuItem({
caption: equationGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
'" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
equationGroup.get('groupHeight') + 'margin-left:5px;"></div>') }
]
})
});
me.toolbar.btnInsertEquation.menu.addItem(menuItem);
var equationPicker = new Common.UI.DataViewSimple({ var equationPicker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-equationgroup' + i), el: $('#id-toolbar-menu-equationgroup' + i),
store: equationGroup.get('groupStore'), parentMenu: menu.items[i].menu,
parentMenu: menuItem.menu, store: equationsStore.at(i).get('groupStore'),
showLast: false, scrollAlwaysVisible: true,
itemTemplate: _.template('<div class="item-equation" '+ itemTemplate: _.template('<div class="item-equation" '+
'style="background-position:<%= posX %>px <%= posY %>px;" >' + 'style="background-position:<%= posX %>px <%= posY %>px;" >' +
'<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' + '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
'</div>') '</div>')
}); });
if (equationGroup.get('groupHeight').length) {
me.equationPickers.push(equationPicker);
me.toolbar.btnInsertEquation.menu.on('show:after', function () {
if (me.equationPickers.length) {
var element = $(this.el).find('.over').find('.menu-shape');
if (element.length) {
for (var i = 0; i < me.equationPickers.length; ++i) {
if (element[0].id == me.equationPickers[i].el.id) {
me.equationPickers[i].scroller.update({alwaysVisibleY: true});
me.equationPickers.splice(i, 1);
return;
}
}
}
}
});
}
equationPicker.on('item:click', function(picker, item, record, e) { equationPicker.on('item:click', function(picker, item, record, e) {
if (me.api) { if (me.api) {
if (record) if (record)
@ -2419,6 +2385,25 @@ define([
} }
}); });
} }
me.toolbar.btnInsertEquation.menu.off('show:after', onShowAfter);
};
me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter);
for (var i = 0; i < equationsStore.length; ++i) {
var equationGroup = equationsStore.at(i);
var menuItem = new Common.UI.MenuItem({
caption: equationGroup.get('groupName'),
menu: new Common.UI.Menu({
menuAlign: 'tl-tr',
items: [
{ template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
'" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
equationGroup.get('groupHeight') + 'margin-left:5px;"></div>') }
]
})
});
me.toolbar.btnInsertEquation.menu.addItem(menuItem);
}
}, },
onInsertEquationClick: function() { onInsertEquationClick: function() {