From e0737d18fda6ce4b370ab3b370a2488f30049029 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 24 Aug 2016 11:44:45 +0300 Subject: [PATCH] [SSE] Delay rendering controls on the right panel. --- .../main/app/view/ChartSettings.js | 286 +++---- .../main/app/view/ImageSettings.js | 52 +- .../main/app/view/ParagraphSettings.js | 157 ++-- .../main/app/view/ShapeSettings.js | 687 ++++++++-------- .../main/app/view/TableSettings.js | 254 +++--- .../main/app/view/TextArtSettings.js | 738 +++++++++--------- 6 files changed, 1100 insertions(+), 1074 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index 923acfc3e..cb0d501e8 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -64,7 +64,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._state = { @@ -85,143 +84,6 @@ define([ this._originalProps = null; this.render(); - - this.btnChartType = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-chartlist bar-normal', - menu : new Common.UI.Menu({ - style: 'width: 560px;', - items: [ - { template: _.template('') } - ] - }) - }); - this.btnChartType.on('render:after', function(btn) { - me.mnuChartTypePicker = new Common.UI.DataView({ - el: $('#id-chart-menu-type'), - parentMenu: btn.menu, - restoreHeight: 411, - groups: new Common.UI.DataViewGroupStore([ - { id: 'menu-chart-group-bar', caption: me.textColumn }, - { id: 'menu-chart-group-line', caption: me.textLine }, - { id: 'menu-chart-group-pie', caption: me.textPie }, - { id: 'menu-chart-group-hbar', caption: me.textBar }, - { id: 'menu-chart-group-area', caption: me.textArea }, - { id: 'menu-chart-group-scatter', caption: me.textPoint }, - { id: 'menu-chart-group-stock', caption: me.textStock } - ]), - store: new Common.UI.DataViewStore([ - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'}, - { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'}, - { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'} - ]), - itemTemplate: _.template('
') - }); - }); - this.btnChartType.render($('#chart-button-type')); - this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); - this.lockedControls.push(this.btnChartType); - - this.btnChartStyle = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnChartStyle.on('render:after', function(btn) { - me.mnuChartStylePicker = new Common.UI.DataView({ - el: $('#id-chart-menu-style'), - style: 'max-height: 411px;', - parentMenu: btn.menu, - store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
') - }); - - if (me.btnChartStyle.menu) { - me.btnChartStyle.menu.on('show:after', function () { - me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true}); - }); - } - }); - this.btnChartStyle.render($('#chart-button-style')); - this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle)); - this.lockedControls.push(this.btnChartStyle); - - this.spnWidth = new Common.UI.MetricSpinner({ - el: $('#chart-spin-width'), - step: .1, - width: 78, - defaultUnit : "cm", - value: '3 cm', - maxValue: 55.88, - minValue: 0 - }); - this.spinners.push(this.spnWidth); - this.lockedControls.push(this.spnWidth); - - this.spnHeight = new Common.UI.MetricSpinner({ - el: $('#chart-spin-height'), - step: .1, - width: 78, - defaultUnit : "cm", - value: '3 cm', - maxValue: 55.88, - minValue: 0 - }); - this.spinners.push(this.spnHeight); - this.lockedControls.push(this.spnHeight); - - this.spnWidth.on('change', _.bind(this.onWidthChange, this)); - this.spnHeight.on('change', _.bind(this.onHeightChange, this)); - - this.btnRatio = new Common.UI.Button({ - cls: 'btn-toolbar', - iconCls: 'advanced-btn-ratio', - style: 'margin-bottom: 1px;', - enableToggle: true, - hint: this.textKeepRatio - }); - this.btnRatio.render($('#chart-button-ratio')) ; - this.lockedControls.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) { - var props = new Asc.asc_CImgProperty(); - props.asc_putLockAspect(btn.pressed); - this.api.asc_setGraphicObjectProps(props); - } - }, this)); - - $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); }, render: function () { @@ -229,8 +91,6 @@ define([ el.html(this.template({ scope: this })); - - this.linkAdvanced = $('#chart-advanced-link'); }, setApi: function(api) { @@ -334,7 +194,121 @@ define([ } }, + createDelayedControls: function() { + var me = this; + + this.btnChartType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-chartlist bar-normal', + menu : new Common.UI.Menu({ + style: 'width: 560px;', + items: [ + { template: _.template('') } + ] + }) + }); + this.btnChartType.on('render:after', function(btn) { + me.mnuChartTypePicker = new Common.UI.DataView({ + el: $('#id-chart-menu-type'), + parentMenu: btn.menu, + restoreHeight: 411, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-bar', caption: me.textColumn }, + { id: 'menu-chart-group-line', caption: me.textLine }, + { id: 'menu-chart-group-pie', caption: me.textPie }, + { id: 'menu-chart-group-hbar', caption: me.textBar }, + { id: 'menu-chart-group-area', caption: me.textArea }, + { id: 'menu-chart-group-scatter', caption: me.textPoint }, + { id: 'menu-chart-group-stock', caption: me.textStock } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'}, + { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'}, + { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'} + ]), + itemTemplate: _.template('
') + }); + }); + this.btnChartType.render($('#chart-button-type')); + this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); + this.lockedControls.push(this.btnChartType); + + this.spnWidth = new Common.UI.MetricSpinner({ + el: $('#chart-spin-width'), + step: .1, + width: 78, + defaultUnit : "cm", + value: '3 cm', + maxValue: 55.88, + minValue: 0 + }); + this.spinners.push(this.spnWidth); + this.lockedControls.push(this.spnWidth); + + this.spnHeight = new Common.UI.MetricSpinner({ + el: $('#chart-spin-height'), + step: .1, + width: 78, + defaultUnit : "cm", + value: '3 cm', + maxValue: 55.88, + minValue: 0 + }); + this.spinners.push(this.spnHeight); + this.lockedControls.push(this.spnHeight); + + this.spnWidth.on('change', _.bind(this.onWidthChange, this)); + this.spnHeight.on('change', _.bind(this.onHeightChange, this)); + + this.btnRatio = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'advanced-btn-ratio', + style: 'margin-bottom: 1px;', + enableToggle: true, + hint: this.textKeepRatio + }); + this.btnRatio.render($('#chart-button-ratio')) ; + this.lockedControls.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) { + var props = new Asc.asc_CImgProperty(); + props.asc_putLockAspect(btn.pressed); + this.api.asc_setGraphicObjectProps(props); + } + }, this)); + + this.linkAdvanced = $('#chart-advanced-link'); + $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); + }, + createDelayedElements: function() { + this.createDelayedControls(); this.updateMetricUnit(); }, @@ -473,6 +447,36 @@ define([ updateChartStyles: function(styles) { var me = this; + + if (!this.btnChartStyle) { + this.btnChartStyle = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-wrap', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnChartStyle.render($('#chart-button-style')); + this.lockedControls.push(this.btnChartStyle); + this.mnuChartStylePicker = new Common.UI.DataView({ + el: $('#id-chart-menu-style'), + style: 'max-height: 411px;', + parentMenu: this.btnChartStyle.menu, + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
') + }); + + if (this.btnChartStyle.menu) { + this.btnChartStyle.menu.on('show:after', function () { + me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true}); + }); + } + this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle)); + } + if (styles && styles.length>0){ var stylesStore = this.mnuChartStylePicker.store; if (stylesStore) { @@ -508,6 +512,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/spreadsheeteditor/main/app/view/ImageSettings.js b/apps/spreadsheeteditor/main/app/view/ImageSettings.js index 3cbb70b3a..9ecb449d6 100644 --- a/apps/spreadsheeteditor/main/app/view/ImageSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ImageSettings.js @@ -64,7 +64,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._nRatio = 1; @@ -82,7 +81,33 @@ define([ this._noApply = false; this.render(); + }, + render: function () { + var el = $(this.el); + el.html(this.template({ + scope: this + })); + }, + + setApi: function(api) { + if ( api == undefined ) return; + this.api = api; + return this; + }, + + updateMetricUnit: function() { + if (this.spinners) { + for (var i=0; i') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBackColor.on('render:after', function(btn) { - me.colorsBack = new Common.UI.ThemeColorPalette({ - el: $('#shape-back-color-menu'), - value: 'transparent', - transparent: true - }); - me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me)); - }); - this.btnBackColor.render( $('#shape-back-color-btn')); - this.btnBackColor.setColor('transparent'); - $(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); - this.fillControls.push(this.btnBackColor); - - this.cmbPattern = new Common.UI.ComboDataView({ - itemWidth: 28, - itemHeight: 28, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-pattern' - }); - this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ - '
', - '', - '
' - ].join('')); - this.cmbPattern.render($('#shape-combo-pattern')); - this.cmbPattern.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); - this.cmbPattern.openButton.menu.on('show:after', function () { - me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.fillControls.push(this.cmbPattern); - - this.btnFGColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnFGColor.on('render:after', function(btn) { - me.colorsFG = new Common.UI.ThemeColorPalette({ - el: $('#shape-foreground-color-menu'), - value: '000000' - }); - me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me)); - }); - this.btnFGColor.render( $('#shape-foreground-color-btn')); - this.btnFGColor.setColor('000000'); - $(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); - this.fillControls.push(this.btnFGColor); - - this.btnBGColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBGColor.on('render:after', function(btn) { - me.colorsBG = new Common.UI.ThemeColorPalette({ - el: $('#shape-background-color-menu'), - value: 'ffffff' - }); - me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me)); - }); - this.btnBGColor.render( $('#shape-background-color-btn')); - this.btnBGColor.setColor('ffffff'); - $(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); - this.fillControls.push(this.btnBGColor); - - this.btnInsertFromFile = new Common.UI.Button({ - el: $('#shape-button-from-file') - }); - this.fillControls.push(this.btnInsertFromFile); - - this.btnInsertFromUrl = new Common.UI.Button({ - el: $('#shape-button-from-url') - }); - this.fillControls.push(this.btnInsertFromUrl); - - this.btnInsertFromFile.on('click', _.bind(function(btn){ - if (this.api) this.api.asc_changeShapeImageFromFile(); - Common.NotificationCenter.trigger('edit:complete', this); - }, this)); - this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this)); - - this._arrFillType = [ - {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH}, - {displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE} - ]; - - this.cmbFillType = new Common.UI.ComboBox({ - el: $('#shape-combo-fill-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrFillType - }); - this.cmbFillType.setValue(this._arrFillType[0].value); - this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); - this.fillControls.push(this.cmbFillType); - - this.btnTexture = new Common.UI.ComboBox({ - el: $('#shape-combo-fill-texture'), - template: _.template([ - '
', - '
' + this.textSelectTexture + '
', - '
', - '', - '
' - ].join('')) - }); - this.textureMenu = new Common.UI.Menu({ - items: [ - { template: _.template('
') } - ] - }); - this.textureMenu.render($('#shape-combo-fill-texture')); - this.fillControls.push(this.btnTexture); - - this.numTransparency = new Common.UI.MetricSpinner({ - el: $('#shape-spin-transparency'), - step: 1, - width: 62, - value: '100 %', - defaultUnit : "%", - maxValue: 100, - minValue: 0 - }); - this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); - this.fillControls.push(this.numTransparency); - - this.sldrTransparency = new Common.UI.SingleSlider({ - el: $('#shape-slider-transparency'), - width: 75, - minValue: 0, - maxValue: 100, - value: 100 - }); - this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); - this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); - this.fillControls.push(this.sldrTransparency); - - this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start'); - this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end'); - - this._arrGradType = [ - {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, - {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} - ]; - - this.cmbGradType = new Common.UI.ComboBox({ - el: $('#shape-combo-grad-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrGradType - }); - this.cmbGradType.setValue(this._arrGradType[0].value); - this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); - this.fillControls.push(this.cmbGradType); - - this._viewDataLinear = [ - { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, - { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, - { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, - { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, - { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, - { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, - { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, - { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} - ]; - - this._viewDataRadial = [ - { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} - ]; - - this.btnDirection = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-gradient gradient-left', - menu : new Common.UI.Menu({ - style: 'min-width: 60px;', - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnDirection.on('render:after', function(btn) { - me.mnuDirectionPicker = new Common.UI.DataView({ - el: $('#id-shape-menu-direction'), - parentMenu: btn.menu, - restoreHeight: 174, - store: new Common.UI.DataViewStore(me._viewDataLinear), - itemTemplate: _.template('
') - }); - }); - this.btnDirection.render($('#shape-button-direction')); - this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); - this.fillControls.push(this.btnDirection); - - this.btnGradColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.btnGradColor.on('render:after', function(btn) { - me.colorsGrad = new Common.UI.ThemeColorPalette({ - el: $('#shape-gradient-color-menu'), - value: '000000' - }); - me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me)); - }); - this.btnGradColor.render( $('#shape-gradient-color-btn')); - this.btnGradColor.setColor('000000'); - $(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); - this.fillControls.push(this.btnGradColor); - - this.sldrGradient = new Common.UI.MultiSliderGradient({ - el: $('#shape-slider-gradient'), - width: 125, - minValue: 0, - maxValue: 100, - values: [0, 100] - }); - this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); - this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); - this.sldrGradient.on('thumbclick', function(cmp, index){ - me.GradColor.currentIdx = index; - var color = me.GradColor.colors[me.GradColor.currentIdx]; - me.btnGradColor.setColor(color); - me.colorsGrad.select(color,false); - }); - this.sldrGradient.on('thumbdblclick', function(cmp){ - me.btnGradColor.cmpEl.find('button').dropdown('toggle'); - }); - this.fillControls.push(this.sldrGradient); - - this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ - el: $('#shape-combo-border-size'), - style: "width: 93px;", - txtNoBorders: this.txtNoBorders - }) - .on('selected', _.bind(this.onBorderSizeSelect, this)) - .on('changed:before', _.bind(this.onBorderSizeChanged, this, true)) - .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); - this.cmbBorderSize.setValue(this.BorderSize); - this.lockedControls.push(this.cmbBorderSize); - - this.btnBorderColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBorderColor.on('render:after', function(btn) { - me.colorsBorder = new Common.UI.ThemeColorPalette({ - el: $('#shape-border-color-menu'), - value: '000000' - }); - me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me)); - }); - this.btnBorderColor.render( $('#shape-border-color-btn')); - this.btnBorderColor.setColor('000000'); - $(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); - this.lockedControls.push(this.btnBorderColor); - - this.cmbBorderType = new Common.UI.ComboBorderType({ - el: $('#shape-combo-border-type'), - style: "width: 93px;", - menuStyle: 'min-width: 93px;' - }).on('selected', _.bind(this.onBorderTypeSelect, this)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderType = Asc.c_oDashType.solid; - this.cmbBorderType.setValue(this.BorderType); - this.lockedControls.push(this.cmbBorderType); - - this.btnChangeShape = new Common.UI.Button({ - cls: 'btn-icon-default', - iconCls: 'btn-change-shape', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - cls: 'menu-shapes', - items: [] - }) - }); - this.btnChangeShape.render( $('#shape-btn-change')) ; - this.lockedControls.push(this.btnChangeShape); - - $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this)); - this.FillColorContainer = $('#shape-panel-color-fill'); this.FillImageContainer = $('#shape-panel-image-fill'); this.FillPatternContainer = $('#shape-panel-pattern-fill'); @@ -481,8 +137,6 @@ define([ el.html(this.template({ scope: this })); - - this.linkAdvanced = $('#shape-advanced-link'); }, setApi: function(api) { @@ -1426,7 +1080,229 @@ define([ } }, + createDelayedControls: function() { + var me = this; + + this._arrFillSrc = [ + {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, + {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, + {displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP}, + {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT}, + {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} + ]; + + this.cmbFillSrc = new Common.UI.ComboBox({ + el: $('#shape-combo-fill-src'), + cls: 'input-group-nr', + style: 'width: 100%;', + menuStyle: 'min-width: 190px;', + editable: false, + data: this._arrFillSrc + }); + this.cmbFillSrc.setValue(this._arrFillSrc[0].value); + this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); + this.fillControls.push(this.cmbFillSrc); + + this.cmbPattern = new Common.UI.ComboDataView({ + itemWidth: 28, + itemHeight: 28, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-pattern' + }); + this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ + '
', + '', + '
' + ].join('')); + this.cmbPattern.render($('#shape-combo-pattern')); + this.cmbPattern.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); + this.cmbPattern.openButton.menu.on('show:after', function () { + me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.fillControls.push(this.cmbPattern); + + this.btnInsertFromFile = new Common.UI.Button({ + el: $('#shape-button-from-file') + }); + this.fillControls.push(this.btnInsertFromFile); + + this.btnInsertFromUrl = new Common.UI.Button({ + el: $('#shape-button-from-url') + }); + this.fillControls.push(this.btnInsertFromUrl); + + this.btnInsertFromFile.on('click', _.bind(function(btn){ + if (this.api) this.api.asc_changeShapeImageFromFile(); + Common.NotificationCenter.trigger('edit:complete', this); + }, this)); + this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this)); + + this._arrFillType = [ + {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH}, + {displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE} + ]; + + this.cmbFillType = new Common.UI.ComboBox({ + el: $('#shape-combo-fill-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrFillType + }); + this.cmbFillType.setValue(this._arrFillType[0].value); + this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); + this.fillControls.push(this.cmbFillType); + + this.numTransparency = new Common.UI.MetricSpinner({ + el: $('#shape-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0 + }); + this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); + this.fillControls.push(this.numTransparency); + + this.sldrTransparency = new Common.UI.SingleSlider({ + el: $('#shape-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); + this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); + this.fillControls.push(this.sldrTransparency); + + this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start'); + this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end'); + + this._arrGradType = [ + {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, + {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} + ]; + + this.cmbGradType = new Common.UI.ComboBox({ + el: $('#shape-combo-grad-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrGradType + }); + this.cmbGradType.setValue(this._arrGradType[0].value); + this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); + this.fillControls.push(this.cmbGradType); + + this._viewDataLinear = [ + { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, + { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, + { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, + { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, + { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, + { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, + { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, + { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} + ]; + + this._viewDataRadial = [ + { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} + ]; + + this.btnDirection = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-gradient gradient-left', + menu : new Common.UI.Menu({ + style: 'min-width: 60px;', + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnDirection.on('render:after', function(btn) { + me.mnuDirectionPicker = new Common.UI.DataView({ + el: $('#id-shape-menu-direction'), + parentMenu: btn.menu, + restoreHeight: 174, + store: new Common.UI.DataViewStore(me._viewDataLinear), + itemTemplate: _.template('
') + }); + }); + this.btnDirection.render($('#shape-button-direction')); + this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); + this.fillControls.push(this.btnDirection); + + this.sldrGradient = new Common.UI.MultiSliderGradient({ + el: $('#shape-slider-gradient'), + width: 125, + minValue: 0, + maxValue: 100, + values: [0, 100] + }); + this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); + this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); + this.sldrGradient.on('thumbclick', function(cmp, index){ + me.GradColor.currentIdx = index; + var color = me.GradColor.colors[me.GradColor.currentIdx]; + me.btnGradColor.setColor(color); + me.colorsGrad.select(color,false); + }); + this.sldrGradient.on('thumbdblclick', function(cmp){ + me.btnGradColor.cmpEl.find('button').dropdown('toggle'); + }); + this.fillControls.push(this.sldrGradient); + + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ + el: $('#shape-combo-border-size'), + style: "width: 93px;", + txtNoBorders: this.txtNoBorders + }) + .on('selected', _.bind(this.onBorderSizeSelect, this)) + .on('changed:before', _.bind(this.onBorderSizeChanged, this, true)) + .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); + this.cmbBorderSize.setValue(this.BorderSize); + this.lockedControls.push(this.cmbBorderSize); + + this.cmbBorderType = new Common.UI.ComboBorderType({ + el: $('#shape-combo-border-type'), + style: "width: 93px;", + menuStyle: 'min-width: 93px;' + }).on('selected', _.bind(this.onBorderTypeSelect, this)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderType = Asc.c_oDashType.solid; + this.cmbBorderType.setValue(this.BorderType); + this.lockedControls.push(this.cmbBorderType); + + this.btnChangeShape = new Common.UI.Button({ + cls: 'btn-icon-default', + iconCls: 'btn-change-shape', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + cls: 'menu-shapes', + items: [] + }) + }); + this.btnChangeShape.render( $('#shape-btn-change')) ; + this.lockedControls.push(this.btnChangeShape); + + $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this)); + this.linkAdvanced = $('#shape-advanced-link'); + }, + createDelayedElements: function() { + this.createDelayedControls(); + var global_hatch_menu_map = [ 0,1,3,2,4, 53,5,6,7,8, @@ -1458,7 +1334,6 @@ define([ this.PatternFillType = this.patternViewData[0].type; } - this.fillAutoShapes(); this.UpdateThemeColors(); }, @@ -1466,6 +1341,24 @@ define([ onInitStandartTextures: function(texture) { var me = this; if (texture && texture.length>0){ + this.btnTexture = new Common.UI.ComboBox({ + el: $('#shape-combo-fill-texture'), + template: _.template([ + '
', + '
' + this.textSelectTexture + '
', + '
', + '', + '
' + ].join('')) + }); + this.textureMenu = new Common.UI.Menu({ + items: [ + { template: _.template('
') } + ] + }); + this.textureMenu.render($('#shape-combo-fill-texture')); + this.fillControls.push(this.btnTexture); + var texturearray = []; _.each(texture, function(item){ texturearray.push({ @@ -1546,6 +1439,104 @@ define([ }, UpdateThemeColors: function() { + if (!this.btnBackColor) { + this.btnBackColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBackColor.render( $('#shape-back-color-btn')); + this.btnBackColor.setColor('transparent'); + this.fillControls.push(this.btnBackColor); + this.colorsBack = new Common.UI.ThemeColorPalette({ + el: $('#shape-back-color-menu'), + value: 'transparent', + transparent: true + }); + this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); + $(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); + + this.btnBorderColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBorderColor.render( $('#shape-border-color-btn')); + this.btnBorderColor.setColor('000000'); + this.lockedControls.push(this.btnBorderColor); + this.colorsBorder = new Common.UI.ThemeColorPalette({ + el: $('#shape-border-color-menu'), + value: '000000' + }); + this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this)); + $(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); + + this.btnFGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnFGColor.render( $('#shape-foreground-color-btn')); + this.btnFGColor.setColor('000000'); + this.fillControls.push(this.btnFGColor); + this.colorsFG = new Common.UI.ThemeColorPalette({ + el: $('#shape-foreground-color-menu'), + value: '000000' + }); + this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this)); + $(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); + + this.btnBGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBGColor.render( $('#shape-background-color-btn')); + this.btnBGColor.setColor('ffffff'); + this.fillControls.push(this.btnBGColor); + this.colorsBG = new Common.UI.ThemeColorPalette({ + el: $('#shape-background-color-menu'), + value: 'ffffff' + }); + this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this)); + $(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); + + this.btnGradColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor.render( $('#shape-gradient-color-btn')); + this.btnGradColor.setColor('000000'); + this.fillControls.push(this.btnGradColor); + this.colorsGrad = new Common.UI.ThemeColorPalette({ + el: $('#shape-gradient-color-menu'), + value: '000000' + }); + this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this)); + $(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); + } + this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -1585,6 +1576,8 @@ define([ }, disableControls: function(disable, disableFill) { + if (this._initSettings) return; + this.disableFillPanels(disable || disableFill); if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; diff --git a/apps/spreadsheeteditor/main/app/view/TableSettings.js b/apps/spreadsheeteditor/main/app/view/TableSettings.js index f942d1948..8dd4b2bf8 100644 --- a/apps/spreadsheeteditor/main/app/view/TableSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TableSettings.js @@ -33,7 +33,7 @@ define([ }, initialize: function () { - var me = this; + this._initSettings = true; this._state = { TableName: '', @@ -56,126 +56,6 @@ define([ this._noApply = false; this.render(); - - this.chHeader = new Common.UI.CheckBox({ - el: $('#table-checkbox-header'), - labelText: this.textHeader - }); - this.lockedControls.push(this.chHeader); - - this.chTotal = new Common.UI.CheckBox({ - el: $('#table-checkbox-total'), - labelText: this.textTotal - }); - this.lockedControls.push(this.chTotal); - - this.chBanded = new Common.UI.CheckBox({ - el: $('#table-checkbox-banded'), - labelText: this.textBanded - }); - this.lockedControls.push(this.chBanded); - - this.chFirst = new Common.UI.CheckBox({ - el: $('#table-checkbox-first'), - labelText: this.textFirst - }); - this.lockedControls.push(this.chFirst); - - this.chLast = new Common.UI.CheckBox({ - el: $('#table-checkbox-last'), - labelText: this.textLast - }); - this.lockedControls.push(this.chLast); - - this.chColBanded = new Common.UI.CheckBox({ - el: $('#table-checkbox-col-banded'), - labelText: this.textBanded - }); - this.lockedControls.push(this.chColBanded); - - this.chFilter = new Common.UI.CheckBox({ - el: $('#table-checkbox-filter'), - labelText: this.textFilter - }); - this.lockedControls.push(this.chFilter); - - this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowHeader, 'CheckHeader')); - this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowTotal, 'CheckTotal')); - this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowBanded, 'CheckBanded')); - this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnFirst, 'CheckFirst')); - this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnLast, 'CheckLast')); - this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnBanded, 'CheckColBanded')); - this.chFilter.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.filterButton, 'CheckFilter')); - - this.cmbTableTemplate = new Common.UI.ComboDataView({ - itemWidth: 61, - itemHeight: 46, - menuMaxHeight: 300, - enableKeyEvents: true - }); - this.cmbTableTemplate.render($('#table-combo-template')); - this.cmbTableTemplate.openButton.menu.cmpEl.css({ - 'min-width': 175, - 'max-width': 175 - }); - this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); - this.cmbTableTemplate.openButton.menu.on('show:after', function () { - me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTableTemplate); - - this.txtTableName = new Common.UI.InputField({ - el : $('#table-txt-name'), - name : 'tablename', - style : 'width: 100%;', - validateOnBlur: false - }); - this.txtTableName.on('changed:after', _.bind(this.onTableNameChanged, this)); - this.lockedControls.push(this.txtTableName); - - this.btnSelectData = new Common.UI.Button({ - el: $('#table-btn-select-data') - }); - this.btnSelectData.on('click', _.bind(this.onSelectData, this)); - this.lockedControls.push(this.btnSelectData); - - this.btnEdit = new Common.UI.Button({ - cls: 'btn-icon-default', - iconCls: 'btn-edit-table', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - items: [ - { caption: this.selectRowText, value: Asc.c_oAscChangeSelectionFormatTable.row, idx: 0 }, - { caption: this.selectColumnText, value: Asc.c_oAscChangeSelectionFormatTable.column, idx: 1 }, - { caption: this.selectDataText, value: Asc.c_oAscChangeSelectionFormatTable.data, idx: 2 }, - { caption: this.selectTableText, value: Asc.c_oAscChangeSelectionFormatTable.all, idx: 3 }, - { caption: '--' }, - { caption: this.insertRowAboveText, value: Asc.c_oAscInsertOptions.InsertTableRowAbove, idx: 4 }, - { caption: this.insertRowBelowText, value: Asc.c_oAscInsertOptions.InsertTableRowBelow, idx: 5 }, - { caption: this.insertColumnLeftText, value: Asc.c_oAscInsertOptions.InsertTableColLeft, idx: 6 }, - { caption: this.insertColumnRightText, value: Asc.c_oAscInsertOptions.InsertTableColRight, idx: 7 }, - { caption: '--' }, - { caption: this.deleteRowText, value: Asc.c_oAscDeleteOptions.DeleteRows, idx: 8 }, - { caption: this.deleteColumnText, value: Asc.c_oAscDeleteOptions.DeleteColumns, idx: 9 }, - { caption: this.deleteTableText, value: Asc.c_oAscDeleteOptions.DeleteTable, idx: 10 } - ] - }) - }); - this.btnEdit.render( $('#table-btn-edit')) ; - this.btnEdit.menu.on('show:after', _.bind( function(menu){ - if (this.api) { - menu.items[5].setDisabled(!this._originalProps.asc_getIsInsertRowAbove()); - menu.items[6].setDisabled(!this._originalProps.asc_getIsInsertRowBelow()); - menu.items[7].setDisabled(!this._originalProps.asc_getIsInsertColumnLeft()); - menu.items[8].setDisabled(!this._originalProps.asc_getIsInsertColumnRight()); - - menu.items[10].setDisabled(!this._originalProps.asc_getIsDeleteRow()); - menu.items[11].setDisabled(!this._originalProps.asc_getIsDeleteColumn()); - menu.items[12].setDisabled(!this._originalProps.asc_getIsDeleteTable()); - } - }, this)); - this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this)); - this.lockedControls.push(this.btnEdit); }, onCheckTemplateChange: function(type, stateName, field, newValue, oldValue, eOpts) { @@ -265,7 +145,118 @@ define([ return this; }, + createDelayedControls: function() { + var me = this; + this.chHeader = new Common.UI.CheckBox({ + el: $('#table-checkbox-header'), + labelText: this.textHeader + }); + this.lockedControls.push(this.chHeader); + + this.chTotal = new Common.UI.CheckBox({ + el: $('#table-checkbox-total'), + labelText: this.textTotal + }); + this.lockedControls.push(this.chTotal); + + this.chBanded = new Common.UI.CheckBox({ + el: $('#table-checkbox-banded'), + labelText: this.textBanded + }); + this.lockedControls.push(this.chBanded); + + this.chFirst = new Common.UI.CheckBox({ + el: $('#table-checkbox-first'), + labelText: this.textFirst + }); + this.lockedControls.push(this.chFirst); + + this.chLast = new Common.UI.CheckBox({ + el: $('#table-checkbox-last'), + labelText: this.textLast + }); + this.lockedControls.push(this.chLast); + + this.chColBanded = new Common.UI.CheckBox({ + el: $('#table-checkbox-col-banded'), + labelText: this.textBanded + }); + this.lockedControls.push(this.chColBanded); + + this.chFilter = new Common.UI.CheckBox({ + el: $('#table-checkbox-filter'), + labelText: this.textFilter + }); + this.lockedControls.push(this.chFilter); + + this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowHeader, 'CheckHeader')); + this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowTotal, 'CheckTotal')); + this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.rowBanded, 'CheckBanded')); + this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnFirst, 'CheckFirst')); + this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnLast, 'CheckLast')); + this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.columnBanded, 'CheckColBanded')); + this.chFilter.on('change', _.bind(this.onCheckTemplateChange, this, Asc.c_oAscChangeTableStyleInfo.filterButton, 'CheckFilter')); + + this.txtTableName = new Common.UI.InputField({ + el : $('#table-txt-name'), + name : 'tablename', + style : 'width: 100%;', + validateOnBlur: false + }); + this.txtTableName.on('changed:after', _.bind(this.onTableNameChanged, this)); + this.lockedControls.push(this.txtTableName); + + this.btnSelectData = new Common.UI.Button({ + el: $('#table-btn-select-data') + }); + this.btnSelectData.on('click', _.bind(this.onSelectData, this)); + this.lockedControls.push(this.btnSelectData); + + this.btnEdit = new Common.UI.Button({ + cls: 'btn-icon-default', + iconCls: 'btn-edit-table', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + items: [ + { caption: this.selectRowText, value: Asc.c_oAscChangeSelectionFormatTable.row, idx: 0 }, + { caption: this.selectColumnText, value: Asc.c_oAscChangeSelectionFormatTable.column, idx: 1 }, + { caption: this.selectDataText, value: Asc.c_oAscChangeSelectionFormatTable.data, idx: 2 }, + { caption: this.selectTableText, value: Asc.c_oAscChangeSelectionFormatTable.all, idx: 3 }, + { caption: '--' }, + { caption: this.insertRowAboveText, value: Asc.c_oAscInsertOptions.InsertTableRowAbove, idx: 4 }, + { caption: this.insertRowBelowText, value: Asc.c_oAscInsertOptions.InsertTableRowBelow, idx: 5 }, + { caption: this.insertColumnLeftText, value: Asc.c_oAscInsertOptions.InsertTableColLeft, idx: 6 }, + { caption: this.insertColumnRightText, value: Asc.c_oAscInsertOptions.InsertTableColRight, idx: 7 }, + { caption: '--' }, + { caption: this.deleteRowText, value: Asc.c_oAscDeleteOptions.DeleteRows, idx: 8 }, + { caption: this.deleteColumnText, value: Asc.c_oAscDeleteOptions.DeleteColumns, idx: 9 }, + { caption: this.deleteTableText, value: Asc.c_oAscDeleteOptions.DeleteTable, idx: 10 } + ] + }) + }); + this.btnEdit.render( $('#table-btn-edit')) ; + this.btnEdit.menu.on('show:after', _.bind( function(menu){ + if (this.api) { + menu.items[5].setDisabled(!this._originalProps.asc_getIsInsertRowAbove()); + menu.items[6].setDisabled(!this._originalProps.asc_getIsInsertRowBelow()); + menu.items[7].setDisabled(!this._originalProps.asc_getIsInsertColumnLeft()); + menu.items[8].setDisabled(!this._originalProps.asc_getIsInsertColumnRight()); + + menu.items[10].setDisabled(!this._originalProps.asc_getIsDeleteRow()); + menu.items[11].setDisabled(!this._originalProps.asc_getIsDeleteColumn()); + menu.items[12].setDisabled(!this._originalProps.asc_getIsDeleteTable()); + } + }, this)); + this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this)); + this.lockedControls.push(this.btnEdit); + }, + ChangeSettings: function(props) { + if (this._initSettings) { + this.createDelayedControls(); + this._initSettings = false; + } + this.disableControls(this._locked); if (props )//formatTableInfo @@ -360,6 +351,25 @@ define([ var self = this; this._isTemplatesChanged = true; + if (!this.cmbTableTemplate) { + this.cmbTableTemplate = new Common.UI.ComboDataView({ + itemWidth: 61, + itemHeight: 46, + menuMaxHeight: 300, + enableKeyEvents: true + }); + this.cmbTableTemplate.render($('#table-combo-template')); + this.cmbTableTemplate.openButton.menu.cmpEl.css({ + 'min-width': 175, + 'max-width': 175 + }); + this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); + this.cmbTableTemplate.openButton.menu.on('show:after', function () { + self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbTableTemplate); + } + var count = self.cmbTableTemplate.menuPicker.store.length; if (count>0 && count==Templates.length) { var data = self.cmbTableTemplate.menuPicker.store.models; @@ -413,6 +423,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index 9e7b91642..48c5c1978 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -70,7 +70,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._noApply = true; this.imgprops = null; @@ -119,373 +118,6 @@ define([ this.render(); - this.cmbTextArt = new Common.UI.ComboDataView({ - itemWidth: 50, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - showLast: false, - cls: 'combo-textart' - }); - this.cmbTextArt.render($('#textart-combo-template')); - this.cmbTextArt.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this)); - this.cmbTextArt.openButton.menu.on('show:after', function () { - me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTextArt); - - this._arrFillSrc = [ - {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, - {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, - {displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP}, - {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT}, - {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} - ]; - - this.cmbFillSrc = new Common.UI.ComboBox({ - el: $('#textart-combo-fill-src'), - cls: 'input-group-nr', - style: 'width: 100%;', - menuStyle: 'min-width: 190px;', - editable: false, - data: this._arrFillSrc - }); - this.cmbFillSrc.setValue(this._arrFillSrc[0].value); - this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); - this.lockedControls.push(this.cmbFillSrc); - - this.btnBackColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBackColor.on('render:after', function(btn) { - me.colorsBack = new Common.UI.ThemeColorPalette({ - el: $('#textart-back-color-menu'), - value: 'transparent', - transparent: true - }); - me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me)); - }); - this.btnBackColor.render( $('#textart-back-color-btn')); - this.btnBackColor.setColor('transparent'); - $(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); - this.lockedControls.push(this.btnBackColor); - - this.cmbPattern = new Common.UI.ComboDataView({ - itemWidth: 28, - itemHeight: 28, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-pattern' - }); - this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ - '
', - '', - '
' - ].join('')); - this.cmbPattern.render($('#textart-combo-pattern')); - this.cmbPattern.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); - this.cmbPattern.openButton.menu.on('show:after', function () { - me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - - this.lockedControls.push(this.cmbPattern); - - this.btnFGColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnFGColor.on('render:after', function(btn) { - me.colorsFG = new Common.UI.ThemeColorPalette({ - el: $('#textart-foreground-color-menu'), - value: '000000' - }); - me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me)); - }); - this.btnFGColor.render( $('#textart-foreground-color-btn')); - this.btnFGColor.setColor('000000'); - $(this.el).on('click', '#textart-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); - this.lockedControls.push(this.btnFGColor); - - this.btnBGColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBGColor.on('render:after', function(btn) { - me.colorsBG = new Common.UI.ThemeColorPalette({ - el: $('#textart-background-color-menu'), - value: 'ffffff' - }); - me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me)); - }); - this.btnBGColor.render( $('#textart-background-color-btn')); - this.btnBGColor.setColor('ffffff'); - $(this.el).on('click', '#textart-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); - this.lockedControls.push(this.btnBGColor); - - this.btnInsertFromFile = new Common.UI.Button({ - el: $('#textart-button-from-file') - }); - this.lockedControls.push(this.btnInsertFromFile); - - this.btnInsertFromUrl = new Common.UI.Button({ - el: $('#textart-button-from-url') - }); - this.lockedControls.push(this.btnInsertFromUrl); - - this.btnInsertFromFile.on('click', _.bind(function(btn){ - if (this.api) this.api.asc_changeArtImageFromFile(); - Common.NotificationCenter.trigger('edit:complete', this); - }, this)); - this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this)); - - this._arrFillType = [ - {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH}, - {displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE} - ]; - - this.cmbFillType = new Common.UI.ComboBox({ - el: $('#textart-combo-fill-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrFillType - }); - this.cmbFillType.setValue(this._arrFillType[0].value); - this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); - this.lockedControls.push(this.cmbFillType); - - this.btnTexture = new Common.UI.ComboBox({ - el: $('#textart-combo-fill-texture'), - template: _.template([ - '
', - '
' + this.textSelectTexture + '
', - '
', - '', - '
' - ].join('')) - }); - this.textureMenu = new Common.UI.Menu({ - items: [ - { template: _.template('
') } - ] - }); - this.textureMenu.render($('#textart-combo-fill-texture')); - this.lockedControls.push(this.btnTexture); - - this.numTransparency = new Common.UI.MetricSpinner({ - el: $('#textart-spin-transparency'), - step: 1, - width: 62, - value: '100 %', - defaultUnit : "%", - maxValue: 100, - minValue: 0 - }); - this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); - this.lockedControls.push(this.numTransparency); - - this.sldrTransparency = new Common.UI.SingleSlider({ - el: $('#textart-slider-transparency'), - width: 75, - minValue: 0, - maxValue: 100, - value: 100 - }); - this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); - this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); - this.lockedControls.push(this.sldrTransparency); - - this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start'); - this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end'); - - this._arrGradType = [ - {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, - {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} - ]; - - this.cmbGradType = new Common.UI.ComboBox({ - el: $('#textart-combo-grad-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrGradType - }); - this.cmbGradType.setValue(this._arrGradType[0].value); - this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); - this.lockedControls.push(this.cmbGradType); - - this._viewDataLinear = [ - { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, - { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, - { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, - { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, - { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, - { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, - { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, - { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} - ]; - - this._viewDataRadial = [ - { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} - ]; - - this.btnDirection = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-gradient gradient-left', - menu : new Common.UI.Menu({ - style: 'min-width: 60px;', - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnDirection.on('render:after', function(btn) { - me.mnuDirectionPicker = new Common.UI.DataView({ - el: $('#id-textart-menu-direction'), - parentMenu: btn.menu, - restoreHeight: 174, - store: new Common.UI.DataViewStore(me._viewDataLinear), - itemTemplate: _.template('
') - }); - }); - this.btnDirection.render($('#textart-button-direction')); - this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); - this.lockedControls.push(this.btnDirection); - - this.btnGradColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.btnGradColor.on('render:after', function(btn) { - me.colorsGrad = new Common.UI.ThemeColorPalette({ - el: $('#textart-gradient-color-menu'), - value: '000000' - }); - me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me)); - }); - this.btnGradColor.render( $('#textart-gradient-color-btn')); - this.btnGradColor.setColor('000000'); - $(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); - this.lockedControls.push(this.btnGradColor); - - this.sldrGradient = new Common.UI.MultiSliderGradient({ - el: $('#textart-slider-gradient'), - width: 125, - minValue: 0, - maxValue: 100, - values: [0, 100] - }); - this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); - this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); - this.sldrGradient.on('thumbclick', function(cmp, index){ - me.GradColor.currentIdx = index; - var color = me.GradColor.colors[me.GradColor.currentIdx]; - me.btnGradColor.setColor(color); - me.colorsGrad.select(color,false); - }); - this.sldrGradient.on('thumbdblclick', function(cmp){ - me.btnGradColor.cmpEl.find('button').dropdown('toggle'); - }); - this.lockedControls.push(this.sldrGradient); - - this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ - el: $('#textart-combo-border-size'), - style: "width: 93px;", - txtNoBorders: this.txtNoBorders - }) - .on('selected', _.bind(this.onBorderSizeSelect, this)) - .on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) - .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); - this.cmbBorderSize.setValue(this.BorderSize); - this.lockedControls.push(this.cmbBorderSize); - - this.btnBorderColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.lockedControls.push(this.btnBorderColor); - - this.btnBorderColor.on('render:after', function(btn) { - me.colorsBorder = new Common.UI.ThemeColorPalette({ - el: $('#textart-border-color-menu'), - value: '000000' - }); - me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me)); - }); - this.btnBorderColor.render( $('#textart-border-color-btn')); - this.btnBorderColor.setColor('000000'); - $(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); - - this.cmbBorderType = new Common.UI.ComboBorderType({ - el: $('#textart-combo-border-type'), - style: "width: 93px;", - menuStyle: 'min-width: 93px;' - }).on('selected', _.bind(this.onBorderTypeSelect, this)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderType = Asc.c_oDashType.solid; - this.cmbBorderType.setValue(this.BorderType); - this.lockedControls.push(this.cmbBorderType); - - this.cmbTransform = new Common.UI.ComboDataView({ - itemWidth: 50, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-textart' - }); - this.cmbTransform.render($('#textart-combo-transform')); - this.cmbTransform.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbTransform.on('click', _.bind(this.onTransformSelect, this)); - this.cmbTransform.openButton.menu.on('show:after', function () { - me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTransform); - this.FillColorContainer = $('#textart-panel-color-fill'); this.FillImageContainer = $('#textart-panel-image-fill'); this.FillPatternContainer = $('#textart-panel-pattern-fill'); @@ -1417,7 +1049,234 @@ define([ } }, + createDelayedControls: function() { + var me = this; + + this._arrFillSrc = [ + {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, + {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, + {displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP}, + {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT}, + {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} + ]; + + this.cmbFillSrc = new Common.UI.ComboBox({ + el: $('#textart-combo-fill-src'), + cls: 'input-group-nr', + style: 'width: 100%;', + menuStyle: 'min-width: 190px;', + editable: false, + data: this._arrFillSrc + }); + this.cmbFillSrc.setValue(this._arrFillSrc[0].value); + this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); + this.lockedControls.push(this.cmbFillSrc); + + this.cmbPattern = new Common.UI.ComboDataView({ + itemWidth: 28, + itemHeight: 28, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-pattern' + }); + this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ + '
', + '', + '
' + ].join('')); + this.cmbPattern.render($('#textart-combo-pattern')); + this.cmbPattern.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); + this.cmbPattern.openButton.menu.on('show:after', function () { + me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + + this.lockedControls.push(this.cmbPattern); + + this.btnInsertFromFile = new Common.UI.Button({ + el: $('#textart-button-from-file') + }); + this.lockedControls.push(this.btnInsertFromFile); + + this.btnInsertFromUrl = new Common.UI.Button({ + el: $('#textart-button-from-url') + }); + this.lockedControls.push(this.btnInsertFromUrl); + + this.btnInsertFromFile.on('click', _.bind(function(btn){ + if (this.api) this.api.asc_changeArtImageFromFile(); + Common.NotificationCenter.trigger('edit:complete', this); + }, this)); + this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this)); + + this._arrFillType = [ + {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH}, + {displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE} + ]; + + this.cmbFillType = new Common.UI.ComboBox({ + el: $('#textart-combo-fill-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrFillType + }); + this.cmbFillType.setValue(this._arrFillType[0].value); + this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); + this.lockedControls.push(this.cmbFillType); + + this.numTransparency = new Common.UI.MetricSpinner({ + el: $('#textart-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0 + }); + this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); + this.lockedControls.push(this.numTransparency); + + this.sldrTransparency = new Common.UI.SingleSlider({ + el: $('#textart-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); + this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrTransparency); + + this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start'); + this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end'); + + this._arrGradType = [ + {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, + {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} + ]; + + this.cmbGradType = new Common.UI.ComboBox({ + el: $('#textart-combo-grad-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrGradType + }); + this.cmbGradType.setValue(this._arrGradType[0].value); + this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); + this.lockedControls.push(this.cmbGradType); + + this._viewDataLinear = [ + { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, + { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, + { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, + { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, + { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, + { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, + { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, + { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} + ]; + + this._viewDataRadial = [ + { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} + ]; + + this.btnDirection = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-gradient gradient-left', + menu : new Common.UI.Menu({ + style: 'min-width: 60px;', + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnDirection.on('render:after', function(btn) { + me.mnuDirectionPicker = new Common.UI.DataView({ + el: $('#id-textart-menu-direction'), + parentMenu: btn.menu, + restoreHeight: 174, + store: new Common.UI.DataViewStore(me._viewDataLinear), + itemTemplate: _.template('
') + }); + }); + this.btnDirection.render($('#textart-button-direction')); + this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); + this.lockedControls.push(this.btnDirection); + + this.sldrGradient = new Common.UI.MultiSliderGradient({ + el: $('#textart-slider-gradient'), + width: 125, + minValue: 0, + maxValue: 100, + values: [0, 100] + }); + this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); + this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); + this.sldrGradient.on('thumbclick', function(cmp, index){ + me.GradColor.currentIdx = index; + var color = me.GradColor.colors[me.GradColor.currentIdx]; + me.btnGradColor.setColor(color); + me.colorsGrad.select(color,false); + }); + this.sldrGradient.on('thumbdblclick', function(cmp){ + me.btnGradColor.cmpEl.find('button').dropdown('toggle'); + }); + this.lockedControls.push(this.sldrGradient); + + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ + el: $('#textart-combo-border-size'), + style: "width: 93px;", + txtNoBorders: this.txtNoBorders + }) + .on('selected', _.bind(this.onBorderSizeSelect, this)) + .on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) + .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); + this.cmbBorderSize.setValue(this.BorderSize); + this.lockedControls.push(this.cmbBorderSize); + + this.cmbBorderType = new Common.UI.ComboBorderType({ + el: $('#textart-combo-border-type'), + style: "width: 93px;", + menuStyle: 'min-width: 93px;' + }).on('selected', _.bind(this.onBorderTypeSelect, this)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderType = Asc.c_oDashType.solid; + this.cmbBorderType.setValue(this.BorderType); + this.lockedControls.push(this.cmbBorderType); + + this.cmbTransform = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-textart' + }); + this.cmbTransform.render($('#textart-combo-transform')); + this.cmbTransform.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbTransform.on('click', _.bind(this.onTransformSelect, this)); + this.cmbTransform.openButton.menu.on('show:after', function () { + me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbTransform); + + }, + createDelayedElements: function() { + this.createDelayedControls(); + var global_hatch_menu_map = [ 0,1,3,2,4, 53,5,6,7,8, @@ -1456,6 +1315,24 @@ define([ onInitStandartTextures: function(texture) { var me = this; if (texture && texture.length>0){ + this.btnTexture = new Common.UI.ComboBox({ + el: $('#textart-combo-fill-texture'), + template: _.template([ + '
', + '
' + this.textSelectTexture + '
', + '
', + '', + '
' + ].join('')) + }); + this.textureMenu = new Common.UI.Menu({ + items: [ + { template: _.template('
') } + ] + }); + this.textureMenu.render($('#textart-combo-fill-texture')); + this.lockedControls.push(this.btnTexture); + var texturearray = []; _.each(texture, function(item){ texturearray.push({ @@ -1498,8 +1375,30 @@ define([ }, fillTextArt: function() { - var me = this, - models = this.application.getCollection('Common.Collections.TextArt').models, + var me = this; + + if (!this.cmbTextArt) { + this.cmbTextArt = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 300, + enableKeyEvents: true, + showLast: false, + cls: 'combo-textart' + }); + this.cmbTextArt.render($('#textart-combo-template')); + this.cmbTextArt.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this)); + this.cmbTextArt.openButton.menu.on('show:after', function () { + me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbTextArt); + } + + var models = this.application.getCollection('Common.Collections.TextArt').models, count = this.cmbTextArt.menuPicker.store.length; if (count>0 && count==models.length) { var data = this.cmbTextArt.menuPicker.store.models; @@ -1557,6 +1456,103 @@ define([ }, UpdateThemeColors: function() { + if (!this.btnBackColor) { + this.btnBorderColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBorderColor.render( $('#textart-border-color-btn')); + this.btnBorderColor.setColor('000000'); + this.lockedControls.push(this.btnBorderColor); + this.colorsBorder = new Common.UI.ThemeColorPalette({ + el: $('#textart-border-color-menu'), + value: '000000' + }); + this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this)); + $(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); + + this.btnBackColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBackColor.render( $('#textart-back-color-btn')); + this.btnBackColor.setColor('transparent'); + this.lockedControls.push(this.btnBackColor); + this.colorsBack = new Common.UI.ThemeColorPalette({ + el: $('#textart-back-color-menu'), + value: 'transparent', + transparent: true + }); + this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); + $(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); + + this.btnFGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnFGColor.render( $('#textart-foreground-color-btn')); + this.btnFGColor.setColor('000000'); + this.lockedControls.push(this.btnFGColor); + this.colorsFG = new Common.UI.ThemeColorPalette({ + el: $('#textart-foreground-color-menu'), + value: '000000' + }); + this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this)); + $(this.el).on('click', '#textart-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); + + this.btnBGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBGColor.render( $('#textart-background-color-btn')); + this.btnBGColor.setColor('ffffff'); + this.lockedControls.push(this.btnBGColor); + this.colorsBG = new Common.UI.ThemeColorPalette({ + el: $('#textart-background-color-menu'), + value: 'ffffff' + }); + this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this)); + $(this.el).on('click', '#textart-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); + + this.btnGradColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor.render( $('#textart-gradient-color-btn')); + this.btnGradColor.setColor('000000'); + this.lockedControls.push(this.btnGradColor); + this.colorsGrad = new Common.UI.ThemeColorPalette({ + el: $('#textart-gradient-color-menu'), + value: '000000' + }); + this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this)); + $(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); + } this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -1585,6 +1581,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) {