richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added keyboard events.

pull/4212/head
Gareth Daunton 8 years ago
parent
4473bba9b4
commit
8bce752cf5
1 changed files with 160 additions and 62 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 222
      src/definitions/modules/range.js

222
src/definitions/modules/range.js
View File

@ -44,7 +44,9 @@ $.fn.range = function(parameters) {
namespace = settings.namespace,
input = settings.input,
error = settings.error,
keys = settings.keys,
isHover = false,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
@ -57,6 +59,8 @@ $.fn.range = function(parameters) {
element = this,
instance = $module.data(moduleNamespace),
value,
position,
offset,
precision,
isTouch,
@ -68,7 +72,7 @@ $.fn.range = function(parameters) {
initialize: function() {
module.debug('Initializing range slider', settings);
isTouch = module.is.touch();
isTouch = module.setup.testOutTouch();
module.setup.layout();
if(!module.is.disabled())
module.bind.events();
@ -89,7 +93,7 @@ $.fn.range = function(parameters) {
module.verbose('Destroying previous range for', $module);
clearInterval(instance.interval);
module.unbind.events();
module.unbind.documentEvents();
module.unbind.slidingEvents();
$module.removeData(moduleNamespace);
instance = undefined;
},
@ -112,6 +116,14 @@ $.fn.range = function(parameters) {
}
}
},
testOutTouch: function() {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
},
customLabel: function() {
var
$children = $labels.find('.label'),
@ -158,7 +170,18 @@ $.fn.range = function(parameters) {
bind: {
events: function() {
// event listeners
module.bind.keyboardEvents();
module.bind.mouseEvents();
if(module.is.touch()) {
module.bind.touchEvents();
}
},
keyboardEvents: function() {
module.verbose('Binding keyboard events');
$(document).on('keydown' + eventNamespace, module.event.keydown);
},
mouseEvents: function() {
module.verbose('Binding mouse events');
$module.find('.track, .thumb, .inner').on('mousedown' + eventNamespace, function(event) {
event.stopImmediatePropagation();
event.preventDefault();
@ -166,17 +189,25 @@ $.fn.range = function(parameters) {
module.event.down(event);
});
$module.on('mousedown' + eventNamespace, module.event.down);
if(module.is.touch()) {
$module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
event.stopImmediatePropagation();
event.preventDefault();
$(this).closest(".range").trigger('touchstart' + eventNamespace, event);
module.event.down(event);
});
$module.on('touchstart' + eventNamespace, module.event.down);
}
$module.on('mouseover' + eventNamespace, function() {
isHover = true;
});
$module.on('mouseout' + eventNamespace, function() {
isHover = false;
});
},
documentEvents: function() {
touchEvents: function() {
module.verbose('Binding touch events');
$module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
event.stopImmediatePropagation();
event.preventDefault();
$(this).closest(".range").trigger('touchstart' + eventNamespace, event);
module.event.down(event);
});
$module.on('touchstart' + eventNamespace, module.event.down);
},
slidingEvents: function() {
module.verbose('Binding page wide events while handle is being draged');
if(module.is.touch()) {
$(document).on('touchmove' + eventNamespace, module.event.move);
$(document).on('touchend' + eventNamespace, module.event.up);
@ -193,9 +224,12 @@ $.fn.range = function(parameters) {
$module.find('.track, .thumb, .inner').off('mousedown' + eventNamespace);
$module.find('.track, .thumb, .inner').off('touchstart' + eventNamespace);
$module.off('mousedown' + eventNamespace);
$module.off('mouseover' + eventNamespace);
$module.off('mouseout' + eventNamespace);
$module.off('touchstart' + eventNamespace);
$module.off('keydown' + eventNamespace);
},
documentEvents: function() {
slidingEvents: function() {
if(module.is.touch()) {
$(document).off('touchmove' + eventNamespace);
$(document).off('touchend' + eventNamespace);
@ -211,7 +245,7 @@ $.fn.range = function(parameters) {
down: function(event, originalEvent) {
event.preventDefault();
if(!module.is.disabled())
module.bind.documentEvents();
module.bind.slidingEvents();
},
move: function(event, originalEvent) {
event.preventDefault();
@ -232,11 +266,74 @@ $.fn.range = function(parameters) {
if(eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
module.set.valueMoveToValueBasedPosition(newPos);
}
module.unbind.documentEvents();
module.unbind.slidingEvents();
},
keydown: function(event) {
if(module.is.hover()) {
event.preventDefault();
var
key = event.which,
downArrow =
module.is.vertical()
?
module.is.reversed() ? keys.downArrow : keys.upArrow
:
keys.downArrow
,
upArrow =
module.is.vertical()
?
module.is.reversed() ? keys.upArrow : keys.downArrow
:
keys.upArrow
,
leftArrow =
!module.is.vertical()
?
module.is.reversed() ? keys.rightArrow : keys.leftArrow
:
keys.leftArrow
,
rightArrow =
!module.is.vertical()
?
module.is.reversed() ? keys.leftArrow : keys.rightArrow
:
keys.rightArrow
;
if(key == downArrow || key == leftArrow || key == keys.pageDown) {
module.backStep();
} else if(key == upArrow || key == rightArrow || key == keys.pageUp) {
module.takeStep();
}
}
}
},
takeStep: function() {
var
step = module.get.step(),
currValue = module.get.value()
;
module.verbose('Taking a step');
if(step > 0)
module.set.positionBasedValue(currValue + step);
},
backStep: function() {
var
step = module.get.step(),
currValue = module.get.value()
;
module.verbose('Going back a step');
if(step > 0)
module.set.positionBasedValue(currValue - step);
},
is: {
hover: function() {
return isHover;
},
disabled: function() {
return $module.hasClass(settings.className.disabled);
},
@ -250,17 +347,11 @@ $.fn.range = function(parameters) {
return $module.hasClass(settings.className.vertical);
},
touch: function () {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
return isTouch;
},
},
get: {
trackOffset: function() {
if (module.is.vertical()) {
return $track.offset().top;
@ -343,23 +434,8 @@ $.fn.range = function(parameters) {
return module.is.reversed() ? module.get.trackLength() - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left;
}
},
value: function(position) {
var
startPos = module.is.reversed() ? module.get.trackEndPos() : module.get.trackStartPos(),
endPos = module.is.reversed() ? module.get.trackStartPos() : module.get.trackEndPos(),
ratio = (position - startPos) / (endPos - startPos),
range = module.get.max() - module.get.min(),
step = module.get.step(),
value = (ratio * range),
difference = (step == 0) ? value : Math.round(value / step) * step
;
module.verbose('Determined value based upon position: ' + position + ' as: ' + value);
if(value != difference) module.verbose('Rounding value to closest step: ' + difference);
// Use precision to avoid ugly Javascript floating point rounding issues
// (like 35 * .01 = 0.35000000000000003)
difference = Math.round(difference * precision) / precision;
module.verbose('Cutting off additional decimal places')
return difference - module.get.min();
value: function() {
return value;
}
},
@ -391,11 +467,29 @@ $.fn.range = function(parameters) {
},
eventPos: function(event, originalEvent) {
if (module.is.vertical()) {
return isTouch ? originalEvent.originalEvent.touches[0].pageY : (typeof event.pageY != 'undefined') ? event.pageY : originalEvent.pageY;
return module.is.touch() ? originalEvent.originalEvent.touches[0].pageY : (typeof event.pageY != 'undefined') ? event.pageY : originalEvent.pageY;
} else {
return isTouch ? originalEvent.originalEvent.touches[0].pageX : (typeof event.pageX != 'undefined') ? event.pageX : originalEvent.pageX;
return module.is.touch() ? originalEvent.originalEvent.touches[0].pageX : (typeof event.pageX != 'undefined') ? event.pageX : originalEvent.pageX;
}
},
value: function(position) {
var
startPos = module.is.reversed() ? module.get.trackEndPos() : module.get.trackStartPos(),
endPos = module.is.reversed() ? module.get.trackStartPos() : module.get.trackEndPos(),
ratio = (position - startPos) / (endPos - startPos),
range = module.get.max() - module.get.min(),
step = module.get.step(),
value = (ratio * range),
difference = (step == 0) ? value : Math.round(value / step) * step
;
module.verbose('Determined value based upon position: ' + position + ' as: ' + value);
if(value != difference) module.verbose('Rounding value to closest step: ' + difference);
// Use precision to avoid ugly Javascript floating point rounding issues
// (like 35 * .01 = 0.35000000000000003)
difference = Math.round(difference * precision) / precision;
module.verbose('Cutting off additional decimal places')
return difference - module.get.min();
}
},
set: {
@ -403,6 +497,7 @@ $.fn.range = function(parameters) {
if(input) {
$(input).val(newValue);
}
value = newValue;
settings.onChange.call(element, newValue);
module.debug('Setting range value to ' + newValue);
},
@ -420,29 +515,30 @@ $.fn.range = function(parameters) {
$thumb.css({left: String(value - offset) + 'px'});
$trackFill.css({width: String(value) + 'px'});
}
module.position = value;
position = value;
module.debug('Setting range position to ' + value);
},
positionBasedValue: function(value) {
var
min = module.get.min(),
max = module.get.max()
max = module.get.max(),
position
;
if(value >= min && value <= max) {
var position = module.determine.positionFromValue(value);
module.set.position(position);
module.set.value(value);
position = module.determine.positionFromValue(value);
} else if (value <= min) {
module.goto.min();
module.set.value(min);
position = module.determine.positionFromValue(min);
value = min;
} else {
module.goto.max();
module.set.value(max);
position = module.determine.positionFromValue(max);
value = max;
}
module.set.position(position);
module.set.value(value);
},
valueMoveToValueBasedPosition: function(position) {
var
value = module.get.value(position),
value = module.determine.value(position),
min = module.get.min(),
max = module.get.max(),
pos
@ -458,7 +554,7 @@ $.fn.range = function(parameters) {
},
valueBasedPosition: function(position) {
var
value = module.get.value(position),
value = module.determine.value(position),
min = module.get.min(),
max = module.get.max()
;
@ -477,20 +573,13 @@ $.fn.range = function(parameters) {
goto: {
max: function() {
module.set.position(module.get.trackEndPos());
module.set.positionBasedValue(module.get.max());
},
min: function() {
module.set.position(module.get.trackStartPos());
module.set.positionBasedValue(module.get.min());
},
},
remove : {
state: function() {
module.verbose('Removing stored state');
delete module.value;
}
},
read: {
metadata: function() {
var
@ -734,6 +823,15 @@ $.fn.range.settings = {
vertical : 'vertical'
},
keys : {
pageUp : 33,
pageDown : 34,
leftArrow : 37,
upArrow : 38,
rightArrow : 39,
downArrow : 40
},
labelTypes : {
number : 'number',
none : 'none',

Write Preview
Loading…
Cancel
Save