Merge pull request #68 from ONLYOFFICE/feature/gradient-slider-change-markers

Feature/gradient slider change markers
Fix Bug 34376

apps/common/main/lib/component/MultiSliderGradient.js

@@ -150,6 +150,18 @@ define([
             }
             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);
+        },
+
+        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);
+            return recalc_indexes;
         }
     });
 });

apps/common/main/lib/component/Slider.js

@@ -338,16 +338,21 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var index = e.data,
+                var index = e.data.index,
                     lastValue = me.thumbs[index].value,
                     minValue = (index-1<0) ? 0 : me.thumbs[index-1].position,
                     maxValue = (index+1<me.thumbs.length) ? me.thumbs[index+1].position : 100,
-                    pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
+                    position = Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100),
+                    need_sort = position < minValue || position > maxValue,
+                    pos = Math.max(0, Math.min(100, position)),
                     value = pos/me.delta + me.minValue;
 
                 me.setThumbPosition(index, pos);
                 me.thumbs[index].value = value;
 
+                if (need_sort)
+                    me.sortThumbs();
+
                 $(document).off('mouseup', onMouseUp);
                 $(document).off('mousemove', onMouseMove);
 
@@ -362,16 +367,21 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var index = e.data,
+                var index = e.data.index,
                     lastValue = me.thumbs[index].value,
                     minValue = (index-1<0) ? 0 : me.thumbs[index-1].position,
                     maxValue = (index+1<me.thumbs.length) ? me.thumbs[index+1].position : 100,
-                    pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
+                    position = Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100),
+                    need_sort = position < minValue || position > maxValue,
+                    pos = Math.max(0, Math.min(100, position)),
                     value = pos/me.delta + me.minValue;
 
                 me.setThumbPosition(index, pos);
                 me.thumbs[index].value = value;
 
+                if (need_sort)
+                    me.sortThumbs();
+
                 if (Math.abs(value-lastValue)>0.001)
                     me.trigger('change', me, value, lastValue);
             };
@@ -379,7 +389,7 @@ define([
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
 
-                var index = e.data,
+                var index = e.data.index,
                     thumb = me.thumbs[index].thumb;
 
                 me._dragstart = e.pageX*Common.Utils.zoom() - thumb.offset().left - thumb.width()/2;
@@ -389,8 +399,8 @@ define([
                     (index == idx) ? item.thumb.css('z-index', 500) : item.thumb.css('z-index', '');
                 });
 
-                $(document).on('mouseup', null, index, onMouseUp);
-                $(document).on('mousemove', null, index, onMouseMove);
+                $(document).on('mouseup', null, e.data, onMouseUp);
+                $(document).on('mousemove', null, e.data, onMouseMove);
             };
 
             var onTrackMouseDown = function (e) {
@@ -441,7 +451,7 @@ define([
                     index: index
                 });
                 me.setValue(index, me.options.values[index]);
-                thumb.on('mousedown', null, index, onMouseDown);
+                thumb.on('mousedown', null, me.thumbs[index], onMouseDown);
             });
             me.setActiveThumb(0, true);
 
@@ -489,6 +499,18 @@ define([
             if (disabled !== this.disabled)
                 this.cmpEl.toggleClass('disabled', disabled);
             this.disabled = disabled;
+        },
+
+        sortThumbs: function() {
+            this.thumbs.sort(function(a, b) {
+                return (a.position - b.position);
+            });
+            var recalc_indexes = [];
+            _.each (this.thumbs, function(thumb, index) {
+                recalc_indexes.push(thumb.index);
+                thumb.index = index;
+            });
+            return recalc_indexes;
         }
     });
 });

apps/documenteditor/main/app/view/ShapeSettings.js

@@ -1341,6 +1341,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.fillControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

apps/documenteditor/main/app/view/TextArtSettings.js

@@ -916,6 +916,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.lockedControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

apps/presentationeditor/main/app/view/ShapeSettings.js

@@ -1234,6 +1234,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.fillControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

apps/presentationeditor/main/app/view/SlideSettings.js

@@ -755,6 +755,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.FillItems.push(this.sldrGradient);
 
         },

apps/presentationeditor/main/app/view/TextArtSettings.js

@@ -1224,6 +1224,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.lockedControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

apps/spreadsheeteditor/main/app/view/ShapeSettings.js

@@ -1258,6 +1258,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.fillControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({

apps/spreadsheeteditor/main/app/view/TextArtSettings.js

@@ -1228,6 +1228,18 @@ define([
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
             });
+            this.sldrGradient.on('sortthumbs', function(cmp, recalc_indexes){
+                var colors = [],
+                    currentIdx;
+                _.each (recalc_indexes, function(recalc_index, index) {
+                    colors.push(me.GradColor.colors[recalc_index]);
+                    if (me.GradColor.currentIdx == recalc_index)
+                        currentIdx = index;
+                });
+                me.OriginalFillType = null;
+                me.GradColor.colors = colors;
+                me.GradColor.currentIdx = currentIdx;
+            });
             this.lockedControls.push(this.sldrGradient);
 
             this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({