Skip to content
Snippets Groups Projects
Commit 5ab5a710 authored by Glenn Vorhes's avatar Glenn Vorhes
Browse files

add interval

parent 5b85d41e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
dist/reactComponents/Slider.d.ts
+ 1
− 0
View file @ 5ab5a710
......@@ -7,6 +7,7 @@ export interface iSlider {
change: (d: number) => any;
steps?: number;
animate?: boolean;
defaultAnimationInterval?: number;
value?: number;
}
export declare class Slider extends React.Component<iSlider, null> {
......
dist/reactComponents/Slider.jsx
+ 6
− 1
View file @ 5ab5a710
......@@ -115,6 +115,10 @@ var Slider = (function (_super) {
var previous = null;
var next = null;
var intervalSelect = null;
var interval = "200";
if (this.props.defaultAnimationInterval) {
interval = this.props.defaultAnimationInterval.toFixed();
}
if (this.props.animate) {
previous = <button id={this.previousUid} className="react-slider-previous" onClick={function () {
_this.increment(-1);
......@@ -129,8 +133,9 @@ var Slider = (function (_super) {
_this.stopAnimate();
}} title="Stop"/>;
intervalSelect = <span>
<label style={{ fontWeight: 'bold', marginRight: '3px' }}>Interval (s)</label>
<select defaultValue="200" id={this.intervalUid} onChange={function () {
<select defaultValue={interval} id={this.intervalUid} onChange={function () {
_this.restartAnimate();
}}>
<option value="100">0.1</option>
......
dist/reactComponents/Slider.jsx.map
+ 1
− 1
View file @ 5ab5a710
{"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 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.stopButton.style.display = 'none';\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%', padding: '4px 0'},\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 }} title=\"Previous\"/>;\r\n\r\n next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n this.increment(1)\r\n }} title=\"Next\"/>;\r\n\r\n start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n this.startAnimate()\r\n }} title=\"Start\"/>;\r\n\r\n stop = <button id={this.stopUid} className=\"react-slider-stop\" onClick={() => {\r\n this.stopAnimate()\r\n }} title=\"Stop\"/>;\r\n\r\n intervalSelect = <span>\r\n <label style={{fontWeight: 'bold', marginRight: '3px'}}>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 className=\"react-slider\">\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
{"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 defaultAnimationInterval?: number;\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.stopButton.style.display = 'none';\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%', padding: '4px 0'},\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 let interval = \"200\";\r\n\r\n if (this.props.defaultAnimationInterval){\r\n interval = this.props.defaultAnimationInterval.toFixed();\r\n }\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 }} title=\"Previous\"/>;\r\n\r\n next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n this.increment(1)\r\n }} title=\"Next\"/>;\r\n\r\n start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n this.startAnimate()\r\n }} title=\"Start\"/>;\r\n\r\n stop = <button id={this.stopUid} className=\"react-slider-stop\" onClick={() => {\r\n this.stopAnimate()\r\n }} title=\"Stop\"/>;\r\n\r\n intervalSelect = <span>\r\n \r\n <label style={{fontWeight: 'bold', marginRight: '3px'}}>Interval (s)</label>\r\n <select defaultValue={interval} 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 className=\"react-slider\">\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
src/reactComponents/Slider.tsx
+ 9
− 1
View file @ 5ab5a710
......@@ -11,6 +11,7 @@ export interface iSlider {
change: (d: number) => any;
steps?: number;
animate?: boolean;
defaultAnimationInterval?: number;
value?: number;
}
......@@ -141,6 +142,12 @@ export class Slider extends React.Component<iSlider, null> {
let next = null;
let intervalSelect = null;
let interval = "200";
if (this.props.defaultAnimationInterval){
interval = this.props.defaultAnimationInterval.toFixed();
}
if (this.props.animate) {
previous = <button id={this.previousUid} className="react-slider-previous" onClick={() => {
this.increment(-1)
......@@ -159,8 +166,9 @@ export class Slider extends React.Component<iSlider, null> {
}} title="Stop"/>;
intervalSelect = <span>
<label style={{fontWeight: 'bold', marginRight: '3px'}}>Interval (s)</label>
<select defaultValue="200" id={this.intervalUid} onChange={() => {
<select defaultValue={interval} id={this.intervalUid} onChange={() => {
this.restartAnimate()
}}>
<option value="100">0.1</option>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment