Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Change control for Number Format.

Browse source
This commit is contained in:
Julia Radzhabova 2017-01-12 17:14:51 +03:00
parent 54c8d379ac
commit 56fbd1e085
3 changed files with 245 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -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<Math.min(4,formulas.length); i++) {
formulas[i].setCaption(this.api.asc_getFormulaLocaleName(formulas[i].value));
}
var value = Common.localStorage.getItem("sse-settings-reg-settings");
if (value!==null)
this._state.langId = parseInt(value);
else
this._state.langId = ((this.toolbar.mode.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.toolbar.mode.lang)) : 0x0409);
},
textEmptyImgUrl : 'You need to specify image URL.',

6
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -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>

401
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -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) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
'<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;"><%= item.exampleval ? item.exampleval : "" %></div>',
'</div></a></li>',
'<% }); %>'
].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('<a id="<%= id %>" style="white-space: normal;" tabindex="-1" type="menuitem"><%= caption %><span style="float: right; color: silver;"><%= options.tplval ? options.tplval : options.value %></span></a>');
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('<a id="<%= id %>" style="white-space: normal;" tabindex="-1" type="menuitem"><%= caption %><span style="float: right; color: silver;"><%= options.tplval ? options.tplval : options.value %></span></a>');
// 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'),