Netsyms/colorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/colorPicker.git synced 2025-09-24 16:40:57 -06:00
Code Issues Releases Wiki Activity

Add touch events

Browse Source 
Add the events "touchstart", "touchmove" and "touchend" to also support touch devices.
Need to change the files "README.md", "color.all.min.js", "javascript_implementation/jsColorPicker.min.js"
Successfully tested on a smartphone with Android 4.4.2 / Chrome 51
This commit is contained in:
Ruben Almeida 2016-06-28 19:34:08 +02:00 committed by GitHub
parent 41d780c31f
commit 1eb3b0e06a
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
colorPicker.js
View File

@ -440,7 +440,7 @@
function installEventListeners(THIS, off) { function installEventListeners(THIS, off) {
var onOffEvent = off ? removeEvent : addEvent; var onOffEvent = off ? removeEvent : addEvent;
onOffEvent(_nodes.colorPicker, 'mousedown', function(e) { function touchStart_MouseDown(e) {
var event = e || window.event, var event = e || window.event,
page = getPageXY(event), page = getPageXY(event),
target = (event.button || event.which) < 2 ? target = (event.button || event.which) < 2 ?
@ -494,6 +494,7 @@
_mainTarget.style.display = ''; // ??? for resizer... _mainTarget.style.display = ''; // ??? for resizer...
_mouseMoveAction(event); _mouseMoveAction(event);
addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction); addEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
addEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
_renderTimer = window[requestAnimationFrame](renderAll); _renderTimer = window[requestAnimationFrame](renderAll);
} else { } else {
// console.log(className) // console.log(className)
@ -506,7 +507,10 @@
return preventDefault(event); return preventDefault(event);
// document.activeElement.blur(); // document.activeElement.blur();
} }
}); };
onOffEvent(_nodes.colorPicker, 'mousedown', touchStart_MouseDown);
onOffEvent(_nodes.colorPicker, 'touchstart', touchStart_MouseDown);
onOffEvent(_nodes.colorPicker, 'click', function(e) { onOffEvent(_nodes.colorPicker, 'click', function(e) {
focusInstance(THIS); focusInstance(THIS);
@ -531,6 +535,7 @@
} }
addEvent(_isIE ? document.body : window, 'mouseup', stopChange); addEvent(_isIE ? document.body : window, 'mouseup', stopChange);
addEvent(_isIE ? document.body : window, 'touchend', stopChange);
// ------------------------------------------------------ // // ------------------------------------------------------ //
// --------- Event listner's callback functions -------- // // --------- Event listner's callback functions -------- //
@ -546,6 +551,7 @@
// } // }
window[cancelAnimationFrame](_renderTimer); window[cancelAnimationFrame](_renderTimer);
removeEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction); removeEvent(_isIE ? document.body : window, 'mousemove', _mouseMoveAction);
removeEvent(_isIE ? document.body : window, 'touchmove', _mouseMoveAction);
if (_delayState) { // hapens on inputs if (_delayState) { // hapens on inputs
_valueType = {type: 'alpha'}; _valueType = {type: 'alpha'};
renderAll(); renderAll();
@ -1290,11 +1296,13 @@
} }
function getPageXY(e) { function getPageXY(e) {
var doc = window.document; var doc = window.document,
_e = (typeof e.changedTouches !== 'undefined' && e.changedTouches.length)?
e.changedTouches[0] : e;
return { return {
X: e.pageX || e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft, X: _e.pageX || _e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft,
Y: e.pageY || e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop Y: _e.pageY || _e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop
}; };
} }
@ -1411,4 +1419,4 @@
return _renderTimer = null; return _renderTimer = null;
}; };
})(window); })(window);