From e5166d340e903610b8c891e3e47ebd549cafe163 Mon Sep 17 00:00:00 2001 From: Samuel Poirier Date: Wed, 22 Nov 2017 13:35:01 -0500 Subject: [PATCH] Implement drag all when more than two handles are configured Updated the documentation --- distribute/nouislider.css | 2 +- distribute/nouislider.js | 31 +++++++++++++++------- documentation/behaviour-option.php | 15 +++++++++++ documentation/behaviour-option/drag-all.js | 12 +++++++++ src/js/scope_events.js | 29 ++++++++++++++------ 5 files changed, 71 insertions(+), 18 deletions(-) create mode 100644 documentation/behaviour-option/drag-all.js diff --git a/distribute/nouislider.css b/distribute/nouislider.css index 19789ade..80389de6 100644 --- a/distribute/nouislider.css +++ b/distribute/nouislider.css @@ -1,4 +1,4 @@ -/*! nouislider - 10.1.0 - 2017-07-28 13:09:54 */ +/*! nouislider - 10.1.0 - 2017-11-22 12:08:52 */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. diff --git a/distribute/nouislider.js b/distribute/nouislider.js index e5d92816..bcfaacdf 100644 --- a/distribute/nouislider.js +++ b/distribute/nouislider.js @@ -1,4 +1,4 @@ -/*! nouislider - 10.1.0 - 2017-07-28 13:09:54 */ +/*! nouislider - 10.1.0 - 2017-11-22 12:08:52 */ (function (factory) { @@ -1844,17 +1844,19 @@ function closure ( target, options, originalOptions ){ } // Make the range draggable. - if ( behaviour.drag ){ + if (behaviour.drag) { - scope_Connects.forEach(function( connect, index ){ + scope_Connects.forEach(function (connect, index) { - if ( connect === false || index === 0 || index === scope_Connects.length - 1 ) { + if (connect === false || index === 0 || index === scope_Connects.length - 1) { return; } var handleBefore = scope_Handles[index - 1]; var handleAfter = scope_Handles[index]; var eventHolders = [connect]; + var handlesToDrag = [handleBefore, handleAfter]; + var handleNumbersToDrag = [index - 1, index]; addClass(connect, options.cssClasses.draggable); @@ -1862,15 +1864,26 @@ function closure ( target, options, originalOptions ){ // be dragged by the handles. The handle in the first // origin will propagate the start event upward, // but it needs to be bound manually on the other. - if ( behaviour.fixed ) { + if (behaviour.fixed) { eventHolders.push(handleBefore.children[0]); eventHolders.push(handleAfter.children[0]); } - eventHolders.forEach(function( eventHolder ) { - attachEvent ( actions.start, eventHolder, eventStart, { - handles: [handleBefore, handleAfter], - handleNumbers: [index - 1, index] + // Check for the option dragAllHandles to see if + // must drag all handles at the same time + if (originalOptions.dragAllHandles) { + handlesToDrag = scope_Handles; + handleNumbersToDrag = [0]; + while (handleNumbersToDrag.length < scope_Handles.length) + { + handleNumbersToDrag.push(handleNumbersToDrag.length); + } + } + + eventHolders.forEach(function (eventHolder) { + attachEvent(actions.start, eventHolder, eventStart, { + handles: handlesToDrag, + handleNumbers: handleNumbersToDrag }); }); }); diff --git a/documentation/behaviour-option.php b/documentation/behaviour-option.php index 9a851875..f160ad27 100644 --- a/documentation/behaviour-option.php +++ b/documentation/behaviour-option.php @@ -105,6 +105,21 @@ +
+ +
+

If you want to drag all handles when you have more than two, you can set the dragAllHandles option to true. The slide event fires for all handles when dragging the range.

+
+
+ +
+
+ +
+ +
+
+

Fixed dragging

diff --git a/documentation/behaviour-option/drag-all.js b/documentation/behaviour-option/drag-all.js new file mode 100644 index 00000000..af2cb5b5 --- /dev/null +++ b/documentation/behaviour-option/drag-all.js @@ -0,0 +1,12 @@ +var dragSlider = document.getElementById('drag-all'); + +noUiSlider.create(dragSlider, { + start: [ 40, 60, 80 ], + behaviour: 'drag', + dragAllHandles: true, + connect: true, + range: { + 'min': 20, + 'max': 80 + } +}); diff --git a/src/js/scope_events.js b/src/js/scope_events.js index 2bc2bd6c..474ed06b 100644 --- a/src/js/scope_events.js +++ b/src/js/scope_events.js @@ -223,17 +223,19 @@ } // Make the range draggable. - if ( behaviour.drag ){ + if (behaviour.drag) { - scope_Connects.forEach(function( connect, index ){ + scope_Connects.forEach(function (connect, index) { - if ( connect === false || index === 0 || index === scope_Connects.length - 1 ) { + if (connect === false || index === 0 || index === scope_Connects.length - 1) { return; } var handleBefore = scope_Handles[index - 1]; var handleAfter = scope_Handles[index]; var eventHolders = [connect]; + var handlesToDrag = [handleBefore, handleAfter]; + var handleNumbersToDrag = [index - 1, index]; addClass(connect, options.cssClasses.draggable); @@ -241,15 +243,26 @@ // be dragged by the handles. The handle in the first // origin will propagate the start event upward, // but it needs to be bound manually on the other. - if ( behaviour.fixed ) { + if (behaviour.fixed) { eventHolders.push(handleBefore.children[0]); eventHolders.push(handleAfter.children[0]); } - eventHolders.forEach(function( eventHolder ) { - attachEvent ( actions.start, eventHolder, eventStart, { - handles: [handleBefore, handleAfter], - handleNumbers: [index - 1, index] + // Check for the option dragAllHandles to see if + // must drag all handles at the same time + if (originalOptions.dragAllHandles) { + handlesToDrag = scope_Handles; + handleNumbersToDrag = [0]; + while (handleNumbersToDrag.length < scope_Handles.length) + { + handleNumbersToDrag.push(handleNumbersToDrag.length); + } + } + + eventHolders.forEach(function (eventHolder) { + attachEvent(actions.start, eventHolder, eventStart, { + handles: handlesToDrag, + handleNumbers: handleNumbersToDrag }); }); });