diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template index f02f4417d..a181f2874 100644 --- a/apps/spreadsheeteditor/main/app/template/CellSettings.template +++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template @@ -1,4 +1,66 @@ + + + + + + + + + + + + - - -
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
@@ -38,12 +100,6 @@
- -
-
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 4978cd450..26823849a 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -67,20 +67,36 @@ define([ initialize: function () { this._initSettings = true; + this._noApply = true; this._state = { - BackColor: undefined, DisabledControls: true, - CellAngle: undefined + DisabledFillPanels: false, + CellAngle: undefined, + GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR, + CellColor: null, + FillType: Asc.c_oAscFill.FILL_TYPE_SOLID, + FGColor: '000000', + BGColor: 'ffffff', + GradColor1: null, + GradColor2: null }; this.lockedControls = []; this._locked = true; this.isEditCell = false; this.BorderType = 1; + this.GradLinearDirectionType = 0; + this.GradRadialDirectionIdx = 0; + this.GradColors = []; + + this.fillControls = []; this.render(); this.createDelayedControls(); + this.FillColorContainer = $('#cell-panel-color-fill'); + this.FillPatternContainer = $('#cell-panel-pattern-fill'); + this.FillGradientContainer = $('#cell-panel-gradient-fill'); }, onColorsBackSelect: function(picker, color) { @@ -155,6 +171,138 @@ 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.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: $('#cell-combo-fill-src'), + cls: 'input-group-nr', + style: 'width: 100%;', + menuStyle: 'min-width: 100%;', + editable: false, + data: this._arrFillSrc + }); + this.cmbFillSrc.setValue(this._arrFillSrc[0].value); + this.fillControls.push(this.cmbFillSrc); + this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); + + 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: $('#cell-combo-grad-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrGradType + }); + this.cmbGradType.setValue(this._arrGradType[0].value); + this.fillControls.push(this.cmbGradType); + this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); + + 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-cell-menu-direction'), + parentMenu: btn.menu, + restoreHeight: 174, + store: new Common.UI.DataViewStore(me._viewDataLinear), + itemTemplate: _.template('
') + }); + }); + this.btnDirection.render($('#cell-button-direction')); + this.fillControls.push(this.btnDirection); + this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); + + 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($('#cell-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); + + var global_hatch_menu_map = [ + -1,-1,-1,-1,-1, + -1,-1,-1,-1,8, + 9,10,11,-1,-1, + -1,21,-1,-1,-1, + -1,20,22,23,-1, + -1,27,28,29,30, + -1,-1,33,-1,35, + -1,-1,-1,-1,-1, + 41,-1,43,-1,-1, + 46,-1,-1,-1,-1 + ]; + + this.patternViewData = []; + var idx = 0; + for (var i=0; i<13; i++) { + for (var j=0; j<4; j++) { + var num = i*4+j; + if (global_hatch_menu_map[num]>-1) + this.patternViewData[idx++] = {offsetx: j*28, offsety: i*28, type: global_hatch_menu_map[num]}; + } + } + + for ( var i=0; i 0) { + this.cmbPattern.fillComboView(this.cmbPattern.menuPicker.store.at(0),true); + this.PatternFillType = this.patternViewData[0].type; + } + var _arrBorderPosition = [ [Asc.c_oAscBorderOptions.Left, 'btn-borders-small btn-position-left', 'cell-button-border-left', this.tipLeft], [Asc.c_oAscBorderOptions.InnerV,'btn-borders-small btn-position-inner-vert','cell-button-border-inner-vert', this.tipInnerVert], @@ -246,6 +394,7 @@ define([ }, ChangeSettings: function(props) { + var me = this; if (this._initSettings) this.createDelayedElements(); @@ -253,46 +402,259 @@ define([ if (props ) { - var color = props.asc_getFill().asc_getColor(), - clr; - 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()); - } - } else { - clr = 'transparent'; - } - - var type1 = typeof(clr); - var type2 = typeof(this._state.BackColor); - if ( (type1 !== type2) || (type1=='object' && - (clr.effectValue!==this._state.BackColor.effectValue || this._state.BackColor.color.indexOf(clr.color)<0)) || - (type1!='object' && this._state.BackColor!==undefined && this._state.BackColor.indexOf(clr)<0 )) { - - this.btnBackColor.setColor(clr); - if (_.isObject(clr)) { - var isselected = false; - for (var i = 0; i < 10; i++) { - if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) { - this.colorsBack.select(clr,true); - isselected = true; - break; - } - } - if (!isselected) this.colorsBack.clearSelection(); - } else { - this.colorsBack.select(clr, true); - } - this._state.BackColor = clr; - } + this._noApply = true; var value = props.asc_getAngle(); if ( Math.abs(this._state.CellAngle-value)>0.1 || (this._state.CellAngle===undefined)&&(this._state.CellAngle!==value)) { this.spnAngle.setValue((value !== null) ? value : '', true); this._state.CellAngle=value; } + this.fill = props.asc_getFill2(); + this.pattern = this.fill.asc_getPatternFill(); + this.gradient = this.fill.asc_getGradientFill(); + if (this.pattern === null && this.gradient === null) { + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_NOFILL; + this.CellColor = {Value: 0, Color: 'transparent'}; + this.FGColor = {Value: 1, Color: '000000'}; + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.GradColors[0] = {Value: 1, Color: '000000', Position: 0}; + this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; + } else if (this.pattern !== null) { + if(this.pattern.asc_getType() === -1) { + var color = this.pattern.asc_getFgColor(); + if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + this.CellColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.get_value() }}; + } else { + this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; + } + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID; + this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color)}; + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.GradColors[0] = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color), Position: 0}; + this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; + } else { + this.PatternFillType = this.pattern.asc_getType(); + if (this._state.PatternFillType !== this.PatternFillType) { + this.cmbPattern.suspendEvents(); + var rec = this.cmbPattern.menuPicker.store.findWhere({ + type: this.PatternFillType + }); + this.cmbPattern.menuPicker.selectRecord(rec); + this.cmbPattern.resumeEvents(); + this._state.PatternFillType = this.PatternFillType; + } + var color = this.pattern.asc_getFgColor(); + if (color) { + if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + this.FGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }}; + } else { + this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; + } + } else + this.FGColor = {Value: 1, Color: '000000'}; + + color = this.pattern.asc_getBgColor(); + if (color) { + if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + this.BGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }}; + } else { + this.BGColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; + } + } else + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color)}; + this.GradColors[0] = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color), Position: 0}; + this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT; + } + } else if (this.gradient !== null) { + var gradFillType = this.gradient.asc_getType(); + if (this._state.GradFillType !== gradFillType || this.GradFillType !== gradFillType) { + this.GradFillType = gradFillType; + rec = undefined; + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR || this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { + this.cmbGradType.setValue(this.GradFillType); + rec = this.cmbGradType.store.findWhere({value: this.GradFillType}); + this.onGradTypeSelect(this.cmbGradType, rec.attributes); + } else { + this.cmbGradType.setValue(''); + this.btnDirection.setIconCls(''); + } + this._state.GradFillType = this.GradFillType; + } + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + var value = this.gradient.asc_getDegree(); + if (Math.abs(this.GradLinearDirectionType-value)>0.001) { + this.GradLinearDirectionType=value; + var record = this.mnuDirectionPicker.store.findWhere({type: value}); + this.mnuDirectionPicker.selectRecord(record, true); + if (record) + this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); + else + this.btnDirection.setIconCls(''); + } + } + + var gradientStops; + this.GradColors.length = 0; + gradientStops = this.gradient.asc_getGradientStops(); + gradientStops.forEach(function (color) { + var clr = color.asc_getColor(), + position = color.asc_getPosition(), + itemColor; + if (clr.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + itemColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), effectValue: clr.asc_getValue() }, Position: position}; + } else { + itemColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), Position: position}; + } + me.GradColors.push(itemColor); + }); + this.GradColors = _.sortBy(this.GradColors, 'Position'); + + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; + this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)}; + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)}; + } + + if ( this._state.FillType !== this.OriginalFillType ) { + this.cmbFillSrc.setValue((this.OriginalFillType === null) ? '' : this.OriginalFillType); + this._state.FillType = this.OriginalFillType; + this.ShowHideElem(this.OriginalFillType); + } + + // Color Back + + var type1 = typeof(this.CellColor.Color), + type2 = typeof(this._state.CellColor); + if ( (type1 !== type2) || (type1=='object' && + (this.CellColor.Color.effectValue!==this._state.CellColor.effectValue || this._state.CellColor.color.indexOf(this.CellColor.Color)<0)) || + (type1!='object' && this._state.CellColor!==undefined && this._state.CellColor.indexOf(this.CellColor.Color)<0 )) { + + this.btnBackColor.setColor(this.CellColor.Color); + if (_.isObject(this.CellColor.Color)) { + var isselected = false; + for (var i = 0; i < 10; i++) { + if (Common.Utils.ThemeColor.ThemeValues[i] == this.CellColor.Color.effectValue) { + this.colorsBack.select(this.CellColor.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsBack.clearSelection(); + } else { + this.colorsBack.select(this.CellColor.Color, true); + } + this._state.CellColor = this.CellColor.Color; + } + + // Pattern colors + type1 = typeof(this.FGColor.Color); + type2 = typeof(this._state.FGColor); + + if ( (type1 !== type2) || (type1=='object' && + (this.FGColor.Color.effectValue!==this._state.FGColorColor.effectValue || this._state.FGColor.color.indexOf(this.FGColor.Color.color)<0)) || + (type1!='object' && this._state.FGColor.indexOf(this.FGColor.Color)<0 )) { + + this.btnFGColor.setColor(this.FGColor.Color); + if ( typeof(this.FGColor.Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.FGColor.Color.effectValue ) { + this.colorsFG.select(this.FGColor.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsFG.clearSelection(); + } else + this.colorsFG.select(this.FGColor.Color,true); + + this._state.FGColor = this.FGColor.Color; + } + + type1 = typeof(this.BGColor.Color); + type2 = typeof(this._state.BGColor); + + if ( (type1 !== type2) || (type1=='object' && + (this.BGColor.Color.effectValue!==this._state.BGColor.effectValue || this._state.BGColor.color.indexOf(this.BGColor.Color.color)<0)) || + (type1!='object' && this._state.BGColor.indexOf(this.BGColor.Color)<0 )) { + + this.btnBGColor.setColor(this.BGColor.Color); + if ( typeof(this.BGColor.Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.BGColor.Color.effectValue ) { + this.colorsBG.select(this.BGColor.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsBG.clearSelection(); + } else + this.colorsBG.select(this.BGColor.Color,true); + + this._state.BGColor = this.BGColor.Color; + } + + // Gradient colors + var gradColor1 = this.GradColors[0]; + if (!gradColor1) { + gradColor1 = {Value: 1, Color: '000000'}; + } + type1 = typeof(gradColor1.Color); + type2 = typeof(this._state.GradColor1); + + if ( (type1 !== type2) || (type1=='object' && + (gradColor1.Color.effectValue!==this._state.GradColor1.effectValue || this._state.GradColor1.color.indexOf(gradColor1.Color.color)<0)) || + (type1!='object' && this._state.GradColor1.indexOf(gradColor1.Color)<0 )) { + + this.btnGradColor1.setColor(gradColor1.Color); + if ( typeof(gradColor1.Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == gradColor1.Color.effectValue ) { + this.colorsGrad1.select(gradColor1.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsGrad1.clearSelection(); + } else + this.colorsGrad1.select(gradColor1.Color,true); + + this._state.GradColor1 = gradColor1.Color; + } + + var gradColor2 = this.GradColors[1]; + if (!gradColor2) { + gradColor2 = {Value: 1, Color: 'ffffff'}; + } + type1 = typeof(gradColor2.Color); + type2 = typeof(this._state.GradColor2); + + if ( (type1 !== type2) || (type1=='object' && + (gradColor2.Color.effectValue!==this._state.GradColor2.effectValue || this._state.GradColor2.color.indexOf(gradColor2.Color.color)<0)) || + (type1!='object' && this._state.GradColor2.indexOf(gradColor2.Color)<0 )) { + + this.btnGradColor2.setColor(gradColor2.Color); + if ( typeof(gradColor2.Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == gradColor2.Color.effectValue ) { + this.colorsGrad2.select(gradColor2.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsGrad2.clearSelection(); + } else + this.colorsGrad2.select(gradColor2.Color,true); + + this._state.GradColor2 = gradColor2.Color; + } + + this._noApply = false; } }, @@ -323,10 +685,91 @@ define([ }); this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); + this.fillControls.push(this.btnBackColor); + + this.btnGradColor1 = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor1.render( $('#cell-grad-btn-color-1')); + this.btnGradColor1.setColor('000000'); + this.colorsGrad1 = new Common.UI.ThemeColorPalette({ + el: $('#cell-gradient-color1-menu'), + value: '000000' + }); + this.colorsGrad1.on('select', _.bind(this.onColorsGradientSelect, this)); + this.btnGradColor1.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad1, this.btnGradColor1)); + this.fillControls.push(this.btnGradColor1); + + this.btnGradColor2 = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor2.render( $('#cell-grad-btn-color-2')); + this.btnGradColor2.setColor('ffffff'); + this.colorsGrad2 = new Common.UI.ThemeColorPalette({ + el: $('#cell-gradient-color2-menu'), + value: 'ffffff' + }); + this.colorsGrad2.on('select', _.bind(this.onColorsGradientSelect, this)); + this.btnGradColor2.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad2, this.btnGradColor2)); + this.fillControls.push(this.btnGradColor2); + + this.btnFGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnFGColor.render( $('#cell-foreground-color-btn')); + this.btnFGColor.setColor('000000'); + this.colorsFG = new Common.UI.ThemeColorPalette({ + el: $('#cell-foreground-color-menu'), + value: '000000' + }); + this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this)); + this.btnFGColor.menu.items[1].on('click', _.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('' + this.textNewColor + '') } + ] + }) + }); + this.btnBGColor.render( $('#cell-background-color-btn')); + this.btnBGColor.setColor('ffffff'); + this.colorsBG = new Common.UI.ThemeColorPalette({ + el: $('#cell-background-color-menu'), + value: 'ffffff' + }); + this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this)); + this.btnBGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); + this.fillControls.push(this.btnBGColor); } this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.btnBorderColor.setColor(this.borderColor.getColor()); + this.colorsGrad1.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsGrad2.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, onApiEditCell: function(state) { @@ -339,10 +782,20 @@ define([ this._locked = locked; }, + disableFillPanels: function(disable) { + if (this._state.DisabledFillPanels!==disable) { + this._state.DisabledFillPanels = disable; + _.each(this.fillControls, function(item) { + item.setDisabled(disable); + }); + } + }, + disableControls: function(disable) { if (this._initSettings) return; disable = disable || this.isEditCell; - + + this.disableFillPanels(disable); if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { @@ -351,6 +804,263 @@ define([ } }, + onFillSrcSelect: function(combo, record) { + var me = this; + this.ShowHideElem(record.value); + switch (record.value){ + case Asc.c_oAscFill.FILL_TYPE_SOLID: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_SOLID; + if (!this._noApply) { + if (this.pattern == null) + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setType(-1); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); + } + break; + case Asc.c_oAscFill.FILL_TYPE_GRAD: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_GRAD; + if (!this._noApply) { + if (this.gradient == null) + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.gradient.asc_setDegree(this.GradLinearDirectionType); + } + if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { + var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[0].Color).get_color().get_hex(), + HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[1].Color).get_color().get_hex(); + + if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') { + this.GradColors[0].Color = {color: '4f81bd', effectId: 24}; // color accent1 + } + var arrGradStop = []; + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + arrGradStop.push(gradientStop); + }); + this.gradient.asc_putGradientStops(arrGradStop); + } + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); + } + break; + case Asc.c_oAscFill.FILL_TYPE_PATT: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_PATT; + if (!this._noApply) { + var fHexColor = Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color).get_color().get_hex(); + var bHexColor = Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color).get_color().get_hex(); + + if (bHexColor === 'ffffff' && fHexColor === 'ffffff') { + fHexColor = {color: '4f81bd', effectId: 24}; // color accent1 + } else { + fHexColor = this.FGColor.Color; + } + if (this.pattern == null) + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setType(this.PatternFillType); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(fHexColor)); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); + } + break; + case Asc.c_oAscFill.FILL_TYPE_NOFILL: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_NOFILL; + if (!this._noApply) { + this.fill.asc_setPatternFill(null); + this.fill.asc_setGradientFill(null); + this.api.asc_setCellFill(this.fill); + } + break; + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + ShowHideElem: function(value) { + this.FillColorContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_SOLID); + this.FillPatternContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_PATT); + this.FillGradientContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_GRAD); + }, + + onGradTypeSelect: function(combo, record) { + this.GradFillType = record.value; + + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.mnuDirectionPicker.store.reset(this._viewDataLinear); + this.mnuDirectionPicker.cmpEl.width(175); + this.mnuDirectionPicker.restoreHeight = 174; + var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType}); + this.mnuDirectionPicker.selectRecord(record, true); + if (record) + this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls')); + else + this.btnDirection.setIconCls(''); + } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { + this.mnuDirectionPicker.store.reset(this._viewDataRadial); + this.mnuDirectionPicker.cmpEl.width(60); + this.mnuDirectionPicker.restoreHeight = 58; + this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true); + if (this.GradRadialDirectionIdx>=0) + this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); + else + this.btnDirection.setIconCls(''); + } + + if (this.api && !this._noApply) { + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.gradient.asc_setDegree(this.GradLinearDirectionType); + } + var arrGradStop = []; + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + arrGradStop.push(gradientStop); + }); + this.gradient.asc_putGradientStops(arrGradStop); + } + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.gradient.asc_setDegree(this.GradLinearDirectionType); + } + this.gradient.asc_setType(this.GradFillType); + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); + } + + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onSelectGradient: function(btn, picker, itemView, record) { + var me = this; + if (this._noApply) return; + + var rawData = {}, + isPickerSelect = _.isFunction(record.toJSON); + + if (isPickerSelect){ + if (record.get('selected')) { + rawData = record.toJSON(); + } else { + // record deselected + return; + } + } else { + rawData = record; + } + + this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls); + (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; + + if (this.api) { + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); + var arrGradStop = []; + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + arrGradStop.push(gradientStop); + }); + this.gradient.asc_putGradientStops(arrGradStop); + } + this.gradient.asc_setDegree(rawData.type); + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); + } + } + + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onColorsGradientSelect: function(picker, color) { + var me = this, + pickerId = picker.el.id; + if (pickerId === "cell-gradient-color1-menu") { + this.btnGradColor1.setColor(color); + this.GradColors[0].Color = color; + } else if (pickerId === "cell-gradient-color2-menu") { + this.btnGradColor2.setColor(color); + this.GradColors[1].Color = color; + } + + if (this.api && !this._noApply) { + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.gradient.asc_setDegree(this.GradLinearDirectionType); + } + } + var arrGradStop = []; + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + arrGradStop.push(gradientStop); + }); + this.gradient.asc_putGradientStops(arrGradStop); + + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onPatternSelect: function(combo, record) { + if (this.api && !this._noApply) { + this.PatternFillType = record.get('type'); + if (this.pattern == null) { + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + } + this.pattern.asc_setType(this.PatternFillType); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onColorsFGSelect: function(picker, color) { + this.btnFGColor.setColor(color); + this.FGColor = {Value: 1, Color: color}; + if (this.api && !this._noApply) { + if (this.pattern == null) { + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setType(this.PatternFillType); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + } + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onColorsBGSelect: function(picker, color) { + this.btnBGColor.setColor(color); + this.BGColor = {Value: 1, Color: color}; + if (this.api && !this._noApply) { + if (this.pattern == null) { + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + this.pattern.asc_setType(this.PatternFillType); + } + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + textBorders: 'Border\'s Style', textBorderColor: 'Color', textBackColor: 'Background color', @@ -369,7 +1079,21 @@ define([ tipDiagU: 'Set Diagonal Up Border', tipDiagD: 'Set Diagonal Down Border', textOrientation: 'Text Orientation', - textAngle: 'Angle' + textAngle: 'Angle', + textFill: 'Fill', + textNoFill: 'No Fill', + textGradientFill: 'Gradient Fill', + textPatternFill: 'Pattern', + textColor: 'Color Fill', + textStyle: 'Style', + textDirection: 'Direction', + textLinear: 'Linear', + textRadial: 'Radial', + textColor1: 'Color 1', + textColor2: 'Color 2', + textPattern: 'Pattern', + textForeground: 'Foreground color', + textBackground: 'Background color' }, SSE.Views.CellSettings || {})); }); \ No newline at end of file