diff options
author | 2019-10-01 21:51:34 +0200 | |
---|---|---|
committer | 2019-10-01 21:51:34 +0200 | |
commit | f8fbaad43522b91374eaed5e3df6fe47bc94862f (patch) | |
tree | e39b6301c183fe5e87c81f4f340e701faed2d3aa /src/features/webControls/containers | |
parent | feat(Service API): Share `team`, `url` and `hasCustomIcon` with service (diff) | |
download | ferdium-app-f8fbaad43522b91374eaed5e3df6fe47bc94862f.tar.gz ferdium-app-f8fbaad43522b91374eaed5e3df6fe47bc94862f.tar.zst ferdium-app-f8fbaad43522b91374eaed5e3df6fe47bc94862f.zip |
feat(Custom Websites): Add simple browser controls
Diffstat (limited to 'src/features/webControls/containers')
-rw-r--r-- | src/features/webControls/containers/WebControlsScreen.js | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js new file mode 100644 index 000000000..1452d5a3d --- /dev/null +++ b/src/features/webControls/containers/WebControlsScreen.js | |||
@@ -0,0 +1,128 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | |||
5 | import { autorun, observable } from 'mobx'; | ||
6 | import WebControls from '../components/WebControls'; | ||
7 | import ServicesStore from '../../../stores/ServicesStore'; | ||
8 | import Service from '../../../models/Service'; | ||
9 | |||
10 | const URL_EVENTS = [ | ||
11 | 'load-commit', | ||
12 | // 'dom-ready', | ||
13 | 'will-navigate', | ||
14 | 'did-navigate', | ||
15 | 'did-navigate-in-page', | ||
16 | ]; | ||
17 | |||
18 | @inject('stores', 'actions') @observer | ||
19 | class WebControlsScreen extends Component { | ||
20 | @observable url = ''; | ||
21 | |||
22 | @observable canGoBack = false; | ||
23 | |||
24 | @observable canGoForward = false; | ||
25 | |||
26 | webview = null; | ||
27 | |||
28 | autorunDisposer = null; | ||
29 | |||
30 | componentDidMount() { | ||
31 | const { service } = this.props; | ||
32 | |||
33 | this.autorunDisposer = autorun(() => { | ||
34 | if (service.isAttached) { | ||
35 | this.webview = service.webview; | ||
36 | |||
37 | URL_EVENTS.forEach((event) => { | ||
38 | this.webview.addEventListener(event, (e) => { | ||
39 | if (!e.isMainFrame) return; | ||
40 | |||
41 | this.url = e.url; | ||
42 | this.canGoBack = this.webview.canGoBack(); | ||
43 | this.canGoForward = this.webview.canGoForward(); | ||
44 | }); | ||
45 | }); | ||
46 | } | ||
47 | }); | ||
48 | } | ||
49 | |||
50 | componentWillUnmount() { | ||
51 | this.autorunDisposer(); | ||
52 | } | ||
53 | |||
54 | goHome() { | ||
55 | const { reloadActive } = this.props.actions.service; | ||
56 | |||
57 | if (!this.webview) return; | ||
58 | |||
59 | reloadActive(); | ||
60 | } | ||
61 | |||
62 | reload() { | ||
63 | if (!this.webview) return; | ||
64 | |||
65 | this.webview.reload(); | ||
66 | } | ||
67 | |||
68 | goBack() { | ||
69 | if (!this.webview) return; | ||
70 | |||
71 | this.webview.goBack(); | ||
72 | } | ||
73 | |||
74 | goForward() { | ||
75 | if (!this.webview) return; | ||
76 | |||
77 | this.webview.goForward(); | ||
78 | } | ||
79 | |||
80 | navigate(newUrl) { | ||
81 | if (!this.webview) return; | ||
82 | |||
83 | let url = newUrl; | ||
84 | |||
85 | try { | ||
86 | url = new URL(url).toString(); | ||
87 | } catch (err) { | ||
88 | // eslint-disable-next-line no-useless-escape | ||
89 | if (url.match(/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9\-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/)) { | ||
90 | url = `http://${url}`; | ||
91 | } else { | ||
92 | url = `https://www.google.com/search?query=${url}`; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | this.webview.loadURL(url); | ||
97 | this.url = url; | ||
98 | } | ||
99 | |||
100 | render() { | ||
101 | return ( | ||
102 | <WebControls | ||
103 | goHome={() => this.goHome()} | ||
104 | reload={() => this.reload()} | ||
105 | canGoBack={this.canGoBack} | ||
106 | goBack={() => this.goBack()} | ||
107 | canGoForward={this.canGoForward} | ||
108 | goForward={() => this.goForward()} | ||
109 | navigate={url => this.navigate(url)} | ||
110 | url={this.url} | ||
111 | /> | ||
112 | ); | ||
113 | } | ||
114 | } | ||
115 | |||
116 | export default WebControlsScreen; | ||
117 | |||
118 | WebControlsScreen.wrappedComponent.propTypes = { | ||
119 | service: PropTypes.instanceOf(Service).isRequired, | ||
120 | stores: PropTypes.shape({ | ||
121 | services: PropTypes.instanceOf(ServicesStore).isRequired, | ||
122 | }).isRequired, | ||
123 | actions: PropTypes.shape({ | ||
124 | service: PropTypes.shape({ | ||
125 | reloadActive: PropTypes.func.isRequired, | ||
126 | }).isRequired, | ||
127 | }).isRequired, | ||
128 | }; | ||