Skip to content

I
i20rzslider
Commit a6ae35ba authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Add more keys and improve switched between keyboard and mouse

parent 1d2354e5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 89 additions and 67 deletions
dist/rzslider.js
View file @ a6ae35ba
...@@ -1173,6 +1173,7 @@ ...@@ -1173,6 +1173,7 @@
} }
pointer.addClass('rz-active'); pointer.addClass('rz-active');
pointer[0].focus();
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer); ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
ehEnd = angular.bind(this, this.onEnd, ehMove); ehEnd = angular.bind(this, this.onEnd, ehMove);
...@@ -1211,41 +1212,73 @@ ...@@ -1211,41 +1212,73 @@
this.positionTrackingHandle(newValue, newOffset); this.positionTrackingHandle(newValue, newOffset);
}, },
/**
* onEnd event handler
*
* @param {Event} event The event
* @param {Function} ehMove The the bound move event handler
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
//this.minH.removeClass('rz-active');
//this.maxH.removeClass('rz-active');
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
//this.tracking = '';
this.dragging.active = false;
this.callOnEnd();
},
onPointerFocus: function(pointer, ref, event) { onPointerFocus: function(pointer, ref, event) {
//if (this.tracking === ref) return;
this.tracking = ref; this.tracking = ref;
console.info('focused', ref);
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer)); pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
pointer.on('keydown', angular.bind(this, this.onKeyboardEvent)); pointer.on('keydown', angular.bind(this, this.onKeyboardEvent));
pointer.addClass('rz-active'); pointer.addClass('rz-active');
}, },
onPointerBlur: function(pointer, event) { onPointerBlur: function(pointer, event) {
this.tracking = ''; console.info('focused', this.tracking);
pointer.off('keydown'); pointer.off('keydown');
this.tracking = '';
pointer.removeClass('rz-active'); pointer.removeClass('rz-active');
}, },
onKeyboardEvent: function(event) { onKeyboardEvent: function(event) {
var keyCode = event.keyCode || event.which, var currentValue = this.scope[this.tracking],
keyCode = event.keyCode || event.which,
keys = { keys = {
38: 'UP', 38: 'UP',
40: 'DOWN', 40: 'DOWN',
37: 'LEFT', 37: 'LEFT',
39: 'RIGHT' 39: 'RIGHT',
33: 'PAGEUP',
34: 'PAGEDOWN',
36: 'HOME',
35: 'END'
}, },
actions = { actions = {
UP: 5, UP: currentValue + this.step,
DOWN: -5, DOWN: currentValue - this.step,
LEFT: -1, LEFT: currentValue - this.step,
RIGHT: 1 RIGHT: currentValue + this.step,
PAGEUP: currentValue + this.valueRange / 10,
PAGEDOWN: currentValue - this.valueRange / 10,
HOME: this.minValue,
END: this.maxValue
}, },
key = keys[keyCode], key = keys[keyCode],
action = actions[key]; action = actions[key];
if (action == null || this.tracking === '') return;
if (!key || !this.tracking) return;
event.preventDefault(); event.preventDefault();
var value = this.scope[this.tracking], var newValue = this.roundStep(this.sanitizeValue(action)),
newValue = this.roundStep(this.sanitizeValue(value + action)),
newOffset = this.valueToOffset(newValue); newOffset = this.valueToOffset(newValue);
var switched = this.positionTrackingHandle(newValue, newOffset); var switched = this.positionTrackingHandle(newValue, newOffset);
if (switched) { if (switched) {
...@@ -1382,28 +1415,6 @@ ...@@ -1382,28 +1415,6 @@
return switched; return switched;
}, },
/**
* onEnd event handler
*
* @param {Event} event The event
* @param {Function} ehMove The the bound move event handler
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
this.minH.removeClass('rz-active');
this.maxH.removeClass('rz-active');
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
this.tracking = '';
this.dragging.active = false;
this.callOnEnd();
},
/** /**
* Get event names for move and event end * Get event names for move and event end
* *
......
dist/rzslider.min.js
View file @ a6ae35ba
This diff is collapsed.
src/rzslider.js
View file @ a6ae35ba
...@@ -1173,6 +1173,7 @@ ...@@ -1173,6 +1173,7 @@
} }
pointer.addClass('rz-active'); pointer.addClass('rz-active');
pointer[0].focus();
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer); ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
ehEnd = angular.bind(this, this.onEnd, ehMove); ehEnd = angular.bind(this, this.onEnd, ehMove);
...@@ -1211,41 +1212,73 @@ ...@@ -1211,41 +1212,73 @@
this.positionTrackingHandle(newValue, newOffset); this.positionTrackingHandle(newValue, newOffset);
}, },
/**
* onEnd event handler
*
* @param {Event} event The event
* @param {Function} ehMove The the bound move event handler
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
//this.minH.removeClass('rz-active');
//this.maxH.removeClass('rz-active');
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
//this.tracking = '';
this.dragging.active = false;
this.callOnEnd();
},
onPointerFocus: function(pointer, ref, event) { onPointerFocus: function(pointer, ref, event) {
//if (this.tracking === ref) return;
this.tracking = ref; this.tracking = ref;
console.info('focused', ref);
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer)); pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
pointer.on('keydown', angular.bind(this, this.onKeyboardEvent)); pointer.on('keydown', angular.bind(this, this.onKeyboardEvent));
pointer.addClass('rz-active'); pointer.addClass('rz-active');
}, },
onPointerBlur: function(pointer, event) { onPointerBlur: function(pointer, event) {
this.tracking = ''; console.info('focused', this.tracking);
pointer.off('keydown'); pointer.off('keydown');
this.tracking = '';
pointer.removeClass('rz-active'); pointer.removeClass('rz-active');
}, },
onKeyboardEvent: function(event) { onKeyboardEvent: function(event) {
var keyCode = event.keyCode || event.which, var currentValue = this.scope[this.tracking],
keyCode = event.keyCode || event.which,
keys = { keys = {
38: 'UP', 38: 'UP',
40: 'DOWN', 40: 'DOWN',
37: 'LEFT', 37: 'LEFT',
39: 'RIGHT' 39: 'RIGHT',
33: 'PAGEUP',
34: 'PAGEDOWN',
36: 'HOME',
35: 'END'
}, },
actions = { actions = {
UP: 5, UP: currentValue + this.step,
DOWN: -5, DOWN: currentValue - this.step,
LEFT: -1, LEFT: currentValue - this.step,
RIGHT: 1 RIGHT: currentValue + this.step,
PAGEUP: currentValue + this.valueRange / 10,
PAGEDOWN: currentValue - this.valueRange / 10,
HOME: this.minValue,
END: this.maxValue
}, },
key = keys[keyCode], key = keys[keyCode],
action = actions[key]; action = actions[key];
if (action == null || this.tracking === '') return;
if (!key || !this.tracking) return;
event.preventDefault(); event.preventDefault();
var value = this.scope[this.tracking], var newValue = this.roundStep(this.sanitizeValue(action)),
newValue = this.roundStep(this.sanitizeValue(value + action)),
newOffset = this.valueToOffset(newValue); newOffset = this.valueToOffset(newValue);
var switched = this.positionTrackingHandle(newValue, newOffset); var switched = this.positionTrackingHandle(newValue, newOffset);
if (switched) { if (switched) {
...@@ -1382,28 +1415,6 @@ ...@@ -1382,28 +1415,6 @@
return switched; return switched;
}, },
/**
* onEnd event handler
*
* @param {Event} event The event
* @param {Function} ehMove The the bound move event handler
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
this.minH.removeClass('rz-active');
this.maxH.removeClass('rz-active');
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
this.tracking = '';
this.dragging.active = false;
this.callOnEnd();
},
/** /**
* Get event names for move and event end * Get event names for move and event end
* *
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment