-
Notifications
You must be signed in to change notification settings - Fork 64
/
browser-navbar.jsx
44 lines (37 loc) · 1.77 KB
/
browser-navbar.jsx
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
function normalizedUri(input) {
var prefix = 'http://';
if (!/^([^:\/]+)(:\/\/)/g.test(input) && !prefix.includes(input)) {
input = prefix + input;
}
return input;
}
var BrowserNavbarBtn = React.createClass({
render: function() {
return <a href="#" className={this.props.disabled?'disabled':''} title={this.props.title} onClick={this.props.onClick}><i className={'fa fa-'+this.props.icon} /></a>
}
})
var BrowserNavbarLocation = React.createClass({
onKeyDown: function (e) {
if (e.keyCode == 13)
this.props.onEnterLocation(normalizedUri(e.target.value))
},
onChange: function (e) {
this.props.onChangeLocation(normalizedUri(e.target.value))
},
render: function() {
return <input type="text" onKeyDown={this.onKeyDown} onChange={this.onChange} onContextMenu={this.props.onContextMenu} value={this.props.page.location} />
}
})
var BrowserNavbar = React.createClass({
render: function() {
return <div id="browser-navbar">
<BrowserNavbarBtn title="Rewind" icon="angle-double-left fa-lg" onClick={this.props.onClickHome} disabled={!this.props.page.canGoBack} />
<BrowserNavbarBtn title="Back" icon="angle-left fa-lg" onClick={this.props.onClickBack} disabled={!this.props.page.canGoBack} />
<BrowserNavbarBtn title="Forward" icon="angle-right fa-lg" onClick={this.props.onClickForward} disabled={!this.props.page.canGoForward} />
<BrowserNavbarBtn title="Refresh" icon="circle-thin" onClick={this.props.onClickRefresh} disabled={!this.props.page.canRefresh} />
<div className="input-group">
<BrowserNavbarLocation onEnterLocation={this.props.onEnterLocation} onChangeLocation={this.props.onChangeLocation} onContextMenu={this.props.onLocationContextMenu} page={this.props.page} />
</div>
</div>
}
})