aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components/utils.jsx.js
blob: 22aca577c62edb5c895abcff020ac000e8769bb3 (plain)
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
//React utils. For other utilities, see ../utils.js

var Splitter = React.createClass({
    getDefaultProps: function () {
        return {
            axis: "x"
        };
    },
    getInitialState: function(){
        return {
            applied: false,
            startX: false,
            startY: false
        };
    },
    onMouseDown: function(e){
        this.setState({
            startX: e.pageX,
            startY: e.pageY
        });
        window.addEventListener("mousemove",this.onMouseMove);
        window.addEventListener("mouseup",this.onMouseUp);
        // Occasionally, only a dragEnd event is triggered, but no mouseUp.
        window.addEventListener("dragend",this.onDragEnd);
    },
    onDragEnd: function(){
        this.getDOMNode().style.transform="";
        window.removeEventListener("dragend",this.onDragEnd);
        window.removeEventListener("mouseup",this.onMouseUp);
        window.removeEventListener("mousemove",this.onMouseMove);
    },
    onMouseUp: function(e){
        this.onDragEnd();

        var node = this.getDOMNode();
        var prev = node.previousElementSibling;
        var next = node.nextElementSibling;

        var dX = e.pageX-this.state.startX;
        var dY = e.pageY-this.state.startY;
        var flexBasis;
        if(this.props.axis === "x"){
            flexBasis = prev.offsetWidth + dX;
        } else {
            flexBasis = prev.offsetHeight + dY;
        }

        prev.style.flex = "0 0 "+Math.max(0, flexBasis)+"px";   
        next.style.flex = "1 1 auto";

        this.setState({
            applied: true
        });
    },
    onMouseMove: function(e){
        var dX = 0, dY = 0;
        if(this.props.axis === "x"){
            dX = e.pageX-this.state.startX;
        } else {
            dY = e.pageY-this.state.startY;
        }
        this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
    },
    reset: function(willUnmount) {
        if (!this.state.applied) {
            return;
        }
        var node = this.getDOMNode();
        var prev = node.previousElementSibling;
        var next = node.nextElementSibling;
        
        prev.style.flex = "";
        next.style.flex = "";

        if(!willUnmount){
            this.setState({
                applied: false
            });
        }

    },
    componentWillUnmount: function(){
        this.reset(true);
    },
    render: function(){
        var className = "splitter";
        if(this.props.axis === "x"){
            className += " splitter-x";
        } else {
            className += " splitter-y";
        }
        return (
            <div className={className}>
                <div onMouseDown={this.onMouseDown} draggable="true"></div>
            </div>
        );
    }
});