Skip to content

Commit

Permalink
noUiSlider 14.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
leongersen committed Jun 20, 2019
1 parent 809eb82 commit 19d0254
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 18 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changelog

### 14.0.0 (*2019-06-20*)
- Fixed: `change` & `slide` events should fire on keyboard control (#994);
- Fixed: `.noUi-origin` overflows document on vertical sliders (#987);
- Fixed: Clicking to right of handle doesn't move it when it's at the same point as another (#965);
- Added: Additional documentation on number formatting (#978, #985);

### 13.1.5 (*2019-04-24*)
- Fixed: Full-range padding (#880);

Expand Down
12 changes: 9 additions & 3 deletions distribute/nouislider.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! nouislider - 13.1.5 - 4/24/2019 */
/*! nouislider - 14.0.0 - 6/20/2019 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
Expand Down Expand Up @@ -40,14 +40,20 @@
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat;
}
.noUi-connect {
height: 100%;
width: 100%;
}
.noUi-origin {
height: 1%;
width: 1%;
}
/* Offset direction
*/
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
Expand Down
35 changes: 25 additions & 10 deletions distribute/nouislider.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! nouislider - 13.1.5 - 4/24/2019 */
/*! nouislider - 14.0.0 - 6/20/2019 */
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
Expand All @@ -13,7 +13,7 @@
})(function() {
"use strict";

var VERSION = "13.1.5";
var VERSION = "14.0.0";

//region Helper Methods

Expand Down Expand Up @@ -1567,8 +1567,8 @@
}

// Find handle closest to a certain percentage on the slider
function getClosestHandle(proposal) {
var closest = 100;
function getClosestHandle(clickedPosition) {
var smallestDifference = 100;
var handleNumber = false;

scope_Handles.forEach(function(handle, index) {
Expand All @@ -1577,11 +1577,19 @@
return;
}

var pos = Math.abs(scope_Locations[index] - proposal);
var handlePosition = scope_Locations[index];
var differenceWithThisHandle = Math.abs(handlePosition - clickedPosition);

if (pos < closest || (pos === 100 && closest === 100)) {
// Initial state
var clickAtEdge = differenceWithThisHandle === 100 && smallestDifference === 100;

// Difference with this handle is smaller than the previously checked handle
var isCloser = differenceWithThisHandle < smallestDifference;
var isCloserAfter = differenceWithThisHandle <= smallestDifference && clickedPosition > handlePosition;

if (isCloser || isCloserAfter || clickAtEdge) {
handleNumber = index;
closest = pos;
smallestDifference = differenceWithThisHandle;
}
});

Expand Down Expand Up @@ -1830,7 +1838,12 @@
// Decrement for down steps
step = (isDown ? -1 : 1) * step;

valueSetHandle(handleNumber, scope_Values[handleNumber] + step, true);
setHandle(handleNumber, resolveToValue(scope_Values[handleNumber] + step, handleNumber), true, true);

fireEvent("slide", handleNumber);
fireEvent("update", handleNumber);
fireEvent("change", handleNumber);
fireEvent("set", handleNumber);

return false;
}
Expand Down Expand Up @@ -2080,8 +2093,10 @@
// Convert the value to the slider stepping/range.
scope_Values[handleNumber] = scope_Spectrum.fromStepping(to);

var rule = "translate(" + inRuleOrder(transformDirection(to, 0) - scope_DirOffset + "%", "0") + ")";
scope_Handles[handleNumber].style[options.transformRule] = rule;
var translation = 100 * (transformDirection(to, 0) - scope_DirOffset);
var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";

scope_Handles[handleNumber].style[options.transformRule] = translateRule;

updateConnect(handleNumber);
updateConnect(handleNumber + 1);
Expand Down
4 changes: 2 additions & 2 deletions distribute/nouislider.min.css

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

4 changes: 2 additions & 2 deletions distribute/nouislider.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nouislider",
"version": "13.1.5",
"version": "14.0.0",
"main": "distribute/nouislider.js",
"style": "distribute/nouislider.min.css",
"license": "MIT",
Expand Down

3 comments on commit 19d0254

@bjarnef
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@leongersen just curious if there is a specific reason the latest version is 14.0.0 instead of 13.1.6?
From the release notes https://github.com/leongersen/noUiSlider/releases it doesn't seem to have new features or breaking changes - only bug fixes and updated documentation?

Anyway keep up the good work and thanks for sharing this plugin with us! 👍

@leongersen
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bjarnef It's very minor, but change & slide now fire on keyboard interaction. This would break code that relied on those events not firing. I doubt this would affect anyone, but I try to respect semver as close as possible.

I'm glad you like the library! Are you using it anywhere public I can look at?

@bjarnef
Copy link

@bjarnef bjarnef commented on 19d0254 Jun 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@leongersen okay, fair enough. Thanks for the explanation 😃

Yes, it is been used in the open source .NET CMS Umbraco. https://our.umbraco.com/download/
First it was implemented as Slider datatype (property editor) and replaced the previous Bootstrap slider.

Later I updated the slider used in the Image Cropper to re-use the slider angular component (using noUiSlider) so it feels a bit more consistent.
umbraco/Umbraco-CMS#4487

Please sign in to comment.