mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Fix eslint issues
This commit is contained in:
parent
3deaee0d7a
commit
e6df810a7b
@ -4,6 +4,7 @@
|
|||||||
"comma-dangle": 0,
|
"comma-dangle": 0,
|
||||||
"func-names": 0,
|
"func-names": 0,
|
||||||
"no-alert": 0,
|
"no-alert": 0,
|
||||||
|
"no-console": 0,
|
||||||
"no-use-before-define": 0
|
"no-use-before-define": 0
|
||||||
}
|
}
|
||||||
}
|
}
|
441
build/dat.gui.js
441
build/dat.gui.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -13,7 +13,6 @@
|
|||||||
|
|
||||||
import Controller from './Controller';
|
import Controller from './Controller';
|
||||||
import dom from '../dom/dom';
|
import dom from '../dom/dom';
|
||||||
import common from '../utils/common';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class Provides a checkbox input to alter the boolean property of an object.
|
* @class Provides a checkbox input to alter the boolean property of an object.
|
||||||
@ -28,7 +27,7 @@ class BooleanController extends Controller {
|
|||||||
constructor(object, property) {
|
constructor(object, property) {
|
||||||
super(object, property);
|
super(object, property);
|
||||||
|
|
||||||
var _this = this;
|
const _this = this;
|
||||||
this.__prev = this.getValue();
|
this.__prev = this.getValue();
|
||||||
|
|
||||||
this.__checkbox = document.createElement('input');
|
this.__checkbox = document.createElement('input');
|
||||||
@ -47,7 +46,7 @@ class BooleanController extends Controller {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setValue(v) {
|
setValue(v) {
|
||||||
var toReturn = super.setValue(v);
|
const toReturn = super.setValue(v);
|
||||||
if (this.__onFinishChange) {
|
if (this.__onFinishChange) {
|
||||||
this.__onFinishChange.call(this, this.getValue());
|
this.__onFinishChange.call(this, this.getValue());
|
||||||
}
|
}
|
||||||
|
@ -24,7 +24,7 @@ class ColorController extends Controller {
|
|||||||
this.__color = new Color(this.getValue());
|
this.__color = new Color(this.getValue());
|
||||||
this.__temp = new Color(0);
|
this.__temp = new Color(0);
|
||||||
|
|
||||||
var _this = this;
|
const _this = this;
|
||||||
|
|
||||||
this.domElement = document.createElement('div');
|
this.domElement = document.createElement('div');
|
||||||
|
|
||||||
@ -50,7 +50,7 @@ class ColorController extends Controller {
|
|||||||
this.__input.type = 'text';
|
this.__input.type = 'text';
|
||||||
this.__input_textShadow = '0 1px 1px ';
|
this.__input_textShadow = '0 1px 1px ';
|
||||||
|
|
||||||
dom.bind(this.__input, 'keydown', function (e) {
|
dom.bind(this.__input, 'keydown', function(e) {
|
||||||
if (e.keyCode === 13) { // on enter
|
if (e.keyCode === 13) { // on enter
|
||||||
onBlur.call(this);
|
onBlur.call(this);
|
||||||
}
|
}
|
||||||
@ -58,17 +58,15 @@ class ColorController extends Controller {
|
|||||||
|
|
||||||
dom.bind(this.__input, 'blur', onBlur);
|
dom.bind(this.__input, 'blur', onBlur);
|
||||||
|
|
||||||
dom.bind(this.__selector, 'mousedown', function (_e) {
|
dom.bind(this.__selector, 'mousedown', function(/* e */) {
|
||||||
|
|
||||||
dom
|
dom
|
||||||
.addClass(this, 'drag')
|
.addClass(this, 'drag')
|
||||||
.bind(window, 'mouseup', function (e) {
|
.bind(window, 'mouseup', function(/* e */) {
|
||||||
dom.removeClass(_this.__selector, 'drag');
|
dom.removeClass(_this.__selector, 'drag');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var value_field = document.createElement('div');
|
const valueField = document.createElement('div');
|
||||||
|
|
||||||
common.extend(this.__selector.style, {
|
common.extend(this.__selector.style, {
|
||||||
width: '122px',
|
width: '122px',
|
||||||
@ -82,7 +80,7 @@ class ColorController extends Controller {
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: '12px',
|
width: '12px',
|
||||||
height: '12px',
|
height: '12px',
|
||||||
border: this.__field_knob_border + (this.__color.v < .5 ? '#fff' : '#000'),
|
border: this.__field_knob_border + (this.__color.v < 0.5 ? '#fff' : '#000'),
|
||||||
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
||||||
borderRadius: '12px',
|
borderRadius: '12px',
|
||||||
zIndex: 1
|
zIndex: 1
|
||||||
@ -105,13 +103,13 @@ class ColorController extends Controller {
|
|||||||
cursor: 'pointer'
|
cursor: 'pointer'
|
||||||
});
|
});
|
||||||
|
|
||||||
common.extend(value_field.style, {
|
common.extend(valueField.style, {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
background: 'none'
|
background: 'none'
|
||||||
});
|
});
|
||||||
|
|
||||||
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
|
linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
|
||||||
|
|
||||||
common.extend(this.__hue_field.style, {
|
common.extend(this.__hue_field.style, {
|
||||||
width: '15px',
|
width: '15px',
|
||||||
@ -138,7 +136,7 @@ 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.__field_knob, 'mousedown', fieldDown);
|
||||||
|
|
||||||
dom.bind(this.__hue_field, 'mousedown', function (e) {
|
dom.bind(this.__hue_field, 'mousedown', function(e) {
|
||||||
setH(e);
|
setH(e);
|
||||||
dom.bind(window, 'mousemove', setH);
|
dom.bind(window, 'mousemove', setH);
|
||||||
dom.bind(window, 'mouseup', unbindH);
|
dom.bind(window, 'mouseup', unbindH);
|
||||||
@ -158,7 +156,7 @@ class ColorController extends Controller {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onBlur() {
|
function onBlur() {
|
||||||
var i = interpret(this.value);
|
const i = interpret(this.value);
|
||||||
if (i !== false) {
|
if (i !== false) {
|
||||||
_this.__color.__state = i;
|
_this.__color.__state = i;
|
||||||
_this.setValue(_this.__color.toOriginal());
|
_this.setValue(_this.__color.toOriginal());
|
||||||
@ -172,7 +170,7 @@ class ColorController extends Controller {
|
|||||||
dom.unbind(window, 'mouseup', unbindH);
|
dom.unbind(window, 'mouseup', unbindH);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.__saturation_field.appendChild(value_field);
|
this.__saturation_field.appendChild(valueField);
|
||||||
this.__selector.appendChild(this.__field_knob);
|
this.__selector.appendChild(this.__field_knob);
|
||||||
this.__selector.appendChild(this.__saturation_field);
|
this.__selector.appendChild(this.__saturation_field);
|
||||||
this.__selector.appendChild(this.__hue_field);
|
this.__selector.appendChild(this.__hue_field);
|
||||||
@ -184,19 +182,24 @@ class ColorController extends Controller {
|
|||||||
this.updateDisplay();
|
this.updateDisplay();
|
||||||
|
|
||||||
function setSV(e) {
|
function setSV(e) {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var w = dom.getWidth(_this.__saturation_field);
|
const w = dom.getWidth(_this.__saturation_field);
|
||||||
var o = dom.getOffset(_this.__saturation_field);
|
const o = dom.getOffset(_this.__saturation_field);
|
||||||
var s = (e.clientX - o.left + document.body.scrollLeft) / w;
|
let s = (e.clientX - o.left + document.body.scrollLeft) / w;
|
||||||
var v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
|
let v = 1 - (e.clientY - o.top + document.body.scrollTop) / w;
|
||||||
|
|
||||||
if (v > 1) v = 1;
|
if (v > 1) {
|
||||||
else if (v < 0) v = 0;
|
v = 1;
|
||||||
|
} else if (v < 0) {
|
||||||
|
v = 0;
|
||||||
|
}
|
||||||
|
|
||||||
if (s > 1) s = 1;
|
if (s > 1) {
|
||||||
else if (s < 0) s = 0;
|
s = 1;
|
||||||
|
} else if (s < 0) {
|
||||||
|
s = 0;
|
||||||
|
}
|
||||||
|
|
||||||
_this.__color.v = v;
|
_this.__color.v = v;
|
||||||
_this.__color.s = s;
|
_this.__color.s = s;
|
||||||
@ -205,39 +208,38 @@ class ColorController extends Controller {
|
|||||||
|
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setH(e) {
|
function setH(e) {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var s = dom.getHeight(_this.__hue_field);
|
const s = dom.getHeight(_this.__hue_field);
|
||||||
var o = dom.getOffset(_this.__hue_field);
|
const o = dom.getOffset(_this.__hue_field);
|
||||||
var h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
|
let h = 1 - (e.clientY - o.top + document.body.scrollTop) / s;
|
||||||
|
|
||||||
if (h > 1) h = 1;
|
if (h > 1) {
|
||||||
else if (h < 0) h = 0;
|
h = 1;
|
||||||
|
} else if (h < 0) {
|
||||||
|
h = 0;
|
||||||
|
}
|
||||||
|
|
||||||
_this.__color.h = h * 360;
|
_this.__color.h = h * 360;
|
||||||
|
|
||||||
_this.setValue(_this.__color.toOriginal());
|
_this.setValue(_this.__color.toOriginal());
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updateDisplay() {
|
updateDisplay() {
|
||||||
var i = interpret(this.getValue());
|
const i = interpret(this.getValue());
|
||||||
|
|
||||||
if (i !== false) {
|
if (i !== false) {
|
||||||
|
let mismatch = false;
|
||||||
var mismatch = false;
|
|
||||||
|
|
||||||
// Check for mismatch on the interpreted value.
|
// Check for mismatch on the interpreted value.
|
||||||
|
|
||||||
common.each(Color.COMPONENTS, function (component) {
|
common.each(Color.COMPONENTS, function(component) {
|
||||||
if (!common.isUndefined(i[component]) && !common.isUndefined(this.__color.__state[component]) &&
|
if (!common.isUndefined(i[component]) && !common.isUndefined(this.__color.__state[component]) &&
|
||||||
i[component] !== this.__color.__state[component]) {
|
i[component] !== this.__color.__state[component]) {
|
||||||
mismatch = true;
|
mismatch = true;
|
||||||
@ -250,15 +252,14 @@ class ColorController extends Controller {
|
|||||||
if (mismatch) {
|
if (mismatch) {
|
||||||
common.extend(this.__color.__state, i);
|
common.extend(this.__color.__state, i);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
common.extend(this.__temp.__state, this.__color.__state);
|
common.extend(this.__temp.__state, this.__color.__state);
|
||||||
|
|
||||||
this.__temp.a = 1;
|
this.__temp.a = 1;
|
||||||
|
|
||||||
var flip = (this.__color.v < .5 || this.__color.s > .5) ? 255 : 0;
|
const flip = (this.__color.v < 0.5 || this.__color.s > 0.5) ? 255 : 0;
|
||||||
var _flip = 255 - flip;
|
const _flip = 255 - flip;
|
||||||
|
|
||||||
common.extend(this.__field_knob.style, {
|
common.extend(this.__field_knob.style, {
|
||||||
marginLeft: 100 * this.__color.s - 7 + 'px',
|
marginLeft: 100 * this.__color.s - 7 + 'px',
|
||||||
@ -267,7 +268,7 @@ class ColorController extends Controller {
|
|||||||
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
|
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
|
||||||
});
|
});
|
||||||
|
|
||||||
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
|
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
|
||||||
|
|
||||||
this.__temp.s = 1;
|
this.__temp.s = 1;
|
||||||
this.__temp.v = 1;
|
this.__temp.v = 1;
|
||||||
@ -279,15 +280,14 @@ class ColorController extends Controller {
|
|||||||
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
|
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
|
||||||
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
|
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
|
const vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
|
||||||
|
|
||||||
function linearGradient(elem, x, a, b) {
|
function linearGradient(elem, x, a, b) {
|
||||||
elem.style.background = '';
|
elem.style.background = '';
|
||||||
common.each(vendors, function (vendor) {
|
common.each(vendors, function(vendor) {
|
||||||
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
|
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -301,5 +301,4 @@ function hueGradient(elem) {
|
|||||||
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default ColorController;
|
||||||
export default ColorController;
|
|
||||||
|
@ -11,8 +11,6 @@
|
|||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import common from '../utils/common';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class An "abstract" class that represents a given property of an object.
|
* @class An "abstract" class that represents a given property of an object.
|
||||||
*
|
*
|
||||||
@ -122,8 +120,8 @@ class Controller {
|
|||||||
* @returns {Boolean} true if the value has deviated from initialValue
|
* @returns {Boolean} true if the value has deviated from initialValue
|
||||||
*/
|
*/
|
||||||
isModified() {
|
isModified() {
|
||||||
return this.initialValue !== this.getValue()
|
return this.initialValue !== this.getValue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Controller;
|
export default Controller;
|
||||||
|
@ -19,8 +19,8 @@ import FunctionController from './FunctionController';
|
|||||||
import BooleanController from './BooleanController';
|
import BooleanController from './BooleanController';
|
||||||
import common from '../utils/common';
|
import common from '../utils/common';
|
||||||
|
|
||||||
var ControllerFactory = function (object, property) {
|
const ControllerFactory = function(object, property) {
|
||||||
var initialValue = object[property];
|
const initialValue = object[property];
|
||||||
|
|
||||||
// Providing options?
|
// Providing options?
|
||||||
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
|
if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {
|
||||||
@ -29,19 +29,15 @@ var ControllerFactory = function (object, property) {
|
|||||||
|
|
||||||
// Providing a map?
|
// Providing a map?
|
||||||
if (common.isNumber(initialValue)) {
|
if (common.isNumber(initialValue)) {
|
||||||
|
|
||||||
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
|
if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
|
||||||
// Has min and max.
|
// Has min and max.
|
||||||
if (common.isNumber(arguments[4])) // has step
|
if (common.isNumber(arguments[4])) { // has step
|
||||||
{
|
|
||||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
|
return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
|
|
||||||
}
|
}
|
||||||
|
return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (common.isString(initialValue)) {
|
if (common.isString(initialValue)) {
|
||||||
@ -57,4 +53,4 @@ var ControllerFactory = function (object, property) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ControllerFactory;
|
export default ControllerFactory;
|
||||||
|
@ -13,7 +13,6 @@
|
|||||||
|
|
||||||
import Controller from './Controller';
|
import Controller from './Controller';
|
||||||
import dom from '../dom/dom';
|
import dom from '../dom/dom';
|
||||||
import common from '../utils/common';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class Provides a GUI interface to fire a specified method, a property of an object.
|
* @class Provides a GUI interface to fire a specified method, a property of an object.
|
||||||
@ -25,16 +24,16 @@ import common from '../utils/common';
|
|||||||
*
|
*
|
||||||
* @member dat.controllers
|
* @member dat.controllers
|
||||||
*/
|
*/
|
||||||
class FunctionController extends Controller{
|
class FunctionController extends Controller {
|
||||||
constructor(object, property, text) {
|
constructor(object, property, text) {
|
||||||
super(object, property);
|
super(object, property);
|
||||||
|
|
||||||
var _this = this;
|
const _this = this;
|
||||||
|
|
||||||
this.__button = document.createElement('div');
|
this.__button = document.createElement('div');
|
||||||
this.__button.innerHTML = text === undefined ? 'Fire' : text;
|
this.__button.innerHTML = text === undefined ? 'Fire' : text;
|
||||||
|
|
||||||
dom.bind(this.__button, 'click', function (e) {
|
dom.bind(this.__button, 'click', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
_this.fire();
|
_this.fire();
|
||||||
return false;
|
return false;
|
||||||
@ -56,4 +55,4 @@ class FunctionController extends Controller{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default FunctionController;
|
export default FunctionController;
|
||||||
|
@ -15,12 +15,12 @@ import Controller from './Controller';
|
|||||||
import common from '../utils/common';
|
import common from '../utils/common';
|
||||||
|
|
||||||
function numDecimals(x) {
|
function numDecimals(x) {
|
||||||
x = x.toString();
|
const _x = x.toString();
|
||||||
if (x.indexOf('.') > -1) {
|
if (_x.indexOf('.') > -1) {
|
||||||
return x.length - x.indexOf('.') - 1;
|
return _x.length - _x.indexOf('.') - 1;
|
||||||
} else {
|
|
||||||
return 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -41,23 +41,20 @@ class NumberController extends Controller {
|
|||||||
constructor(object, property, params) {
|
constructor(object, property, params) {
|
||||||
super(object, property);
|
super(object, property);
|
||||||
|
|
||||||
params = params || {};
|
const _params = params || {};
|
||||||
|
|
||||||
this.__min = params.min;
|
this.__min = _params.min;
|
||||||
this.__max = params.max;
|
this.__max = _params.max;
|
||||||
this.__step = params.step;
|
this.__step = _params.step;
|
||||||
|
|
||||||
if (common.isUndefined(this.__step)) {
|
if (common.isUndefined(this.__step)) {
|
||||||
|
if (this.initialValue === 0) {
|
||||||
if (this.initialValue == 0) {
|
|
||||||
this.__impliedStep = 1; // What are we, psychics?
|
this.__impliedStep = 1; // What are we, psychics?
|
||||||
} else {
|
} else {
|
||||||
// Hey Doug, check this out.
|
// Hey Doug, check this out.
|
||||||
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
|
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
this.__impliedStep = this.__step;
|
this.__impliedStep = this.__step;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,18 +62,19 @@ class NumberController extends Controller {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setValue(v) {
|
setValue(v) {
|
||||||
if (this.__min !== undefined && v < this.__min) {
|
let _v = v;
|
||||||
v = this.__min;
|
|
||||||
} else if (this.__max !== undefined && v > this.__max) {
|
if (this.__min !== undefined && _v < this.__min) {
|
||||||
v = this.__max;
|
_v = this.__min;
|
||||||
|
} else if (this.__max !== undefined && _v > this.__max) {
|
||||||
|
_v = this.__max;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.__step !== undefined && v % this.__step != 0) {
|
if (this.__step !== undefined && _v % this.__step !== 0) {
|
||||||
v = Math.round(v / this.__step) * this.__step;
|
_v = Math.round(_v / this.__step) * this.__step;
|
||||||
}
|
}
|
||||||
|
|
||||||
return super.setValue(v);
|
return super.setValue(_v);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -16,7 +16,7 @@ import dom from '../dom/dom';
|
|||||||
import common from '../utils/common';
|
import common from '../utils/common';
|
||||||
|
|
||||||
function roundToDecimal(value, decimals) {
|
function roundToDecimal(value, decimals) {
|
||||||
var tenTo = Math.pow(10, decimals);
|
const tenTo = Math.pow(10, decimals);
|
||||||
return Math.round(value * tenTo) / tenTo;
|
return Math.round(value * tenTo) / tenTo;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,13 +42,13 @@ class NumberControllerBox extends NumberController {
|
|||||||
|
|
||||||
this.__truncationSuspended = false;
|
this.__truncationSuspended = false;
|
||||||
|
|
||||||
var _this = this;
|
const _this = this;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* {Number} Previous mouse y position
|
* {Number} Previous mouse y position
|
||||||
* @ignore
|
* @ignore
|
||||||
*/
|
*/
|
||||||
var prev_y;
|
let prevY;
|
||||||
|
|
||||||
this.__input = document.createElement('input');
|
this.__input = document.createElement('input');
|
||||||
this.__input.setAttribute('type', 'text');
|
this.__input.setAttribute('type', 'text');
|
||||||
@ -58,20 +58,20 @@ class NumberControllerBox extends NumberController {
|
|||||||
dom.bind(this.__input, 'change', onChange);
|
dom.bind(this.__input, 'change', onChange);
|
||||||
dom.bind(this.__input, 'blur', onBlur);
|
dom.bind(this.__input, 'blur', onBlur);
|
||||||
dom.bind(this.__input, 'mousedown', onMouseDown);
|
dom.bind(this.__input, 'mousedown', onMouseDown);
|
||||||
dom.bind(this.__input, 'keydown', function (e) {
|
dom.bind(this.__input, 'keydown', function(e) {
|
||||||
|
|
||||||
// When pressing entire, you can be as precise as you want.
|
// When pressing entire, you can be as precise as you want.
|
||||||
if (e.keyCode === 13) {
|
if (e.keyCode === 13) {
|
||||||
_this.__truncationSuspended = true;
|
_this.__truncationSuspended = true;
|
||||||
this.blur();
|
this.blur();
|
||||||
_this.__truncationSuspended = false;
|
_this.__truncationSuspended = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function onChange() {
|
function onChange() {
|
||||||
var attempted = parseFloat(_this.__input.value);
|
const attempted = parseFloat(_this.__input.value);
|
||||||
if (!common.isNaN(attempted)) _this.setValue(attempted);
|
if (!common.isNaN(attempted)) {
|
||||||
|
_this.setValue(attempted);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBlur() {
|
function onBlur() {
|
||||||
@ -84,16 +84,14 @@ class NumberControllerBox extends NumberController {
|
|||||||
function onMouseDown(e) {
|
function onMouseDown(e) {
|
||||||
dom.bind(window, 'mousemove', onMouseDrag);
|
dom.bind(window, 'mousemove', onMouseDrag);
|
||||||
dom.bind(window, 'mouseup', onMouseUp);
|
dom.bind(window, 'mouseup', onMouseUp);
|
||||||
prev_y = e.clientY;
|
prevY = e.clientY;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseDrag(e) {
|
function onMouseDrag(e) {
|
||||||
|
const diff = prevY - e.clientY;
|
||||||
var diff = prev_y - e.clientY;
|
|
||||||
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
_this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
||||||
|
|
||||||
prev_y = e.clientY;
|
prevY = e.clientY;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseUp() {
|
function onMouseUp() {
|
||||||
@ -107,7 +105,6 @@ class NumberControllerBox extends NumberController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateDisplay() {
|
updateDisplay() {
|
||||||
|
|
||||||
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
||||||
return super.updateDisplay();
|
return super.updateDisplay();
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
import NumberController from './NumberController';
|
import NumberController from './NumberController';
|
||||||
import dom from '../dom/dom';
|
import dom from '../dom/dom';
|
||||||
import css from '../utils/css';
|
import css from '../utils/css';
|
||||||
import common from '../utils/common';
|
|
||||||
import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
|
import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
|
||||||
|
|
||||||
function map(v, i1, i2, o1, o2) {
|
function map(v, i1, i2, o1, o2) {
|
||||||
@ -43,7 +42,7 @@ class NumberControllerSlider extends NumberController {
|
|||||||
constructor(object, property, min, max, step) {
|
constructor(object, property, min, max, step) {
|
||||||
super(object, property, {min: min, max: max, step: step});
|
super(object, property, {min: min, max: max, step: step});
|
||||||
|
|
||||||
var _this = this;
|
const _this = this;
|
||||||
|
|
||||||
this.__background = document.createElement('div');
|
this.__background = document.createElement('div');
|
||||||
this.__foreground = document.createElement('div');
|
this.__foreground = document.createElement('div');
|
||||||
@ -55,7 +54,6 @@ class NumberControllerSlider extends NumberController {
|
|||||||
dom.addClass(this.__foreground, 'slider-fg');
|
dom.addClass(this.__foreground, 'slider-fg');
|
||||||
|
|
||||||
function onMouseDown(e) {
|
function onMouseDown(e) {
|
||||||
|
|
||||||
dom.bind(window, 'mousemove', onMouseDrag);
|
dom.bind(window, 'mousemove', onMouseDrag);
|
||||||
dom.bind(window, 'mouseup', onMouseUp);
|
dom.bind(window, 'mouseup', onMouseUp);
|
||||||
|
|
||||||
@ -63,18 +61,16 @@ class NumberControllerSlider extends NumberController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onMouseDrag(e) {
|
function onMouseDrag(e) {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var offset = dom.getOffset(_this.__background);
|
const offset = dom.getOffset(_this.__background);
|
||||||
var width = dom.getWidth(_this.__background);
|
const width = dom.getWidth(_this.__background);
|
||||||
|
|
||||||
_this.setValue(
|
_this.setValue(
|
||||||
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
|
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
|
||||||
);
|
);
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseUp() {
|
function onMouseUp() {
|
||||||
@ -92,7 +88,7 @@ class NumberControllerSlider extends NumberController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateDisplay() {
|
updateDisplay() {
|
||||||
var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
|
const pct = (this.getValue() - this.__min) / (this.__max - this.__min);
|
||||||
this.__foreground.style.width = pct * 100 + '%';
|
this.__foreground.style.width = pct * 100 + '%';
|
||||||
return super.updateDisplay();
|
return super.updateDisplay();
|
||||||
}
|
}
|
||||||
@ -101,8 +97,8 @@ class NumberControllerSlider extends NumberController {
|
|||||||
/**
|
/**
|
||||||
* Injects default stylesheet for slider elements.
|
* Injects default stylesheet for slider elements.
|
||||||
*/
|
*/
|
||||||
NumberControllerSlider.useDefaultStyles = function () {
|
NumberControllerSlider.useDefaultStyles = function() {
|
||||||
css.inject(styleSheet);
|
css.inject(styleSheet);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NumberControllerSlider;
|
export default NumberControllerSlider;
|
||||||
|
@ -28,11 +28,13 @@ import common from '../utils/common';
|
|||||||
*
|
*
|
||||||
* @member dat.controllers
|
* @member dat.controllers
|
||||||
*/
|
*/
|
||||||
class OptionController extends Controller{
|
class OptionController extends Controller {
|
||||||
constructor(object, property, options) {
|
constructor(object, property, opts) {
|
||||||
super(object, property);
|
super(object, property);
|
||||||
|
|
||||||
var _this = this;
|
let options = opts;
|
||||||
|
|
||||||
|
const _this = this;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The drop down menu
|
* The drop down menu
|
||||||
@ -41,35 +43,33 @@ class OptionController extends Controller{
|
|||||||
this.__select = document.createElement('select');
|
this.__select = document.createElement('select');
|
||||||
|
|
||||||
if (common.isArray(options)) {
|
if (common.isArray(options)) {
|
||||||
var map = {};
|
const map = {};
|
||||||
common.each(options, function (element) {
|
common.each(options, function(element) {
|
||||||
map[element] = element;
|
map[element] = element;
|
||||||
});
|
});
|
||||||
options = map;
|
options = map;
|
||||||
}
|
}
|
||||||
|
|
||||||
common.each(options, function (value, key) {
|
common.each(options, function(value, key) {
|
||||||
|
const opt = document.createElement('option');
|
||||||
var opt = document.createElement('option');
|
|
||||||
opt.innerHTML = key;
|
opt.innerHTML = key;
|
||||||
opt.setAttribute('value', value);
|
opt.setAttribute('value', value);
|
||||||
_this.__select.appendChild(opt);
|
_this.__select.appendChild(opt);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Acknowledge original value
|
// Acknowledge original value
|
||||||
this.updateDisplay();
|
this.updateDisplay();
|
||||||
|
|
||||||
dom.bind(this.__select, 'change', function () {
|
dom.bind(this.__select, 'change', function() {
|
||||||
var desiredValue = this.options[this.selectedIndex].value;
|
const desiredValue = this.options[this.selectedIndex].value;
|
||||||
_this.setValue(desiredValue);
|
_this.setValue(desiredValue);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.domElement.appendChild(this.__select);
|
this.domElement.appendChild(this.__select);
|
||||||
}
|
}
|
||||||
|
|
||||||
setValue (v) {
|
setValue(v) {
|
||||||
var toReturn = super.setValue(v);
|
const toReturn = super.setValue(v);
|
||||||
|
|
||||||
if (this.__onFinishChange) {
|
if (this.__onFinishChange) {
|
||||||
this.__onFinishChange.call(this, this.getValue());
|
this.__onFinishChange.call(this, this.getValue());
|
||||||
@ -83,4 +83,4 @@ class OptionController extends Controller{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default OptionController;
|
export default OptionController;
|
||||||
|
@ -13,7 +13,6 @@
|
|||||||
|
|
||||||
import Controller from './Controller';
|
import Controller from './Controller';
|
||||||
import dom from '../dom/dom';
|
import dom from '../dom/dom';
|
||||||
import common from '../utils/common';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @class Provides a text input to alter the string property of an object.
|
* @class Provides a text input to alter the string property of an object.
|
||||||
@ -29,7 +28,7 @@ class StringController extends Controller {
|
|||||||
constructor(object, property) {
|
constructor(object, property) {
|
||||||
super(object, property);
|
super(object, property);
|
||||||
|
|
||||||
var _this = this;
|
const _this = this;
|
||||||
|
|
||||||
this.__input = document.createElement('input');
|
this.__input = document.createElement('input');
|
||||||
this.__input.setAttribute('type', 'text');
|
this.__input.setAttribute('type', 'text');
|
||||||
@ -37,7 +36,7 @@ class StringController extends Controller {
|
|||||||
dom.bind(this.__input, 'keyup', onChange);
|
dom.bind(this.__input, 'keyup', onChange);
|
||||||
dom.bind(this.__input, 'change', onChange);
|
dom.bind(this.__input, 'change', onChange);
|
||||||
dom.bind(this.__input, 'blur', onBlur);
|
dom.bind(this.__input, 'blur', onBlur);
|
||||||
dom.bind(this.__input, 'keydown', function (e) {
|
dom.bind(this.__input, 'keydown', function(e) {
|
||||||
if (e.keyCode === 13) {
|
if (e.keyCode === 13) {
|
||||||
this.blur();
|
this.blur();
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user