From 346573087cbb9c8713316a9309a212cf7eabbf29 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Fri, 9 Dec 2016 11:50:32 +0300 Subject: [PATCH] [SE ios] Cell settings --- .../mobile/app/template/Settings.template | 2 +- .../mobile/app/controller/edit/EditCell.js | 419 ++++++++++++++++-- .../mobile/app/template/EditCell.template | 84 ++-- .../mobile/app/template/Settings.template | 2 +- .../mobile/app/view/edit/EditCell.js | 90 ++-- .../mobile/resources/css/app-ios.css | 117 +---- .../mobile/resources/css/app-material.css | 105 ++--- .../mobile/resources/less/ios/_icons.less | 97 +--- .../resources/less/material/_icons.less | 105 +---- 9 files changed, 526 insertions(+), 495 deletions(-) diff --git a/apps/documenteditor/mobile/app/template/Settings.template b/apps/documenteditor/mobile/app/template/Settings.template index b584dc08f..06f3f324f 100644 --- a/apps/documenteditor/mobile/app/template/Settings.template +++ b/apps/documenteditor/mobile/app/template/Settings.template @@ -336,7 +336,7 @@

DOCUMENT EDITOR

-

<%= scope.textVersion %> 4.2

+

<%= scope.textVersion %> 4.3

Ascensio System SIA

diff --git a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js index 5c7e4c750..bb14032f9 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js +++ b/apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js @@ -53,8 +53,10 @@ define([ SSE.Controllers.EditCell = Backbone.Controller.extend(_.extend((function() { var _fontsArray = [], _stack = [], - _cellObject = undefined, - _fontInfo = {}; + _cellInfo = undefined, + _cellStyles = [], + _fontInfo = {}, + _isEdit = false; function onApiLoadFonts(fonts, select) { _.each(fonts, function(font){ @@ -93,20 +95,14 @@ define([ var me = this; me.api = api; - // me.api.asc_registerCallback('asc_onInitEditorFonts', _.bind(onApiLoadFonts, me)); - // me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me)); - // me.api.asc_registerCallback('asc_onFontFamily', _.bind(me.onApiChangeFont, me)); - // me.api.asc_registerCallback('asc_onFontSize', _.bind(me.onApiFontSize, me)); - // me.api.asc_registerCallback('asc_onBold', _.bind(me.onApiBold, me)); - // me.api.asc_registerCallback('asc_onItalic', _.bind(me.onApiItalic, me)); - // me.api.asc_registerCallback('asc_onUnderline', _.bind(me.onApiUnderline, me)); - // me.api.asc_registerCallback('asc_onStrikeout', _.bind(me.onApiStrikeout, me)); - // me.api.asc_registerCallback('asc_onVerticalAlign', _.bind(me.onApiVerticalAlign, me)); - // me.api.asc_registerCallback('asc_onListType', _.bind(me.onApiBullets, me)); - // me.api.asc_registerCallback('asc_onPrAlign', _.bind(me.onApiParagraphAlign, me)); - // me.api.asc_registerCallback('asc_onTextColor', _.bind(me.onApiTextColor, me)); - // me.api.asc_registerCallback('asc_onParaSpacingLine', _.bind(me.onApiLineSpacing, me)); - // me.api.asc_registerCallback('asc_onTextShd', _.bind(me.onApiTextShd, me)); + me.api.asc_registerCallback('asc_onInitEditorFonts', _.bind(onApiLoadFonts, me)); + me.api.asc_registerCallback('asc_onSelectionChanged', _.bind(me.onApiSelectionChanged, me)); + me.api.asc_registerCallback('asc_onEditorSelectionChanged', _.bind(me.onApiEditorSelectionChanged, me)); + me.api.asc_registerCallback('asc_onInitEditorStyles', _.bind(me.onApiInitEditorStyles, me)); // TODO: It does not work until the error in the SDK + }, + + setMode: function (mode) { + _isEdit = ('edit' === mode); }, onLaunch: function () { @@ -115,10 +111,12 @@ define([ initEvents: function () { var me = this; - // $('#font-bold').single('click', _.bind(me.onBold, me)); - // $('#font-italic').single('click', _.bind(me.onItalic, me)); - // $('#font-underline').single('click', _.bind(me.onUnderline, me)); - // $('#font-strikethrough').single('click', _.bind(me.onStrikethrough, me)); + + $('#font-bold').single('click', _.bind(me.onBold, me)); + $('#font-italic').single('click', _.bind(me.onItalic, me)); + $('#font-underline').single('click', _.bind(me.onUnderline, me)); + + me.getView('EditCell').renderStyles(_cellStyles); // // $('#paragraph-align .button').single('click', _.bind(me.onParagraphAlign, me)); // $('#font-moveleft, #font-moveright').single('click', _.bind(me.onParagraphMove, me)); @@ -149,19 +147,33 @@ define([ initSettings: function (pageId) { var me = this; + if ('#edit-text-fonts' == pageId) { + me.initFontsPage(); + } else if ('#edit-text-color' == pageId) { + me.initTextColorPage(); + } else if ('#edit-fill-color' == pageId) { + me.initFillColorPage(); + } else if ('#edit-text-format' == pageId) { + me.initTextFormat(); + } else if (!_.isUndefined(pageId) && pageId.indexOf('#edit-cell-format') > -1) { + me.initCellFormat(); + } else { + me.initCellSettings(_cellInfo); + } + // me.api && me.api.UpdateInterfaceState(); // - // if (_cellObject) { + // if (_cellInfo) { // var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]'); // var $inputTextCaps = $('#text-additional input[name=text-caps]'); // - // _cellObject.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough'); - // _cellObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough'); + // _cellInfo.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough'); + // _cellInfo.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough'); // - // _cellObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small'); - // _cellObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all'); + // _cellInfo.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small'); + // _cellInfo.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all'); // - // _fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_cellObject.get_TextSpacing()); + // _fontInfo.letterSpacing = Common.Utils.Metric.fnRecalcFromMM(_cellInfo.get_TextSpacing()); // $('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()); // } }, @@ -181,16 +193,279 @@ define([ }, getCell: function () { - return _cellObject; + return _cellInfo; + }, + + initFontsPage: function () { + var me = this, + displaySize = _fontInfo.size; + + _.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt; + + $('#font-size .item-after label').html(displaySize); + $('#font-size .button').single('click', _.bind(me.onFontSize, me)); + }, + + initTextColorPage: function () { + var me = this, + palette = me.getView('EditCell').paletteTextColor, + color = me._sdkToThemeColor(_fontInfo.color); + + if (palette) { + palette.select(color); + palette.on('select', _.bind(me.onTextColor, me)); + } + }, + + initFillColorPage: function () { + var me = this, + palette = me.getView('EditCell').paletteFillColor, + color = me._sdkToThemeColor(_cellInfo.asc_getFill().asc_getColor()); + + if (palette) { + palette.select(color); + palette.on('select', _.bind(me.onFillColor, me)); + } + }, + + initTextFormat: function () { + var me = this, + $pageTextFormat = $('.page[data-page=edit-text-format]'), + hAlign = _cellInfo.asc_getHorAlign() || 'left', + vAlign = _cellInfo.asc_getVertAlign() || 'bottom', + isWrapText = _cellInfo.asc_getFlags().asc_getWrapText(); + + $('#text-format .item-media i').removeClass().addClass(Common.Utils.String.format('icon icon-text-align-{0}', hAlign)); + + if ($pageTextFormat.length > 0) { + var $radioHAlign = $pageTextFormat.find('input:radio[name=text-halign]'), + $radioVAlign = $pageTextFormat.find('input:radio[name=text-valign]'), + $switchWrapText = $pageTextFormat.find('#edit-cell-wrap-text input'); + + $radioHAlign.val([hAlign]); + $radioVAlign.val([vAlign]); + $switchWrapText.prop('checked', isWrapText); + + $radioHAlign.single('change', _.bind(me.onHAlignChange, me)); + $radioVAlign.single('change', _.bind(me.onVAlignChange, me)); + $switchWrapText.single('change', _.bind(me.onWrapTextChange, me)); + } + }, + + initCellFormat: function () { + var me = this, + $pageCellFormat = $('.page[data-page=edit-cell-format]'); + + if ($pageCellFormat.length > 0) { + $pageCellFormat.find('.item-link.no-indicator[data-type]').single('click', _.bind(me.onCellFormat, me)); + } + }, + + initFontSettings: function (fontObj) { + if (_.isUndefined(fontObj)) { + return; + } + + var me = this; + + // Init font name + var fontName = fontObj.asc_getName() || this.textFonts; + _fontInfo.name = fontName; + + $('#font-fonts .item-title').html(fontName); + + + // Init font style + $('#font-bold').toggleClass('active', fontObj.asc_getBold() === true); + $('#font-italic').toggleClass('active', fontObj.asc_getItalic() === true); + $('#font-underline').toggleClass('active', fontObj.asc_getUnderline() === true); + + + // Init font size + _fontInfo.size = fontObj.asc_getSize(); + var displaySize = _fontInfo.size; + + _.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt; + + $('#font-fonts .item-after span:first-child').html(displaySize); + $('#font-size .item-after label').html(displaySize); + + + // Init font color + _fontInfo.color = fontObj.asc_getColor(); + + var color = _fontInfo.color, + clr = me._sdkToThemeColor(color); + + $('#text-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr)); + + }, + + initCellSettings: function (cellInfo) { + if (_.isUndefined(cellInfo)) { + return; + } + + var me = this, + selectionType = cellInfo.asc_getFlags().asc_getSelectionType(), + // coAuthDisable = (!this.toolbar.mode.isEditMailMerge && !this.toolbar.mode.isEditDiagram) ? (cellInfo.asc_getLocked()===true || cellInfo.asc_getLockedTable()===true) : false, + // editOptionsDisabled = this._disableEditOptions(selectionType, coAuthDisable), + _fontInfo = cellInfo.asc_getFont(), + val, + need_disable = false; + + me.initFontSettings(_fontInfo); + + // Init fill color + var color = cellInfo.asc_getFill().asc_getColor(), + clr = me._sdkToThemeColor(color); + + $('#fill-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr)); + + + if (selectionType == Asc.c_oAscSelectionType.RangeChart || selectionType == Asc.c_oAscSelectionType.RangeChartText) { + return; + } + + me.initTextFormat(); + +// +// val = (filterInfo) ? filterInfo.asc_getIsAutoFilter() : null; +// if (this._state.filter !== val) { +// toolbar.btnSetAutofilter.toggle(val===true, true); +// toolbar.mnuitemAutoFilter.setChecked(val===true, true); +// this._state.filter = val; +// } +// need_disable = this._state.controlsdisabled.filters || (val===null); +// toolbar.lockToolbar(SSE.enumLock.ruleFilter, need_disable, +// { array: [toolbar.btnSortDown, toolbar.btnSortUp, toolbar.mnuitemSortAZ, toolbar.mnuitemSortZA, +// toolbar.btnTableTemplate,toolbar.btnSetAutofilter,toolbar.mnuitemAutoFilter,toolbar.btnAutofilter] }); +// +// val = (formatTableInfo) ? formatTableInfo.asc_getTableStyleName() : null; +// if (this._state.tablestylename !== val && this.toolbar.mnuTableTemplatePicker) { +// val = this.toolbar.mnuTableTemplatePicker.store.findWhere({name: val}); +// if (val) { +// this.toolbar.mnuTableTemplatePicker.selectRecord(val); +// this._state.tablestylename = val.get('name'); +// } else { +// toolbar.mnuTableTemplatePicker.deselectAll(); +// this._state.tablestylename = null; +// } +// } +// +// this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined; +// +// need_disable = this._state.controlsdisabled.filters || !filterInfo || (filterInfo.asc_getIsApplyAutoFilter()!==true); +// toolbar.lockToolbar(SSE.enumLock.ruleDelFilter, need_disable, {array:[toolbar.btnClearAutofilter,toolbar.mnuitemClearFilter]}); +// +// this._state.multiselect = cellInfo.asc_getFlags().asc_getMultiselect(); +// toolbar.lockToolbar(SSE.enumLock.multiselect, this._state.multiselect, { array: [toolbar.btnTableTemplate, toolbar.btnInsertHyperlink]}); +// } +// +// fontparam = toolbar.numFormatTypes[cellInfo.asc_getNumFormatType()]; +// +// if (!fontparam) +// fontparam = toolbar.numFormatTypes[1]; +// +// toolbar.btnNumberFormat.setCaption(fontparam); +// +// val = cellInfo.asc_getAngle(); +// if (this._state.angle !== val) { +// this._clearChecked(toolbar.btnTextOrient.menu); +// switch(val) { +// case 45: toolbar.btnTextOrient.menu.items[1].setChecked(true, true); break; +// case -45: toolbar.btnTextOrient.menu.items[2].setChecked(true, true); break; +// case 90: toolbar.btnTextOrient.menu.items[3].setChecked(true, true); break; +// case -90: toolbar.btnTextOrient.menu.items[4].setChecked(true, true); break; +// default: toolbar.btnTextOrient.menu.items[0].setChecked(true, true); break; +// } +// this._state.angle = val; +// } +// +// val = cellInfo.asc_getStyleName(); +// if (this._state.prstyle != val && !this.toolbar.listStyles.isDisabled()) { +// var listStyle = this.toolbar.listStyles, +// listStylesVisible = (listStyle.rendered); +// +// if (listStylesVisible) { +// listStyle.suspendEvents(); +// var styleRec = listStyle.menuPicker.store.findWhere({ +// name: val +// }); +// this._state.prstyle = (listStyle.menuPicker.store.length>0) ? val : undefined; +// +// listStyle.menuPicker.selectRecord(styleRec); +// listStyle.resumeEvents(); +// } +// } +// +// val = (selectionType==Asc.c_oAscSelectionType.RangeRow); +// if ( this._state.controlsdisabled.rows!==val ) { +// this._state.controlsdisabled.rows=val; +// toolbar.btnAddCell.menu.items[3].setDisabled(val); +// toolbar.btnDeleteCell.menu.items[3].setDisabled(val); +// } +// val = (selectionType==Asc.c_oAscSelectionType.RangeCol); +// if ( this._state.controlsdisabled.cols!==val ) { +// this._state.controlsdisabled.cols=val; +// toolbar.btnAddCell.menu.items[2].setDisabled(val); +// toolbar.btnDeleteCell.menu.items[2].setDisabled(val); +// } +// +// val = filterInfo && filterInfo.asc_getIsApplyAutoFilter(); +// if ( this._state.controlsdisabled.cells_right!==(this._state.controlsdisabled.rows || val) ) { +// this._state.controlsdisabled.cells_right = (this._state.controlsdisabled.rows || val); +// toolbar.btnAddCell.menu.items[0].setDisabled(this._state.controlsdisabled.cells_right); +// toolbar.btnDeleteCell.menu.items[0].setDisabled(this._state.controlsdisabled.cells_right); +// } +// if ( this._state.controlsdisabled.cells_down!==(this._state.controlsdisabled.cols || val) ) { +// this._state.controlsdisabled.cells_down = (this._state.controlsdisabled.cols || val); +// toolbar.btnAddCell.menu.items[1].setDisabled(this._state.controlsdisabled.cells_down); +// toolbar.btnDeleteCell.menu.items[1].setDisabled(this._state.controlsdisabled.cells_down); +// } + }, + + onApiInitEditorStyles: function(styles){ + window.styles_loaded = false; + + _cellStyles = styles.asc_getDefaultStyles().concat(styles.asc_getDocStyles()); + + this.getView('EditCell').renderStyles(_cellStyles); + + window.styles_loaded = true; }, // Handlers + onFontSize: function (e) { + var me = this, + $button = $(e.currentTarget), + fontSize = _fontInfo.size; + + if ($button.hasClass('decrement')) { + _.isUndefined(fontSize) ? me.api.asc_decreaseFontSize() : fontSize = Math.max(1, --fontSize); + } else { + _.isUndefined(fontSize) ? me.api.asc_increaseFontSize() : fontSize = Math.min(100, ++fontSize); + } + + if (! _.isUndefined(fontSize)) { + me.api.asc_setCellFontSize(fontSize); + } + }, + + onFontClick: function (view, e) { + var $item = $(e.currentTarget).find('input'); + + if ($item) { + this.api.asc_setCellFontName($item.prop('value')); + } + }, + onBold: function (e) { var pressed = this._toggleButton(e); if (this.api) { - this.api.put_TextPrBold(pressed); + this.api.asc_setCellBold(pressed); } }, @@ -198,7 +473,7 @@ define([ var pressed = this._toggleButton(e); if (this.api) { - this.api.put_TextPrItalic(pressed); + this.api.asc_setCellItalic(pressed); } }, @@ -206,29 +481,64 @@ define([ var pressed = this._toggleButton(e); if (this.api) { - this.api.put_TextPrUnderline(pressed); + this.api.asc_setCellUnderline(pressed); } }, + onTextColor:function (palette, color) { + this.api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color)); + }, + + onFillColor:function (palette, color) { + this.api.asc_setCellBackgroundColor(color == 'transparent' ? null : Common.Utils.ThemeColor.getRgbColor(color)); + }, + + onHAlignChange: function (e) { + var $target = $(e.currentTarget), + type = $target.prop('value'); + + this.api.asc_setCellAlign(type); + }, + + onVAlignChange: function (e) { + var $target = $(e.currentTarget), + type = $target.prop('value'); + + this.api.asc_setCellVertAlign(type); + }, + + onWrapTextChange: function (e) { + var $target = $(e.currentTarget), + checked = $target.prop('checked'); + + this.api.asc_setCellTextWrap(checked); + }, + + onCellFormat: function (e) { + var $target = $(e.currentTarget), + type = decodeURIComponent(atob($target.data('type'))); + + this.api.asc_setCellFormat(type); + }, + // API handlers - onApiFocusObject: function (objects) { - _stack = objects; + onApiEditorSelectionChanged: function(fontObj) { + if (!_isEdit) { + return; + } - // var paragraphs = []; - // - // _.each(_stack, function(object) { - // if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) { - // paragraphs.push(object); - // } - // }); - // - // if (paragraphs.length > 0) { - // var object = paragraphs[paragraphs.length - 1]; // get top - // _cellObject = object.get_ObjectValue(); - // } else { - // _cellObject = undefined; - // } + _fontInfo = fontObj; + this.initFontSettings(fontObj); + }, + + onApiSelectionChanged: function(cellInfo) { + if (!_isEdit) { + return; + } + + _cellInfo = cellInfo; + this.initCellSettings(cellInfo); }, // Helpers @@ -236,6 +546,23 @@ define([ return $(e.currentTarget).toggleClass('active').hasClass('active'); }, + _sdkToThemeColor: function (color) { + var clr = 'transparent'; + + if (color) { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + clr = { + color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), + effectValue: color.get_value() + } + } else { + clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + + return clr; + }, + textFonts: 'Fonts', textAuto: 'Auto', textPt: 'pt' diff --git a/apps/spreadsheeteditor/mobile/app/template/EditCell.template b/apps/spreadsheeteditor/mobile/app/template/EditCell.template index ed016f2a6..bc9118b7b 100644 --- a/apps/spreadsheeteditor/mobile/app/template/EditCell.template +++ b/apps/spreadsheeteditor/mobile/app/template/EditCell.template @@ -3,7 +3,7 @@