For Bug 38156

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

@@ -617,6 +617,14 @@ define([
                     }
                 }
             }
+            var i = -1,
+                in_equation = false;
+            while (++i < selectedElements.length) {
+                if (selectedElements[i].get_ObjectType() === Asc.c_oAscTypeSelectElement.Math) {
+                    in_equation = true;
+                }
+            }
+            in_equation ? this.onEquationPanelShow() : this.onEquationPanelHide();
         },
 
         handleDocumentWheel: function(event) {
@@ -688,6 +696,7 @@ define([
                 me.documentHolder.cmpEl.offset().top - $(window).scrollTop()
             ];
             me._Height = me.documentHolder.cmpEl.height();
+            me._Width = me.documentHolder.cmpEl.width();
             me._BodyWidth = $('body').width();
         },
 
@@ -950,6 +959,7 @@ define([
                     cmpEl.offset().top - $(window).scrollTop()
                 ];
                 me._Height = cmpEl.height();
+                me._Width = cmpEl.width();
                 me._BodyWidth = $('body').width();
             }
 
@@ -1576,6 +1586,7 @@ define([
                 cmpEl.offset().top  - $(window).scrollTop()
             ];
             me._Height = cmpEl.height();
+            me._Width = cmpEl.width();
             me._BodyWidth = $('body').width();
             me.onMouseMoveStart();
         },
@@ -2294,6 +2305,84 @@ define([
             return false;
         },
 
+        onEquationPanelShow: function() {
+            var me = this,
+                documentHolder = me.documentHolder,
+                eqContainer = documentHolder.cmpEl.find('#equation-container');
+
+            // Prepare menu container
+            if (eqContainer.length < 1) {
+                var equationsStore = me.getApplication().getCollection('EquationGroups'),
+                    eqStr = '<div id="equation-container" style="position: absolute;">';
+
+                me.getApplication().getController('Toolbar').onMathTypes();
+
+                me.equationBtns = [];
+                for (var i = 0; i < equationsStore.length; ++i) {
+                    var style = 'margin-right: 5px;' + (i==0 ? 'margin-left: 5px;' : '');
+                    eqStr += '<span id="id-document-holder-btn-equation-' + i + '" style="' + style +'"></span>';
+                }
+                eqStr += '</div>';
+                eqContainer = $(eqStr);
+                documentHolder.cmpEl.find('#id_main_view').append(eqContainer);
+                var onShowBefore = function (menu) {
+                    var index = menu.options.value,
+                        group = equationsStore.at(index);
+                    var equationPicker = new Common.UI.DataViewSimple({
+                        el: $('#id-document-holder-btn-equation-menu-' + index, menu.cmpEl),
+                        parentMenu: menu,
+                        store: group.get('groupStore'),
+                        scrollAlwaysVisible: true,
+                        showLast: false,
+                        restoreHeight: group.get('groupHeight') ? parseInt(group.get('groupHeight')) : true,
+                        itemTemplate: _.template(
+                            '<div class="item-equation" style="" >' +
+                            '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;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);
+                        }
+                    });
+                    menu.off('show:before', onShowBefore);
+                };
+                for (var i = 0; i < equationsStore.length; ++i) {
+                    var equationGroup = equationsStore.at(i);
+                    var btn = new Common.UI.Button({
+                        parentEl: $('#id-document-holder-btn-equation-' + i, documentHolder.cmpEl),
+                        cls         : 'btn-toolbar no-caret',
+                        iconCls     : 'toolbar__icon btn-paste',
+                        hint        : equationGroup.get('groupName'),
+                        menu        : new Common.UI.Menu({
+                            cls: 'menu-shapes',
+                            value: i,
+                            // restoreHeight: equationGroup.get('groupHeight') ? parseInt(equationGroup.get('groupHeight')) : true,
+                            items: [
+                                { template: _.template('<div id="id-document-holder-btn-equation-menu-' + i +
+                                '" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
+                                equationGroup.get('groupHeightStr') + 'margin-left:5px;"></div>') }
+                            ]
+                        })
+                    });
+                    btn.menu.on('show:before', onShowBefore);
+                    me.equationBtns.push(btn);
+                }
+            }
+
+            var showPoint = [(me._Width - eqContainer.outerWidth())/2, 0];
+            eqContainer.css({left: showPoint[0], top : showPoint[1]});
+            eqContainer.show();
+        },
+
+        onEquationPanelHide: function() {
+            var eqContainer = this.documentHolder.cmpEl.find('#equation-container');
+            if (eqContainer.is(':visible')) {
+                eqContainer.hide();
+            }
+        },
+
         editComplete: function() {
             this.documentHolder && this.documentHolder.fireEvent('editcomplete', this.documentHolder);
         }

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

@@ -2720,7 +2720,7 @@ define([
                         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>') }
+                                equationGroup.get('groupHeightStr') + 'margin-left:5px;"></div>') }
                         ]
                     })
                 });
@@ -2771,16 +2771,21 @@ define([
             var me = this;
             var onShowBefore = function(menu) {
                 me.onMathTypes(me._equationTemp);
+                if (me._equationTemp && me._equationTemp.get_Data().length>0)
+                    me.fillEquations();
                 me.toolbar.btnInsertEquation.menu.off('show:before', onShowBefore);
             };
             me.toolbar.btnInsertEquation.menu.on('show:before', onShowBefore);
         },
 
         onMathTypes: function(equation) {
+            equation = equation || this._equationTemp;
+
             var equationgrouparray = [],
                 equationsStore = this.getCollection('EquationGroups');
 
-            equationsStore.reset();
+            if (equationsStore.length>0)
+                return;
 
             // equations groups
 
@@ -2869,12 +2874,13 @@ define([
                                 groupName   : c_oAscMathMainTypeStrings[id][0],
                                 groupStore  : store,
                                 groupWidth  : width,
-                                groupHeight : c_oAscMathMainTypeStrings[id][2] ? ' height:'+ normHeight +'px!important; ' : ''
+                                groupHeight : normHeight,
+                                groupHeightStr : c_oAscMathMainTypeStrings[id][2] ? ' height:'+ normHeight +'px!important; ' : ''
                             });
                         }
                     }
                     equationsStore.add(equationgrouparray);
-                    this.fillEquations();
+                    // this.fillEquations();
                 }
             }
         },

apps/documenteditor/main/resources/less/toolbar.less

@@ -162,7 +162,8 @@
     margin-left: 2px;
 }
 
-#special-paste-container {
+#special-paste-container,
+#equation-container {
     position: absolute;
     z-index: @zindex-dropdown - 20;
 
@@ -172,6 +173,10 @@
     border: @scaled-one-px-value solid @border-regular-control;
 }
 
+#equation-container {
+    padding: 2px;
+}
+
 .dropdown-menu.list-settings-level {
     .menu-list-preview {
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);