Merge pull request #51 from ONLYOFFICE/feature/format-cells

Feature/format cells

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

@@ -112,6 +112,7 @@ define([
                 this.menuCls        = me.options.menuCls;
                 this.menuStyle      = me.options.menuStyle;
                 this.template       = me.options.template || me.template;
+                this.itemsTemplate  = me.options.itemsTemplate;
                 this.hint           = me.options.hint;
                 this.editable       = me.options.editable;
                 this.disabled       = me.options.disabled;
@@ -134,15 +135,22 @@ define([
                 var me = this;
 
                 if (!me.rendered) {
+                    var items = this.store.toJSON();
                     this.cmpEl = $(this.template({
                         id          : this.id,
                         cls         : this.cls,
                         style       : this.style,
                         menuCls     : this.menuCls,
                         menuStyle   : this.menuStyle,
-                        items       : this.store.toJSON(),
+                        items       : items,
                         scope       : me
                     }));
+                    if (this.itemsTemplate)
+                        this.cmpEl.find('ul').append(
+                            $(this.itemsTemplate({
+                                items       : items,
+                                scope       : me
+                            })));
 
                     if (parentEl) {
                         this.setElement(parentEl, false);
@@ -274,7 +282,7 @@ define([
                 }
 
                 if (this.scroller)
-                    this.scroller.update();
+                    this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});
 
                 this.trigger('show:after', this, e);
             },
@@ -441,7 +449,7 @@ define([
                 return this.rendered ? this._input.val() : null;
             },
 
-            setValue: function(value) {
+            setValue: function(value, defValue) {
                 if (!this.rendered)
                     return;
 
@@ -454,7 +462,7 @@ define([
                     this.setRawValue(this._selectedItem.get(this.displayField));
                     $('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected');
                 } else {
-                    this.setRawValue(value);
+                    this.setRawValue((defValue!==undefined) ? defValue : value);
                 }
             },
 
@@ -529,6 +537,12 @@ define([
             },
 
             onResetItems: function() {
+                if (this.itemsTemplate) {
+                    $(this.el).find('ul').html( $(this.itemsTemplate({
+                        items: this.store.toJSON(),
+                        scope: this
+                    })));
+                } else {
                     $(this.el).find('ul').html(_.template([
                         '<% _.each(items, function(item) { %>',
                            '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
@@ -537,6 +551,7 @@ define([
                         items: this.store.toJSON(),
                         scope: this
                     }));
+                }
 
                 if (!_.isUndefined(this.scroller)) {
                     this.scroller.destroy();

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

@@ -50,7 +50,8 @@ define([
     'spreadsheeteditor/main/app/view/TableOptionsDialog',
     'spreadsheeteditor/main/app/view/NamedRangeEditDlg',
     'spreadsheeteditor/main/app/view/NamedRangePasteDlg',
-    'spreadsheeteditor/main/app/view/NameManagerDlg'
+    'spreadsheeteditor/main/app/view/NameManagerDlg',
+    'spreadsheeteditor/main/app/view/FormatSettingsDialog'
 ], function () { 'use strict';
 
     SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({
@@ -101,7 +102,9 @@ define([
                 namedrange_locked: false,
                 fontsize: undefined,
                 multiselect: false,
-                sparklines_disabled: false
+                sparklines_disabled: false,
+                numformattype: undefined,
+                langId: undefined
             };
 
             var checkInsertAutoshape =  function(e, action) {
@@ -252,19 +255,16 @@ define([
             if (toolbar.mnuZoomOut) toolbar.mnuZoomOut.on('click',      _.bind(this.onZoomOutClick, this));
             if (toolbar.btnShowMode.rendered) toolbar.btnShowMode.menu.on('item:click', _.bind(this.onHideMenu, this));
             toolbar.listStyles.on('click',                              _.bind(this.onListStyleSelect, this));
-            if (toolbar.btnNumberFormat.rendered) toolbar.btnNumberFormat.menu.on('item:click', _.bind(this.onNumberFormatMenu, this));
+            toolbar.cmbNumberFormat.on('selected',                      _.bind(this.onNumberFormatSelect, this));
+            toolbar.cmbNumberFormat.on('show:before',                   _.bind(this.onNumberFormatOpenBefore, this, true));
+            if (toolbar.cmbNumberFormat.cmpEl)
+                toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
             toolbar.btnCurrencyStyle.menu.on('item:click',              _.bind(this.onNumberFormatMenu, this));
             if (toolbar.mnuitemCompactToolbar) toolbar.mnuitemCompactToolbar.on('toggle', _.bind(this.onChangeViewMode, this));
             $('#id-toolbar-menu-new-fontcolor').on('click',             _.bind(this.onNewTextColor, this));
             $('#id-toolbar-menu-new-paracolor').on('click',             _.bind(this.onNewBackColor, this));
             $('#id-toolbar-menu-new-bordercolor').on('click',           _.bind(this.onNewBorderColor, this));
 
-            _.each(toolbar.btnNumberFormat.menu.items, function(item) {
-                if (item.menu) {
-                    item.menu.on('item:click', _.bind(me.onNumberFormatMenu, me));
-                }
-            });
-
             this.onSetupCopyStyleButton();
         },
 
@@ -885,6 +885,63 @@ define([
             Common.component.Analytics.trackEvent('ToolBar', 'Number Format');
         },
 
+        onNumberFormatSelect: function(combo, record) {
+            if (record) {
+                if (this.api)
+                    this.api.asc_setCellFormat(record.format);
+            } else {
+                this.onCustomNumberFormat();
+            }
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Number Format');
+        },
+
+        onCustomNumberFormat: function() {
+            var me = this,
+                value = Common.localStorage.getItem("sse-settings-reg-settings");
+            value = (value!==null) ? parseInt(value) : ((me.toolbar.mode.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(me.toolbar.mode.lang)) : 0x0409);
+
+            (new SSE.Views.FormatSettingsDialog({
+                api: me.api,
+                handler: function(result, settings) {
+                    if (settings) {
+                        me.api.asc_setCellFormat(settings.format);
+                    }
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar);
+                },
+                props   : {formatType: me._state.numformattype, langId: value}
+            })).show();
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Number Format');
+        },
+
+        onNumberFormatOpenBefore: function(combo) {
+            if (this.api) {
+                var me = this;
+
+                var value = Common.localStorage.getItem("sse-settings-reg-settings");
+                value = (value!==null) ? parseInt(value) : ((this.toolbar.mode.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.toolbar.mode.lang)) : 0x0409);
+
+                if (this._state.langId !== value) {
+                    this._state.langId = value;
+
+                    var info = new Asc.asc_CFormatCellsInfo();
+                    info.asc_setType(Asc.c_oAscNumFormatType.None);
+                    info.asc_setSymbol(this._state.langId);
+                    var arr = this.api.asc_getFormatCells(info); // all formats
+                    me.toolbar.numFormatData.forEach( function(item, index) {
+                        me.toolbar.numFormatData[index].format = arr[index];
+                    });
+                }
+
+                me.toolbar.numFormatData.forEach( function(item, index) {
+                    item.exampleval = me.api.asc_getLocaleExample(item.format);
+                });
+                me.toolbar.cmbNumberFormat.setData(me.toolbar.numFormatData);
+                me.toolbar.cmbNumberFormat.setValue(me._state.numformattype, me.toolbar.txtCustom);
+            }
+        },
+
         onDecrement: function(btn) {
             if (this.api)
                 this.api.asc_decreaseCellDigitNumbers();
@@ -1238,6 +1295,13 @@ define([
                         if (me.editMode && !me.toolbar.mode.isEditMailMerge && !me.toolbar.mode.isEditDiagram && !me.api.isCellEdited && !me._state.multiselect)
                             me.onHyperlink();
                         e.preventDefault();
+                    },
+                    'command+1,ctrl+1': function(e) {
+                        if (me.editMode && !me.toolbar.mode.isEditMailMerge && !me.api.isCellEdited && !me.toolbar.cmbNumberFormat.isDisabled()) {
+                            me.onCustomNumberFormat();
+                        }
+
+                        return false;
                     }
                 }
             });
@@ -1459,7 +1523,7 @@ define([
             var toolbar = this.toolbar;
             if (toolbar.mode.isEditDiagram || toolbar.mode.isEditMailMerge) {
                 is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
-                toolbar.lockToolbar(SSE.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.btnNumberFormat]});
+                toolbar.lockToolbar(SSE.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.cmbNumberFormat]});
             } else
             if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) {
                 toolbar.lockToolbar(SSE.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {
@@ -1477,8 +1541,8 @@ define([
                 });
 
                 var is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
-                (is_cell_edited) ? Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, alt+h') :
-                                   Common.util.Shortcuts.resumeEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, alt+h');
+                (is_cell_edited) ? Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, alt+h, command+1, ctrl+1') :
+                                   Common.util.Shortcuts.resumeEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, alt+h, command+1, ctrl+1');
 
                 if (is_cell_edited) {
                     toolbar.listStyles.suspendEvents();
@@ -1871,12 +1935,11 @@ define([
                 toolbar.lockToolbar(SSE.enumLock.multiselect, this._state.multiselect, { array: [toolbar.btnTableTemplate, toolbar.btnInsertHyperlink]});
             }
 
-            fontparam = toolbar.numFormatTypes[info.asc_getNumFormatType()];
-
-            if (!fontparam)
-                fontparam = toolbar.numFormatTypes[1];
-
-            toolbar.btnNumberFormat.setCaption(fontparam);
+            val = info.asc_getNumFormatType();
+            if (this._state.numformattype !== val) {
+                toolbar.cmbNumberFormat.setValue(val, toolbar.txtCustom);
+                this._state.numformattype = val;
+            }
 
             val = info.asc_getAngle();
             if (this._state.angle !== val) {
@@ -2532,10 +2595,10 @@ define([
                 var left = toolbar.isCompactView ? 75 : (toolbar.mode.nativeApp ? 80 : 48 );
                 mask.css('left', left + 'px');
                 mask.css('right', (toolbar.isCompactView ? 0 : 45) + 'px');
-                Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h');
+                Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h, command+1, ctrl+1');
             } else {
                 mask.remove();
-                Common.util.Shortcuts.resumeEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h');
+                Common.util.Shortcuts.resumeEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l, command+k, ctrl+k, command+alt+h, ctrl+alt+h, command+1, ctrl+1');
             }
         },
 

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

@@ -22,7 +22,7 @@
             <div class="toolbar-row">
                 <span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-digit-dec"></span>
                 <span class="btn-placeholder split" id="id-toolbar-diagram-placeholder-btn-digit-inc"></span>
-                <span class="btn-placeholder border" id="id-toolbar-diagram-placeholder-btn-format" style="width: 84px; margin-left: 10px;"></span>
+                <span class="btn-placeholder" id="id-toolbar-diagram-placeholder-btn-format" style="width: 84px; margin-left: 10px; vertical-align: middle;"></span>
             </div>
         </div>
         <div class="separator short"></div>
@@ -124,7 +124,7 @@
         <div class="toolbar-group">
             <div class="toolbar-row">
                 <span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-filter"></span>
-                <span class="btn-placeholder border" id="id-toolbar-short-placeholder-btn-format" style="width: 84px; margin-left: 7px;"></span>
+                <span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-format" style="width: 84px; margin-left: 7px; vertical-align: middle;"></span>
             </div>
         </div>
         <div class="separator short"></div>
@@ -249,7 +249,7 @@
         <div class="separator long"></div>
         <div class="toolbar-group">
             <div class="toolbar-row">
-                <span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-format" style="width: 100%;"></span>
+                <span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-format" style="width: 100%"></span>
             </div>
             <div class="toolbar-row">
                 <span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-percents"></span>

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

@@ -754,7 +754,16 @@ define([
 
         updateRegionalExample: function(landId) {
             if (this.api) {
-                var text =  (landId) ? this.api.asc_getLocaleExample(landId, 1000.01, new Date()) : '';
+                var text = '';
+                if (landId) {
+                    var info = new Asc.asc_CFormatCellsInfo();
+                    info.asc_setType(Asc.c_oAscNumFormatType.None);
+                    info.asc_setSymbol(landId);
+                    var arr = this.api.asc_getFormatCells(info); // all formats
+                    text = this.api.asc_getLocaleExample(arr[4], 1000.01, landId);
+                    text = text + ' ' + this.api.asc_getLocaleExample(arr[5], (new Date()).getExcelDateWithTime(), landId);
+                    text = text + ' ' + this.api.asc_getLocaleExample(arr[6], (new Date()).getExcelDateWithTime(), landId);
+                }
                 $('#fms-lbl-reg-settings').text(_.isEmpty(text) ? '' : this.strRegSettingsEx + text);
             }
         },

apps/spreadsheeteditor/main/locale/en.json

@@ -1045,6 +1045,35 @@
   "SSE.Views.FileMenuPanels.MainSettingsGeneral.txtWin": "as Windows",
   "SSE.Views.FileMenuPanels.Settings.txtGeneral": "General",
   "SSE.Views.FileMenuPanels.Settings.txtPageSettings": "Page Settings",
+  "SSE.Views.FormatSettingsDialog.textTitle": "Number Format",
+  "SSE.Views.FormatSettingsDialog.textCategory": "Category",
+  "SSE.Views.FormatSettingsDialog.textDecimal": "Decimal",
+  "SSE.Views.FormatSettingsDialog.textSeparator": "Use 1000 separator",
+  "SSE.Views.FormatSettingsDialog.textFormat": "Format",
+  "SSE.Views.FormatSettingsDialog.textSymbols": "Symbols",
+  "SSE.Views.FormatSettingsDialog.textCancel": "Cancel",
+  "SSE.Views.FormatSettingsDialog.textOk": "OK",
+  "SSE.Views.FormatSettingsDialog.txtGeneral": "General",
+  "SSE.Views.FormatSettingsDialog.txtNumber": "Number",
+  "SSE.Views.FormatSettingsDialog.txtCustom": "Custom",
+  "SSE.Views.FormatSettingsDialog.txtCurrency": "Currency",
+  "SSE.Views.FormatSettingsDialog.txtAccounting": "Accounting",
+  "SSE.Views.FormatSettingsDialog.txtDate": "Date",
+  "SSE.Views.FormatSettingsDialog.txtTime": "Time",
+  "SSE.Views.FormatSettingsDialog.txtPercentage": "Percentage",
+  "SSE.Views.FormatSettingsDialog.txtFraction": "Fraction",
+  "SSE.Views.FormatSettingsDialog.txtScientific": "Scientific",
+  "SSE.Views.FormatSettingsDialog.txtText": "Text",
+  "SSE.Views.FormatSettingsDialog.txtUpto1": "Up to one digit",
+  "SSE.Views.FormatSettingsDialog.txtUpto2": "Up to two digits",
+  "SSE.Views.FormatSettingsDialog.txtUpto3": "Up to three digits",
+  "SSE.Views.FormatSettingsDialog.txtAs2": "As halfs",
+  "SSE.Views.FormatSettingsDialog.txtAs8": "As eighths",
+  "SSE.Views.FormatSettingsDialog.txtAs4": "As fourths",
+  "SSE.Views.FormatSettingsDialog.txtAs16": "As sixteenths",
+  "SSE.Views.FormatSettingsDialog.txtAs10": "As tenths",
+  "SSE.Views.FormatSettingsDialog.txtAs100": "As hundredths",
+  "SSE.Views.FormatSettingsDialog.txtSample": "Sample:",
   "SSE.Views.FormulaDialog.cancelButtonText": "Cancel",
   "SSE.Views.FormulaDialog.okButtonText": "OK",
   "SSE.Views.FormulaDialog.sCategoryAll": "All",
@@ -1625,6 +1654,7 @@
   "SSE.Views.Toolbar.textLineSpark": "Line",
   "SSE.Views.Toolbar.textColumnSpark": "Column",
   "SSE.Views.Toolbar.textWinLossSpark": "Win/Loss",
+  "SSE.Views.Toolbar.textMoreFormats": "More formats",
   "SSE.Views.Top10FilterDialog.cancelButtonText": "Cancel",
   "SSE.Views.Top10FilterDialog.okButtonText": "OK",
   "SSE.Views.Top10FilterDialog.textType": "Show",