Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
  • to-ol5
  • coverage
3 results
Blame Permalink
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Slider.jsx 4.52 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116 






/**
 * Created by glenn on 7/6/2017.
 */
"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var reactRedux_1 = require("./reactRedux");
var makeGuid_1 = require("../util/makeGuid");
var Slider = (function (_super) {
    __extends(Slider, _super);
    function Slider(props, context) {
        var _this = _super.call(this, props, context) || this;
        _this.uid = makeGuid_1.default();
        _this.startUid = makeGuid_1.default();
        _this.endUid = makeGuid_1.default();
        _this.intervalUid = makeGuid_1.default();
        _this.running = false;
        return _this;
    }
    Slider.prototype.componentDidMount = function () {
        this.el = document.getElementById(this.uid);
        this.minVal = parseFloat(this.el.min);
        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.intervalSelect = document.getElementById(this.intervalUid);
    };
    Slider.prototype.updateRunning = function () {
        this.startButton.disabled = this.running;
        this.el.disabled = this.running;
        this.endButton.disabled = !this.running;
    };
    Slider.prototype.startAnimate = function () {
        var _this = this;
        this.running = true;
        this.updateRunning();
        this.interval = setInterval(function () {
            var val = parseFloat(_this.el.value);
            val += _this.step;
            if (val > _this.maxVal) {
                val = _this.minVal;
            }
            _this.el.value = val.toString();
            _this.props.change(val);
            console.log(parseFloat(_this.el.value));
        }, parseInt(this.intervalSelect.value));
    };
    Slider.prototype.stopAnimate = function () {
        clearInterval(this.interval);
        this.running = false;
        this.updateRunning();
    };
    Slider.prototype.restartAnimate = function () {
        if (this.running) {
            this.stopAnimate();
            this.startAnimate();
        }
    };
    Slider.prototype.render = function () {
        var _this = this;
        var theInput;
        if (this.props.steps) {
            theInput = <input id={this.uid} type="range" min="0" max={this.props.steps} step={1} defaultValue="0" onChange={function (evt) {
                _this.props.change(parseFloat(evt.target.value));
            }} style={{ width: '100%' }}/>;
        }
        else {
            theInput = <input id={this.uid} type="range" min="0" max="100" step="0.1" defaultValue="0" onChange={function (evt) {
                _this.props.change(parseFloat(evt.target.value));
            }} style={{ width: '100%' }}/>;
        }
        var start = null;
        var stop = null;
        var intervalSelect = null;
        if (this.props.animate) {
            start = <button id={this.startUid} onClick={function () {
                _this.startAnimate();
            }}>Start</button>;
            stop = <button id={this.endUid} onClick={function () {
                _this.stopAnimate();
            }}>Stop</button>;
            intervalSelect = <span>
            <label>Interval (s)</label>
            <select defaultValue="200" id={this.intervalUid} onChange={function () { _this.restartAnimate(); }}>
                <option value="100">0.1</option>
                <option value="200">0.2</option>
                <option value="300">0.3</option>
                <option value="400">0.4</option>
                <option value="500">0.5</option>
                <option value="600">0.6</option>
                <option value="700">0.7</option>
                <option value="800">0.8</option>
                <option value="900">0.9</option>
                <option value="1000">1.0</option>
            </select>
            </span>;
        }
        return <div>
            {theInput}
            {start}{stop}{intervalSelect}
        </div>;
    };
    return Slider;
}(reactRedux_1.React.Component));
exports.Slider = Slider;
//# sourceMappingURL=Slider.jsx.map