From ed88e631ab383b6527f881c191b6d03cb8b89cf6 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Sat, 14 Aug 2021 02:08:53 +0300 Subject: [PATCH 1/5] Add includeSnap option --- .../main/lib/component/MultiSliderGradient.js | 3 +- apps/common/main/lib/component/Slider.js | 34 +++++++++++++++++-- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index 28c2daf09..e488a41d8 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -58,7 +58,8 @@ define([ thumbTemplate: '
' + '
' + '
' + - '
' + '', + includeSnap: true }, disabled: false, diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index d142eed92..5b454f737 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -285,7 +285,8 @@ define([ minValue: 0, maxValue: 100, values: [0, 100], - thumbTemplate: '
' + thumbTemplate: '
', + includeSnap: false }, disabled: false, @@ -313,7 +314,6 @@ define([ me.maxValue = me.options.maxValue; me.delta = 100/(me.maxValue - me.minValue); me.thumbs = []; - if (me.options.el) { me.render(); } @@ -342,10 +342,37 @@ define([ el.find('.track-center').width(me.options.width - 14); el.width(me.options.width); + var centers = []; + var setCenters = function (index) { + if(!me.options.includeSnap) return; + centers = [50]; + var n=0; + _.each(me.thumbs, function (thumb, indexT) { + if (indexT != index) { + centers.push((thumb.position - n) / 2 + n); + n = thumb.position; + } + }); + if(n != 100) centers.push((100 - n) / 2 + n); + }; + + var resetPageX = function (e) { + var x; + _.each(centers, function (cnt){ + x=(0.01 * me.width * cnt + me.cmpEl.offset().left + me._dragstart)/Common.Utils.zoom(); + if((e.pageX <= x + 10) && (e.pageX >= x-10)) { + e.pageX = x; + return; + } + }); + }; + var onMouseUp = function (e) { e.preventDefault(); e.stopPropagation(); + if (me.options.includeSnap) resetPageX(e); + var index = e.data.index, lastValue = me.thumbs[index].value, minValue = (index-1<0) ? 0 : me.thumbs[index-1].position, @@ -387,6 +414,7 @@ define([ e.preventDefault(); e.stopPropagation(); + if (me.options.includeSnap) resetPageX(e); var index = e.data.index, lastValue = me.thumbs[index].value, @@ -416,6 +444,7 @@ define([ var index = e.data.index, thumb = me.thumbs[index].thumb; + setCenters(index); me._dragstart = e.pageX*Common.Utils.zoom() - thumb.offset().left - thumb.width()/2; me.setActiveThumb(index); @@ -428,6 +457,7 @@ define([ $(document).on('mousemove', null, e.data, me.binding.onMouseMove); }; + var onTrackMouseUp = function (e) { if ( me.disabled || !_.isUndefined(me._dragstart) || me.thumbs.length > 9) return; From 6f62faf5f379ac7a8a84b4bbac9993d4a8115a04 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Sun, 15 Aug 2021 21:20:57 +0300 Subject: [PATCH 2/5] Refactoring --- .../main/lib/component/MultiSliderGradient.js | 4 ++-- apps/common/main/lib/component/Slider.js | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index e488a41d8..8986fdfa7 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -55,11 +55,11 @@ define([ values: [0, 100], colorValues: ['#000000', '#ffffff'], currentThumb: 0, + includeSnap: true, thumbTemplate: '
' + '
' + '
' + - '
', - includeSnap: true + '' }, disabled: false, diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index 5b454f737..e0a32e1f1 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -285,8 +285,8 @@ define([ minValue: 0, maxValue: 100, values: [0, 100], - thumbTemplate: '
', - includeSnap: false + includeSnap: false, + thumbTemplate: '
' }, disabled: false, @@ -313,6 +313,7 @@ define([ me.minValue = me.options.minValue; me.maxValue = me.options.maxValue; me.delta = 100/(me.maxValue - me.minValue); + me.includeSnap = me.options.includeSnap; me.thumbs = []; if (me.options.el) { me.render(); @@ -344,7 +345,7 @@ define([ var centers = []; var setCenters = function (index) { - if(!me.options.includeSnap) return; + if(!me.includeSnap) return; centers = [50]; var n=0; _.each(me.thumbs, function (thumb, indexT) { @@ -357,6 +358,7 @@ define([ }; var resetPageX = function (e) { + if(!me.includeSnap) return; var x; _.each(centers, function (cnt){ x=(0.01 * me.width * cnt + me.cmpEl.offset().left + me._dragstart)/Common.Utils.zoom(); @@ -370,8 +372,7 @@ define([ var onMouseUp = function (e) { e.preventDefault(); e.stopPropagation(); - - if (me.options.includeSnap) resetPageX(e); + resetPageX(e); var index = e.data.index, lastValue = me.thumbs[index].value, @@ -414,7 +415,7 @@ define([ e.preventDefault(); e.stopPropagation(); - if (me.options.includeSnap) resetPageX(e); + resetPageX(e); var index = e.data.index, lastValue = me.thumbs[index].value, From 56288ced0983709af987c52aebb4b771280ab1fa Mon Sep 17 00:00:00 2001 From: OVSharova Date: Mon, 16 Aug 2021 00:01:34 +0300 Subject: [PATCH 3/5] Refactoring --- apps/common/main/lib/component/Slider.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index e0a32e1f1..4b2ab552b 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -343,26 +343,28 @@ define([ el.find('.track-center').width(me.options.width - 14); el.width(me.options.width); - var centers = []; var setCenters = function (index) { if(!me.includeSnap) return; - centers = [50]; - var n=0; + var n = me.minValue; + + var getX = function (position) { + return (0.01 * me.width * position + me.cmpEl.offset().left + me._dragstart)/Common.Utils.zoom(); + }; + + me.centers = [getX(50)]; _.each(me.thumbs, function (thumb, indexT) { - if (indexT != index) { - centers.push((thumb.position - n) / 2 + n); + if ((indexT != index) && (n != thumb.position)) { + me.centers.push(getX((thumb.position - n) / 2 + n)); n = thumb.position; } }); - if(n != 100) centers.push((100 - n) / 2 + n); + if(n != me.maxValue) me.centers.push(getX((me.maxValue - n) / 2 + n)); }; var resetPageX = function (e) { if(!me.includeSnap) return; - var x; - _.each(centers, function (cnt){ - x=(0.01 * me.width * cnt + me.cmpEl.offset().left + me._dragstart)/Common.Utils.zoom(); - if((e.pageX <= x + 10) && (e.pageX >= x-10)) { + _.each(me.centers, function (x) { + if((e.pageX <= x + 10) && (e.pageX >= x - 10)) { e.pageX = x; return; } @@ -445,9 +447,9 @@ define([ var index = e.data.index, thumb = me.thumbs[index].thumb; - setCenters(index); me._dragstart = e.pageX*Common.Utils.zoom() - thumb.offset().left - thumb.width()/2; + setCenters(index); me.setActiveThumb(index); _.each(me.thumbs, function (item, idx) { From 45a3afb1cae9c95faf97d3fc54f265afe1ac906f Mon Sep 17 00:00:00 2001 From: OVSharova Date: Tue, 17 Aug 2021 15:13:10 +0300 Subject: [PATCH 4/5] Fix centers --- apps/common/main/lib/component/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index 4b2ab552b..a722b8c2c 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -351,7 +351,7 @@ define([ return (0.01 * me.width * position + me.cmpEl.offset().left + me._dragstart)/Common.Utils.zoom(); }; - me.centers = [getX(50)]; + me.centers = []; _.each(me.thumbs, function (thumb, indexT) { if ((indexT != index) && (n != thumb.position)) { me.centers.push(getX((thumb.position - n) / 2 + n)); From 5de89888bcf86eee616f8452fa3c665ee80231e9 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Wed, 18 Aug 2021 11:33:38 +0300 Subject: [PATCH 5/5] Add intervalSnap --- apps/common/main/lib/component/MultiSliderGradient.js | 1 + apps/common/main/lib/component/Slider.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index 8986fdfa7..24dc97504 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -56,6 +56,7 @@ define([ colorValues: ['#000000', '#ffffff'], currentThumb: 0, includeSnap: true, + intervalSnap: 5, thumbTemplate: '
' + '
' + '
' + diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index a722b8c2c..05ad8c0c0 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -286,6 +286,7 @@ define([ maxValue: 100, values: [0, 100], includeSnap: false, + intervalSnap: undefined, thumbTemplate: '
' }, @@ -314,6 +315,7 @@ define([ me.maxValue = me.options.maxValue; me.delta = 100/(me.maxValue - me.minValue); me.includeSnap = me.options.includeSnap; + me.intervalSnap = me.options.intervalSnap; me.thumbs = []; if (me.options.el) { me.render(); @@ -364,7 +366,7 @@ define([ var resetPageX = function (e) { if(!me.includeSnap) return; _.each(me.centers, function (x) { - if((e.pageX <= x + 10) && (e.pageX >= x - 10)) { + if((e.pageX <= x + me.intervalSnap) && (e.pageX >= x - me.intervalSnap)) { e.pageX = x; return; }