library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add touch support.

Browse Source
This commit is contained in:
Don McCurdy 2018-01-20 17:06:31 -08:00
parent c552ac8470
commit 14dd9a9f22
2 changed files with 66 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/dat/controllers/ColorController.js
View File

@ -71,6 +71,14 @@ class ColorController extends Controller {
}); });
}); });
dom.bind(this.__selector, 'touchstart', function(/* e */) {
dom
.addClass(this, 'drag')
.bind(window, 'touchend', function(/* e */) {
dom.removeClass(_this.__selector, 'drag');
});
});
const valueField = document.createElement('div'); const valueField = document.createElement('div');
common.extend(this.__selector.style, { common.extend(this.__selector.style, {
@ -141,25 +149,43 @@ class ColorController extends Controller {
}); });
dom.bind(this.__saturation_field, 'mousedown', fieldDown); dom.bind(this.__saturation_field, 'mousedown', fieldDown);
dom.bind(this.__field_knob, 'mousedown', fieldDown); dom.bind(this.__saturation_field, 'touchstart', fieldDown);
dom.bind(this.__hue_field, 'mousedown', function(e) { dom.bind(this.__field_knob, 'mousedown', fieldDown);
setH(e); dom.bind(this.__field_knob, 'touchstart', fieldDown);
dom.bind(window, 'mousemove', setH);
dom.bind(window, 'mouseup', fieldUpH); dom.bind(this.__hue_field, 'mousedown', fieldDownH);
}); dom.bind(this.__hue_field, 'touchstart', fieldDownH);
function fieldDown(e) { function fieldDown(e) {
setSV(e); setSV(e);
// document.body.style.cursor = 'none';
dom.bind(window, 'mousemove', setSV); dom.bind(window, 'mousemove', setSV);
dom.bind(window, 'touchmove', setSV);
dom.bind(window, 'mouseup', fieldUpSV); dom.bind(window, 'mouseup', fieldUpSV);
dom.bind(window, 'touchend', fieldUpSV);
}
function fieldDownH(e) {
setH(e);
dom.bind(window, 'mousemove', setH);
dom.bind(window, 'touchmove', setH);
dom.bind(window, 'mouseup', fieldUpH);
dom.bind(window, 'touchend', fieldUpH);
} }
function fieldUpSV() { function fieldUpSV() {
dom.unbind(window, 'mousemove', setSV); dom.unbind(window, 'mousemove', setSV);
dom.unbind(window, 'touchmove', setSV);
dom.unbind(window, 'mouseup', fieldUpSV); dom.unbind(window, 'mouseup', fieldUpSV);
// document.body.style.cursor = 'default'; dom.unbind(window, 'touchend', fieldUpSV);
onFinish();
}
function fieldUpH() {
dom.unbind(window, 'mousemove', setH);
dom.unbind(window, 'touchmove', setH);
dom.unbind(window, 'mouseup', fieldUpH);
dom.unbind(window, 'touchend', fieldUpH);
onFinish(); onFinish();
} }
@ -173,12 +199,6 @@ class ColorController extends Controller {
} }
} }
function fieldUpH() {
dom.unbind(window, 'mousemove', setH);
dom.unbind(window, 'mouseup', fieldUpH);
onFinish();
}
function onFinish() { function onFinish() {
if (_this.__onFinishChange) { if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.__color.toOriginal()); _this.__onFinishChange.call(_this, _this.__color.toOriginal());
@ -197,11 +217,12 @@ class ColorController extends Controller {
this.updateDisplay(); this.updateDisplay();
function setSV(e) { function setSV(e) {
e.preventDefault(); if (e.type.indexOf('touch') === -1) { e.preventDefault(); }
const fieldRect = _this.__saturation_field.getBoundingClientRect(); const fieldRect = _this.__saturation_field.getBoundingClientRect();
let s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left); const {clientX, clientY} = (e.touches && e.touches[0]) || e;
let v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); let s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
let v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (v > 1) { if (v > 1) {
v = 1; v = 1;
@ -225,10 +246,11 @@ class ColorController extends Controller {
} }
function setH(e) { function setH(e) {
e.preventDefault(); if (e.type.indexOf('touch') === -1) { e.preventDefault(); }
const fieldRect = _this.__hue_field.getBoundingClientRect(); const fieldRect = _this.__hue_field.getBoundingClientRect();
let h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); const {clientY} = (e.touches && e.touches[0]) || e;
let h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (h > 1) { if (h > 1) {
h = 1; h = 1;

25
src/dat/controllers/NumberControllerSlider.js
View File

@ -44,6 +44,7 @@ class NumberControllerSlider extends NumberController {
this.__foreground = document.createElement('div'); this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown); dom.bind(this.__background, 'mousedown', onMouseDown);
dom.bind(this.__background, 'touchstart', onTouchStart);
dom.addClass(this.__background, 'slider'); dom.addClass(this.__background, 'slider');
dom.addClass(this.__foreground, 'slider-fg'); dom.addClass(this.__foreground, 'slider-fg');
@ -77,6 +78,30 @@ class NumberControllerSlider extends NumberController {
} }
} }
function onTouchStart(e) {
if (e.touches.length !== 1) { return; }
dom.bind(window, 'touchmove', onTouchMove);
dom.bind(window, 'touchend', onTouchEnd);
onTouchMove(e);
}
function onTouchMove(e) {
const clientX = e.touches[0].clientX;
const bgRect = _this.__background.getBoundingClientRect();
_this.setValue(
map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)
);
}
function onTouchEnd() {
dom.unbind(window, 'touchmove', onTouchMove);
dom.unbind(window, 'touchend', onTouchEnd);
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}
}
this.updateDisplay(); this.updateDisplay();
this.__background.appendChild(this.__foreground); this.__background.appendChild(this.__foreground);