Skip to content

Multiple restrictedRange feature and the feature that to skip restrictedRanges with arrow keys added. #681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
May 26, 2022
Merged

Multiple restrictedRange feature and the feature that to skip restrictedRanges with arrow keys added. #681

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f42cfc5
multiple restricted range and a new feature named skipRestrictedRange…
Apr 25, 2022
6323030
temporary file deleted
mehmetxbozkurt Apr 25, 2022
efb034a
temporary file deleted
mehmetxbozkurt Apr 25, 2022
714e07e
restrictedRange feature modified and skipRestrictedRangesWithArrowKey…
mehmetxbozkurt Apr 26, 2022
2328fde
README.md updated.
mehmetxbozkurt Apr 26, 2022
8f10ba1
bug-fix on checkIfRestrictedBarIsMultiple function usage
mehmetxbozkurt Apr 26, 2022
3e36c5c
the bug about restricted ranges has fixed.
mehmetxbozkurt Apr 26, 2022
32b63a5
Bug-fix about restrictedRange and skipRestrictedRangesWithArrowKeys f…
mehmetxbozkurt May 24, 2022
6c3bc26
chore: make function name more explicit
ValentinH May 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
temporary file deleted
  • Loading branch information
@mehmetxbozkurt
mehmetxbozkurt committed Apr 25, 2022
commit 6323030b40e70e1025cfd10e0a5bfaabc25aafc0
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ temp/
tests/coverage/
yarn.lock
cypress/videos
npm-debug.log
npm-debug.log
.history/
183 changes: 137 additions & 46 deletions dist/rzslider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
minRange: null,
maxRange: null,
restrictedRange: null,
skipRestrictedRangesWithArrowKeys: null,
pushRange: false,
minLimit: null,
maxLimit: null,
Expand Down Expand Up @@ -349,7 +350,7 @@
this.maxLab = null // Label above the high value
this.cmbLab = null // Combined label
this.ticks = null // The ticks

// Initialize slider
this.init()
}
Expand Down Expand Up @@ -385,6 +386,9 @@
this.initHandles()
this.manageEventsBindings()

// Multiple restricted range count
this.scope.restrictedRangeCount = 0;

// Recalculate slider view dimensions
this.scope.$on('reCalcViewDimensions', calcDimFn)

Expand Down Expand Up @@ -665,6 +669,35 @@
}
},

/**
* Check if the restrictedRange option using multiple or not
*
* Run only once during initialization and only in case 4
*
* @returns {undefined}
*/
checkIfRestrictedBarIsMultiple: function(jElem) {
this.restrictedBar = [];
if(Array.isArray(this.options.restrictedRange)) {
this.restrictedBar[0] = jElem;
var mainDiv = document.getElementsByClassName("rzslider")[0];
for(var i=1; i < this.options.restrictedRange.length; i++) {
var sp = document.createElement("span");
sp.setAttribute("class","rz-bar-wrapper");
sp.innerHTML = '<span class="rz-bar rz-restricted" ng-style="restrictionStyle"></span>';
mainDiv.appendChild(sp);
this.restrictedBar[i] = angular.element(sp)
}
}
else
if (this.options.restrictedRange) {
this.restrictedBar[0] = jElem
}
else {
this.restrictedBar = null;
}
},

/**
* Set the slider children to variables for easy access
*
Expand Down Expand Up @@ -693,7 +726,7 @@
this.selBar = jElem
break
case 4:
this.restrictedBar = jElem
this.checkIfRestrictedBarIsMultiple(jElem);
break
case 5:
this.minH = jElem
Expand Down Expand Up @@ -773,7 +806,13 @@
this.leftOutSelBar,
!this.range || !this.options.showOuterSelectionBars
)
this.alwaysHide(this.restrictedBar, !this.options.restrictedRange)

if(Array.isArray(this.options.restrictedRange)) {
for(var r in this.restrictedBar) {
this.alwaysHide(this.restrictedBar[r], !this.options.restrictedRange[r])
}
}

this.alwaysHide(
this.rightOutSelBar,
!this.range || !this.options.showOuterSelectionBars
Expand Down Expand Up @@ -1356,19 +1395,23 @@
*/
updateRestrictionBar: function() {
var position = 0,
dimension = 0
dimension = 0;
if (this.options.restrictedRange) {
var from = this.valueToPosition(this.options.restrictedRange.from),
to = this.valueToPosition(this.options.restrictedRange.to)
dimension = Math.abs(to - from)
position = this.options.rightToLeft
? to + this.handleHalfDim
: from + this.handleHalfDim
this.setDimension(this.restrictedBar, dimension)
this.setPosition(this.restrictedBar, position)
this.options.restrictedRange = !Array.isArray(this.options.restrictedRange) ? [this.options.restrictedRange] : this.options.restrictedRange;
this.scope.restrictedRangeCount = this.options.restrictedRange.length
for(var i in this.options.restrictedRange) {
var from = this.valueToPosition(this.options.restrictedRange[i].from),
to = this.valueToPosition(this.options.restrictedRange[i].to)
dimension = Math.abs(to - from)
position = this.options.rightToLeft
? to + this.handleHalfDim
: from + this.handleHalfDim
this.setDimension(this.restrictedBar[i], dimension)
this.setPosition(this.restrictedBar[i], position)
}
}
},

/**
* Update slider selection bar, combined label and range label
*
Expand Down Expand Up @@ -2183,6 +2226,50 @@
}
},

/**
* Skip restricted range function when arrow keys use
*
* @param {number} currentValue value of the slider
* @param {number} key arrow key used
*
* @returns {number} currentValue value of the slider
*/
skipRestrictedRanges: function (key, currentValue) {
if (this.options.restrictedRange && Array.isArray(this.options.restrictedRange)) {
for (var i in this.options.restrictedRange) {
var range = this.options.restrictedRange[i];
// if it first or last value
if(
(
range.from === 0 &&
currentValue === 0 &&
[37,40].includes(key) // LEFT or DOWN
)
||
(
range.to >= this.options.restrictedRange[this.options.restrictedRange.length-1].to &&
currentValue >= this.options.restrictedRange[this.options.restrictedRange.length-1].to &&
[38,39].includes(key) // UP or RIGHT
)
)
{
return currentValue;
}

if (range.to >= currentValue && currentValue >= range.from) {
if(Math.abs(range.to - currentValue) > Math.abs(range.from - currentValue)) {
currentValue = range.to;
}
else {
currentValue = range.from;
}
}
}
}

return currentValue;
},

/**
* Key actions helper function
*
Expand Down Expand Up @@ -2228,21 +2315,22 @@
},

onKeyboardEvent: function(event) {
var currentValue = this[this.tracking],
keyCode = event.keyCode || event.which,
keys = {
38: 'UP',
40: 'DOWN',
37: 'LEFT',
39: 'RIGHT',
33: 'PAGEUP',
34: 'PAGEDOWN',
36: 'HOME',
35: 'END',
},
actions = this.getKeyActions(currentValue),
key = keys[keyCode],
action = actions[key]
var keyCode = event.keyCode || event.which;
var currentValue = this[this.tracking];
currentValue = this.options.skipRestrictedRangesWithArrowKeys ? this.skipRestrictedRanges(keyCode, currentValue) : currentValue;
var keys = {
38: 'UP',
40: 'DOWN',
37: 'LEFT',
39: 'RIGHT',
33: 'PAGEUP',
34: 'PAGEDOWN',
36: 'HOME',
35: 'END',
},
actions = this.getKeyActions(currentValue),
key = keys[keyCode],
action = actions[key];
if (action == null || this.tracking === '') return
event.preventDefault()

Expand Down Expand Up @@ -2548,26 +2636,29 @@
},

applyRestrictedRange: function(newValue) {
if (
this.options.restrictedRange != null &&
newValue > this.options.restrictedRange.from &&
newValue < this.options.restrictedRange.to
) {
var halfWidth =
(this.options.restrictedRange.to -
this.options.restrictedRange.from) /
2
if (this.tracking === 'lowValue') {
return newValue > this.options.restrictedRange.from + halfWidth
? this.options.restrictedRange.to
: this.options.restrictedRange.from
}
if (this.tracking === 'highValue') {
return newValue < this.options.restrictedRange.to - halfWidth
? this.options.restrictedRange.from
: this.options.restrictedRange.to
for(var i in this.options.restrictedRange) {
if (
this.options.restrictedRange[i] != null &&
newValue > this.options.restrictedRange[i].from &&
newValue < this.options.restrictedRange[i].to
) {
var halfWidth =
(this.options.restrictedRange[i].to -
this.options.restrictedRange[i].from) /
2
if (this.tracking === 'lowValue') {
return newValue > this.options.restrictedRange[i].from + halfWidth
? this.options.restrictedRange[i].to
: this.options.restrictedRange[i].from
}
if (this.tracking === 'highValue') {
return newValue < this.options.restrictedRange[i].to - halfWidth
? this.options.restrictedRange[i].from
: this.options.restrictedRange[i].to
}
}
}

return newValue
},

Expand Down