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

Merge pull request #266 from ONLYOFFICE/feature/gradient-slider

Browse source 
Feature/gradient slider
This commit is contained in:
Julia Radzhabova 2019-11-15 15:25:06 +03:00 committed by GitHub
parent 6532084128 58e5f5040f
commit 736e7336a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 194 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -159,11 +159,21 @@ define([
me.changeSliderStyle();
},
addNewThumb: function(index, color) {
var me = this;
me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
(index>0) && this.setColorValue(color, index);
me.sortThumbs();
me.changeSliderStyle();
me.changeGradientStyle();
},
removeThumb: function(index) {
if (index===undefined) index = this.thumbs.length-1;
if (index>0) {
if (this.thumbs.length > 2) {
this.thumbs[index].thumb.remove();
this.thumbs.splice(index, 1);
this.sortThumbs();
this.changeSliderStyle();
}
},

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

@ -347,17 +347,28 @@ define([
pos = Math.max(0, Math.min(100, position)),
value = pos/me.delta + me.minValue;
me.setThumbPosition(index, pos);
me.thumbs[index].value = value;
if (me.isRemoveThumb) {
if (me.thumbs.length < 3) {
$(document).off('mouseup', me.binding.onMouseUp);
$(document).off('mousemove', me.binding.onMouseMove);
return;
}
me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index}));
me.trigger('changecomplete', me, value, lastValue);
} else {
me.setThumbPosition(index, pos);
me.thumbs[index].value = value;
if (need_sort)
me.sortThumbs();
if (need_sort)
me.sortThumbs();
}
$(document).off('mouseup', me.binding.onMouseUp);
$(document).off('mousemove', me.binding.onMouseMove);
me._dragstart = undefined;
me.trigger('changecomplete', me, value, lastValue);
!me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue);
me.isRemoveThumb = undefined;
};
var onMouseMove = function (e) {
@ -382,6 +393,10 @@ define([
if (need_sort)
me.sortThumbs();
var positionY = e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top;
me.isRemoveThumb = positionY > me.cmpEl.height() || positionY < 0;
me.setRemoveThumb(index, me.isRemoveThumb);
if (Math.abs(value-lastValue)>0.001)
me.trigger('change', me, value, lastValue);
};
@ -403,7 +418,25 @@ define([
$(document).on('mousemove', null, e.data, me.binding.onMouseMove);
};
var onTrackMouseDown = function (e) {
var onTrackMouseUp = function (e) {
if ( me.disabled || !_.isUndefined(me._dragstart) || me.thumbs.length > 9) return;
var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))),
nearIndex = findThumb(pos),
thumbColor = me.thumbs[nearIndex].colorValue,
thumbValue = me.thumbs[nearIndex].value,
value = pos/me.delta + me.minValue;
me.addThumb();
var index = me.thumbs.length - 1;
me.setThumbPosition(index, pos);
me.thumbs[index].value = value;
me.trigger('addthumb', me, index, nearIndex, thumbColor);
me.trigger('change', me);
me.trigger('changecomplete', me);
};
/*var onTrackMouseDown = function (e) {
if ( me.disabled ) return;
var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))),
@ -416,7 +449,7 @@ define([
me.trigger('change', me, value, lastValue);
me.trigger('changecomplete', me, value, lastValue);
};
};*/
var findThumb = function(pos) {
var nearest = 100,
@ -462,7 +495,8 @@ define([
me.setActiveThumb(0, true);
if (!me.rendered) {
el.on('mousedown', '.track', onTrackMouseDown);
/*el.on('mousedown', '.track', onTrackMouseDown);*/
el.on('mouseup', '.track', onTrackMouseUp);
}
me.rendered = true;
@ -472,11 +506,23 @@ define([
setActiveThumb: function(index, suspend) {
this.currentThumb = index;
this.$thumbs = this.cmpEl.find('.thumb');
this.$thumbs.removeClass('active');
this.thumbs[index].thumb.addClass('active');
if (suspend!==true) this.trigger('thumbclick', this, index);
},
setRemoveThumb: function(index, remove) {
var ind = _.findIndex(this.thumbs, {index: index});
if (ind !== -1) {
if (remove && this.thumbs.length > 2) {
this.$el.find('.active').addClass('remove');
} else {
this.$el.find('.remove').removeClass('remove');
}
}
},
setThumbPosition: function(index, x) {
this.thumbs[index].position = x;
this.thumbs[index].thumb.css({left: x + '%'});

4
apps/common/main/resources/less/multislider-gradient.less
View file

@ -40,6 +40,10 @@
&.active .thumb-bottom {
border-bottom-width: 2px;
}
&.remove {
opacity: 0.5;
}
}
.track {

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

@ -550,17 +550,16 @@ define([
});
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);
}
arr = [];
this.GradColor.colors.forEach(function(item){
arr.push(Common.Utils.ThemeColor.getRgbColor(item));
});
fill.get_fill().put_colors(arr);
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
fill.get_fill().put_linear_scale(true);
}
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);
this.api.ImgApply(this.imgprops);
@ -958,6 +957,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1357,6 +1360,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.fillControls.push(this.sldrGradient);
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

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

@ -650,6 +650,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
}
@ -944,6 +948,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.lockedControls.push(this.sldrGradient);
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

33
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -531,17 +531,16 @@ define([
});
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);
}
arr = [];
this.GradColor.colors.forEach(function(item){
arr.push(Common.Utils.ThemeColor.getRgbColor(item));
});
fill.get_fill().put_colors(arr);
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
fill.get_fill().put_linear_scale(true);
}
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.api.ShapeApply(props);
this._sliderChanged = false;
@ -871,6 +870,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1269,6 +1272,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.fillControls.push(this.sldrGradient);
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

14
apps/presentationeditor/main/app/view/SlideSettings.js
View file

@ -804,6 +804,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.FillItems.push(this.sldrGradient);
},
@ -1282,6 +1292,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};

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

@ -846,6 +846,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1253,6 +1257,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.lockedControls.push(this.sldrGradient);
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

33
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -546,17 +546,16 @@ define([
});
fill.asc_getFill().asc_putPositions(arr);
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
fill.asc_getFill().asc_putLinearAngle(this.GradLinearDirectionType * 60000);
fill.asc_getFill().asc_putLinearScale(true);
}
arr = [];
this.GradColor.colors.forEach(function(item){
arr.push(Common.Utils.ThemeColor.getRgbColor(item));
});
fill.asc_getFill().asc_putColors(arr);
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
fill.asc_getFill().asc_putLinearAngle(this.GradLinearDirectionType * 60000);
fill.asc_getFill().asc_putLinearScale(true);
}
arr = [];
this.GradColor.colors.forEach(function(item){
arr.push(Common.Utils.ThemeColor.getRgbColor(item));
});
fill.asc_getFill().asc_putColors(arr);
props.asc_putFill(fill);
this.imgprops.asc_putShapeProperties(props);
this.api.asc_setGraphicObjectProps(this.imgprops);
@ -895,6 +894,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1293,6 +1296,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.fillControls.push(this.sldrGradient);
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

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

@ -850,6 +850,10 @@ define([
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]);
}
if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) {
me.GradColor.currentIdx = 0;
}
me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
this.BGColor = {Value: 1, Color: 'ffffff'};
@ -1257,6 +1261,16 @@ define([
me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx;
});
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex];
me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color);
});
this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index);
me.GradColor.values.splice(index, 1);
me.sldrGradient.changeGradientStyle();
});
this.lockedControls.push(this.sldrGradient);
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({