[DE] Refactoring DataViewSimple. Optimize equation loading.

apps/common/main/lib/component/DataView.js

@@ -768,13 +768,10 @@ define([
 
     Common.UI.DataViewSimple = Common.UI.BaseView.extend({
         options : {
-            multiSelect: false,
             handleSelect: true,
             enableKeyEvents: true,
             keyMoveDirection: 'both', // 'vertical', 'horizontal'
             restoreHeight: 0,
-            emptyText: '',
-            allowScrollbar: true,
             scrollAlwaysVisible: false,
             useBSKeydown: false
         },
@@ -800,8 +797,6 @@ define([
             me.enableKeyEvents= me.options.enableKeyEvents;
             me.useBSKeydown   = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
             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;
             if (me.parentMenu)
                 me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
@@ -819,7 +814,6 @@ define([
         render: function (parentEl) {
             var me = this;
             this.trigger('render:before', this);
-
             if (parentEl) {
                 this.setElement(parentEl, false);
                 this.cmpEl = $(this.template({
@@ -867,7 +861,7 @@ define([
                 this.attachKeyEvents();
                 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({
                     el: $(this.el).find('.inner').addBack().filter('.inner'),
                     useKeyboard: this.enableKeyEvents && !this.handleSelect,
@@ -949,7 +943,7 @@ define([
                     '<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
                 '<% }) %>'
             ].join(''));
-            this.cmpEl && this.cmpEl.html(template({
+            this.cmpEl && this.cmpEl.find('.inner').html(template({
                 items: this.store.toJSON(),
                 itemTemplate: this.itemTemplate,
                 style : this.style
@@ -960,19 +954,16 @@ define([
                 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,
+                minScrollbarLength  : 40,
-                    minScrollbarLength  : 40,
+                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.attachKeyEvents();
             this._layoutParams = undefined;
         },
 
@@ -1033,7 +1024,7 @@ define([
                 div_first = this.dataViewItems[0].el,
                 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 (this.scroller && this.allowScrollbar) {
+                if (this.scroller) {
                     this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0);
                 } else {
                     innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top);
@@ -1159,10 +1150,10 @@ define([
 
             if (top + menuH > docH ) {
                 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 ) {
                 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);
             }
         },
 

apps/documenteditor/main/app/controller/Toolbar.js

@@ -2352,12 +2352,45 @@ define([
             if (!this.toolbar.btnInsertEquation.rendered || this.toolbar.btnInsertEquation.menu.items.length>0) return;
 
             var me = this, equationsStore = this.getApplication().getCollection('EquationGroups');
-            me.equationPickers = [];
+
             me.toolbar.btnInsertEquation.menu.removeAll();
+            var onShowAfter = function(menu) {
+                for (var i = 0; i < equationsStore.length; ++i) {
+                    var equationPicker = new Common.UI.DataViewSimple({
+                        el: $('#id-toolbar-menu-equationgroup' + i),
+                        parentMenu: menu.items[i].menu,
+                        store: equationsStore.at(i).get('groupStore'),
+                        scrollAlwaysVisible: true,
+                        itemTemplate: _.template('<div class="item-equation" '+
+                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
+                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                            '</div>')
+                    });
+                    equationPicker.on('item:click', function(picker, item, record, e) {
+                        if (me.api) {
+                            if (record)
+                                me.api.asc_AddMath(record.get('data').equationType);
+
+                            if (me.toolbar.btnInsertText.pressed) {
+                                me.toolbar.btnInsertText.toggle(false, true);
+                            }
+                            if (me.toolbar.btnInsertShape.pressed) {
+                                me.toolbar.btnInsertShape.toggle(false, true);
+                            }
+
+                            if (e.type !== 'click')
+                                me.toolbar.btnInsertEquation.menu.hide();
+                            Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertEquation);
+                            Common.component.Analytics.trackEvent('ToolBar', 'Add Equation');
+                        }
+                    });
+                }
+                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({
@@ -2369,55 +2402,7 @@ define([
                         ]
                     })
                 });
-
                 me.toolbar.btnInsertEquation.menu.addItem(menuItem);
-                var equationPicker = new Common.UI.DataViewSimple({
-                    el: $('#id-toolbar-menu-equationgroup' + i),
-                    store: equationGroup.get('groupStore'),
-                    parentMenu: menuItem.menu,
-                    showLast: false,
-                    itemTemplate: _.template('<div class="item-equation" '+
-                        'style="background-position:<%= posX %>px <%= posY %>px;" >' +
-                        '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></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) {
-                    if (me.api) {
-                        if (record)
-                            me.api.asc_AddMath(record.get('data').equationType);
-
-                        if (me.toolbar.btnInsertText.pressed) {
-                            me.toolbar.btnInsertText.toggle(false, true);
-                        }
-                        if (me.toolbar.btnInsertShape.pressed) {
-                            me.toolbar.btnInsertShape.toggle(false, true);
-                        }
-
-                         if (e.type !== 'click')
-                             me.toolbar.btnInsertEquation.menu.hide();
-                        Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertEquation);
-                        Common.component.Analytics.trackEvent('ToolBar', 'Add Equation');
-                    }
-                });
             }
         },