Newer
Older
{"version":3,"file":"Slider.js","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 if (this.props.animate){\r\n this.stopButton.style.display = 'none';\r\n }\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}"]}