From 32c7a8f1b2e5684a6a9af508951e2ba46aec55ef Mon Sep 17 00:00:00 2001
From: Glenn Vorhes <gavorhes@wisc.edu>
Date: Tue, 26 Sep 2017 14:03:41 -0500
Subject: [PATCH] update react slider controls
---
dist/reactComponents/Slider.d.ts | 4 ++--
dist/reactComponents/Slider.jsx | 16 +++++++++-------
dist/reactComponents/Slider.jsx.map | 2 +-
src/reactComponents/Slider.tsx | 22 +++++++++++++---------
4 files changed, 25 insertions(+), 19 deletions(-)
diff --git a/dist/reactComponents/Slider.d.ts b/dist/reactComponents/Slider.d.ts
index 016f96f..347c7f1 100644
--- a/dist/reactComponents/Slider.d.ts
+++ b/dist/reactComponents/Slider.d.ts
@@ -12,7 +12,7 @@ export interface iSlider {
export declare class Slider extends React.Component<iSlider, null> {
private uid;
private startUid;
- private endUid;
+ private stopUid;
private previousUid;
private nextUid;
private intervalUid;
@@ -20,7 +20,7 @@ export declare class Slider extends React.Component<iSlider, null> {
private previousButton;
private nextButton;
private startButton;
- private endButton;
+ private stopButton;
private intervalSelect;
private interval;
private running;
diff --git a/dist/reactComponents/Slider.jsx b/dist/reactComponents/Slider.jsx
index 1650370..91b9dfe 100644
--- a/dist/reactComponents/Slider.jsx
+++ b/dist/reactComponents/Slider.jsx
@@ -22,7 +22,7 @@ var Slider = (function (_super) {
var _this = _super.call(this, props, context) || this;
_this.uid = makeGuid_1.default();
_this.startUid = makeGuid_1.default();
- _this.endUid = makeGuid_1.default();
+ _this.stopUid = makeGuid_1.default();
_this.intervalUid = makeGuid_1.default();
_this.previousUid = makeGuid_1.default();
_this.nextUid = makeGuid_1.default();
@@ -36,7 +36,7 @@ var Slider = (function (_super) {
this.maxVal = parseFloat(this.el.max);
this.step = parseFloat(this.el.step);
this.startButton = document.getElementById(this.startUid);
- this.endButton = document.getElementById(this.endUid);
+ this.stopButton = document.getElementById(this.stopUid);
this.previousButton = document.getElementById(this.previousUid);
this.nextButton = document.getElementById(this.nextUid);
this.intervalSelect = document.getElementById(this.intervalUid);
@@ -47,11 +47,11 @@ var Slider = (function (_super) {
}
};
Slider.prototype.updateRunning = function () {
- this.startButton.disabled = this.running;
+ this.el.disabled = this.running;
+ this.startButton.style.display = this.running ? 'none' : '';
+ this.stopButton.style.display = this.running ? '' : 'none';
this.nextButton.disabled = this.running;
this.previousButton.disabled = this.running;
- this.el.disabled = this.running;
- this.endButton.disabled = !this.running;
};
Slider.prototype.startAnimate = function () {
var _this = this;
@@ -124,7 +124,7 @@ var Slider = (function (_super) {
start = <button id={this.startUid} className="react-slider-start" onClick={function () {
_this.startAnimate();
}}>Start</button>;
- stop = <button id={this.endUid} className="react-slider-stop" onClick={function () {
+ stop = <button id={this.stopUid} className="react-slider-stop" onClick={function () {
_this.stopAnimate();
}}>Stop</button>;
intervalSelect = <span>
@@ -147,7 +147,9 @@ var Slider = (function (_super) {
}
return <div>
<input {...attrs}/>
- {previous}{start}{stop}{next}{intervalSelect}
+ <div className="react-slider-controls" style={{ textAlign: 'center' }}>
+ {previous}{start}{stop}{next}{intervalSelect}
+ </div>
</div>;
};
return Slider;
diff --git a/dist/reactComponents/Slider.jsx.map b/dist/reactComponents/Slider.jsx.map
index aac8c37..8ab9535 100644
--- a/dist/reactComponents/Slider.jsx.map
+++ b/dist/reactComponents/Slider.jsx.map
@@ -1 +1 @@
-{"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/reactComponents/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\nimport {React} from './reactAndRedux';\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\nimport {get_browser} from '../util/get_browser';\r\n\r\nexport interface iSlider {\r\n change: (d: number) => any;\r\n steps?: number;\r\n animate?: boolean;\r\n value?: number;\r\n}\r\n\r\nexport class Slider extends React.Component<iSlider, null> {\r\n private uid: string;\r\n private startUid: string;\r\n private endUid: string;\r\n private previousUid: string;\r\n private nextUid: string;\r\n private intervalUid: string;\r\n private el: HTMLInputElement;\r\n private previousButton: HTMLButtonElement;\r\n private nextButton: HTMLButtonElement;\r\n private startButton: HTMLButtonElement;\r\n private endButton: HTMLButtonElement;\r\n private intervalSelect: HTMLSelectElement;\r\n private interval: number;\r\n private running: boolean;\r\n private minVal: number;\r\n private maxVal: number;\r\n private step: number;\r\n\r\n constructor(props: iSlider, context: Object) {\r\n super(props, context);\r\n this.uid = makeGuid();\r\n this.startUid = makeGuid();\r\n this.endUid = makeGuid();\r\n this.intervalUid = makeGuid();\r\n this.previousUid = makeGuid();\r\n this.nextUid = makeGuid();\r\n this.running = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n this.minVal = parseFloat(this.el.min);\r\n this.maxVal = parseFloat(this.el.max);\r\n this.step = parseFloat(this.el.step);\r\n this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;\r\n this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;\r\n this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;\r\n this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n\r\n if (get_browser().name.toUpperCase().indexOf('IE') > -1) {\r\n this.el.onchange = (e) => {\r\n this.props.change(parseFloat(e.target['value']))\r\n }\r\n }\r\n }\r\n\r\n updateRunning() {\r\n this.startButton.disabled = this.running;\r\n this.nextButton.disabled = this.running;\r\n this.previousButton.disabled = this.running;\r\n this.el.disabled = this.running;\r\n this.endButton.disabled = !this.running;\r\n }\r\n\r\n startAnimate() {\r\n this.running = true;\r\n this.updateRunning();\r\n this.interval = setInterval(() => {\r\n let val = parseFloat(this.el.value);\r\n val += this.step;\r\n if (val > this.maxVal) {\r\n val = this.minVal\r\n }\r\n\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }, parseInt(this.intervalSelect.value));\r\n }\r\n\r\n stopAnimate() {\r\n clearInterval(this.interval);\r\n this.running = false;\r\n this.updateRunning();\r\n }\r\n\r\n restartAnimate() {\r\n if (this.running) {\r\n this.stopAnimate();\r\n this.startAnimate();\r\n }\r\n }\r\n\r\n increment(v: number) {\r\n let val = parseFloat(this.el.value);\r\n val = v > 0 ? val + this.step : val - this.step;\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }\r\n\r\n render() {\r\n let attrs = {\r\n id: this.uid,\r\n min: 0,\r\n type: 'range',\r\n onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n this.props.change(parseFloat(evt.target.value))\r\n },\r\n style: {width: '100%'},\r\n max: \"100\",\r\n step: '0.1',\r\n value: this.props.value ? this.props.value.toString() : '0',\r\n defaultValue: \"0\"\r\n };\r\n\r\n if (this.props.steps) {\r\n attrs.max = this.props.steps.toString();\r\n attrs.step = '1';\r\n }\r\n\r\n if (this.props.value) {\r\n delete attrs.defaultValue;\r\n } else {\r\n delete attrs.value;\r\n }\r\n\r\n\r\n let start = null;\r\n let stop = null;\r\n let previous = null;\r\n let next = null;\r\n let intervalSelect = null;\r\n\r\n if (this.props.animate) {\r\n previous = <button id={this.previousUid} className=\"react-slider-previous\" onClick={() => {\r\n this.increment(-1)\r\n }}>Previous</button>;\r\n\r\n next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n this.increment(1)\r\n }}>Next</button>;\r\n\r\n start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n this.startAnimate()\r\n }}>Start</button>;\r\n\r\n stop = <button id={this.endUid} className=\"react-slider-stop\" onClick={() => {\r\n this.stopAnimate()\r\n }}>Stop</button>;\r\n\r\n intervalSelect = <span>\r\n <label>Interval (s)</label>\r\n <select defaultValue=\"200\" id={this.intervalUid} onChange={() => {\r\n this.restartAnimate()\r\n }}>\r\n <option value=\"100\">0.1</option>\r\n <option value=\"200\">0.2</option>\r\n <option value=\"300\">0.3</option>\r\n <option value=\"400\">0.4</option>\r\n <option value=\"500\">0.5</option>\r\n <option value=\"600\">0.6</option>\r\n <option value=\"700\">0.7</option>\r\n <option value=\"800\">0.8</option>\r\n <option value=\"900\">0.9</option>\r\n <option value=\"1000\">1.0</option>\r\n </select>\r\n </span>;\r\n }\r\n\r\n return <div>\r\n <input {...attrs}/>\r\n {previous}{start}{stop}{next}{intervalSelect}\r\n </div>\r\n }\r\n\r\n}"]}
\ No newline at end of file
+{"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/reactComponents/Slider.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAEH,iDAAsC;AACtC,6CAAwC;AAExC,mDAAgD;AAShD;IAA4B,0BAA8B;IAmBtD,gBAAY,KAAc,EAAE,OAAe;QAA3C,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAQxB;QAPG,KAAI,CAAC,GAAG,GAAG,kBAAQ,EAAE,CAAC;QACtB,KAAI,CAAC,QAAQ,GAAG,kBAAQ,EAAE,CAAC;QAC3B,KAAI,CAAC,OAAO,GAAG,kBAAQ,EAAE,CAAC;QAC1B,KAAI,CAAC,WAAW,GAAG,kBAAQ,EAAE,CAAC;QAC9B,KAAI,CAAC,WAAW,GAAG,kBAAQ,EAAE,CAAC;QAC9B,KAAI,CAAC,OAAO,GAAG,kBAAQ,EAAE,CAAC;QAC1B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;;IACzB,CAAC;IAED,kCAAiB,GAAjB;QAAA,iBAgBC;QAfG,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAqB,CAAC;QAChE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAsB,CAAC;QAC/E,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAsB,CAAC;QAC7E,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAsB,CAAC;QACrF,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAsB,CAAC;QAC7E,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAsB,CAAC;QAErF,EAAE,CAAC,CAAC,yBAAW,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAC,CAAC;gBACjB,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YACpD,CAAC,CAAA;QACL,CAAC;IACL,CAAC;IAED,8BAAa,GAAb;QACI,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,EAAE,CAAC;QAC5D,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,MAAM,CAAC;QAE3D,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QACxC,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;IAChD,CAAC;IAED,6BAAY,GAAZ;QAAA,iBAaC;QAZG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;YACxB,IAAI,GAAG,GAAG,UAAU,CAAC,KAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;YACpC,GAAG,IAAI,KAAI,CAAC,IAAI,CAAC;YACjB,EAAE,CAAC,CAAC,GAAG,GAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC;gBACpB,GAAG,GAAG,KAAI,CAAC,MAAM,CAAA;YACrB,CAAC;YAED,KAAI,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC/B,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,4BAAW,GAAX;QACI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,+BAAc,GAAd;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YACf,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IAED,0BAAS,GAAT,UAAU,CAAS;QACf,IAAI,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACpC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC;IAED,uBAAM,GAAN;QAAA,iBA2EC;QA1EG,IAAI,KAAK,GAAG;YACR,EAAE,EAAE,IAAI,CAAC,GAAG;YACZ,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,UAAC,GAAkC;gBACzC,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACnD,CAAC;YACD,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC;YACtB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,GAAG;YAC3D,YAAY,EAAE,GAAG;SACpB,CAAC;QAEF,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACnB,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QACrB,CAAC;QAED,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YACnB,OAAO,KAAK,CAAC,YAAY,CAAC;QAC9B,CAAC;QAAC,IAAI,CAAC,CAAC;YACJ,OAAO,KAAK,CAAC,KAAK,CAAC;QACvB,CAAC;QAGD,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,cAAc,GAAG,IAAI,CAAC;QAE1B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACrB,QAAQ,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;gBAChF,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YACtB,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAErB,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;gBACpE,KAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;YACrB,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAEjB,KAAK,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;gBACvE,KAAI,CAAC,YAAY,EAAE,CAAA;YACvB,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAElB,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;gBACpE,KAAI,CAAC,WAAW,EAAE,CAAA;YACtB,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAEjB,cAAc,GAAG,CAAC,IAAI,CACtB;YAAA,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAC1B;YAAA,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;gBACvD,KAAI,CAAC,cAAc,EAAE,CAAA;YACzB,CAAC,CAAC,CACE;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CACpC;YAAA,EAAE,MAAM,CACR;YAAA,EAAE,IAAI,CAAC,CAAC;QACZ,CAAC;QAED,MAAM,CAAC,CAAC,GAAG,CACP;YAAA,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,EACjB;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,CAAC,CAChE;gBAAA,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAChD;YAAA,EAAE,GAAG,CACT;QAAA,EAAE,GAAG,CAAC,CAAA;IACV,CAAC;IAEL,aAAC;AAAD,CAAC,AA1KD,CAA4B,qBAAK,CAAC,SAAS,GA0K1C;AA1KY,wBAAM","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\nimport {React} from './reactAndRedux';\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\nimport {get_browser} from '../util/get_browser';\r\n\r\nexport interface iSlider {\r\n change: (d: number) => any;\r\n steps?: number;\r\n animate?: boolean;\r\n value?: number;\r\n}\r\n\r\nexport class Slider extends React.Component<iSlider, null> {\r\n private uid: string;\r\n private startUid: string;\r\n private stopUid: string;\r\n private previousUid: string;\r\n private nextUid: string;\r\n private intervalUid: string;\r\n private el: HTMLInputElement;\r\n private previousButton: HTMLButtonElement;\r\n private nextButton: HTMLButtonElement;\r\n private startButton: HTMLButtonElement;\r\n private stopButton: HTMLButtonElement;\r\n private intervalSelect: HTMLSelectElement;\r\n private interval: number;\r\n private running: boolean;\r\n private minVal: number;\r\n private maxVal: number;\r\n private step: number;\r\n\r\n constructor(props: iSlider, context: Object) {\r\n super(props, context);\r\n this.uid = makeGuid();\r\n this.startUid = makeGuid();\r\n this.stopUid = makeGuid();\r\n this.intervalUid = makeGuid();\r\n this.previousUid = makeGuid();\r\n this.nextUid = makeGuid();\r\n this.running = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n this.minVal = parseFloat(this.el.min);\r\n this.maxVal = parseFloat(this.el.max);\r\n this.step = parseFloat(this.el.step);\r\n this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n this.stopButton = document.getElementById(this.stopUid) as HTMLButtonElement;\r\n this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;\r\n this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;\r\n this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n\r\n if (get_browser().name.toUpperCase().indexOf('IE') > -1) {\r\n this.el.onchange = (e) => {\r\n this.props.change(parseFloat(e.target['value']))\r\n }\r\n }\r\n }\r\n\r\n updateRunning() {\r\n this.el.disabled = this.running;\r\n\r\n this.startButton.style.display = this.running ? 'none' : '';\r\n this.stopButton.style.display = this.running ? '' : 'none';\r\n\r\n this.nextButton.disabled = this.running;\r\n this.previousButton.disabled = this.running;\r\n }\r\n\r\n startAnimate() {\r\n this.running = true;\r\n this.updateRunning();\r\n this.interval = setInterval(() => {\r\n let val = parseFloat(this.el.value);\r\n val += this.step;\r\n if (val > this.maxVal) {\r\n val = this.minVal\r\n }\r\n\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }, parseInt(this.intervalSelect.value));\r\n }\r\n\r\n stopAnimate() {\r\n clearInterval(this.interval);\r\n this.running = false;\r\n this.updateRunning();\r\n }\r\n\r\n restartAnimate() {\r\n if (this.running) {\r\n this.stopAnimate();\r\n this.startAnimate();\r\n }\r\n }\r\n\r\n increment(v: number) {\r\n let val = parseFloat(this.el.value);\r\n val = v > 0 ? val + this.step : val - this.step;\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }\r\n\r\n render() {\r\n let attrs = {\r\n id: this.uid,\r\n min: 0,\r\n type: 'range',\r\n onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n this.props.change(parseFloat(evt.target.value))\r\n },\r\n style: {width: '100%'},\r\n max: \"100\",\r\n step: '0.1',\r\n value: this.props.value ? this.props.value.toString() : '0',\r\n defaultValue: \"0\"\r\n };\r\n\r\n if (this.props.steps) {\r\n attrs.max = this.props.steps.toString();\r\n attrs.step = '1';\r\n }\r\n\r\n if (this.props.value) {\r\n delete attrs.defaultValue;\r\n } else {\r\n delete attrs.value;\r\n }\r\n\r\n\r\n let start = null;\r\n let stop = null;\r\n let previous = null;\r\n let next = null;\r\n let intervalSelect = null;\r\n\r\n if (this.props.animate) {\r\n previous = <button id={this.previousUid} className=\"react-slider-previous\" onClick={() => {\r\n this.increment(-1)\r\n }}>Previous</button>;\r\n\r\n next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n this.increment(1)\r\n }}>Next</button>;\r\n\r\n start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n this.startAnimate()\r\n }}>Start</button>;\r\n\r\n stop = <button id={this.stopUid} className=\"react-slider-stop\" onClick={() => {\r\n this.stopAnimate()\r\n }}>Stop</button>;\r\n\r\n intervalSelect = <span>\r\n <label>Interval (s)</label>\r\n <select defaultValue=\"200\" id={this.intervalUid} onChange={() => {\r\n this.restartAnimate()\r\n }}>\r\n <option value=\"100\">0.1</option>\r\n <option value=\"200\">0.2</option>\r\n <option value=\"300\">0.3</option>\r\n <option value=\"400\">0.4</option>\r\n <option value=\"500\">0.5</option>\r\n <option value=\"600\">0.6</option>\r\n <option value=\"700\">0.7</option>\r\n <option value=\"800\">0.8</option>\r\n <option value=\"900\">0.9</option>\r\n <option value=\"1000\">1.0</option>\r\n </select>\r\n </span>;\r\n }\r\n\r\n return <div>\r\n <input {...attrs}/>\r\n <div className=\"react-slider-controls\" style={{textAlign: 'center'}}>\r\n {previous}{start}{stop}{next}{intervalSelect}\r\n </div>\r\n </div>\r\n }\r\n\r\n}"]}
\ No newline at end of file
diff --git a/src/reactComponents/Slider.tsx b/src/reactComponents/Slider.tsx
index 948fe6e..32acdb1 100644
--- a/src/reactComponents/Slider.tsx
+++ b/src/reactComponents/Slider.tsx
@@ -17,7 +17,7 @@ export interface iSlider {
export class Slider extends React.Component<iSlider, null> {
private uid: string;
private startUid: string;
- private endUid: string;
+ private stopUid: string;
private previousUid: string;
private nextUid: string;
private intervalUid: string;
@@ -25,7 +25,7 @@ export class Slider extends React.Component<iSlider, null> {
private previousButton: HTMLButtonElement;
private nextButton: HTMLButtonElement;
private startButton: HTMLButtonElement;
- private endButton: HTMLButtonElement;
+ private stopButton: HTMLButtonElement;
private intervalSelect: HTMLSelectElement;
private interval: number;
private running: boolean;
@@ -37,7 +37,7 @@ export class Slider extends React.Component<iSlider, null> {
super(props, context);
this.uid = makeGuid();
this.startUid = makeGuid();
- this.endUid = makeGuid();
+ this.stopUid = makeGuid();
this.intervalUid = makeGuid();
this.previousUid = makeGuid();
this.nextUid = makeGuid();
@@ -50,7 +50,7 @@ export class Slider extends React.Component<iSlider, null> {
this.maxVal = parseFloat(this.el.max);
this.step = parseFloat(this.el.step);
this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;
- this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;
+ this.stopButton = document.getElementById(this.stopUid) as HTMLButtonElement;
this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;
this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;
this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;
@@ -63,11 +63,13 @@ export class Slider extends React.Component<iSlider, null> {
}
updateRunning() {
- this.startButton.disabled = this.running;
+ this.el.disabled = this.running;
+
+ this.startButton.style.display = this.running ? 'none' : '';
+ this.stopButton.style.display = this.running ? '' : 'none';
+
this.nextButton.disabled = this.running;
this.previousButton.disabled = this.running;
- this.el.disabled = this.running;
- this.endButton.disabled = !this.running;
}
startAnimate() {
@@ -151,7 +153,7 @@ export class Slider extends React.Component<iSlider, null> {
this.startAnimate()
}}>Start</button>;
- stop = <button id={this.endUid} className="react-slider-stop" onClick={() => {
+ stop = <button id={this.stopUid} className="react-slider-stop" onClick={() => {
this.stopAnimate()
}}>Stop</button>;
@@ -176,7 +178,9 @@ export class Slider extends React.Component<iSlider, null> {
return <div>
<input {...attrs}/>
- {previous}{start}{stop}{next}{intervalSelect}
+ <div className="react-slider-controls" style={{textAlign: 'center'}}>
+ {previous}{start}{stop}{next}{intervalSelect}
+ </div>
</div>
}
--
GitLab