Skip to content

Commit

Permalink
noUiSlider 15.8.0
Browse files Browse the repository at this point in the history
  • Loading branch information
lgersen committed Jun 10, 2024
1 parent 077c436 commit 787ad0c
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 16 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

### 15.8.0 (*2024-06-10*)
- Added: Allow `connect` option to get updated (#1272);
- Added: `invert-connects` behaviour (#1262, #1272);

### 15.7.2 (*2024-05-14*)
- Added: `getPositions` to Typescript definitions (#1270);
- Added: Allow `null` in `set` Typescript definitions (#1271);
Expand Down
1 change: 1 addition & 0 deletions RELEASE.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
- Run `npm audit fix`
- Update `changelog.md`
- Run `npm publish -otp=<2FA VALUE FROM AUTHENTICATOR>`
- Commit changes to changelog and build files
- Create a new release on https://github.com/leongersen/noUiSlider/releases
2 changes: 1 addition & 1 deletion dist/nouislider.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,10 @@ interface UpdatableOptions {
format?: Formatter;
tooltips?: boolean | PartialFormatter | (boolean | PartialFormatter)[];
animate?: boolean;
connect?: "lower" | "upper" | boolean | boolean[];
}
export interface Options extends UpdatableOptions {
range: Range;
connect?: "lower" | "upper" | boolean | boolean[];
orientation?: "vertical" | "horizontal";
direction?: "ltr" | "rtl";
behaviour?: string;
Expand Down
69 changes: 64 additions & 5 deletions dist/nouislider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -713,6 +713,7 @@
var snap = entry.indexOf("snap") >= 0;
var hover = entry.indexOf("hover") >= 0;
var unconstrained = entry.indexOf("unconstrained") >= 0;
var invertConnects = entry.indexOf("invert-connects") >= 0;
var dragAll = entry.indexOf("drag-all") >= 0;
var smoothSteps = entry.indexOf("smooth-steps") >= 0;
if (fixed) {
Expand All @@ -722,6 +723,9 @@
// Use margin to enforce fixed state
testMargin(parsed, parsed.start[1] - parsed.start[0]);
}
if (invertConnects && parsed.handles !== 2) {
throw new Error("noUiSlider: 'invert-connects' behaviour must be used with 2 handles");
}
if (unconstrained && (parsed.margin || parsed.limit)) {
throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit");
}
Expand All @@ -734,6 +738,7 @@
snap: snap,
hover: hover,
unconstrained: unconstrained,
invertConnects: invertConnects,
};
}
function testTooltips(parsed, entry) {
Expand Down Expand Up @@ -904,6 +909,7 @@
// Slider DOM Nodes
var scope_Target = target;
var scope_Base;
var scope_ConnectBase;
var scope_Handles;
var scope_Connects;
var scope_Pips;
Expand All @@ -915,6 +921,7 @@
var scope_HandleNumbers = [];
var scope_ActiveHandlesCount = 0;
var scope_Events = {};
var scope_ConnectsInverted = false;
// Document Nodes
var scope_Document = target.ownerDocument;
var scope_DocumentElement = options.documentElement || scope_Document.documentElement;
Expand Down Expand Up @@ -971,17 +978,17 @@
}
// Add handles to the slider base.
function addElements(connectOptions, base) {
var connectBase = addNodeTo(base, options.cssClasses.connects);
scope_ConnectBase = addNodeTo(base, options.cssClasses.connects);
scope_Handles = [];
scope_Connects = [];
scope_Connects.push(addConnect(connectBase, connectOptions[0]));
scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[0]));
// [::::O====O====O====]
// connectOptions = [0, 1, 1, 1]
for (var i = 0; i < options.handles; i++) {
// Keep a list of all added handles.
scope_Handles.push(addOrigin(base, i));
scope_HandleNumbers[i] = i;
scope_Connects.push(addConnect(connectBase, connectOptions[i + 1]));
scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[i + 1]));
}
}
// Initialize a single slider.
Expand Down Expand Up @@ -1930,8 +1937,26 @@
var translation = transformDirection(to, 0) - scope_DirOffset;
var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
scope_Handles[handleNumber].style[options.transformRule] = translateRule;
// sanity check for at least 2 handles (e.g. during setup)
if (options.events.invertConnects && scope_Locations.length > 1) {
// check if handles passed each other, but don't match the ConnectsInverted state
var handlesAreInOrder = scope_Locations.every(function (position, index, locations) {
return index === 0 || position >= locations[index - 1];
});
if (scope_ConnectsInverted !== !handlesAreInOrder) {
// invert connects when handles pass each other
invertConnects();
// invertConnects already updates all connect elements
return;
}
}
updateConnect(handleNumber);
updateConnect(handleNumber + 1);
if (scope_ConnectsInverted) {
// When connects are inverted, we also have to update adjacent connects
updateConnect(handleNumber - 1);
updateConnect(handleNumber + 2);
}
}
// Handles before the slider middle are stacked later = higher,
// Handles after the middle later is lower
Expand Down Expand Up @@ -1961,13 +1986,20 @@
if (!scope_Connects[index]) {
return;
}
// Create a copy of locations, so we can sort them for the local scope logic
var locations = scope_Locations.slice();
if (scope_ConnectsInverted) {
locations.sort(function (a, b) {
return a - b;
});
}
var l = 0;
var h = 100;
if (index !== 0) {
l = scope_Locations[index - 1];
l = locations[index - 1];
}
if (index !== scope_Connects.length - 1) {
h = scope_Locations[index];
h = locations[index];
}
// We use two rules:
// 'translate' to change the left/top offset;
Expand Down Expand Up @@ -2159,6 +2191,7 @@
"format",
"pips",
"tooltips",
"connect",
];
// Only change options that we're actually passed to update.
updateAble.forEach(function (name) {
Expand Down Expand Up @@ -2196,6 +2229,32 @@
// Invalidate the current positioning so valueSet forces an update.
scope_Locations = [];
valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent);
// Update connects only if it was set
if (optionsToUpdate.connect) {
updateConnectOption();
}
}
function updateConnectOption() {
// IE supported way of removing children including event handlers
while (scope_ConnectBase.firstChild) {
scope_ConnectBase.removeChild(scope_ConnectBase.firstChild);
}
// Adding new connects according to the new connect options
for (var i = 0; i <= options.handles; i++) {
scope_Connects[i] = addConnect(scope_ConnectBase, options.connect[i]);
updateConnect(i);
}
// re-adding drag events for the new connect elements
// to ignore the other events we have to negate the 'if (!behaviour.fixed)' check
bindSliderEvents({ drag: options.events.drag, fixed: true });
}
// Invert options for connect handles
function invertConnects() {
scope_ConnectsInverted = !scope_ConnectsInverted;
testConnect(options,
// inverse the connect boolean array
options.connect.map(function (b) { return !b; }));
updateConnectOption();
}
// Initialization steps
function setupSlider() {
Expand Down
2 changes: 1 addition & 1 deletion dist/nouislider.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nouislider.min.mjs
View file

Large diffs are not rendered by default.

69 changes: 64 additions & 5 deletions dist/nouislider.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -708,6 +708,7 @@ function testBehaviour(parsed, entry) {
var snap = entry.indexOf("snap") >= 0;
var hover = entry.indexOf("hover") >= 0;
var unconstrained = entry.indexOf("unconstrained") >= 0;
var invertConnects = entry.indexOf("invert-connects") >= 0;
var dragAll = entry.indexOf("drag-all") >= 0;
var smoothSteps = entry.indexOf("smooth-steps") >= 0;
if (fixed) {
Expand All @@ -717,6 +718,9 @@ function testBehaviour(parsed, entry) {
// Use margin to enforce fixed state
testMargin(parsed, parsed.start[1] - parsed.start[0]);
}
if (invertConnects && parsed.handles !== 2) {
throw new Error("noUiSlider: 'invert-connects' behaviour must be used with 2 handles");
}
if (unconstrained && (parsed.margin || parsed.limit)) {
throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit");
}
Expand All @@ -729,6 +733,7 @@ function testBehaviour(parsed, entry) {
snap: snap,
hover: hover,
unconstrained: unconstrained,
invertConnects: invertConnects,
};
}
function testTooltips(parsed, entry) {
Expand Down Expand Up @@ -899,6 +904,7 @@ function scope(target, options, originalOptions) {
// Slider DOM Nodes
var scope_Target = target;
var scope_Base;
var scope_ConnectBase;
var scope_Handles;
var scope_Connects;
var scope_Pips;
Expand All @@ -910,6 +916,7 @@ function scope(target, options, originalOptions) {
var scope_HandleNumbers = [];
var scope_ActiveHandlesCount = 0;
var scope_Events = {};
var scope_ConnectsInverted = false;
// Document Nodes
var scope_Document = target.ownerDocument;
var scope_DocumentElement = options.documentElement || scope_Document.documentElement;
Expand Down Expand Up @@ -966,17 +973,17 @@ function scope(target, options, originalOptions) {
}
// Add handles to the slider base.
function addElements(connectOptions, base) {
var connectBase = addNodeTo(base, options.cssClasses.connects);
scope_ConnectBase = addNodeTo(base, options.cssClasses.connects);
scope_Handles = [];
scope_Connects = [];
scope_Connects.push(addConnect(connectBase, connectOptions[0]));
scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[0]));
// [::::O====O====O====]
// connectOptions = [0, 1, 1, 1]
for (var i = 0; i < options.handles; i++) {
// Keep a list of all added handles.
scope_Handles.push(addOrigin(base, i));
scope_HandleNumbers[i] = i;
scope_Connects.push(addConnect(connectBase, connectOptions[i + 1]));
scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[i + 1]));
}
}
// Initialize a single slider.
Expand Down Expand Up @@ -1925,8 +1932,26 @@ function scope(target, options, originalOptions) {
var translation = transformDirection(to, 0) - scope_DirOffset;
var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
scope_Handles[handleNumber].style[options.transformRule] = translateRule;
// sanity check for at least 2 handles (e.g. during setup)
if (options.events.invertConnects && scope_Locations.length > 1) {
// check if handles passed each other, but don't match the ConnectsInverted state
var handlesAreInOrder = scope_Locations.every(function (position, index, locations) {
return index === 0 || position >= locations[index - 1];
});
if (scope_ConnectsInverted !== !handlesAreInOrder) {
// invert connects when handles pass each other
invertConnects();
// invertConnects already updates all connect elements
return;
}
}
updateConnect(handleNumber);
updateConnect(handleNumber + 1);
if (scope_ConnectsInverted) {
// When connects are inverted, we also have to update adjacent connects
updateConnect(handleNumber - 1);
updateConnect(handleNumber + 2);
}
}
// Handles before the slider middle are stacked later = higher,
// Handles after the middle later is lower
Expand Down Expand Up @@ -1956,13 +1981,20 @@ function scope(target, options, originalOptions) {
if (!scope_Connects[index]) {
return;
}
// Create a copy of locations, so we can sort them for the local scope logic
var locations = scope_Locations.slice();
if (scope_ConnectsInverted) {
locations.sort(function (a, b) {
return a - b;
});
}
var l = 0;
var h = 100;
if (index !== 0) {
l = scope_Locations[index - 1];
l = locations[index - 1];
}
if (index !== scope_Connects.length - 1) {
h = scope_Locations[index];
h = locations[index];
}
// We use two rules:
// 'translate' to change the left/top offset;
Expand Down Expand Up @@ -2154,6 +2186,7 @@ function scope(target, options, originalOptions) {
"format",
"pips",
"tooltips",
"connect",
];
// Only change options that we're actually passed to update.
updateAble.forEach(function (name) {
Expand Down Expand Up @@ -2191,6 +2224,32 @@ function scope(target, options, originalOptions) {
// Invalidate the current positioning so valueSet forces an update.
scope_Locations = [];
valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent);
// Update connects only if it was set
if (optionsToUpdate.connect) {
updateConnectOption();
}
}
function updateConnectOption() {
// IE supported way of removing children including event handlers
while (scope_ConnectBase.firstChild) {
scope_ConnectBase.removeChild(scope_ConnectBase.firstChild);
}
// Adding new connects according to the new connect options
for (var i = 0; i <= options.handles; i++) {
scope_Connects[i] = addConnect(scope_ConnectBase, options.connect[i]);
updateConnect(i);
}
// re-adding drag events for the new connect elements
// to ignore the other events we have to negate the 'if (!behaviour.fixed)' check
bindSliderEvents({ drag: options.events.drag, fixed: true });
}
// Invert options for connect handles
function invertConnects() {
scope_ConnectsInverted = !scope_ConnectsInverted;
testConnect(options,
// inverse the connect boolean array
options.connect.map(function (b) { return !b; }));
updateConnectOption();
}
// Initialization steps
function setupSlider() {
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nouislider",
"version": "15.7.2",
"version": "15.8.0",
"main": "dist/nouislider.js",
"module": "dist/nouislider.mjs",
"style": "dist/nouislider.min.css",
Expand Down

0 comments on commit 787ad0c

Please sign in to comment.