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

[DE] Bug 40719: thumbs count in slider > 2. Change shape settings for multi-gradient.

Browse source
This commit is contained in:
Julia Radzhabova 2019-06-06 15:03:38 +03:00
parent a7df51b4c3
commit 5fe0c2027c
4 changed files with 174 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
apps/common/main/lib/component/MultiSliderGradient.js
View file

@ -54,7 +54,11 @@ define([
maxValue: 100,
values: [0, 100],
colorValues: ['#000000', '#ffffff'],
currentThumb: 0
currentThumb: 0,
thumbTemplate: '<div class="thumb img-commonctrl" style="">' +
'<div class="thumb-top"></div>' +
'<div class="thumb-bottom"></div>' +
'</div>'
},
disabled: false,
@ -63,38 +67,20 @@ define([
'<div class="slider multi-slider-gradient">',
'<div class="track"></div>',
'<% _.each(items, function(item) { %>',
'<div class="thumb img-commonctrl" style="">',
'<div class="thumb-top"></div>',
'<div class="thumb-bottom"></div>',
'</div>',
'<%= thumbTemplate %>',
'<% }); %>',
'</div>'
].join('')),
initialize : function(options) {
this.styleStr = '';
if (Common.Utils.isChrome && Common.Utils.chromeVersion<10 || Common.Utils.isSafari && Common.Utils.safariVersion<5.1)
this.styleStr = '-webkit-gradient(linear, left top, right top, color-stop({1}%,{0}), color-stop({3}%,{2})); /* Chrome,Safari4+ */';
else if (Common.Utils.isChrome || Common.Utils.isSafari)
this.styleStr = '-webkit-linear-gradient(left, {0} {1}%, {2} {3}%)';
else if (Common.Utils.isGecko)
this.styleStr = '-moz-linear-gradient(left, {0} {1}%, {2} {3}%)';
else if (Common.Utils.isOpera && Common.Utils.operaVersion>11.0)
this.styleStr = '-o-linear-gradient(left, {0} {1}%, {2} {3}%)';
else if (Common.Utils.isIE)
this.styleStr = '-ms-linear-gradient(left, {0} {1}%, {2} {3}%)';
this.colorValues = this.options.colorValues;
this.styleStr = {};
Common.UI.MultiSlider.prototype.initialize.call(this, options);
},
render : function(parentEl) {
Common.UI.MultiSlider.prototype.render.call(this, parentEl);
var me = this,
style = '';
var me = this;
me.trackEl = me.cmpEl.find('.track');
for (var i=0; i<me.thumbs.length; i++) {
@ -102,33 +88,24 @@ define([
me.trigger('thumbdblclick', me);
});
me.thumbs[i].thumbcolor = me.thumbs[i].thumb.find('> div');
me.setColorValue(me.options.colorValues[i], i);
}
if (me.styleStr!=='') {
style = Common.Utils.String.format(me.styleStr, me.colorValues[0], 0, me.colorValues[1], 100);
me.trackEl.css('background', style);
}
if (Common.Utils.isIE) {
style = Common.Utils.String.format('progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )',
me.colorValues[0], me.colorValues[1]);
me.trackEl.css('filter', style);
}
style = Common.Utils.String.format('linear-gradient(to right, {0} {1}%, {2} {3}%)', me.colorValues[0], 0, me.colorValues[1], 100);
me.trackEl.css('background', style);
me.changeSliderStyle();
me.changeGradientStyle();
me.on('change', _.bind(me.changeGradientStyle, me));
},
setColorValue: function(color, index) {
var ind = (index!==undefined) ? index : this.currentThumb;
this.colorValues[ind] = color;
this.thumbs[ind].colorValue = color;
this.thumbs[ind].thumbcolor.css('background-color', color);
this.changeGradientStyle();
},
getColorValue: function(index) {
var ind = (index!==undefined) ? index : this.currentThumb;
return this.colorValues[ind];
return this.thumbs[ind].colorValue;
},
setValue: function(index, value) {
@ -136,32 +113,88 @@ define([
this.changeGradientStyle();
},
getColorValues: function() {
var values = [];
_.each (this.thumbs, function(thumb) {
values.push(thumb.colorValue);
});
return values;
},
changeGradientStyle: function() {
if (!this.rendered) return;
var style;
if (this.styleStr!=='') {
style = Common.Utils.String.format(this.styleStr, this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
if (this.styleStr.specific) {
style = Common.Utils.String.format(this.styleStr.specific, this.getColorValues().concat(this.getValues()));
this.trackEl.css('background', style);
}
if (Common.Utils.isIE) {
style = Common.Utils.String.format('progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )',
this.colorValues[0], this.colorValues[1]);
this.getColorValue(0), this.getColorValue(this.thumbs.length-1));
this.trackEl.css('filter', style);
}
style = Common.Utils.String.format('linear-gradient(to right, {0} {1}%, {2} {3}%)', this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
this.trackEl.css('background', style);
if (this.styleStr.common) {
style = Common.Utils.String.format(this.styleStr.common, this.getColorValues().concat(this.getValues()));
this.trackEl.css('background', style);
}
},
sortThumbs: function() {
var recalc_indexes = Common.UI.MultiSlider.prototype.sortThumbs.call(this),
new_colors = [],
me = this;
_.each (recalc_indexes, function(recalc_index) {
new_colors.push(me.colorValues[recalc_index]);
});
this.colorValues = new_colors;
this.trigger('sortthumbs', me, recalc_indexes);
var recalc_indexes = Common.UI.MultiSlider.prototype.sortThumbs.call(this);
this.trigger('sortthumbs', this, recalc_indexes);
return recalc_indexes;
},
addThumb: function() {
Common.UI.MultiSlider.prototype.addThumb.call(this);
var me = this,
index = me.thumbs.length-1;
me.thumbs[index].thumb.on('dblclick', null, function() {
me.trigger('thumbdblclick', me);
});
me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
(index>0) && this.setColorValue(this.getColorValue(index-1), index);
me.changeSliderStyle();
},
removeThumb: function(index) {
if (index===undefined) index = this.thumbs.length-1;
if (index>0) {
this.thumbs[index].thumb.remove();
this.thumbs.splice(index, 1);
this.changeSliderStyle();
}
},
changeSliderStyle: function() {
this.styleStr = {
specific: '',
common: 'linear-gradient(to right'
};
if (Common.Utils.isChrome && Common.Utils.chromeVersion<10 || Common.Utils.isSafari && Common.Utils.safariVersion<5.1)
this.styleStr.specific = '-webkit-gradient(linear, left top, right top'; /* Chrome,Safari4+ */
else if (Common.Utils.isChrome || Common.Utils.isSafari)
this.styleStr.specific = '-webkit-linear-gradient(left';
else if (Common.Utils.isGecko)
this.styleStr.specific = '-moz-linear-gradient(left';
else if (Common.Utils.isOpera && Common.Utils.operaVersion>11.0)
this.styleStr.specific = '-o-linear-gradient(left';
else if (Common.Utils.isIE)
this.styleStr.specific = '-ms-linear-gradient(left';
for (var i=0; i<this.thumbs.length; i++) {
this.styleStr.common += ', {' + i + '} {' + (this.thumbs.length + i) + '}%';
if (Common.Utils.isChrome && Common.Utils.chromeVersion<10 || Common.Utils.isSafari && Common.Utils.safariVersion<5.1)
this.styleStr.specific += ', color-stop({' + (this.thumbs.length + i) + '}%,{' + i + '})';
else
this.styleStr.specific += ', {' + i + '} {' + (this.thumbs.length + i) + '}%';
}
this.styleStr.specific += ')';
this.styleStr.common += ')';
}
});
});

54
apps/common/main/lib/component/Slider.js
View file

@ -277,7 +277,8 @@ define([
width: 100,
minValue: 0,
maxValue: 100,
values: [0, 100]
values: [0, 100],
thumbTemplate: '<div class="thumb" style=""></div>'
},
disabled: false,
@ -290,7 +291,7 @@ define([
'<div class="track-right" style=""></div>',
'</div>',
'<% _.each(items, function(item) { %>',
'<div class="thumb" style=""></div>',
'<%= thumbTemplate %>',
'<% }); %>',
'</div>'
].join('')),
@ -317,7 +318,8 @@ define([
if (!me.rendered) {
this.cmpEl = $(this.template({
items: this.options.values
items: this.options.values,
thumbTemplate: this.options.thumbTemplate
}));
if (parentEl) {
@ -353,8 +355,8 @@ define([
if (need_sort)
me.sortThumbs();
$(document).off('mouseup', onMouseUp);
$(document).off('mousemove', onMouseMove);
$(document).off('mouseup', me.binding.onMouseUp);
$(document).off('mousemove', me.binding.onMouseMove);
me._dragstart = undefined;
me.trigger('changecomplete', me, value, lastValue);
@ -399,8 +401,8 @@ define([
(index == idx) ? item.thumb.css('z-index', 500) : item.thumb.css('z-index', '');
});
$(document).on('mouseup', null, e.data, onMouseUp);
$(document).on('mousemove', null, e.data, onMouseMove);
$(document).on('mouseup', null, e.data, me.binding.onMouseUp);
$(document).on('mousemove', null, e.data, me.binding.onMouseMove);
};
var onTrackMouseDown = function (e) {
@ -443,6 +445,12 @@ define([
return index;
};
this.binding = {
onMouseUp: _.bind(onMouseUp, this),
onMouseMove: _.bind(onMouseMove, this),
onMouseDown: _.bind(onMouseDown, this)
};
this.$thumbs = el.find('.thumb');
_.each(this.$thumbs, function(item, index) {
var thumb = $(item);
@ -451,7 +459,7 @@ define([
index: index
});
me.setValue(index, me.options.values[index]);
thumb.on('mousedown', null, me.thumbs[index], onMouseDown);
thumb.on('mousedown', null, me.thumbs[index], me.binding.onMouseDown);
});
me.setActiveThumb(0, true);
@ -481,7 +489,6 @@ define([
this.setThumbPosition(index, Math.round((value-this.minValue)*this.delta));
},
getValue: function(index) {
return this.thumbs[index].value;
},
@ -511,6 +518,35 @@ define([
thumb.index = index;
});
return recalc_indexes;
},
setThumbs: function(count) {
var length = this.thumbs.length;
if (length==count) return;
for (var i=0; i<Math.abs(count-length); i++)
(length<count) ? this.addThumb() : this.removeThumb();
},
addThumb: function() {
var el = this.cmpEl,
thumb = $(this.options.thumbTemplate),
index = this.thumbs.length;
el.append(thumb);
this.thumbs.push({
thumb: thumb,
index: index
});
(index>0) && this.setValue(index, this.getValue(index-1));
thumb.on('mousedown', null, this.thumbs[index], this.binding.onMouseDown);
},
removeThumb: function(index) {
if (index===undefined) index = this.thumbs.length-1;
if (index>0) {
this.thumbs[index].thumb.remove();
this.thumbs.splice(index, 1);
}
}
});
});

2
apps/common/main/lib/util/utils.js
View file

@ -542,6 +542,8 @@ Common.Utils.String = new (function() {
return {
format: function(format) {
var args = _.toArray(arguments).slice(1);
if (args.length && typeof args[0] == 'object')
args = args[0];
return format.replace(/\{(\d+)\}/g, function(s, i) {
return args[i];
});

84
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -182,6 +182,8 @@ define([
fill.get_fill().put_linear_scale(true);
}
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
this.GradColor.values = [0, 100];
this.GradColor.colors = [this.GradColor.colors[0], this.GradColor.colors[this.GradColor.colors.length - 1]];
var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]).get_color().get_hex(),
HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1]).get_color().get_hex();
@ -486,14 +488,22 @@ define([
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
fill.put_fill( new Asc.asc_CFillGrad());
fill.get_fill().put_grad_type(this.GradFillType);
fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
var arr = [];
this.GradColor.colors.forEach(function(item){
arr.push(Common.Utils.ThemeColor.getRgbColor(item));
});
fill.get_fill().put_colors(arr);
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
fill.get_fill().put_linear_scale(true);
}
fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.get_fill().put_positions(arr);
}
props.put_fill(fill);
this.imgprops.put_ShapeProperties(props);
@ -531,14 +541,22 @@ define([
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
fill.put_fill( new Asc.asc_CFillGrad());
fill.get_fill().put_grad_type(this.GradFillType);
fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
var arr = [];
this.GradColor.values.forEach(function(item){
arr.push(item*1000);
});
fill.get_fill().put_positions(arr);
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
fill.get_fill().put_linear_scale(true);
}
fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
arr = [];
this.GradColor.colors.forEach(function(item){
arr.push(Common.Utils.ThemeColor.getRgbColor(item));
});
fill.get_fill().put_colors(arr);
}
props.put_fill(fill);
this.imgprops.put_ShapeProperties(props);
@ -826,7 +844,7 @@ define([
this.FGColor = (this.ShapeColor.Color!=='transparent') ? {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.ShapeColor.Color)} : {Value: 1, Color: '000000'};
this.BGColor = {Value: 1, Color: 'ffffff'};
this.GradColor.colors[0] = (this.ShapeColor.Color!=='transparent') ? Common.Utils.ThemeColor.colorValue2EffectId(this.ShapeColor.Color) : '000000';
this.GradColor.colors[1] = 'ffffff';
this.GradColor.colors[this.GradColor.colors.length-1] = 'ffffff';
} else if (fill_type==Asc.c_oAscFill.FILL_TYPE_BLIP) {
fill = fill.get_fill();
this.BlipFillType = fill.get_type(); // null - не совпадают у нескольких фигур
@ -874,7 +892,7 @@ define([
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT;
this.ShapeColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color)};
this.GradColor.colors[0] = Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color);
this.GradColor.colors[1] = 'ffffff';
this.GradColor.colors[this.GradColor.colors.length-1] = 'ffffff';
} else if (fill_type==Asc.c_oAscFill.FILL_TYPE_GRAD) {
fill = fill.get_fill();
var gradfilltype = fill.get_grad_type(); // null - не совпадают у нескольких фигур
@ -905,49 +923,37 @@ define([
}
}
var colors = fill.get_colors();
if (colors && colors.length>0) {
color = colors[0];
var me = this;
var colors = fill.get_colors(),
positions = fill.get_positions(),
length = colors.length;
this.sldrGradient.setThumbs(length);
if (this.GradColor.colors.length>length) {
this.GradColor.colors.splice(length, this.GradColor.colors.length - length);
this.GradColor.values.splice(length, this.GradColor.colors.length - length);
this.GradColor.currentIdx = 0;
}
colors && colors.forEach(function(color, index) {
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
this.GradColor.colors[0] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[0]);
me.GradColor.colors[index] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
Common.Utils.ThemeColor.colorValue2EffectId(me.GradColor.colors[index]);
} else {
this.GradColor.colors[0] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
me.GradColor.colors[index] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
} else
this.GradColor.colors[0] = '000000';
me.GradColor.colors[index] = '000000';
color = colors[1];
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
this.GradColor.colors[1] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[1]);
} else {
this.GradColor.colors[1] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
} else
this.GradColor.colors[1] = 'ffffff';
}
var positions = fill.get_positions();
if (positions && positions.length>0) {
var position = positions[0];
var position = positions[index];
if (position!==null) {
position = position/1000;
this.GradColor.values[0] = position;
}
position = positions[1];
if (position!==null) {
position = position/1000;
this.GradColor.values[1] = position;
me.GradColor.values[index] = position;
}
});
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]);
}
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(this.GradColor.colors[0]) == 'object') ? this.GradColor.colors[0].color : this.GradColor.colors[0]), 0);
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(this.GradColor.colors[1]) == 'object') ? this.GradColor.colors[1].color : this.GradColor.colors[1]), 1);
this.sldrGradient.setValue(0, this.GradColor.values[0]);
this.sldrGradient.setValue(1, this.GradColor.values[1]);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};