hyper-mac-controls/index.js at master · krve/hyper-mac-controls · GitHub

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
117
118
119
120
121
122
123
124
125
126
'use strict'

const isWin = process.platform === 'win32';
let dirname = __dirname;

if (isWin == true) {
    dirname = dirname.replace(/\\/g, '/');
}

exports.decorateConfig = (config) => {
    const pluginConfig = Object.assign({
        flipped: true,
    }, config.hyperMacControls);

    const windowControls = config.showWindowControls;

    if (windowControls === false) {
        return config;
    }

    let isLeft = windowControls === 'left';

    return Object.assign({}, config, {
        css: `
            ${config.css || ''}
            .header_windowHeader {
                height: 22px;
                left: ${isLeft ? '57px' : '0'};
                width: calc(100% - 56px);
            }
            .header_windowControls {
                display: none;
            }
            .header_appTitle {
                margin-left: -56px;
            }
            .mac_header {
                position: fixed;
                top: 0;
                ${isLeft ? 'left: 0;' : 'right: 0;'}
                height: 22px;
                width: 56px;
            }
            .mac_actions {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
            }
            .mac_header .mac_close,
            .mac_header .mac_minimize,
            .mac_header .mac_maximize {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                position: absolute;
                top: 5px;
                background-position: -6px;
            }
            .mac_header .mac_close {
                background-color: #f25056;
                background-image: url('${dirname}/icons/close.svg');
                left: ${pluginConfig.flipped ? '5px' : '40px'};
            }
            .mac_header .mac_close:hover {
                background-image: url('${dirname}/icons/close_hover.svg');
            }
            .mac_header .mac_minimize {
                background-color: #fac536;
                background-image: url('${dirname}/icons/minimize.svg');
                left: 23px;
            }
            .mac_header .mac_minimize:hover {
                background-image: url('${dirname}/icons/minimize_hover.svg');
            }
            .mac_header .mac_maximize {
                background-color: #39ea49;
                background-image: url('${dirname}/icons/maximize.svg');
                left: ${pluginConfig.flipped ? '40px' : '5px'};
            }
            .mac_header .mac_maximize:hover {
                background-image: url('${dirname}/icons/maximize_hover.svg');
            }
        `
    })
};

exports.decorateHeader = (Hyper, { React }) => {
    return class extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                maximized: false
            }

            this.props = props;
            this.maximizeApp = this.maximizeApp.bind(this);
        }

        maximizeApp() {
            if (this.state.maximized == true) {
                this.props.unmaximize()
                this.state.maximized = false;
            } else {
                this.props.maximize()
                this.state.maximized = true;
            }
        }

        render() {
            return (
                React.createElement(Hyper, Object.assign({}, this.props, {
                    customChildren: React.createElement('div', { className: 'mac_header' },
                        React.createElement('div', { className: 'mac_actions' },
                            React.createElement('span', { className: 'mac_close', onClick: this.props.close }),
                            React.createElement('span', { className: 'mac_minimize', onClick: this.props.minimize }),
                            React.createElement('span', { className: 'mac_maximize', onClick: this.maximizeApp })
                        )
                    ),
                }))
            )
        }
    };
};