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

Added tocuh controls to the Number Slider Controller to allow dragging of sliders on touch interfaces e.g. tablets

Browse Source
This commit is contained in:
Rob Waring 2017-07-28 15:04:25 +01:00
parent 2659494a80
commit 85ea97577e
4 changed files with 340 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
build/dat.gui.js
View File

@ -2138,6 +2138,7 @@ return /******/ (function(modules) { // webpackBootstrap
_this2.__foreground = document.createElement('div');
_dom2.default.bind(_this2.__background, 'mousedown', onMouseDown);
_dom2.default.bind(_this2.__background, 'touchstart', onTouchStart);
_dom2.default.addClass(_this2.__background, 'slider');
_dom2.default.addClass(_this2.__foreground, 'slider-fg');
@ -2151,19 +2152,60 @@ return /******/ (function(modules) { // webpackBootstrap
onMouseDrag(e);
}
function onMouseDrag(e) {
e.preventDefault();
function onTouchStart(e) {
document.activeElement.blur();
_dom2.default.bind(window, 'touchmove', onTouchMove);
_dom2.default.bind(window, 'touchend', onTouchEnd);
_this.__activeTouch = e.targetTouches[0];
onTouchMove(e);
}
function onMouseDrag(e) {
// e.preventDefault();
onDrag(e.clientX);
}
function onTouchMove(e) {
// e.preventDefault();
var changed = e.changedTouches;
for (var i = 0; i < changed.length; i++) {
if (changed[i].identifier === _this.__activeTouch.identifier) {
onDrag(changed[i].clientX);
}
}
}
function onDrag(clientX) {
var bgRect = _this.__background.getBoundingClientRect();
_this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
_this.setValue(map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
return false;
}
function onTouchEnd() {
_dom2.default.unbind(window, 'touchmove', onMouseDrag);
_dom2.default.unbind(window, 'touchend', onMouseUp);
_this.__activeTouch = null;
moveFinish();
}
function onMouseUp() {
_dom2.default.unbind(window, 'mousemove', onMouseDrag);
_dom2.default.unbind(window, 'mouseup', onMouseUp);
moveFinish();
}
function moveFinish() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}
@ -3965,7 +4007,7 @@ return /******/ (function(modules) { // webpackBootstrap
/* 19 */
/***/ function(module, exports) {
module.exports = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n <textarea id=\"dg-new-constructor\"></textarea>\n\n <div id=\"dg-save-locally\">\n\n <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n values to <code>localStorage</code> on exit.\n\n <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n override those passed to <code>dat.GUI</code>'s constructor. This makes it\n easier to work incrementally, but <code>localStorage</code> is fragile,\n and your friends may not see the same values you do.\n\n </div>\n\n </div>\n\n</div>";
module.exports = "<div id=\"dg-save\" class=\"dg dialogue\">\r\n\r\n Here's the new load parameter for your <code>GUI</code>'s constructor:\r\n\r\n <textarea id=\"dg-new-constructor\"></textarea>\r\n\r\n <div id=\"dg-save-locally\">\r\n\r\n <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\r\n values to <code>localStorage</code> on exit.\r\n\r\n <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\r\n override those passed to <code>dat.GUI</code>'s constructor. This makes it\r\n easier to work incrementally, but <code>localStorage</code> is fragile,\r\n and your friends may not see the same values you do.\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n</div>";
/***/ },
/* 20 */

2
build/dat.gui.js.map
View File

File diff suppressed because one or more lines are too long

4
build/dat.gui.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -46,6 +46,7 @@ class NumberControllerSlider extends NumberController {
this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown);
dom.bind(this.__background, 'touchstart', onTouchStart);
dom.addClass(this.__background, 'slider');
dom.addClass(this.__foreground, 'slider-fg');
@ -59,21 +60,62 @@ class NumberControllerSlider extends NumberController {
onMouseDrag(e);
}
function onMouseDrag(e) {
e.preventDefault();
function onTouchStart(e) {
document.activeElement.blur();
dom.bind(window, 'touchmove', onTouchMove);
dom.bind(window, 'touchend', onTouchEnd);
_this.__activeTouch = e.targetTouches[0];
onTouchMove(e);
}
function onMouseDrag(e) {
// e.preventDefault();
onDrag(e.clientX);
}
function onTouchMove(e) {
// e.preventDefault();
const changed = e.changedTouches;
for (let i = 0; i < changed.length; i++) {
if (changed[i].identifier === _this.__activeTouch.identifier) {
onDrag(changed[i].clientX);
}
}
}
function onDrag(clientX) {
const bgRect = _this.__background.getBoundingClientRect();
_this.setValue(
map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)
map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)
);
return false;
}
function onTouchEnd() {
dom.unbind(window, 'touchmove', onMouseDrag);
dom.unbind(window, 'touchend', onMouseUp);
_this.__activeTouch = null;
moveFinish();
}
function onMouseUp() {
dom.unbind(window, 'mousemove', onMouseDrag);
dom.unbind(window, 'mouseup', onMouseUp);
moveFinish();
}
function moveFinish() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.getValue());
}