Merge pull request #409 from ONLYOFFICE/feature/sse-slicer

Feature/sse slicer

apps/common/main/lib/util/utils.js

@@ -105,7 +105,8 @@ Common.Utils = _.extend(new(function() {
             MailMerge  : 8,
             Signature  : 9,
             Pivot      : 10,
-            Cell       : 11
+            Cell       : 11,
+            Slicer     : 12
         },
         importTextType = {
             DRM: 0,

apps/common/main/resources/less/buttons.less

@@ -784,6 +784,13 @@
         height: 54px;
     }
 
+    .icon-template-slicer.icon {
+        min-width: 36px;
+        height: 55px;
+        line-height: 53px;
+        border: none;
+    }
+
     .icon {
         display: inline-block;
         .btn.btnsize(52px);

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

@@ -71,7 +71,8 @@ define([
     'spreadsheeteditor/main/app/view/ImageSettingsAdvanced',
     'spreadsheeteditor/main/app/view/SetValueDialog',
     'spreadsheeteditor/main/app/view/AutoFilterDialog',
-    'spreadsheeteditor/main/app/view/SpecialPasteDialog'
+    'spreadsheeteditor/main/app/view/SpecialPasteDialog',
+    'spreadsheeteditor/main/app/view/SlicerSettingsAdvanced'
 ], function () {
     'use strict';
 
@@ -96,6 +97,9 @@ define([
                 row_column: {
                     ttHeight: 20
                 },
+                slicer: {
+                    ttHeight: 20
+                },
                 filter: {ttHeight: 40},
                 func_arg: {},
                 input_msg: {}
@@ -224,6 +228,7 @@ define([
                 view.mnuShapeAdvanced.on('click',                   _.bind(me.onShapeAdvanced, me));
                 view.mnuChartEdit.on('click',                       _.bind(me.onChartEdit, me));
                 view.mnuImgAdvanced.on('click',                     _.bind(me.onImgAdvanced, me));
+                view.mnuSlicerAdvanced.on('click',                  _.bind(me.onSlicerAdvanced, me));
                 view.textInShapeMenu.on('render:after',             _.bind(me.onTextInShapeAfterRender, me));
                 view.menuSignatureEditSign.on('click',              _.bind(me.onSignatureClick, me));
                 view.menuSignatureEditSetup.on('click',             _.bind(me.onSignatureClick, me));
@@ -878,6 +883,26 @@ define([
             })).show();
         },
 
+        onSlicerAdvanced: function(item) {
+            var me = this;
+
+            (new SSE.Views.SlicerSettingsAdvanced({
+                imageProps: item.imageInfo,
+                api       : me.api,
+                styles    : item.imageInfo.asc_getSlicerProperties().asc_getStylesPictures(),
+                handler   : function(result, value) {
+                    if (result == 'ok') {
+                        if (me.api) {
+                            me.api.asc_setGraphicObjectProps(value.imageProps);
+
+                            Common.component.Analytics.trackEvent('DocumentHolder', 'Apply slicer settings');
+                        }
+                    }
+                    Common.NotificationCenter.trigger('edit:complete', me);
+                }
+            })).show();
+        },
+
         onChartEdit: function(item) {
             var me = this;
             var win, props;
@@ -935,7 +960,8 @@ define([
                     /** coauthoring end **/
                         index_locked,
                         index_column, index_row,
-                        index_filter;
+                        index_filter,
+                        index_slicer;
                 for (var i = dataarray.length; i > 0; i--) {
                     switch (dataarray[i-1].asc_getType()) {
                         case Asc.c_oAscMouseMoveType.Hyperlink:
@@ -958,6 +984,9 @@ define([
                         case Asc.c_oAscMouseMoveType.Filter:
                             index_filter = i;
                             break;
+                        case Asc.c_oAscMouseMoveType.Tooltip:
+                            index_slicer = i;
+                            break;
                     }
                 }
 
@@ -970,6 +999,7 @@ define([
                     hyperlinkTip    = me.tooltips.hyperlink,
                     row_columnTip   = me.tooltips.row_column,
                     filterTip       = me.tooltips.filter,
+                    slicerTip       = me.tooltips.slicer,
                     pos             = [
                         me.documentHolder.cmpEl.offset().left - $(window).scrollLeft(),
                         me.documentHolder.cmpEl.offset().top  - $(window).scrollTop()
@@ -1007,6 +1037,14 @@ define([
                     if (!index_locked) {
                         me.hideCoAuthTips();
                     }
+                    if (index_slicer===undefined) {
+                        if (!slicerTip.isHidden && slicerTip.ref) {
+                            slicerTip.ref.hide();
+                            slicerTip.ref = undefined;
+                            slicerTip.text = '';
+                            slicerTip.isHidden = true;
+                        }
+                    }
                 }
                 if (index_filter===undefined || (me.dlgFilter && me.dlgFilter.isVisible()) || (me.currentMenu && me.currentMenu.isVisible())) {
                     if (!filterTip.isHidden && filterTip.ref) {
@@ -1016,7 +1054,6 @@ define([
                         filterTip.isHidden = true;
                     }
                 }
-
                 // show tooltips
                 /** coauthoring begin **/
                 var getUserName = function(id){
@@ -1259,6 +1296,48 @@ define([
                         });
                     }
                 }
+
+                if (index_slicer!==undefined && me.permissions.isEdit) {
+                    if (!slicerTip.parentEl) {
+                        slicerTip.parentEl = $('<div id="tip-container-slicertip" style="position: absolute; z-index: 10000;"></div>');
+                        me.documentHolder.cmpEl.append(slicerTip.parentEl);
+                    }
+
+                    var data  = dataarray[index_slicer-1],
+                        str = data.asc_getTooltip();
+                    if (slicerTip.ref && slicerTip.ref.isVisible()) {
+                        if (slicerTip.text != str) {
+                            slicerTip.text = str;
+                            slicerTip.ref.setTitle(str);
+                            slicerTip.ref.updateTitle();
+                        }
+                    }
+
+                    if (!slicerTip.ref || !slicerTip.ref.isVisible()) {
+                        slicerTip.text = str;
+                        slicerTip.ref = new Common.UI.Tooltip({
+                            owner   : slicerTip.parentEl,
+                            html    : true,
+                            title   : str
+                        });
+
+                        slicerTip.ref.show([-10000, -10000]);
+                        slicerTip.isHidden = false;
+
+                        showPoint = [data.asc_getX(), data.asc_getY()];
+                        showPoint[0] += (pos[0] + 6);
+                        showPoint[1] += (pos[1] - 20 - slicerTip.ttHeight);
+
+                        var tipwidth = slicerTip.ref.getBSTip().$tip.width();
+                        if (showPoint[0] + tipwidth > me.tooltips.coauth.bodyWidth )
+                            showPoint[0] = me.tooltips.coauth.bodyWidth - tipwidth - 20;
+
+                        slicerTip.ref.getBSTip().$tip.css({
+                            top : showPoint[1] + 'px',
+                            left: showPoint[0] + 'px'
+                        });
+                    }
+                }
             }
         },
 
@@ -1565,7 +1644,7 @@ define([
         },
 
         fillMenuProps: function(cellinfo, showMenu, event){
-            var iscellmenu, isrowmenu, iscolmenu, isallmenu, ischartmenu, isimagemenu, istextshapemenu, isshapemenu, istextchartmenu, isimageonly,
+            var iscellmenu, isrowmenu, iscolmenu, isallmenu, ischartmenu, isimagemenu, istextshapemenu, isshapemenu, istextchartmenu, isimageonly, isslicermenu,
                 documentHolder      = this.documentHolder,
                 seltype             = cellinfo.asc_getSelectionType(),
                 isCellLocked        = cellinfo.asc_getLocked(),
@@ -1593,7 +1672,7 @@ define([
             } else if (isimagemenu || isshapemenu || ischartmenu) {
                 if (!documentHolder.imgMenu || !showMenu && !documentHolder.imgMenu.isVisible()) return;
 
-                isimagemenu = isshapemenu = ischartmenu = false;
+                isimagemenu = isshapemenu = ischartmenu = isslicermenu = false;
                 documentHolder.mnuImgAdvanced.imageInfo = undefined;
 
                 var has_chartprops = false,
@@ -1617,6 +1696,9 @@ define([
                             documentHolder.mnuChartEdit.chartInfo = elValue;
                             ischartmenu = true;
                             has_chartprops = true;
+                        }  if ( elValue.asc_getSlicerProperties() ) {
+                            documentHolder.mnuSlicerAdvanced.imageInfo = elValue;
+                            isslicermenu = true;
                         } else {
                             documentHolder.mnuImgAdvanced.imageInfo = elValue;
                             isimagemenu = true;
@@ -1647,13 +1729,16 @@ define([
                 if (documentHolder.mnuImgAdvanced.imageInfo)
                     documentHolder.menuImgOriginalSize.setDisabled(isObjLocked || documentHolder.mnuImgAdvanced.imageInfo.get_ImageUrl()===null || documentHolder.mnuImgAdvanced.imageInfo.get_ImageUrl()===undefined);
 
+                documentHolder.mnuSlicerAdvanced.setVisible(isslicermenu);
+                documentHolder.mnuSlicerAdvanced.setDisabled(isObjLocked);
+
                 var pluginGuid = (documentHolder.mnuImgAdvanced.imageInfo) ? documentHolder.mnuImgAdvanced.imageInfo.asc_getPluginGuid() : null;
                 documentHolder.menuImgReplace.setVisible(isimageonly && (pluginGuid===null || pluginGuid===undefined));
                 documentHolder.menuImgReplace.setDisabled(isObjLocked || pluginGuid===null);
                 documentHolder.menuImgReplace.menu.items[2].setVisible(this.permissions.canRequestInsertImage || this.permissions.fileChoiceUrl && this.permissions.fileChoiceUrl.indexOf("{documentType}")>-1);
                 documentHolder.menuImageArrange.setDisabled(isObjLocked);
 
-                documentHolder.menuImgRotate.setVisible(!ischartmenu && (pluginGuid===null || pluginGuid===undefined));
+                documentHolder.menuImgRotate.setVisible(!ischartmenu && (pluginGuid===null || pluginGuid===undefined) && !isslicermenu);
                 documentHolder.menuImgRotate.setDisabled(isObjLocked);
 
                 documentHolder.menuImgCrop.setVisible(this.api.asc_canEditCrop());
@@ -1671,6 +1756,7 @@ define([
 
                 if (showMenu) this.showPopupMenu(documentHolder.imgMenu, {}, event);
                 documentHolder.mnuShapeSeparator.setVisible(documentHolder.mnuShapeAdvanced.isVisible() || documentHolder.mnuChartEdit.isVisible() || documentHolder.mnuImgAdvanced.isVisible());
+                documentHolder.mnuSlicerSeparator.setVisible(documentHolder.mnuSlicerAdvanced.isVisible());
             } else if (istextshapemenu || istextchartmenu) {
                 if (!documentHolder.textInShapeMenu || !showMenu && !documentHolder.textInShapeMenu.isVisible()) return;
                 

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -127,7 +127,10 @@ define([
                         'Values': this.txtValues,
                         'Grand Total': this.txtGrandTotal,
                         'Row Labels': this.txtRowLbls,
-                        'Column Labels': this.txtColLbls
+                        'Column Labels': this.txtColLbls,
+                        'Multi-Select (Alt+S)': this.txtMultiSelect,
+                        'Clear Filter (Alt+C)':  this.txtClearFilter,
+                        '(blank)': this.txtBlank
                     };
                 styleNames.forEach(function(item){
                     translate[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item;
@@ -2598,6 +2601,9 @@ define([
             txtColLbls: 'Column Labels',
             errNoDuplicates: 'No duplicate values found.',
             errRemDuplicates: 'Duplicate values found and deleted: {0}, unique values left: {1}.',
+            txtMultiSelect: 'Multi-Select (Alt+S)',
+            txtClearFilter: 'Clear Filter (Alt+C)',
+            txtBlank: '(blank)',
             textHasMacros: 'The file contains automatic macros.<br>Do you want to run macros?',
             textRemember: 'Remember my choice'
         }

apps/spreadsheeteditor/main/app/controller/RightMenu.js

@@ -92,6 +92,7 @@ define([
             this._settings[Common.Utils.documentSettingsType.Pivot] =     {panelId: "id-pivot-settings",      panel: rightMenu.pivotSettings,    btn: rightMenu.btnPivot,       hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings",  panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature,  hidden: 1, props: {}, locked: false};
             this._settings[Common.Utils.documentSettingsType.Cell] =      {panelId: "id-cell-settings",       panel: rightMenu.cellSettings,     btn: rightMenu.btnCell,        hidden: 1, locked: false};
+            this._settings[Common.Utils.documentSettingsType.Slicer] =    {panelId: "id-slicer-settings",     panel: rightMenu.slicerSettings,   btn: rightMenu.btnSlicer,      hidden: 1, locked: false};
         },
 
         setApi: function(api) {
@@ -190,6 +191,8 @@ define([
                             this._settings[Common.Utils.documentSettingsType.TextArt].hidden = 0;
                             this._settings[Common.Utils.documentSettingsType.TextArt].locked = value.asc_getLocked();
                         }
+                    } else if (value.asc_getSlicerProperties() !== null) {
+                        settingsType = Common.Utils.documentSettingsType.Slicer;
                     }
                 }
 
@@ -326,6 +329,7 @@ define([
             this.rightmenu.paragraphSettings.updateMetricUnit();
             this.rightmenu.chartSettings.updateMetricUnit();
             this.rightmenu.imageSettings.updateMetricUnit();
+            this.rightmenu.slicerSettings.updateMetricUnit();
         },
 
         createDelayedElements: function() {
@@ -392,6 +396,7 @@ define([
                 this.rightmenu.tableSettings.disableControls(disabled);
                 this.rightmenu.pivotSettings.disableControls(disabled);
                 this.rightmenu.cellSettings.disableControls(disabled);
+                this.rightmenu.slicerSettings.disableControls(disabled);
 
                 if (!allowSignature && this.rightmenu.signatureSettings) {
                     this.rightmenu.btnSignature.setDisabled(disabled);
@@ -410,6 +415,7 @@ define([
                     this.rightmenu.btnChart.setDisabled(disabled);
                     this.rightmenu.btnPivot.setDisabled(disabled);
                     this.rightmenu.btnCell.setDisabled(disabled);
+                    this.rightmenu.btnSlicer.setDisabled(disabled);
                 } else {
                     this.onSelectionChanged(this.api.asc_getCellInfo());
                 }

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

@@ -59,6 +59,7 @@ define([
     'spreadsheeteditor/main/app/view/HeaderFooterDialog',
     'spreadsheeteditor/main/app/view/PrintTitlesDialog',
     'spreadsheeteditor/main/app/view/ScaleDialog',
+    'spreadsheeteditor/main/app/view/SlicerAddDialog',
     'spreadsheeteditor/main/app/view/CellsAddDialog'
 ], function () { 'use strict';
 
@@ -329,6 +330,7 @@ define([
                 toolbar.btnInsertShape.menu.on('hide:after',                _.bind(this.onInsertShapeHide, this));
                 toolbar.btnInsertEquation.on('click',                       _.bind(this.onInsertEquationClick, this));
                 toolbar.btnInsertSymbol.on('click',                         _.bind(this.onInsertSymbolClick, this));
+                toolbar.btnInsertSlicer.on('click',                         _.bind(this.onInsertSlicerClick, this));
                 toolbar.btnTableTemplate.menu.on('show:after',              _.bind(this.onTableTplMenuOpen, this));
                 toolbar.btnPercentStyle.on('click',                         _.bind(this.onNumberFormat, this));
                 toolbar.btnCurrencyStyle.on('click',                        _.bind(this.onNumberFormat, this));
@@ -2357,6 +2359,7 @@ define([
                 this._state.inpivot = !!info.asc_getPivotTableInfo();
                 toolbar.lockToolbar(SSE.enumLock.editPivot, this._state.inpivot, { array: toolbar.btnsSetAutofilter.concat(toolbar.btnsClearAutofilter, toolbar.btnsSortDown, toolbar.btnsSortUp, toolbar.btnCustomSort,
                                                                                           toolbar.btnMerge, toolbar.btnInsertHyperlink, toolbar.btnInsertTable, toolbar.btnRemoveDuplicates)});
+                toolbar.lockToolbar(SSE.enumLock.noSlicerSource, !(this._state.inpivot || formatTableInfo), { array: [toolbar.btnInsertSlicer]});
 
                 need_disable = !this.appConfig.canModifyFilter;
                 toolbar.lockToolbar(SSE.enumLock.cantModifyFilter, need_disable, { array: toolbar.btnsSetAutofilter.concat(toolbar.btnsSortDown, toolbar.btnsSortUp, toolbar.btnCustomSort, toolbar.btnTableTemplate,
@@ -2805,6 +2808,22 @@ define([
             }
         },
 
+        onInsertSlicerClick: function() {
+            var me = this,
+                props = me.api.asc_beforeInsertSlicer();
+            if (props) {
+                (new SSE.Views.SlicerAddDialog({
+                    props: props,
+                    handler: function (result, settings) {
+                        if (me && me.api && result == 'ok') {
+                            me.api.asc_insertSlicer(settings);
+                        }
+                        Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                    }
+                })).show();
+            }
+        },
+
         onApiMathTypes: function(equation) {
             this._equationTemp = equation;
             var me = this;

apps/spreadsheeteditor/main/app/template/RightMenu.template

@@ -18,6 +18,8 @@
         </div>
         <div id="id-cell-settings" class="settings-panel">
         </div>
+        <div id="id-slicer-settings" class="settings-panel">
+        </div>
     </div>
     <div class="tool-menu-btns">
         <div class="ct-btn-category arrow-left" />
@@ -29,6 +31,7 @@
         <button id="id-right-menu-text" class="btn btn-category arrow-left" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button>
         <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
         <button id="id-right-menu-pivot" class="btn btn-category arrow-left" content-target="id-pivot-settings"><i class="icon toolbar__icon btn-menu-pivot">&nbsp;</i></button>
+        <button id="id-right-menu-slicer" class="btn btn-category arrow-left" content-target="id-slicer-settings"><i class="icon toolbar__icon btn-slicer">&nbsp;</i></button>
         <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
     </div>
 </div>

apps/spreadsheeteditor/main/app/template/SlicerSettings.template

@@ -0,0 +1,129 @@
+<table cols="3">
+    <tr>
+        <td class="padding-large" width="88px">
+            <label class="input-label"><%= scope.textWidth %></label>
+            <div id="slicer-spin-width"></div>
+        </td>
+        <td class="padding-large" width="28px" style="vertical-align: bottom;">
+            <div id="slicer-button-ratio"></div>
+        </td>
+        <td class="padding-large" width="88px">
+            <label class="input-label"><%= scope.textHeight %></label>
+            <div id="slicer-spin-height"></div>
+        </td>
+    </tr>
+</table>
+<table cols="2">
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="header"><%= scope.textPosition %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textHor %></label>
+            <div id="slicer-spin-hor"></div>
+        </td>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textVert %></label>
+            <div id="slicer-spin-vert"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-checkbox-disable-resize"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header"><%= scope.textButtons %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="input-label"><%= scope.textColumns %></label>
+            <div id="slicer-spin-cols" style="display: inline-block;margin-left:5px;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textWidth %></label>
+            <div id="slicer-spin-col-width"></div>
+        </td>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textHeight %></label>
+            <div id="slicer-spin-col-height"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td colspan=2>
+            <label class="header"><%= scope.textStyle %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-btn-style" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <label class="header"><%= scope.strSorting %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-radio-asc"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-large" colspan=2>
+            <div id="slicer-radio-desc"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-hide-nodata"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-indicate-nodata"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-show-nodata-last"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="slicer-check-show-deleted"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td align="center" colspan=2>
+            <label class="link" id="slicer-advanced-link"><%= scope.textAdvanced %></label>
+        </td>
+    </tr>
+    <tr class="finish-cell"></tr>
+</table>

apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template

@@ -0,0 +1,119 @@
+<div id="id-adv-slicer-style" class="settings-panel active">
+    <div class="inner-content">
+        <div>
+            <div class="padding-small" style="display: inline-block;">
+                <label class="input-label"><%= scope.textHeader %></label>
+                <div id="sliceradv-text-header"></div>
+            </div>
+        </div>
+        <div class="padding-large" id="sliceradv-checkbox-header"></div>
+        <div style="padding-bottom: 4px;"><label class="header"><%= scope.strStyle %></label></div>
+        <div class="padding-large">
+            <div id="sliceradv-btn-style" style="width: 100%;height: 52px;"></div>
+        </div>
+        <div style="padding-bottom: 4px;"><label class="header"><%= scope.strSize %></label></div>
+        <div>
+            <div class="padding-large" style="display: inline-block; margin-right: 5px;">
+                <label class="input-label"><%= scope.strWidth %></label>
+                <div id="sliceradv-spin-width"></div>
+            </div>
+            <div id="sliceradv-button-ratio" style="display: inline-block; margin-right: 5px;"></div>
+            <div class="padding-large" style="display: inline-block;">
+                <label class="input-label"><%= scope.strHeight %></label>
+                <div id="sliceradv-spin-height"></div>
+            </div>
+        </div>
+        <div style="padding-bottom: 4px;"><label class="header"><%= scope.strButtons %></label></div>
+        <div>
+            <div style="display: inline-block; margin-right: 5px;">
+                <label class="input-label"><%= scope.strColumns %></label>
+                <div id="sliceradv-spin-columns"></div>
+            </div>
+            <div style="display: inline-block;">
+                <label class="input-label"><%= scope.strHeight %></label>
+                <div id="sliceradv-spin-col-height"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="id-adv-slicer-sorting" class="settings-panel">
+    <div class="inner-content" style="width: 100%;">
+        <div class="padding-small">
+            <label class="header"><%= scope.textSort %></label>
+        </div>
+        <div class="padding-large">
+            <div style="display: inline-block;">
+                <div class="padding-small" id="sliceradv-radio-asc"></div>
+                <div class="padding-small" id="sliceradv-radio-desc"></div>
+            </div>
+        </div>
+        <div>
+            <div style="display: inline-block;">
+                <div class="padding-small" id="sliceradv-check-hide-nodata"></div>
+                <div class="padding-small" id="sliceradv-check-indicate-nodata"></div>
+                <div class="padding-small" id="sliceradv-check-show-nodata-last"></div>
+                <div class="padding-small" id="sliceradv-check-show-deleted"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="id-adv-slicer-references" class="settings-panel">
+    <div class="inner-content">
+        <div class="padding-large">
+            <label class="header" style="display: block;"><%= scope.textSourceName %></label>
+            <label class="input-label" id="sliceradv-lbl-source"></label>
+        </div>
+        <div class="padding-large">
+            <label class="header" style="display: block;"><%= scope.textFormulaName %></label>
+            <label class="input-label" id="sliceradv-lbl-formula"></label>
+        </div>
+        <div class="padding-large">
+            <label class="header"><%= scope.textName %></label>
+            <div id="sliceradv-text-name"></div>
+        </div>
+    </div>
+</div>
+<div id="id-adv-slicer-snap" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1">
+            <tr>
+                <td class="padding-small">
+                    <div id="slicer-advanced-radio-twocell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="slicer-advanced-radio-onecell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="slicer-advanced-radio-absolute"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="id-adv-slicer-alttext" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1" width="100%">
+            <tr>
+                <td class="padding-large">
+                    <label class="header"><%= scope.textAltTitle %></label>
+                    <div id="sliceradv-alt-title"></div>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label class="header"><%= scope.textAltDescription %></label>
+                    <textarea id="sliceradv-alt-description" class="form-control" style="width: 100%; height: 120px;"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label><%= scope.textAltTip %></label>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -144,6 +144,10 @@
                     <span class="btn-slot text x-huge" id="slot-btn-insequation"></span>
                     <span class="btn-slot text x-huge" id="slot-btn-inssymbol"></span>
                 </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-insslicer"></span>
+                </div>
             </section>
             <section class="panel" data-tab="layout">
                 <div class="group">

apps/spreadsheeteditor/main/app/view/DocumentHolder.js

@@ -567,6 +567,14 @@ define([
                 caption : me.advancedImgText
             });
 
+            me.mnuSlicerSeparator = new Common.UI.MenuItem({
+                caption     : '--'
+            });
+
+            me.mnuSlicerAdvanced = new Common.UI.MenuItem({
+                caption : me.advancedSlicerText
+            });
+
             me.mnuChartEdit = new Common.UI.MenuItem({
                 caption : me.chartText
             });
@@ -761,7 +769,9 @@ define([
                     me.mnuShapeAdvanced,
                     me.menuImgOriginalSize,
                     me.menuImgReplace,
-                    me.mnuImgAdvanced
+                    me.mnuImgAdvanced,
+                    me.mnuSlicerSeparator,
+                    me.mnuSlicerAdvanced
                 ]
             });
 
@@ -1100,7 +1110,8 @@ define([
         textCropFill: 'Fill',
         textCropFit: 'Fit',
         textListSettings: 'List Settings',
-        textFromStorage: 'From Storage'
+        textFromStorage: 'From Storage',
+        advancedSlicerText: 'Slicer Advanced Settings'
 
     }, SSE.Views.DocumentHolder || {}));
 });

apps/spreadsheeteditor/main/app/view/RemoveDuplicatesDialog.js

@@ -40,7 +40,7 @@
 
 define([
     'common/main/lib/component/Window',
-    'common/main/lib/component/ComboBox',
+    'common/main/lib/component/CheckBox',
     'common/main/lib/component/ListView'
 ], function () {
     'use strict';

apps/spreadsheeteditor/main/app/view/RightMenu.js

@@ -58,6 +58,7 @@ define([
     'spreadsheeteditor/main/app/view/PivotSettings',
     'spreadsheeteditor/main/app/view/SignatureSettings',
     'spreadsheeteditor/main/app/view/CellSettings',
+    'spreadsheeteditor/main/app/view/SlicerSettings',
     'common/main/lib/component/Scroller'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
@@ -143,6 +144,14 @@ define([
                 toggleGroup: 'tabpanelbtnsGroup',
                 allowMouseEventsOnDisabled: true
             });
+            this.btnSlicer = new Common.UI.Button({
+                hint: this.txtSlicerSettings,
+                asctype: Common.Utils.documentSettingsType.Slicer,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: 'tabpanelbtnsGroup',
+                allowMouseEventsOnDisabled: true
+            });
 
             this._settings = [];
             this._settings[Common.Utils.documentSettingsType.Paragraph]   = {panel: "id-paragraph-settings",  btn: this.btnText};
@@ -153,6 +162,7 @@ define([
             this._settings[Common.Utils.documentSettingsType.Table]       = {panel: "id-table-settings",      btn: this.btnTable};
             this._settings[Common.Utils.documentSettingsType.Pivot]       = {panel: "id-pivot-settings",      btn: this.btnPivot};
             this._settings[Common.Utils.documentSettingsType.Cell]        = {panel: "id-cell-settings",       btn: this.btnCell};
+            this._settings[Common.Utils.documentSettingsType.Slicer]      = {panel: "id-slicer-settings",     btn: this.btnSlicer};
 
             return this;
         },
@@ -178,6 +188,7 @@ define([
             this.btnTable.setElement($('#id-right-menu-table'), false);         this.btnTable.render();
             this.btnPivot.setElement($('#id-right-menu-pivot'), false);         this.btnPivot.render();
             this.btnCell.setElement($('#id-right-menu-cell'), false);           this.btnCell.render();
+            this.btnSlicer.setElement($('#id-right-menu-slicer'), false);       this.btnSlicer.render();
 
             this.btnText.on('click',            _.bind(this.onBtnMenuClick, this));
             this.btnImage.on('click',           _.bind(this.onBtnMenuClick, this));
@@ -187,6 +198,7 @@ define([
             this.btnTable.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnPivot.on('click',           _.bind(this.onBtnMenuClick, this));
             this.btnCell.on('click',           _.bind(this.onBtnMenuClick, this));
+            this.btnSlicer.on('click',         _.bind(this.onBtnMenuClick, this));
 
             this.paragraphSettings = new SSE.Views.ParagraphSettings();
             this.imageSettings = new SSE.Views.ImageSettings();
@@ -196,6 +208,7 @@ define([
             this.tableSettings = new SSE.Views.TableSettings();
             this.pivotSettings = new SSE.Views.PivotSettings();
             this.cellSettings = new SSE.Views.CellSettings();
+            this.slicerSettings = new SSE.Views.SlicerSettings();
 
             if (mode && mode.isSignatureSupport) {
                 this.btnSignature = new Common.UI.Button({
@@ -244,6 +257,7 @@ define([
             this.tableSettings.setApi(api);
             this.pivotSettings.setApi(api);
             this.cellSettings.setApi(api);
+            this.slicerSettings.setApi(api);
             if (this.signatureSettings) this.signatureSettings.setApi(api);
             return this;
         },
@@ -329,6 +343,7 @@ define([
         txtTableSettings:           'Table Settings',
         txtPivotSettings:           'Pivot Table Settings',
         txtSignatureSettings:       'Signature Settings',
-        txtCellSettings:            'Cell Settings'
+        txtCellSettings:            'Cell Settings',
+        txtSlicerSettings:          'Slicer Settings'
     }, SSE.Views.RightMenu || {}));
 });

apps/spreadsheeteditor/main/app/view/SlicerAddDialog.js

@@ -0,0 +1,234 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+ */
+/**
+ *  SlicerAddDialog.js
+ *
+ *  Created by Julia Radzhabova on 10.04.2020
+ *  Copyright (c) 2020 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window',
+    'common/main/lib/component/ListView'
+], function () {
+    'use strict';
+
+    SSE.Views.SlicerAddDialog = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 250,
+            style: 'min-width: 230px;',
+            cls: 'modal-dlg',
+            buttons: ['ok', 'cancel']
+        },
+
+        initialize : function (options) {
+            var t = this,
+                _options = {};
+
+            _.extend(this.options, {
+                title: this.txtTitle
+            }, options || {});
+
+            this.template = [
+                '<div class="box" style="height: 195px;">',
+                    '<div class="input-row">',
+                        '<label style="font-weight: bold;">' + this.textColumns + '</label>',
+                    '</div>',
+                    '<div id="add-slicers-dlg-columns" class="" style="width: 100%; height: 162px; overflow: hidden;"></div>',
+                '</div>'
+            ].join('');
+
+            this.options.tpl = _.template(this.template)(this.options);
+            this.props = this.options.props;
+            this.handler =   this.options.handler;
+
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+        render: function () {
+            Common.UI.Window.prototype.render.call(this);
+
+            this.columnsList = new Common.UI.ListView({
+                el: $('#add-slicers-dlg-columns', this.$window),
+                store: new Common.UI.DataViewStore(),
+                simpleAddMode: true,
+                scrollAlwaysVisible: true,
+                template: _.template(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div>',
+                    '<label class="checkbox-indeterminate" style="position:absolute;">',
+                    '<input id="rdcheckbox-<%= id %>" type="checkbox" class="button__checkbox">',
+                    '<label for="rdcheckbox-<%= id %>" class="checkbox__shape" />',
+                    '</label>',
+                    '<div id="<%= id %>" class="list-item" style="pointer-events:none; margin-left: 20px;display: flex;">',
+                    '<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
+                    '</div>',
+                    '</div>'
+                ].join(''))
+            });
+            this.columnsList.on({
+                'item:change': this.onItemChanged.bind(this),
+                'item:add': this.onItemChanged.bind(this),
+                'item:select': this.onCellCheck.bind(this)
+            });
+            this.columnsList.onKeyDown = _.bind(this.onListKeyDown, this);
+
+            this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+            this.afterRender();
+        },
+
+        updateColumnsList: function(props) {
+            var arr = [];
+            if (props && props.length>0) {
+                this.props.forEach(function (item, index) {
+                    arr.push(new Common.UI.DataViewModel({
+                        id              : index,
+                        selected        : false,
+                        allowSelected   : true,
+                        value           : item,
+                        check           : false
+                    }));
+                });
+
+                this.columnsList.store.reset(arr);
+                this.columnsList.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true, suppressScrollX: true});
+            }
+        },
+
+        onItemChanged: function (view, record) {
+            var state = record.model.get('check');
+            if ( state == 'indeterminate' )
+                $('input[type=checkbox]', record.$el).prop('indeterminate', true);
+            else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false});
+        },
+
+        onCellCheck: function (listView, itemView, record) {
+            if (this.checkCellTrigerBlock)
+                return;
+
+            var target = '', isLabel = false, bound = null;
+
+            var event = window.event ? window.event : window._event;
+            if (event) {
+                target = $(event.currentTarget).find('.list-item');
+
+                if (target.length) {
+                    bound = target.get(0).getBoundingClientRect();
+                    var _clientX = event.clientX*Common.Utils.zoom(),
+                        _clientY = event.clientY*Common.Utils.zoom();
+                    if (bound.left < _clientX && _clientX < bound.right &&
+                        bound.top < _clientY && _clientY < bound.bottom) {
+                        isLabel = true;
+                    }
+                }
+
+                if (isLabel || event.target.className.match('checkbox')) {
+                    this.updateCellCheck(listView, record);
+
+                    _.delay(function () {
+                        listView.$el.find('.listview').focus();
+                    }, 100, this);
+                }
+            }
+        },
+
+        onListKeyDown: function (e, data) {
+            var record = null, listView = this.columnsList;
+
+            if (listView.disabled) return;
+            if (_.isUndefined(undefined)) data = e;
+
+            if (data.keyCode == Common.UI.Keys.SPACE) {
+                data.preventDefault();
+                data.stopPropagation();
+
+                this.updateCellCheck(listView, listView.getSelectedRec());
+
+            } else {
+                Common.UI.DataView.prototype.onKeyDown.call(this.columnsList, e, data);
+            }
+        },
+
+        updateCellCheck: function (listView, record) {
+            if (record && listView) {
+                    record.set('check', !record.get('check'));
+                // listView.scroller.update({minScrollbarLength  : 40, alwaysVisibleY: true, suppressScrollX: true});
+            }
+        },
+
+        afterRender: function() {
+            this._setDefaults(this.props);
+        },
+
+        _setDefaults: function (props) {
+            if (props) {
+                this.updateColumnsList(props);
+            }
+        },
+
+        getSettings: function () {
+            var store = this.columnsList.store,
+                props = [];
+            store.each(function(item, index) {
+                item.get('check') && (props.push(item.get('value')));
+            });
+            return props;
+        },
+
+        onBtnClick: function(event) {
+            this._handleInput(event.currentTarget.attributes['result'].value);
+        },
+
+        onDblClickFormat: function () {
+            this._handleInput('ok');
+        },
+
+        onPrimary: function(event) {
+            this._handleInput('ok');
+            return false;
+        },
+
+        _handleInput: function(state) {
+            if (this.options.handler) {
+                this.options.handler.call(this, state, (state == 'ok') ? this.getSettings() : this.props);
+            }
+
+            this.close();
+        },
+
+        //
+        txtTitle: 'Insert Slicers',
+        textColumns: 'Columns'
+
+    }, SSE.Views.SlicerAddDialog || {}));
+});

apps/spreadsheeteditor/main/app/view/SlicerSettings.js

@@ -0,0 +1,761 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+ */
+/**
+ *  SlicerSettings.js
+ *
+ *  Created by Julia Radzhabova on 5/26/20
+ *  Copyright (c) 2020 Ascensio System SIA. All rights reserved.
+ *
+ */
+define([
+    'text!spreadsheeteditor/main/app/template/SlicerSettings.template',
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/MetricSpinner',
+    'spreadsheeteditor/main/app/view/SlicerSettingsAdvanced'
+], function (menuTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.SlicerSettings = Backbone.View.extend(_.extend({
+        el: '#id-slicer-settings',
+
+        // Compile our stats template
+        template: _.template(menuTemplate),
+
+        // Delegated events for creating new items, and clearing completed ones.
+        events: {
+        },
+
+        options: {
+            alias: 'SlicerSettings'
+        },
+
+        initialize: function () {
+            this._initSettings = true;
+
+            this._nRatio = 1;
+            this._state = {
+                Width: 0,
+                Height: 0,
+                DisabledControls: false,
+                keepRatio: false,
+                ColCount: 0,
+                ColWidth: 0,
+                ColHeight: 0,
+                PosVert: 0,
+                PosHor: 0,
+                PosLocked: false,
+                SortOrder: Asc.ST_tabularSlicerCacheSortOrder.Ascending,
+                IndNoData: false,
+                ShowNoData: false,
+                HideNoData: false,
+                DisabledSizeControls: false
+            };
+            this.spinners = [];
+            this.lockedControls = [];
+            this.sizeControls = [];
+            this._locked = false;
+
+            this._noApply = false;
+            this._originalProps = null;
+            this.styles = null;
+
+            this.render();
+        },
+
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+
+            this.linkAdvanced = $('#slicer-advanced-link');
+        },
+
+        setApi: function(api) {
+            if ( api == undefined ) return;
+            this.api = api;
+            this.api.asc_registerCallback('asc_onSendThemeColors',    _.bind(this.onSendThemeColors, this));
+            return this;
+        },
+
+        setMode: function(mode) {
+            this.mode = mode;
+        },
+
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
+                }
+            }
+        },
+
+        createDelayedControls: function() {
+            var me = this;
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-width'),
+                step: .1,
+                width: 78,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.spinners.push(this.spnWidth);
+            this.sizeControls.push(this.spnWidth);
+
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-height'),
+                step: .1,
+                width: 78,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.spinners.push(this.spnHeight);
+            this.sizeControls.push(this.spnHeight);
+
+            this.btnRatio = new Common.UI.Button({
+                parentEl: $('#slicer-button-ratio'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon advanced-btn-ratio',
+                style: 'margin-bottom: 1px;',
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.sizeControls.push(this.btnRatio);
+
+            this.btnRatio.on('click', _.bind(function(btn, e) {
+                if (btn.pressed && this.spnHeight.getNumberValue()>0) {
+                    this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
+                }
+                if (this.api)  {
+                    if (this._originalProps) {
+                        this._originalProps.asc_putLockAspect(btn.pressed);
+                        this.api.asc_setGraphicObjectProps(this._originalProps);
+                    }
+                }
+                Common.NotificationCenter.trigger('edit:complete', this);
+            }, this));
+
+            this.spnWidth.on('change', _.bind(this.onWidthChange, this));
+            this.spnHeight.on('change', _.bind(this.onHeightChange, this));
+            this.spnWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+            this.spnHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+
+            this.spnHor = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-hor'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.spinners.push(this.spnHor);
+            this.sizeControls.push(this.spnHor);
+
+            this.spnVert = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-vert'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.spinners.push(this.spnVert);
+            this.sizeControls.push(this.spnVert);
+
+            this.spnHor.on('change', _.bind(this.onHorChange, this));
+            this.spnVert.on('change', _.bind(this.onVertChange, this));
+            this.spnHor.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+            this.spnVert.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+
+            this.chLock = new Common.UI.CheckBox({
+                el: $('#slicer-checkbox-disable-resize'),
+                labelText: this.textLock,
+                disabled: this._locked
+            });
+            this.lockedControls.push(this.chLock);
+            this.chLock.on('change', this.onLockSlicerChange.bind(this));
+
+            this.spnColWidth = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-col-width'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.spinners.push(this.spnColWidth);
+            this.sizeControls.push(this.spnColWidth);
+
+            this.spnColHeight = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-col-height'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.spinners.push(this.spnColHeight);
+            this.sizeControls.push(this.spnColHeight);
+
+            this.numCols = new Common.UI.MetricSpinner({
+                el: $('#slicer-spin-cols'),
+                step: 1,
+                width: 50,
+                defaultUnit : "",
+                defaultValue : 1,
+                value: '1',
+                allowDecimal: false,
+                maxValue: 20000,
+                minValue: 1
+            });
+            this.sizeControls.push(this.numCols);
+
+            this.spnColWidth.on('change', _.bind(this.onColWidthChange, this));
+            this.spnColHeight.on('change', _.bind(this.onColHeightChange, this));
+            this.numCols.on('change', _.bind(this.onColChange, this));
+            this.spnColWidth.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+            this.spnColHeight.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+            this.numCols.on('inputleave', function(){ Common.NotificationCenter.trigger('edit:complete', me);});
+
+            // Sorting & Filtering
+
+            this.radioAsc = new Common.UI.RadioBox({
+                el: $('#slicer-radio-asc'),
+                name: 'asc-radio-sliceradv-sort',
+                labelText: this.textAsc + ' (' + this.textAZ + ')',
+                checked: true
+            });
+            this.radioAsc.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue && this.api) {
+                    if (this._originalProps) {
+                        this._originalProps.asc_getSlicerProperties().asc_setSortOrder(Asc.ST_tabularSlicerCacheSortOrder.Ascending);
+                        this.api.asc_setGraphicObjectProps(this._originalProps);
+                    }
+                    Common.NotificationCenter.trigger('edit:complete', this);
+                }
+            }, this));
+            this.lockedControls.push(this.radioAsc);
+
+            this.radioDesc = new Common.UI.RadioBox({
+                el: $('#slicer-radio-desc'),
+                name: 'asc-radio-sliceradv-sort',
+                labelText: this.textDesc + ' (' + this.textZA + ')',
+                checked: false
+            });
+            this.radioDesc.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue && this.api) {
+                    if (this._originalProps) {
+                        this._originalProps.asc_getSlicerProperties().asc_setSortOrder(Asc.ST_tabularSlicerCacheSortOrder.Descending);
+                        this.api.asc_setGraphicObjectProps(this._originalProps);
+                    }
+                    Common.NotificationCenter.trigger('edit:complete', this);
+                }
+            }, this));
+            this.lockedControls.push(this.radioDesc);
+
+            this.chHideNoData = new Common.UI.CheckBox({
+                el: $('#slicer-check-hide-nodata'),
+                labelText: this.strHideNoData
+            });
+            this.chHideNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var checked = (field.getValue()=='checked');
+                if (this._originalProps && this.api) {
+                    this._originalProps.asc_getSlicerProperties().asc_setHideItemsWithNoData(checked);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+                Common.NotificationCenter.trigger('edit:complete', this);
+            }, this));
+            this.lockedControls.push(this.chHideNoData);
+
+            this.chIndNoData = new Common.UI.CheckBox({
+                el: $('#slicer-check-indicate-nodata'),
+                labelText: this.strIndNoData
+            });
+            this.chIndNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var checked = (field.getValue()=='checked');
+                if (this._originalProps && this.api) {
+                    this._originalProps.asc_getSlicerProperties().asc_setIndicateItemsWithNoData(checked);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+                Common.NotificationCenter.trigger('edit:complete', this);
+            }, this));
+            this.lockedControls.push(this.chIndNoData);
+
+            this.chShowNoData = new Common.UI.CheckBox({
+                el: $('#slicer-check-show-nodata-last'),
+                disabled: true,
+                labelText: this.strShowNoData
+            });
+            this.chShowNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._originalProps && this.api) {
+                    this._originalProps.asc_getSlicerProperties().asc_setShowItemsWithNoDataLast(field.getValue()=='checked');
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+                Common.NotificationCenter.trigger('edit:complete', this);
+            }, this));
+            this.lockedControls.push(this.chShowNoData);
+
+            this.chShowDel = new Common.UI.CheckBox({
+                el: $('#slicer-check-show-deleted'),
+                labelText: this.strShowDel
+            });
+            this.chShowDel.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                // if (this._originalProps && this.api) {
+                //     this._originalProps.asc_getSlicerProperties().asc_setIndicateItemsWithNoData(field.getValue()=='checked');
+                //     this.api.asc_setGraphicObjectProps(this._originalProps);
+                // }
+            }, this));
+            this.lockedControls.push(this.chShowDel);
+
+            $(this.el).on('click', '#slicer-advanced-link', _.bind(this.openAdvancedSettings, this));
+        },
+
+        createDelayedElements: function() {
+            this.createDelayedControls();
+            this.updateMetricUnit();
+            this._initSettings = false;
+        },
+
+        onSendThemeColors: function() {
+            // get new table templates
+            if (this.mnuSlicerPicker && this._originalProps) {
+                this.onInitStyles(this._originalProps.asc_getSlicerProperties().asc_getStylesPictures());
+                this.mnuSlicerPicker.scroller.update({alwaysVisibleY: true});
+            }
+        },
+
+        openAdvancedSettings: function(e) {
+            if (this.linkAdvanced.hasClass('disabled')) return;
+
+            var me = this;
+            var win;
+            if (me.api && !this._locked){
+                var selectedElements = me.api.asc_getGraphicObjectProps();
+                if (selectedElements && selectedElements.length>0){
+                    var elType, elValue;
+                    for (var i = selectedElements.length - 1; i >= 0; i--) {
+                        elType = selectedElements[i].asc_getObjectType();
+                        elValue = selectedElements[i].asc_getObjectValue();
+                        if (Asc.c_oAscTypeSelectElement.Image == elType) {
+                            (new SSE.Views.SlicerSettingsAdvanced(
+                                {
+                                    imageProps: elValue,
+                                    api: me.api,
+                                    styles: me.styles || me._originalProps.asc_getSlicerProperties().asc_getStylesPictures(),
+                                    handler: function(result, value) {
+                                        if (result == 'ok') {
+                                            if (me.api) {
+                                                me.api.asc_setGraphicObjectProps(value.imageProps);
+                                            }
+                                        }
+                                        Common.NotificationCenter.trigger('edit:complete', me);
+                                    }
+                                })).show();
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+
+        ChangeSettings: function(props) {
+            if (this._initSettings)
+                this.createDelayedElements();
+
+            if (props ){
+                this._originalProps = new Asc.asc_CImgProperty(props);
+
+                var value = props.asc_getWidth();
+                if ( Math.abs(this._state.Width-value)>0.001 ||
+                    (this._state.Width===null || value===null)&&(this._state.Width!==value)) {
+                    this.spnWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
+                    this._state.Width = value;
+                }
+
+                value = props.asc_getHeight();
+                if ( Math.abs(this._state.Height-value)>0.001 ||
+                    (this._state.Height===null || value===null)&&(this._state.Height!==value)) {
+                    this.spnHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
+                    this._state.Height = value;
+                }
+
+                if (props.asc_getHeight()>0)
+                    this._nRatio = props.asc_getWidth()/props.asc_getHeight();
+
+                value = props.asc_getLockAspect();
+                if (this._state.keepRatio!==value) {
+                    this.btnRatio.toggle(value);
+                    this._state.keepRatio=value;
+                }
+
+                value = props.get_Position();
+                if (value) {
+                    var Position = {X: value.get_X(), Y: value.get_Y()};
+                    this.spnHor.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
+                    this.spnVert.setValue((Position.Y !== null && Position.Y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.Y) : '', true);
+                } else {
+                    this.spnHor.setValue('', true);
+                    this.spnVert.setValue('', true);
+                }
+
+                var slicerprops = props.asc_getSlicerProperties();
+                this.disableControls(this._locked, slicerprops ? slicerprops.asc_getLockedPosition() : false);
+
+                if (slicerprops) {
+                    value = slicerprops.asc_getColumnCount();
+                    if ( Math.abs(this._state.ColCount-value)>0.1 ||
+                        (this._state.ColCount===null || value===null)&&(this._state.ColCount!==value)) {
+                        this.numCols.setValue((value!==null) ? value : '', true);
+                        this._state.ColCount = value;
+                    }
+
+                    value = slicerprops.asc_getButtonWidth()/36000;
+                    if ( Math.abs(this._state.ColWidth-value)>0.001 ||
+                        (this._state.ColWidth===null || value===null)&&(this._state.ColWidth!==value)) {
+                        this.spnColWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
+                        this._state.ColWidth = value;
+                    }
+
+                    value = slicerprops.asc_getRowHeight()/36000;
+                    if ( Math.abs(this._state.ColHeight-value)>0.001 ||
+                        (this._state.ColHeight===null || value===null)&&(this._state.ColHeight!==value)) {
+                        this.spnColHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
+                        this._state.ColHeight = value;
+                    }
+
+                    if (!this.btnSlicerStyle)
+                        this.onInitStyles(slicerprops.asc_getStylesPictures());
+                    value = slicerprops.asc_getStyle();
+                    if (this._state.StyleType!==value || this._isTemplatesChanged) {
+                        var rec = this.mnuSlicerPicker.store.findWhere({type: value});
+                        if (!rec) {
+                            rec = this.mnuSlicerPicker.store.at(0);
+                        }
+                        this.btnSlicerStyle.suspendEvents();
+                        this.mnuSlicerPicker.selectRecord(rec, true);
+                        this.btnSlicerStyle.resumeEvents();
+                        this.$el.find('.icon-template-slicer').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'});
+                        this._state.StyleType=value;
+                    }
+                    this._isTemplatesChanged = false;
+
+                    value = slicerprops.asc_getLockedPosition();
+                    this.chLock.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+
+                    // depends of data type
+                    // this.radioAsc.setCaption(this.textAsc + ' (' + this.textAZ + ')' );
+                    // this.radioDesc.setCaption(this.textDesc + ' (' + this.textZA + ')' );
+                    value = slicerprops.asc_getSortOrder();
+                    (value==Asc.ST_tabularSlicerCacheSortOrder.Ascending) ? this.radioAsc.setValue(true, true) : this.radioDesc.setValue(true, true);
+
+                    value = slicerprops.asc_getIndicateItemsWithNoData();
+                    if ( this._state.IndNoData!==value ) {
+                        this.chIndNoData.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                        this._state.IndNoData=value;
+                    }
+
+                    value = slicerprops.asc_getShowItemsWithNoDataLast();
+                    if ( this._state.ShowNoData!==value ) {
+                        this.chShowNoData.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                        this._state.ShowNoData=value;
+                    }
+
+                    value = slicerprops.asc_getHideItemsWithNoData();
+                    if ( this._state.HideNoData!==value ) {
+                        this.chHideNoData.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                        this._state.HideNoData=value;
+                    }
+
+                    this.chIndNoData.setDisabled(value || this._locked);
+                    this.chShowNoData.setDisabled(value || (this.chIndNoData.getValue()!='checked') || this._locked);
+                    this.chShowDel.setDisabled(value || this._locked);
+
+                    // value = slicerprops.asc_getShowDeleted();
+                    // if ( this._state.ShowDel!==value ) {
+                    //     this.chShowDel.setValue((value !== null && value !== undefined) ? !!value : 'indeterminate', true);
+                    //     this._state.ShowDel=value;
+                    // }
+                }
+            }
+        },
+
+        onWidthChange: function(field, newValue, oldValue, eOpts){
+            var w = field.getNumberValue();
+            var h = this.spnHeight.getNumberValue();
+            if (this.btnRatio.pressed) {
+                h = w/this._nRatio;
+                if (h>this.spnHeight.options.maxValue) {
+                    h = this.spnHeight.options.maxValue;
+                    w = h * this._nRatio;
+                    this.spnWidth.setValue(w, true);
+                }
+                this.spnHeight.setValue(h, true);
+            }
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w));
+                    this._originalProps.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h));
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onHeightChange: function(field, newValue, oldValue, eOpts){
+            var h = field.getNumberValue(), w = this.spnWidth.getNumberValue();
+            if (this.btnRatio.pressed) {
+                w = h * this._nRatio;
+                if (w>this.spnWidth.options.maxValue) {
+                    w = this.spnWidth.options.maxValue;
+                    h = w/this._nRatio;
+                    this.spnHeight.setValue(h, true);
+                }
+                this.spnWidth.setValue(w, true);
+            }
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.asc_putWidth(Common.Utils.Metric.fnRecalcToMM(w));
+                    this._originalProps.asc_putHeight(Common.Utils.Metric.fnRecalcToMM(h));
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onHorChange: function(field, newValue, oldValue, eOpts){
+            var Position = new Asc.CPosition();
+            if (field.getValue() !== '')
+                Position.put_X(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+            if (this.spnVert.getValue() !== '')
+                Position.put_Y(Common.Utils.Metric.fnRecalcToMM(this.spnVert.getNumberValue()));
+
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.put_Position(Position);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onVertChange: function(field, newValue, oldValue, eOpts){
+            var Position = new Asc.CPosition();
+            if (this.spnHor.getValue() !== '')
+                Position.put_X(Common.Utils.Metric.fnRecalcToMM(this.spnHor.getNumberValue()));
+            if (field.getValue() !== '')
+                Position.put_Y(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.put_Position(Position);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onColWidthChange: function(field, newValue, oldValue, eOpts){
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.asc_getSlicerProperties().asc_setButtonWidth(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue())*36000);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onColHeightChange: function(field, newValue, oldValue, eOpts){
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.asc_getSlicerProperties().asc_setRowHeight(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue())*36000);
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onColChange: function(field, newValue, oldValue, eOpts){
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.asc_getSlicerProperties().asc_setColumnCount(field.getNumberValue());
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onInitStyles: function(Templates){
+            var self = this;
+            this._isTemplatesChanged = true;
+            this.styles = Templates;
+
+            if (!this.btnSlicerStyle) {
+                this.btnSlicerStyle = new Common.UI.Button({
+                    cls         : 'btn-large-dataview sheet-template-slicer',
+                    iconCls     : 'icon-template-slicer',
+                    menu        : new Common.UI.Menu({
+                        style: 'width: 333px;',
+                        items: [
+                            { template: _.template('<div id="id-slicer-menu-style" class="menu-slicer-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                        ]
+                    })
+                });
+                this.btnSlicerStyle.on('render:after', function(btn) {
+                    self.mnuSlicerPicker = new Common.UI.DataView({
+                        el: $('#id-slicer-menu-style'),
+                        parentMenu: btn.menu,
+                        restoreHeight: 325,
+                        groups: new Common.UI.DataViewGroupStore(),
+                        store: new Common.UI.DataViewStore(),
+                        itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="49" width="36"></div>'),
+                        style: 'max-height: 325px;'
+                    });
+                });
+                this.btnSlicerStyle.render($('#slicer-btn-style'));
+                this.lockedControls.push(this.btnSlicerStyle);
+                this.mnuSlicerPicker.on('item:click', _.bind(this.onSelectSlicerStyle, this, this.btnSlicerStyle));
+                if (this._locked) this.btnSlicerStyle.setDisabled(this._locked);
+            }
+
+            if (Templates) {
+                var count = self.mnuSlicerPicker.store.length;
+                if (count>0 && count==Templates.length) {
+                    var data = self.mnuSlicerPicker.store.models;
+                    _.each(Templates, function(template, index){
+                        data[index].set('imageUrl', template.asc_getImage());
+                    });
+                } else {
+                    var arr = [];
+                    _.each(Templates, function(template){
+                        arr.push({
+                            id          : Common.UI.getId(),
+                            type        : template.asc_getName(),
+                            imageUrl    : template.asc_getImage(),
+                            allowSelected : true,
+                            selected    : false
+                        });
+                    });
+                    self.mnuSlicerPicker.store.reset(arr);
+                }
+            }
+            this.btnSlicerStyle.setDisabled(this.mnuSlicerPicker.store.length<1 || this._locked);
+        },
+
+        onSelectSlicerStyle: function(btn, picker, itemView, record) {
+            if (this._noApply) return;
+
+            if (this._originalProps) {
+                this._originalProps.asc_getSlicerProperties().asc_setStyle(record.get('type'));
+                this.api.asc_setGraphicObjectProps(this._originalProps);
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onLockSlicerChange: function(field, newValue, oldValue, eOpts){
+            if (this.api)  {
+                if (this._originalProps) {
+                    this._originalProps.asc_getSlicerProperties().asc_setLockedPosition(field.getValue()=='checked');
+                    this.api.asc_setGraphicObjectProps(this._originalProps);
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+
+        disableControls: function(disable, disableSize) {
+            if (this._initSettings) return;
+
+            this.disableSizeControls(disable || disableSize);
+            if (this._state.DisabledControls!==disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function(item) {
+                    item.setDisabled(disable);
+                });
+                this.linkAdvanced.toggleClass('disabled', disable);
+            }
+        },
+
+        disableSizeControls: function(disable) {
+            if (this._state.DisabledSizeControls!==disable) {
+                this._state.DisabledSizeControls = disable;
+                _.each(this.sizeControls, function(item) {
+                    item.setDisabled(disable);
+                });
+            }
+        },
+
+        textKeepRatio: 'Constant Proportions',
+        textSize:       'Size',
+        textWidth:      'Width',
+        textHeight:     'Height',
+        textAdvanced:   'Show advanced settings',
+        textPosition: 'Position',
+        textHor: 'Horizontal',
+        textVert: 'Vertical',
+        textButtons: 'Buttons',
+        textColumns: 'Columns',
+        textStyle: 'Style',
+        textLock: 'Disable resizing or moving',
+        strSorting: 'Sorting and filtering',
+        textAsc: 'Ascending',
+        textDesc: 'Descending',
+        textAZ: 'A to Z',
+        textZA: 'Z to A',
+        textOldNew: 'oldest to newest',
+        textNewOld: 'newest to oldest',
+        textSmallLarge: 'smallest to largest',
+        textLargeSmall: 'largest to smallest',
+        strHideNoData: 'Hide items with no data',
+        strIndNoData: 'Visually indicate items with no data',
+        strShowNoData: 'Show items with no data last',
+        strShowDel: 'Show items deleted from the data source'
+
+    }, SSE.Views.SlicerSettings || {}));
+});
+

apps/spreadsheeteditor/main/app/view/SlicerSettingsAdvanced.js

@@ -0,0 +1,569 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * 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 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * 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
+ *
+ */
+/**
+ *  SlicerSettingsAdvanced.js
+ *
+ *  Created by Julia Radzhabova on 14.04.2020
+ *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([    'text!spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template',
+    'common/main/lib/view/AdvancedSettingsWindow',
+    'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/CheckBox',
+    'common/main/lib/component/RadioBox',
+    'common/main/lib/component/ComboDataView'
+], function (contentTemplate) {
+    'use strict';
+
+    SSE.Views.SlicerSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            contentWidth: 330,
+            height: 435,
+            toggleGroup: 'slicer-adv-settings-group',
+            storageName: 'sse-slicer-settings-adv-category'
+        },
+
+        initialize : function(options) {
+            var me = this;
+            _.extend(this.options, {
+                title: this.textTitle,
+                items: [
+                    {panelId: 'id-adv-slicer-style',        panelCaption: this.strStyleSize},
+                    {panelId: 'id-adv-slicer-sorting',      panelCaption: this.strSorting},
+                    {panelId: 'id-adv-slicer-references',   panelCaption: this.strReferences},
+                    {panelId: 'id-adv-slicer-snap',         panelCaption: this.textSnap},
+                    {panelId: 'id-adv-slicer-alttext',      panelCaption: this.textAlt}
+                ],
+                contentTemplate: _.template(contentTemplate)({
+                    scope: this
+                })
+            }, options);
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+
+            this._changedProps = null;
+            this._noApply = true;
+            this.spinners = [];
+            this._nRatio = 1;
+
+            this._originalProps = this.options.imageProps;
+        },
+
+        render: function() {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+
+            var me = this;
+
+            // Style & Size
+            this.inputHeader = new Common.UI.InputField({
+                el          : $('#sliceradv-text-header'),
+                allowBlank  : false,
+                blankError  : me.txtEmpty,
+                style       : 'width: 178px;'
+            }).on('changed:after', function() {
+                me.isCaptionChanged = true;
+            });
+
+            this.chHeader = new Common.UI.CheckBox({
+                el: $('#sliceradv-checkbox-header'),
+                labelText: this.strShowHeader
+            });
+            this.chHeader.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._changedProps) {
+                    this._changedProps.asc_setShowCaption(field.getValue()=='checked');
+                }
+            }, this));
+
+            this.btnSlicerStyle = new Common.UI.Button({
+                parentEl: $('#sliceradv-btn-style'),
+                cls         : 'btn-large-dataview sheet-template-slicer',
+                iconCls     : 'icon-template-slicer',
+                menu        : new Common.UI.Menu({
+                    style: 'width: 333px;',
+                    additionalAlign: this.menuAddAlign,
+                    items: [
+                        { template: _.template('<div id="sliceradv-menu-style" class="menu-slicer-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                    ]
+                })
+            });
+            this.mnuSlicerPicker = new Common.UI.DataView({
+                el: $('#sliceradv-menu-style'),
+                parentMenu: this.btnSlicerStyle.menu,
+                restoreHeight: 325,
+                groups: new Common.UI.DataViewGroupStore(),
+                store: new Common.UI.DataViewStore(),
+                itemTemplate: _.template('<div id="<%= id %>" class="item"><img src="<%= imageUrl %>" height="49" width="36"></div>'),
+                style: 'max-height: 325px;'
+            });
+            this.mnuSlicerPicker.on('item:click', _.bind(this.onSelectSlicerStyle, this, this.btnSlicerStyle));
+
+            this.numWidth = new Common.UI.MetricSpinner({
+                el: $('#sliceradv-spin-width'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this.btnRatio.pressed) {
+                    var w = field.getNumberValue();
+                    var h = w/this._nRatio;
+                    if (h>this.numHeight.options.maxValue) {
+                        h = this.numHeight.options.maxValue;
+                        w = h * this._nRatio;
+                        this.numWidth.setValue(w, true);
+                    }
+                    this.numHeight.setValue(h, true);
+                }
+                if (this._originalProps) {
+                    this._originalProps.put_Width(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                    this._originalProps.put_Height(Common.Utils.Metric.fnRecalcToMM(this.numHeight.getNumberValue()));
+                }
+            }, this));
+            this.spinners.push(this.numWidth);
+
+            this.numHeight = new Common.UI.MetricSpinner({
+                el: $('#sliceradv-spin-height'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var h = field.getNumberValue(), w = null;
+                if (this.btnRatio.pressed) {
+                    w = h * this._nRatio;
+                    if (w>this.numWidth.options.maxValue) {
+                        w = this.numWidth.options.maxValue;
+                        h = w/this._nRatio;
+                        this.numHeight.setValue(h, true);
+                    }
+                    this.numWidth.setValue(w, true);
+                }
+                if (this._originalProps) {
+                    this._originalProps.put_Width(Common.Utils.Metric.fnRecalcToMM(this.numWidth.getNumberValue()));
+                    this._originalProps.put_Height(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                }
+            }, this));
+            this.spinners.push(this.numHeight);
+
+            this.btnRatio = new Common.UI.Button({
+                parentEl: $('#sliceradv-button-ratio'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon advanced-btn-ratio',
+                style: 'margin-bottom: 1px;',
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.btnRatio.on('click', _.bind(function(btn, e) {
+                if (btn.pressed && this.numHeight.getNumberValue()>0) {
+                    this._nRatio = this.numWidth.getNumberValue()/this.numHeight.getNumberValue();
+                }
+                if (this._originalProps) {
+                    this._originalProps.asc_putLockAspect(btn.pressed);
+                }
+            }, this));
+
+            this.numColHeight = new Common.UI.MetricSpinner({
+                el: $('#sliceradv-spin-col-height'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 5963.9,
+                minValue: 0
+            });
+            this.numColHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var numval = field.getNumberValue();
+                if (this._changedProps) {
+                    this._changedProps.asc_setRowHeight(Common.Utils.Metric.fnRecalcToMM(numval)*36000);
+                }
+            }, this));
+            this.spinners.push(this.numColHeight);
+
+            this.numCols = new Common.UI.MetricSpinner({
+                el: $('#sliceradv-spin-columns'),
+                step: 1,
+                width: 85,
+                defaultUnit : "",
+                defaultValue : 1,
+                value: '1',
+                allowDecimal: false,
+                maxValue: 20000,
+                minValue: 1
+            });
+            this.numCols.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var numval = field.getNumberValue();
+                if (this._changedProps) {
+                    this._changedProps.asc_setColumnCount(numval);
+                }
+            }, this));
+
+            // Sorting & Filtering
+
+            this.radioAsc = new Common.UI.RadioBox({
+                el: $('#sliceradv-radio-asc'),
+                name: 'asc-radio-sliceradv-sort',
+                labelText: this.textAsc,
+                checked: true
+            });
+            this.radioAsc.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue) {
+                    if (this._changedProps) {
+                        this._changedProps.asc_setSortOrder(Asc.ST_tabularSlicerCacheSortOrder.Ascending);
+                    }
+                }
+            }, this));
+
+            this.radioDesc = new Common.UI.RadioBox({
+                el: $('#sliceradv-radio-desc'),
+                name: 'asc-radio-sliceradv-sort',
+                labelText: this.textDesc,
+                checked: false
+            });
+            this.radioDesc.on('change', _.bind(function(field, newValue, eOpts) {
+                if (newValue) {
+                    if (this._changedProps) {
+                        this._changedProps.asc_setSortOrder(Asc.ST_tabularSlicerCacheSortOrder.Descending);
+                    }
+                }
+            }, this));
+
+            this.chHideNoData = new Common.UI.CheckBox({
+                el: $('#sliceradv-check-hide-nodata'),
+                labelText: this.strHideNoData
+            });
+            this.chHideNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var checked = (field.getValue()=='checked');
+                this.chIndNoData.setDisabled(checked);
+                this.chShowNoData.setDisabled(checked || (this.chIndNoData.getValue()!='checked'));
+                this.chShowDel.setDisabled(checked);
+                if (this._changedProps) {
+                    this._changedProps.asc_setHideItemsWithNoData(checked);
+                }
+            }, this));
+
+            this.chIndNoData = new Common.UI.CheckBox({
+                el: $('#sliceradv-check-indicate-nodata'),
+                labelText: this.strIndNoData
+            });
+            this.chIndNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var checked = (field.getValue()=='checked');
+                this.chShowNoData.setDisabled(!checked);
+                if (this._changedProps) {
+                    this._changedProps.asc_setIndicateItemsWithNoData(checked);
+                }
+            }, this));
+
+            this.chShowNoData = new Common.UI.CheckBox({
+                el: $('#sliceradv-check-show-nodata-last'),
+                disabled: true,
+                labelText: this.strShowNoData
+            });
+            this.chShowNoData.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._changedProps) {
+                    this._changedProps.asc_setShowItemsWithNoDataLast(field.getValue()=='checked');
+                }
+            }, this));
+
+            this.chShowDel = new Common.UI.CheckBox({
+                el: $('#sliceradv-check-show-deleted'),
+                labelText: this.strShowDel
+            });
+            this.chShowDel.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._changedProps) {
+                    // this._changedProps.asc_putStrikeout(field.getValue()=='checked');
+                }
+            }, this));
+
+            // References
+
+            this.inputName = new Common.UI.InputField({
+                el          : $('#sliceradv-text-name'),
+                allowBlank  : false,
+                blankError  : me.txtEmpty,
+                style       : 'width: 178px;'
+            }).on('changed:after', function() {
+                me.isNameChanged = true;
+            });
+
+            this.lblSource = $('#sliceradv-lbl-source');
+            this.lblFormula = $('#sliceradv-lbl-formula');
+
+            // Snapping
+            this.radioTwoCell = new Common.UI.RadioBox({
+                el: $('#slicer-advanced-radio-twocell'),
+                name: 'asc-radio-snap',
+                labelText: this.textTwoCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
+            });
+            this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioOneCell = new Common.UI.RadioBox({
+                el: $('#slicer-advanced-radio-onecell'),
+                name: 'asc-radio-snap',
+                labelText: this.textOneCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
+            });
+            this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioAbsolute = new Common.UI.RadioBox({
+                el: $('#slicer-advanced-radio-absolute'),
+                name: 'asc-radio-snap',
+                labelText: this.textAbsolute,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
+            });
+            this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
+
+            // Alt Text
+
+            this.inputAltTitle = new Common.UI.InputField({
+                el          : $('#sliceradv-alt-title'),
+                allowBlank  : true,
+                validateOnBlur: false,
+                style       : 'width: 100%;'
+            }).on('changed:after', function() {
+                me.isAltTitleChanged = true;
+            });
+
+            this.textareaAltDescription = this.$window.find('textarea');
+            this.textareaAltDescription.keydown(function (event) {
+                if (event.keyCode == Common.UI.Keys.RETURN) {
+                    event.stopPropagation();
+                }
+                me.isAltDescChanged = true;
+            });
+
+            this.on('show', function(obj) {
+                obj.getChild('.footer .primary').focus();
+            });
+
+            this.afterRender();
+        },
+
+        getSettings: function() {
+            if (this.isCaptionChanged)
+                this._changedProps.asc_setCaption(this.inputHeader.getValue());
+            if (this.isNameChanged)
+                this._changedProps.asc_setName(this.inputName.getValue());
+
+            if (this.isAltTitleChanged)
+                this._originalProps.asc_putTitle(this.inputAltTitle.getValue());
+
+            if (this.isAltDescChanged)
+                this._originalProps.asc_putDescription(this.textareaAltDescription.val());
+
+            return {imageProps: this._originalProps};
+        },
+
+        _setDefaults: function(props) {
+            if (props){
+                var value = props.asc_getWidth();
+                this.numWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
+                value = props.asc_getHeight();
+                this.numHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
+
+                if (props.asc_getHeight()>0)
+                    this._nRatio = props.asc_getWidth()/props.asc_getHeight();
+
+                value = props.asc_getLockAspect();
+                this.btnRatio.toggle(value);
+
+                value = props.asc_getTitle();
+                this.inputAltTitle.setValue(value ? value : '');
+
+                value = props.asc_getDescription();
+                this.textareaAltDescription.val(value ? value : '');
+
+                value = props.asc_getAnchor();
+                switch (value) {
+                    case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
+                        this.radioTwoCell.setValue(true, true);
+                        break;
+                    case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
+                        this.radioOneCell.setValue(true, true);
+                        break;
+                    case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
+                        this.radioAbsolute.setValue(true, true);
+                        break;
+                }
+
+                var slicerprops = props.asc_getSlicerProperties();
+                if (slicerprops) {
+                    this._noApply = true;
+
+                    this.numCols.setValue(slicerprops.asc_getColumnCount(), true);
+                    this.numColHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(slicerprops.asc_getRowHeight()/36000).toFixed(2), true);
+
+                    this.inputHeader.setValue(slicerprops.asc_getCaption(), true);
+                    var checked = slicerprops.asc_getShowCaption();
+                    this.chHeader.setValue(checked !== null && checked !== undefined ? checked : 'indeterminate', true);
+
+                    // depends of data type
+                    this.radioAsc.setCaption(this.textAsc + ' (' + this.textAZ + ')' );
+                    this.radioDesc.setCaption(this.textDesc + ' (' + this.textZA + ')' );
+                    (slicerprops.asc_getSortOrder()==Asc.ST_tabularSlicerCacheSortOrder.Ascending) ? this.radioAsc.setValue(true, true) : this.radioDesc.setValue(true, true);
+
+                    checked = slicerprops.asc_getIndicateItemsWithNoData();
+                    this.chIndNoData.setValue(checked !== null && checked !== undefined ? checked : 'indeterminate', true);
+                    checked = slicerprops.asc_getShowItemsWithNoDataLast();
+                    this.chShowNoData.setValue(checked !== null && checked !== undefined ? checked : 'indeterminate', true);
+                    checked = slicerprops.asc_getHideItemsWithNoData();
+                    this.chHideNoData.setValue(checked !== null && checked !== undefined ? checked : 'indeterminate', true);
+
+                    this.chIndNoData.setDisabled(checked);
+                    this.chShowNoData.setDisabled(checked || (this.chIndNoData.getValue()!='checked'));
+                    this.chShowDel.setDisabled(checked);
+
+                    this.inputName.setValue(slicerprops.asc_getName());
+                    this.lblSource.text(slicerprops.asc_getSourceName());
+                    this.lblFormula.text(slicerprops.asc_getNameInFormulas());
+
+                    value = slicerprops.asc_getStyle();
+                    var rec = this.mnuSlicerPicker.store.findWhere({type: value});
+                    if (!rec && this.mnuSlicerPicker.store.length>0) {
+                        rec = this.mnuSlicerPicker.store.at(0);
+                    }
+                    if (rec) {
+                        this.btnSlicerStyle.suspendEvents();
+                        this.mnuSlicerPicker.selectRecord(rec, true);
+                        this.btnSlicerStyle.resumeEvents();
+                        this.$window.find('.icon-template-slicer').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'});
+                    } else
+                        this.$window.find('.icon-template-slicer').css({'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'});
+
+                    this._noApply = false;
+
+                    this._changedProps = slicerprops;
+                }
+            }
+        },
+
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                }
+            }
+        },
+
+        afterRender: function() {
+            this.updateMetricUnit();
+            this.onInitStyles(this.options.styles);
+            this._setDefaults(this._originalProps);
+            if (this.storageName) {
+                var value = Common.localStorage.getItem(this.storageName);
+                this.setActiveCategory((value!==null) ? parseInt(value) : 0);
+            }
+        },
+
+        onInitStyles: function(Templates){
+            var arr = [];
+            Templates && _.each(Templates, function(template){
+                arr.push({
+                    id          : Common.UI.getId(),
+                    type        : template.asc_getName(),
+                    imageUrl    : template.asc_getImage(),
+                    allowSelected : true,
+                    selected    : false
+                });
+            });
+            this.mnuSlicerPicker.store.reset(arr);
+            this.btnSlicerStyle.setDisabled(this.mnuSlicerPicker.store.length<1);
+        },
+
+        onSelectSlicerStyle: function(btn, picker, itemView, record) {
+            if (this._noApply) return;
+
+            if (this._changedProps) {
+                this._changedProps.asc_setStyle(record.get('type'));
+            }
+            this.$window.find('.icon-template-slicer').css({'background-image': 'url(' + record.get("imageUrl") + ')', 'height': '49px', 'width': '36px', 'background-position': 'center', 'background-size': 'cover'});
+        },
+
+        onRadioSnapChange: function(field, newValue, eOpts) {
+            if (newValue && this._originalProps) {
+                this._originalProps.asc_putAnchor(field.options.value);
+            }
+        },
+
+        textTitle: 'Slicer - Advanced Settings',
+        textHeader: 'Header',
+        strStyle: 'Style',
+        strSize: 'Size',
+        strWidth: 'Width',
+        strHeight: 'Height',
+        strButtons: 'Buttons',
+        strColumns: 'Columns',
+        textSort: 'Sort',
+        textSourceName: 'Source name',
+        textFormulaName: 'Name to use in formulas',
+        textName: 'Name',
+        strStyleSize: 'Style & Size',
+        strSorting: 'Sorting & Filtering',
+        strReferences: 'References',
+        txtEmpty: 'This field is required',
+        strShowHeader: 'Display header',
+        textAsc: 'Ascending',
+        textDesc: 'Descending',
+        textAZ: 'A to Z',
+        textZA: 'Z to A',
+        textOldNew: 'oldest to newest',
+        textNewOld: 'newest to oldest',
+        textSmallLarge: 'smallest to largest',
+        textLargeSmall: 'largest to smallest',
+        strHideNoData: 'Hide items with no data',
+        strIndNoData: 'Visually indicate items with no data',
+        strShowNoData: 'Show items with no data last',
+        strShowDel: 'Show items deleted from the data source',
+        textAlt: 'Alternative Text',
+        textAltTitle: 'Title',
+        textAltDescription: 'Description',
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
+        textSnap: 'Cell Snapping',
+        textAbsolute: 'Don\'t move or size with cells',
+        textOneCell: 'Move but don\'t size with cells',
+        textTwoCell: 'Move and size with cells',
+        textKeepRatio: 'Constant Proportions'
+
+    }, SSE.Views.SlicerSettingsAdvanced || {}));
+});

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -92,7 +92,8 @@ define([
         headerLock: 'header-lock',
         sheetLock: 'sheet-lock',
         noPivot: 'no-pivot',
-        noSubitems: 'no-subitems'
+        noSubitems: 'no-subitems',
+        noSlicerSource: 'no-slicer-source'
     };
 
     SSE.Views.Toolbar =  Common.UI.Mixtbar.extend(_.extend({
@@ -741,6 +742,14 @@ define([
                     lock: [_set.selImage, _set.selChart, _set.selShape, _set.editFormula, _set.selRangeEdit, _set.coAuth, _set.coAuthText, _set.lostConnect]
                 });
 
+                me.btnInsertSlicer = new Common.UI.Button({
+                    id: 'tlbtn-insertslicer',
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-slicer',
+                    caption: me.capBtnInsSlicer,
+                    lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.multiselect, _set.noSlicerSource]
+                });
+
                 me.btnTableTemplate = new Common.UI.Button({
                     id          : 'id-toolbar-btn-ttempl',
                     cls         : 'btn-toolbar',
@@ -1407,7 +1416,7 @@ define([
                     me.btnItalic, me.btnUnderline, me.btnStrikeout, me.btnSubscript, me.btnTextColor, me.btnAlignLeft,
                     me.btnAlignCenter,me.btnAlignRight,me.btnAlignJust, me.btnAlignTop,
                     me.btnAlignMiddle, me.btnAlignBottom, me.btnWrap, me.btnTextOrient, me.btnBackColor, me.btnInsertTable,
-                    me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertSymbol,
+                    me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertSymbol, me.btnInsertSlicer,
                     me.btnInsertText, me.btnInsertTextArt, me.btnSortUp, me.btnSortDown, me.btnSetAutofilter, me.btnClearAutofilter,
                     me.btnTableTemplate, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell,
                     me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
@@ -1584,6 +1593,7 @@ define([
             _injectComponent('#slot-btn-instextart',     this.btnInsertTextArt);
             _injectComponent('#slot-btn-insequation',    this.btnInsertEquation);
             _injectComponent('#slot-btn-inssymbol',      this.btnInsertSymbol);
+            _injectComponent('#slot-btn-insslicer',      this.btnInsertSlicer);
             _injectComponent('#slot-btn-sortdesc',       this.btnSortDown);
             _injectComponent('#slot-btn-sortasc',        this.btnSortUp);
             _injectComponent('#slot-btn-setfilter',      this.btnSetAutofilter);
@@ -1665,6 +1675,7 @@ define([
             _updateHint(this.btnInsertShape, this.tipInsertShape);
             _updateHint(this.btnInsertEquation, this.tipInsertEquation);
             _updateHint(this.btnInsertSymbol, this.tipInsertSymbol);
+            _updateHint(this.btnInsertSlicer, this.tipInsertSlicer);
             _updateHint(this.btnSortDown, this.txtSortAZ);
             _updateHint(this.btnSortUp, this.txtSortZA);
             _updateHint(this.btnSetAutofilter, this.txtFilter + ' (Ctrl+Shift+L)');
@@ -2407,6 +2418,8 @@ define([
         txtAutosumTip: 'Summation',
         capBtnPrintTitles: 'Print Titles',
         tipPrintTitles: 'Print titles',
+        capBtnInsSlicer: 'Slicer',
+        tipInsertSlicer: 'Insert slicer',
         textVertical: 'Vertical Text'
     }, SSE.Views.Toolbar || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -814,6 +814,9 @@
   "SSE.Controllers.Main.warnNoLicense": "This version of %1 editors has certain limitations for concurrent connections to the document server.<br>If you need more please consider purchasing a commercial license.",
   "SSE.Controllers.Main.warnNoLicenseUsers": "This version of %1 editors has certain limitations for concurrent users.<br>If you need more please consider purchasing a commercial license.",
   "SSE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.",
+  "SSE.Controllers.Main.txtMultiSelect": "Multi-Select (Alt+S)",
+  "SSE.Controllers.Main.txtClearFilter": "Clear Filter (Alt+C)",
+  "SSE.Controllers.Main.txtBlank": "(blank)",
   "SSE.Controllers.Main.textHasMacros": "The file contains automatic macros.<br>Do you want to run macros?",
   "SSE.Controllers.Main.textRemember": "Remember my choice",
   "SSE.Controllers.Print.strAllSheets": "All Sheets",
@@ -1578,6 +1581,7 @@
   "SSE.Views.DocumentHolder.txtWidth": "Width",
   "SSE.Views.DocumentHolder.vertAlignText": "Vertical Alignment",
   "SSE.Views.DocumentHolder.textFromStorage": "From Storage",
+  "SSE.Views.DocumentHolder.advancedSlicerText": "Slicer Advanced Settings",
   "SSE.Views.FieldSettingsDialog.strLayout": "Layout",
   "SSE.Views.FieldSettingsDialog.strSubtotals": "Subtotals",
   "SSE.Views.FieldSettingsDialog.textReport": "Report Form",
@@ -2127,6 +2131,7 @@
   "SSE.Views.RightMenu.txtSparklineSettings": "Sparkline Settings",
   "SSE.Views.RightMenu.txtTableSettings": "Table settings",
   "SSE.Views.RightMenu.txtTextArtSettings": "Text Art settings",
+  "SSE.Views.RightMenu.txtSlicerSettings": "Slicer Settings",
   "SSE.Views.ScaleDialog.textAuto": "Auto",
   "SSE.Views.ScaleDialog.textError": "The entered value is incorrect.",
   "SSE.Views.ScaleDialog.textFewPages": "pages",
@@ -2250,6 +2255,71 @@
   "SSE.Views.SignatureSettings.txtRequestedSignatures": "This spreadsheet needs to be signed.",
   "SSE.Views.SignatureSettings.txtSigned": "Valid signatures has been added to the spreadsheet. The spreadsheet is protected from editing.",
   "SSE.Views.SignatureSettings.txtSignedInvalid": "Some of the digital signatures in spreadsheet are invalid or could not be verified. The spreadsheet is protected from editing.",
+  "SSE.Views.SlicerAddDialog.txtTitle": "Insert Slicers",
+  "SSE.Views.SlicerAddDialog.textColumns": "Columns",
+  "SSE.Views.SlicerSettings.textKeepRatio": "Constant Proportions",
+  "SSE.Views.SlicerSettings.textSize": "Size",
+  "SSE.Views.SlicerSettings.textWidth": "Width",
+  "SSE.Views.SlicerSettings.textHeight": "Height",
+  "SSE.Views.SlicerSettings.textAdvanced": "Show advanced settings",
+  "SSE.Views.SlicerSettings.textPosition": "Position",
+  "SSE.Views.SlicerSettings.textHor": "Horizontal",
+  "SSE.Views.SlicerSettings.textVert": "Vertical",
+  "SSE.Views.SlicerSettings.textButtons": "Buttons",
+  "SSE.Views.SlicerSettings.textColumns": "Columns",
+  "SSE.Views.SlicerSettings.textStyle": "Style",
+  "SSE.Views.SlicerSettings.textLock": "Disable resizing or moving",
+  "SSE.Views.SlicerSettings.strSorting": "Sorting and filtering",
+  "SSE.Views.SlicerSettings.textAsc": "Ascending",
+  "SSE.Views.SlicerSettings.textDesc": "Descending",
+  "SSE.Views.SlicerSettings.textAZ": "A to Z",
+  "SSE.Views.SlicerSettings.textZA": "Z to A",
+  "SSE.Views.SlicerSettings.textOldNew": "oldest to newest",
+  "SSE.Views.SlicerSettings.textNewOld": "newest to oldest",
+  "SSE.Views.SlicerSettings.textSmallLarge": "smallest to largest",
+  "SSE.Views.SlicerSettings.textLargeSmall": "largest to smallest",
+  "SSE.Views.SlicerSettings.strHideNoData": "Hide items with no data",
+  "SSE.Views.SlicerSettings.strIndNoData": "Visually indicate items with no data",
+  "SSE.Views.SlicerSettings.strShowNoData": "Show items with no data last",
+  "SSE.Views.SlicerSettings.strShowDel": "Show items deleted from the data source",
+  "SSE.Views.SlicerSettingsAdvanced.textTitle": "Slicer - Advanced Settings",
+  "SSE.Views.SlicerSettingsAdvanced.textHeader": "Header",
+  "SSE.Views.SlicerSettingsAdvanced.strStyle": "Style",
+  "SSE.Views.SlicerSettingsAdvanced.strSize": "Size",
+  "SSE.Views.SlicerSettingsAdvanced.strWidth": "Width",
+  "SSE.Views.SlicerSettingsAdvanced.strHeight": "Height",
+  "SSE.Views.SlicerSettingsAdvanced.strButtons": "Buttons",
+  "SSE.Views.SlicerSettingsAdvanced.strColumns": "Columns",
+  "SSE.Views.SlicerSettingsAdvanced.textSort": "Sort",
+  "SSE.Views.SlicerSettingsAdvanced.textSourceName": "Source name",
+  "SSE.Views.SlicerSettingsAdvanced.textFormulaName": "Name to use in formulas",
+  "SSE.Views.SlicerSettingsAdvanced.textName": "Name",
+  "SSE.Views.SlicerSettingsAdvanced.strStyleSize": "Style & Size",
+  "SSE.Views.SlicerSettingsAdvanced.strSorting": "Sorting & Filtering",
+  "SSE.Views.SlicerSettingsAdvanced.strReferences": "References",
+  "SSE.Views.SlicerSettingsAdvanced.txtEmpty": "This field is required",
+  "SSE.Views.SlicerSettingsAdvanced.strShowHeader": "Display header",
+  "SSE.Views.SlicerSettingsAdvanced.textAsc": "Ascending",
+  "SSE.Views.SlicerSettingsAdvanced.textDesc": "Descending",
+  "SSE.Views.SlicerSettingsAdvanced.textAZ": "A to Z",
+  "SSE.Views.SlicerSettingsAdvanced.textZA": "Z to A",
+  "SSE.Views.SlicerSettingsAdvanced.textOldNew": "oldest to newest",
+  "SSE.Views.SlicerSettingsAdvanced.textNewOld": "newest to oldest",
+  "SSE.Views.SlicerSettingsAdvanced.textSmallLarge": "smallest to largest",
+  "SSE.Views.SlicerSettingsAdvanced.textLargeSmall": "largest to smallest",
+  "SSE.Views.SlicerSettingsAdvanced.strHideNoData": "Hide items with no data",
+  "SSE.Views.SlicerSettingsAdvanced.strIndNoData": "Visually indicate items with no data",
+  "SSE.Views.SlicerSettingsAdvanced.strShowNoData": "Show items with no data last",
+  "SSE.Views.SlicerSettingsAdvanced.strShowDel": "Show items deleted from the data source",
+  "SSE.Views.SlicerSettingsAdvanced.textAlt": "Alternative Text",
+  "SSE.Views.SlicerSettingsAdvanced.textAltTitle": "Title",
+  "SSE.Views.SlicerSettingsAdvanced.textAltDescription": "Description",
+  "SSE.Views.SlicerSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
+  "SSE.Views.SlicerSettingsAdvanced.textSnap": "Cell Snapping",
+  "SSE.Views.SlicerSettingsAdvanced.textAbsolute": "Don't move or size with cells",
+  "SSE.Views.SlicerSettingsAdvanced.textOneCell": "Move but don't size with cells",
+  "SSE.Views.SlicerSettingsAdvanced.textTwoCell": "Move and size with cells",
+  "SSE.Views.SlicerSettingsAdvanced.textKeepRatio": "Constant Proportions",
   "SSE.Views.SortDialog.errorEmpty": "All sort criteria must have a column or row specified.",
   "SSE.Views.SortDialog.errorMoreOneCol": "More than one column is selected.",
   "SSE.Views.SortDialog.errorMoreOneRow": "More than one row is selected.",
@@ -2677,6 +2747,8 @@
   "SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells",
   "SSE.Views.Toolbar.txtYen": "¥ Yen",
   "SSE.Views.Toolbar.textVertical": "Vertical Text",
+  "SSE.Views.Toolbar.capBtnInsSlicer": "Slicer",
+  "SSE.Views.Toolbar.tipInsertSlicer": "Insert slicer",
   "SSE.Views.Top10FilterDialog.textType": "Show",
   "SSE.Views.Top10FilterDialog.txtBottom": "Bottom",
   "SSE.Views.Top10FilterDialog.txtItems": "Item",

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -321,3 +321,15 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
         }
     }
 }
+
+.sheet-template-slicer {
+    width: 56px;
+    height: 55px;
+}
+
+.menu-slicer-template {
+    .item {
+        border: none;
+        .box-shadow(none);
+    }
+}