diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 869f4c620..ccc4d6c24 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -101,7 +101,9 @@ define([ namedrange_locked: false, fontsize: undefined, multiselect: false, - sparklines_disabled: false + sparklines_disabled: false, + numformattype: undefined, + langId: 0x0409 }; var checkInsertAutoshape = function(e, action) { @@ -252,19 +254,14 @@ 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)); 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 +882,26 @@ define([ Common.component.Analytics.trackEvent('ToolBar', 'Number Format'); }, + onNumberFormatSelect: function(combo, record) { + if (this.api) + this.api.asc_setCellFormat(record.format); + + Common.NotificationCenter.trigger('edit:complete', this.toolbar); + Common.component.Analytics.trackEvent('ToolBar', 'Number Format'); + }, + + onNumberFormatOpenBefore: function(combo) { + if (this.api) { + var me = this, + info = me.api.asc_getCellInfo(); + me.toolbar.numFormatData.forEach( function(item, index) { + item.exampleval = me.api.asc_getLocaleExample2(item.format, info.asc_getText(), me._state.langId); + }); + 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(); @@ -1459,7 +1476,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, { @@ -1871,12 +1888,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) { @@ -2544,6 +2560,12 @@ define([ for (var i=0; i - +
@@ -124,7 +124,7 @@
- +
@@ -249,7 +249,7 @@
- +
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 79ec7f70c..420a5ced0 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -124,19 +124,18 @@ define([ Text : '@' }; - me.numFormatTypes = {}; - me.numFormatTypes[Asc.c_oAscNumFormatType.General] = me.txtGeneral; - me.numFormatTypes[Asc.c_oAscNumFormatType.Custom] = me.txtCustom; - me.numFormatTypes[Asc.c_oAscNumFormatType.Text] = me.txtText; - me.numFormatTypes[Asc.c_oAscNumFormatType.Number] = me.txtNumber; - me.numFormatTypes[Asc.c_oAscNumFormatType.Integer] = me.txtInteger; - me.numFormatTypes[Asc.c_oAscNumFormatType.Scientific] = me.txtScientific; - me.numFormatTypes[Asc.c_oAscNumFormatType.Currency] = me.txtCurrency; - me.numFormatTypes[Asc.c_oAscNumFormatType.Accounting] = me.txtAccounting; - me.numFormatTypes[Asc.c_oAscNumFormatType.Date] = me.txtDate; - me.numFormatTypes[Asc.c_oAscNumFormatType.Time] = me.txtTime; - me.numFormatTypes[Asc.c_oAscNumFormatType.Percent] = me.txtPercentage; - me.numFormatTypes[Asc.c_oAscNumFormatType.Fraction] = me.txtFraction; + me.numFormatData = [ + { value: Asc.c_oAscNumFormatType.General, format: this.ascFormatOptions.General, displayValue: this.txtGeneral, exampleval: '100' }, + { value: Asc.c_oAscNumFormatType.Number, format: this.ascFormatOptions.Number, displayValue: this.txtNumber, exampleval: '100,00' }, + { value: Asc.c_oAscNumFormatType.Scientific,format: this.ascFormatOptions.Scientific, displayValue: this.txtScientific, exampleval: '1,00E+02' }, + { value: Asc.c_oAscNumFormatType.Accounting,format: this.ascFormatOptions.Accounting, displayValue: this.txtAccounting, exampleval: '100,00 $' }, + { value: Asc.c_oAscNumFormatType.Currency, format: this.ascFormatOptions.Currency, displayValue: this.txtCurrency, exampleval: '100,00 $' }, + { value: Asc.c_oAscNumFormatType.Date, format: 'MM-dd-yyyy', displayValue: this.txtDate, exampleval: '04-09-1900' }, + { value: Asc.c_oAscNumFormatType.Time, format: 'HH:MM:ss', displayValue: this.txtTime, exampleval: '00:00:00' }, + { value: Asc.c_oAscNumFormatType.Percent, format: this.ascFormatOptions.Percentage, displayValue: this.txtPercentage, exampleval: '100,00%' }, + { value: Asc.c_oAscNumFormatType.Fraction, format: this.ascFormatOptions.Fraction, displayValue: this.txtFraction, exampleval: '100' }, + { value: Asc.c_oAscNumFormatType.Text, format: this.ascFormatOptions.Text, displayValue: this.txtText, exampleval: '100' } + ]; function dummyCmp() { return { @@ -651,13 +650,24 @@ define([ } }); - me.btnNumberFormat = new Common.UI.Button({ - id : 'id-toolbar-btn-num-format', - cls : 'btn-toolbar btn-text-value', - caption : me.txtGeneral, - style : 'width: 100%;', + var formatTemplate = + _.template([ + '<% _.each(items, function(item) { %>', + '
  • ', + '
    <%= scope.getDisplayValue(item) %>
    ', + '
    <%= item.exampleval ? item.exampleval : "" %>
    ', + '
  • ', + '<% }); %>' + ].join('')); + + me.cmbNumberFormat = new Common.UI.ComboBox({ + cls : 'input-group-nr', + menuStyle : 'min-width: 180px;', + hint : me.tipNumFormat, lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRange, _set.lostConnect, _set.coAuth], - menu : true + itemsTemplate: formatTemplate, + editable : false, + data : me.numFormatData }); me.btnPercentStyle = new Common.UI.Button({ @@ -1080,7 +1090,7 @@ define([ me.btnMerge, me.btnInsertFormula, me.btnNamedRange, me.btnIncDecimal, me.btnInsertShape, me.btnInsertEquation, me.btnInsertText, me.btnSortUp, me.btnSortDown, me.btnSetAutofilter, me.btnClearAutofilter, me.btnTableTemplate, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell, - me.btnNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink, + me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink, me.btnInsertChart, me.btnColorSchemas, me.btnAutofilter, me.btnCopy, me.btnPaste, me.btnSettings, me.listStyles, me.btnPrint, me.btnShowMode, /*me.btnSave, */me.btnClearStyle, me.btnCopyStyle @@ -1097,7 +1107,7 @@ define([ me.btnInsertImage, me.btnInsertText, me.btnInsertShape, me.btnInsertEquation, me.btnIncFontSize, me.btnDecFontSize, me.btnBold, me.btnItalic, me.btnUnderline, me.btnTextColor, me.btnBackColor, me.btnInsertHyperlink, me.btnBorders, me.btnTextOrient, me.btnPercentStyle, me.btnCurrencyStyle, me.btnColorSchemas, - me.btnSettings, me.btnInsertFormula, me.btnNamedRange, me.btnDecDecimal, me.btnIncDecimal, me.btnNumberFormat, me.btnWrap, + me.btnSettings, me.btnInsertFormula, me.btnNamedRange, me.btnDecDecimal, me.btnIncDecimal, me.cmbNumberFormat, me.btnWrap, me.btnInsertChart, me.btnMerge, me.btnAddCell, me.btnDeleteCell, me.btnShowMode, me.btnPrint, me.btnAutofilter, me.btnSortUp, me.btnSortDown, me.btnTableTemplate, me.btnSetAutofilter, me.btnClearAutofilter, me.btnSave, me.btnClearStyle, me.btnCopyStyle, me.btnCopy, me.btnPaste]; @@ -1229,7 +1239,7 @@ define([ replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-setfilter', this.btnSetAutofilter); replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-clear-filter', this.btnClearAutofilter); replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-table-tpl', this.btnTableTemplate); - replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-format', this.btnNumberFormat); + replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-format', this.cmbNumberFormat); replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-percents', this.btnPercentStyle); replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-currency', this.btnCurrencyStyle); replacePlacholder('#id-toolbar-' + mode + '-placeholder-btn-digit-dec', this.btnDecDecimal); @@ -1295,7 +1305,6 @@ define([ this.btnClearAutofilter.updateHint(this.txtClearFilter); this.btnSearch.updateHint(this.txtSearch); this.btnTableTemplate.updateHint(this.txtTableTemplate); - this.btnNumberFormat.updateHint(this.tipNumFormat); this.btnPercentStyle.updateHint(this.tipDigStylePercent); this.btnCurrencyStyle.updateHint(this.tipDigStyleAccounting); this.btnDecDecimal.updateHint(this.tipDecDecimal); @@ -1520,179 +1529,179 @@ define([ }); } - var formatTemplate = _.template('<%= caption %><%= options.tplval ? options.tplval : options.value %>'); - this.btnNumberFormat.setMenu( new Common.UI.Menu({ - style: 'margin-left: -1px;', - items: [ - { - caption : this.txtGeneral, - value : this.ascFormatOptions.General - }, - { - caption : this.txtNumber, - value : this.ascFormatOptions.Number - }, - { - caption : this.txtInteger, - value : '#0' - }, - { - caption : this.txtScientific, - value : this.ascFormatOptions.Scientific - }, - { - caption : this.txtAccounting, - menu : new Common.UI.Menu({ - style: 'min-width: 120px;', - menuAlign: 'tl-tr', - items : [ - { - caption : this.txtDollar, - value : this.ascFormatOptions.Accounting - }, - { - caption : this.txtEuro, - value : '_(€* #,##0.00_);_(€* (#,##0.00);_(€* "-"??_);_(@_)' - }, - { - caption : this.txtPound, - value : '_(£* #,##0.00_);_(£* (#,##0.00);_(£* "-"??_);_(@_)' - }, - { - caption : this.txtRouble, - value : '_-* #,##0.00[$р.-419]_-;-* #,##0.00[$р.-419]_-;_-* "-"??[$р.-419]_-;_-@_-' - }, - { - caption : this.txtYen, - value : '_(¥* #,##0.00_);_(¥* (#,##0.00);_(¥* "-"??_);_(@_)' - } - ] - }) - }, - { - caption : this.txtCurrency, - menu : new Common.UI.Menu({ - style: 'min-width: 120px;', - menuAlign: 'tl-tr', - items : [ - { - caption : this.txtDollar, - value : this.ascFormatOptions.Currency - }, - { - caption : this.txtEuro, - value : '€#,##0.00' - }, - { - caption : this.txtPound, - value : '£#,##0.00' - }, - { - caption : this.txtRouble, - value : '#,##0.00"р."' - }, - { - caption : this.txtYen, - value : '¥#,##0.00' - } - ] - }) - }, - { - caption : this.txtDate, - menu : new Common.UI.Menu({ - style: 'min-width: 200px;', - menuAlign: 'tl-tr', - items: [ - { - caption : '07-24-88', - value : 'MM-dd-yy', - template: formatTemplate - }, - { - caption : '07-24-1988', - value : 'MM-dd-yyyy', - template: formatTemplate - }, - { - caption : '24-07-88', - value : 'dd-MM-yy', - template: formatTemplate - }, - { - caption : '24-07-1988', - value : 'dd-MM-yyyy', - template: formatTemplate - }, - { - caption : '24-Jul-1988', - value : 'dd-MMM-yyyy', - template: formatTemplate - }, - { - caption : '24-Jul', - value : 'dd-MMM', - template: formatTemplate - }, - { - caption : 'Jul-88', - value : 'MMM-yy', - template: formatTemplate - } - ] - }) - }, - { - caption : this.txtTime, - menu : new Common.UI.Menu({ - style: 'min-width: 200px;', - menuAlign: 'tl-tr', - showSeparator : false, - items: [ - { - caption : '10:56', - value : 'HH:mm', - template: formatTemplate - }, - { - caption : '21:56:00', - value : 'HH:MM:ss', - template: formatTemplate - }, - { - caption : '05:56 AM', - tplval : 'hh:mm tt', - value : 'hh:mm AM/PM', - template: formatTemplate - }, - { - caption : '05:56:00 AM', - tplval : 'hh:mm:ss tt', - value : 'hh:mm:ss AM/PM', - template: formatTemplate - }, - { - caption : '38:56:00', - value : '[h]:mm:ss', - template: formatTemplate - } - ] - }) - }, - { - caption : this.txtPercentage, - value : this.ascFormatOptions.Percentage - }, - { - caption : this.txtFraction, - value : this.ascFormatOptions.Fraction - }, - { - caption : this.txtText, - value : this.ascFormatOptions.Text - } - ] - })); + // var formatTemplate = _.template('<%= caption %><%= options.tplval ? options.tplval : options.value %>'); + // this.btnNumberFormat.setMenu( new Common.UI.Menu({ + // style: 'margin-left: -1px;', + // items: [ + // { + // caption : this.txtGeneral, + // value : this.ascFormatOptions.General + // }, + // { + // caption : this.txtNumber, + // value : this.ascFormatOptions.Number + // }, + // { + // caption : this.txtInteger, + // value : '#0' + // }, + // { + // caption : this.txtScientific, + // value : this.ascFormatOptions.Scientific + // }, + // { + // caption : this.txtAccounting, + // menu : new Common.UI.Menu({ + // style: 'min-width: 120px;', + // menuAlign: 'tl-tr', + // items : [ + // { + // caption : this.txtDollar, + // value : this.ascFormatOptions.Accounting + // }, + // { + // caption : this.txtEuro, + // value : '_(€* #,##0.00_);_(€* (#,##0.00);_(€* "-"??_);_(@_)' + // }, + // { + // caption : this.txtPound, + // value : '_(£* #,##0.00_);_(£* (#,##0.00);_(£* "-"??_);_(@_)' + // }, + // { + // caption : this.txtRouble, + // value : '_-* #,##0.00[$р.-419]_-;-* #,##0.00[$р.-419]_-;_-* "-"??[$р.-419]_-;_-@_-' + // }, + // { + // caption : this.txtYen, + // value : '_(¥* #,##0.00_);_(¥* (#,##0.00);_(¥* "-"??_);_(@_)' + // } + // ] + // }) + // }, + // { + // caption : this.txtCurrency, + // menu : new Common.UI.Menu({ + // style: 'min-width: 120px;', + // menuAlign: 'tl-tr', + // items : [ + // { + // caption : this.txtDollar, + // value : this.ascFormatOptions.Currency + // }, + // { + // caption : this.txtEuro, + // value : '€#,##0.00' + // }, + // { + // caption : this.txtPound, + // value : '£#,##0.00' + // }, + // { + // caption : this.txtRouble, + // value : '#,##0.00"р."' + // }, + // { + // caption : this.txtYen, + // value : '¥#,##0.00' + // } + // ] + // }) + // }, + // { + // caption : this.txtDate, + // menu : new Common.UI.Menu({ + // style: 'min-width: 200px;', + // menuAlign: 'tl-tr', + // items: [ + // { + // caption : '07-24-88', + // value : 'MM-dd-yy', + // template: formatTemplate + // }, + // { + // caption : '07-24-1988', + // value : 'MM-dd-yyyy', + // template: formatTemplate + // }, + // { + // caption : '24-07-88', + // value : 'dd-MM-yy', + // template: formatTemplate + // }, + // { + // caption : '24-07-1988', + // value : 'dd-MM-yyyy', + // template: formatTemplate + // }, + // { + // caption : '24-Jul-1988', + // value : 'dd-MMM-yyyy', + // template: formatTemplate + // }, + // { + // caption : '24-Jul', + // value : 'dd-MMM', + // template: formatTemplate + // }, + // { + // caption : 'Jul-88', + // value : 'MMM-yy', + // template: formatTemplate + // } + // ] + // }) + // }, + // { + // caption : this.txtTime, + // menu : new Common.UI.Menu({ + // style: 'min-width: 200px;', + // menuAlign: 'tl-tr', + // showSeparator : false, + // items: [ + // { + // caption : '10:56', + // value : 'HH:mm', + // template: formatTemplate + // }, + // { + // caption : '21:56:00', + // value : 'HH:MM:ss', + // template: formatTemplate + // }, + // { + // caption : '05:56 AM', + // tplval : 'hh:mm tt', + // value : 'hh:mm AM/PM', + // template: formatTemplate + // }, + // { + // caption : '05:56:00 AM', + // tplval : 'hh:mm:ss tt', + // value : 'hh:mm:ss AM/PM', + // template: formatTemplate + // }, + // { + // caption : '38:56:00', + // value : '[h]:mm:ss', + // template: formatTemplate + // } + // ] + // }) + // }, + // { + // caption : this.txtPercentage, + // value : this.ascFormatOptions.Percentage + // }, + // { + // caption : this.txtFraction, + // value : this.ascFormatOptions.Fraction + // }, + // { + // caption : this.txtText, + // value : this.ascFormatOptions.Text + // } + // ] + // })); this.mnuInsertChartPicker = new Common.UI.DataView({ el: $('#id-toolbar-menu-insertchart'),