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

gradient for text

Browse source
This commit is contained in:
OVSharova 2022-02-28 11:56:31 +03:00
parent 84854bc475
commit ce2a9557d1
3 changed files with 172 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -108,6 +108,8 @@ define([
this.BorderSize = 0;
this.BorderType = Asc.c_oDashType.solid;
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
DE.getCollection('Common.Collections.TextArt').bind({
reset: this.fillTextArt.bind(this)
});
@ -278,10 +280,9 @@ define([
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('');
this.typeGradient = (record) ? this.GradLinearDirectionType + 90 : -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -290,9 +291,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 58;
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
if (this.GradRadialDirectionIdx>=0)
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(0, true);
this.numGradientAngle.setDisabled(true);
}
@ -332,8 +333,14 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
//this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
if (this.api) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.numGradientAngle.setValue(rawData.type, true);
@ -612,7 +619,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -623,10 +630,7 @@ define([
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('');
this.typeGradient = (record)? value + 90 : -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -659,10 +663,17 @@ define([
me.GradColor.values[index] = position;
}
});
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -830,6 +841,26 @@ define([
}
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
else if (this.typeGradient == 2)
this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
else
this.btnDirection.$icon.css({
'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
});
},
createDelayedControls: function() {
var me = this;
@ -904,18 +935,21 @@ define([
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'}
{ type:45, subtype:-1},
{ type:90, subtype:4},
{ type:135, subtype:5},
{ type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ type:180, subtype:1},
{ type:315, subtype:2},
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -938,7 +972,9 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#textart-button-direction'));

78
apps/presentationeditor/main/app/view/TextArtSettings.js
View file

@ -129,6 +129,8 @@ define([
this.TransformSettings = $('.textart-transform');
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
PE.getCollection('Common.Collections.TextArt').bind({
reset: this.fillTextArt.bind(this)
});
@ -397,10 +399,7 @@ define([
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('');
this.typeGradient = (record) ? this.GradLinearDirectionType + 90 : -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -409,9 +408,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 58;
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
if (this.GradRadialDirectionIdx>=0)
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(0, true);
this.numGradientAngle.setDisabled(true);
}
@ -451,7 +450,13 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
(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) {
@ -805,7 +810,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -816,10 +821,7 @@ define([
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('');
this.typeGradient = (record)? value + 90 : -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -852,10 +854,17 @@ define([
me.GradColor.values[index] = position;
}
});
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -1076,6 +1085,26 @@ define([
}
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
else if (this.typeGradient == 2)
this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
else
this.btnDirection.$icon.css({
'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
});
},
createDelayedControls: function() {
var me = this;
@ -1218,18 +1247,21 @@ define([
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'}
{ type:45, subtype:-1},
{ type:90, subtype:4},
{ type:135, subtype:5},
{ type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ type:180, subtype:1},
{ type:315, subtype:2},
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1252,7 +1284,9 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#textart-button-direction'));

79
apps/spreadsheeteditor/main/app/view/TextArtSettings.js
View file

@ -130,6 +130,8 @@ define([
this.TransformSettings = $('.textart-transform');
this.gradientColorsStr="#000, #fff";
this.typeGradient = 90 ;
SSE.getCollection('Common.Collections.TextArt').bind({
reset: this.fillTextArt.bind(this)
});
@ -398,10 +400,7 @@ define([
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('');
this.typeGradient = (record) ? this.GradLinearDirectionType + 90 : -1;
this.numGradientAngle.setValue(this.GradLinearDirectionType, true);
this.numGradientAngle.setDisabled(this._locked);
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
@ -410,9 +409,9 @@ define([
this.mnuDirectionPicker.restoreHeight = 58;
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
if (this.GradRadialDirectionIdx>=0)
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
this.typeGradient = this._viewDataRadial[this.GradRadialDirectionIdx].type;
else
this.btnDirection.setIconCls('');
this.typeGradient= -1;
this.numGradientAngle.setValue(0, true);
this.numGradientAngle.setDisabled(true);
}
@ -452,7 +451,14 @@ define([
rawData = record;
}
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
//this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
if (this.GradFillType === Asc.c_oAscFillGradType.GRAD_LINEAR) {
this.GradLinearDirectionType = rawData.type;
this.typeGradient = rawData.type + 90;
} else {
this.GradRadialDirectionIdx = 0;
this.typeGradient = rawData.type;
}
(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) {
@ -809,7 +815,7 @@ define([
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
} else {
this.cmbGradType.setValue('');
this.btnDirection.setIconCls('');
this.typeGradient = -1;
}
this._state.GradFillType = this.GradFillType;
}
@ -820,10 +826,7 @@ define([
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('');
this.typeGradient = (record)? value + 90 : -1;
this.numGradientAngle.setValue(value, true);
}
} else
@ -856,10 +859,17 @@ define([
me.GradColor.values[index] = position;
}
});
var arrGrCollors=[];
var scale=(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR)?1:0.7;
for (var index=0; index<length; index++) {
me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index);
me.sldrGradient.setValue(index, me.GradColor.values[index]);
arrGrCollors.push(me.sldrGradient.getColorValue(index)+ ' '+ me.sldrGradient.getValue(index)*scale +'%');
}
this.btnDirectionRedraw(me.sldrGradient, arrGrCollors.join(', '));
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
@ -1080,6 +1090,26 @@ define([
}
},
btnDirectionRedraw: function(slider, gradientColorsStr) {
this.gradientColorsStr = gradientColorsStr;
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = gradientColorsStr;
});
this._viewDataRadial.gradientColorsStr = this.gradientColorsStr;
this.mnuDirectionPicker.store.each(function(item){
item.set('gradientColorsStr', gradientColorsStr);
}, this);
if (this.typeGradient == -1)
this.btnDirection.$icon.css({'background': 'none'});
else if (this.typeGradient == 2)
this.btnDirection.$icon.css({'background': ('radial-gradient(' + gradientColorsStr + ')')});
else
this.btnDirection.$icon.css({
'background': ('linear-gradient(' + this.typeGradient + 'deg, ' + gradientColorsStr + ')')
});
},
createDelayedControls: function() {
var me = this;
@ -1222,18 +1252,21 @@ define([
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'}
{ type:45, subtype:-1},
{ type:90, subtype:4},
{ type:135, subtype:5},
{ type:0, subtype:6, cls: 'item-gradient-separator', selected: true},
{ type:180, subtype:1},
{ type:315, subtype:2},
{ type:270, subtype:3},
{ type:225, subtype:7}
];
_.each(this._viewDataLinear, function(item){
item.gradientColorsStr = me.gradientColorsStr;
});
this._viewDataRadial = [
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
{ type:2, subtype:5, gradientColorsStr: this.gradientColorsStr}
];
this.btnDirection = new Common.UI.Button({
@ -1256,7 +1289,9 @@ define([
parentMenu: btn.menu,
restoreHeight: 174,
store: new Common.UI.DataViewStore(me._viewDataLinear),
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background: '
+'<% if(type!=2) {%>linear-gradient(<%= type + 90 %>deg,<%= gradientColorsStr %>)'
+' <%} else {%> radial-gradient(<%= gradientColorsStr %>) <%}%>;"></div>')
});
});
this.btnDirection.render($('#textart-button-direction'));