From a6dad66d872e5c2ea361c8145efcedb26ce6bb55 Mon Sep 17 00:00:00 2001 From: Shou Date: Wed, 17 May 2017 16:02:59 +0100 Subject: [PATCH] conflate state functionality; shouldLoad -> shouldShow --- lib/gui/app.js | 20 ++-- .../components/safe-webview/safe-webview.js | 113 ++++++++++-------- lib/gui/index.html | 6 +- 3 files changed, 76 insertions(+), 63 deletions(-) diff --git a/lib/gui/app.js b/lib/gui/app.js index c68ce4c006e..834d3168a92 100644 --- a/lib/gui/app.js +++ b/lib/gui/app.js @@ -301,15 +301,19 @@ app.controller('HeaderController', function(SelectionStateModel, OSOpenExternalS app.controller('StateController', function($rootScope, $state) { /** - * @param {string} state - state page - */ - this.is = $state.is; - - /** - * @param {function} func - function to pass $rootScope to + * @summary Get the current state name + * @function + * @public + * + * @returns {String} current state name + * + * @example + * if (StateController.currentName() === 'main') { + * console.log('We are on the main screen!'); + * } */ - this.onStateChange = (func) => { - $rootScope.$on('$stateChangeSuccess', func); + this.currentName = () => { + return $state.current.name; }; }); diff --git a/lib/gui/components/safe-webview/safe-webview.js b/lib/gui/components/safe-webview/safe-webview.js index eca4c2839ac..cbdd2c9c055 100644 --- a/lib/gui/components/safe-webview/safe-webview.js +++ b/lib/gui/components/safe-webview/safe-webview.js @@ -42,7 +42,7 @@ class SafeWebview extends react.PureComponent { super(props); this.state = { - shouldLoad: true + shouldShow: true }; // Events steal 'this' @@ -54,63 +54,56 @@ class SafeWebview extends react.PureComponent { * @returns {react.Element} */ render() { - if (this.state.shouldLoad) { - const url = new URL(this.props.src); - - // We set the 'etcher-version' GET parameter here. - url.searchParams.set('etcher-version', packageJSON.version); - - return react.createElement('webview', { - ref: 'webview', - src: url.href - }, []); - } - - // We have to return null explicitly, undefined is an error in React. - return null; + return react.createElement('webview', { + ref: 'webview', + src: this.makeURL().href, + style: { + flex: this.state.shouldShow ? null : '0 1', + width: this.state.shouldShow ? null : '0', + height: this.state.shouldShow ? null : '0' + } + }, []); } /** - * @summary Add the Webview events if there is an element + * @summary Add the Webview events */ componentDidMount() { - // There is no element to add events to if 'shouldLoad' is false. - if (this.state.shouldLoad) { - - // Events React is unaware of have to be handled manually - this.refs.webview.addEventListener('did-fail-load', this.didFailLoad); - this.refs.webview.addEventListener('did-get-response-details', this.didGetResponseDetails); - this.refs.webview.addEventListener('new-window', this.constructor.newWindow); - this.refs.webview.addEventListener('console-message', this.constructor.consoleMessage); - - if (this.props.onStateChange) { - this.props.onStateChange((event, toState, toParams, fromState) => { - if (fromState.name === 'success' && this.state.shouldLoad) { - this.refs.webview.src = this.props.src; - this.refs.webview.reload(); - } - }); - } - } + // Events React is unaware of have to be handled manually + this.refs.webview.addEventListener('did-fail-load', this.didFailLoad); + this.refs.webview.addEventListener('did-get-response-details', this.didGetResponseDetails); + this.refs.webview.addEventListener('new-window', this.constructor.newWindow); + this.refs.webview.addEventListener('console-message', this.constructor.consoleMessage); } /** - * @summary Remove the Webview events if there is an element + * @summary Refresh the webview if we are navigating away from the success page + * @param {Object} nextProps - upcoming properties */ - componentWillUnmount() { - - // There is no element to remove events from if 'shouldLoad' is false. - if (this.state.shouldLoad) { + componentWillReceiveProps(nextProps) { + if (this.props.currentStateName === 'success' && nextProps.currentStateName !== 'success') { - // Events React is unaware of have to be handled manually - this.refs.webview.removeEventListener('did-fail-load', this.didFailLoad); - this.refs.webview.removeEventListener('did-get-response-details', this.didGetResponseDetails); - this.refs.webview.removeEventListener('new-window', this.constructor.newWindow); - this.refs.webview.removeEventListener('console-message', this.constructor.consoleMessage); + // Reset URL to initial + this.refs.webview.src = this.makeURL().href; + this.refs.webview.reload(); + this.setState({ + shouldShow: true + }); } + } + /** + * @summary Remove the Webview events + */ + componentWillUnmount() { + + // Events React is unaware of have to be handled manually + this.refs.webview.removeEventListener('did-fail-load', this.didFailLoad); + this.refs.webview.removeEventListener('did-get-response-details', this.didGetResponseDetails); + this.refs.webview.removeEventListener('new-window', this.constructor.newWindow); + this.refs.webview.removeEventListener('console-message', this.constructor.consoleMessage); } /** @@ -118,7 +111,7 @@ class SafeWebview extends react.PureComponent { */ didFailLoad() { this.setState({ - shouldLoad: false + shouldShow: false }); } @@ -130,14 +123,13 @@ class SafeWebview extends react.PureComponent { const HTTP_OK = 200; const HTTP_ERR = 400; - if (event.httpResponseCode < HTTP_OK || event.httpResponseCode >= HTTP_ERR) { - this.setState({ - shouldLoad: false - }); - } + this.setState({ + shouldShow: event.httpResponseCode >= HTTP_OK && event.httpResponseCode < HTTP_ERR + }); } /** + * @summary Open link in browser if it's opened as a 'foreground-tab' * @param {Event} event - event object */ static newWindow(event) { @@ -152,6 +144,7 @@ class SafeWebview extends react.PureComponent { } /** + * @summary Forward console messages from the webview to analytics module * @param {Event} event - event object */ static consoleMessage(event) { @@ -165,6 +158,22 @@ class SafeWebview extends react.PureComponent { } } + /** + * @summary Parse the 'src' prop into an URL and append metadata as GET parameters + * @function + * @public + * + * @returns {URL} url object + */ + makeURL() { + const url = new URL(this.props.src); + + // We set the 'etcher-version' GET parameter here. + url.searchParams.set('etcher-version', packageJSON.version); + + return url; + } + } SafeWebview.propTypes = { @@ -175,9 +184,9 @@ SafeWebview.propTypes = { src: propTypes.string.isRequired, /** - * @summary Inject Angular functionality + * @summary Current Angular $state name */ - onStateChange: propTypes.func + currentStateName: propTypes.string }; diff --git a/lib/gui/index.html b/lib/gui/index.html index a335597a15a..16759b905fa 100644 --- a/lib/gui/index.html +++ b/lib/gui/index.html @@ -31,7 +31,7 @@