scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Handle relaunch requests from the iframe

Browse source 
Only attach the message listener when the modal is displaying. This prevents multiple listeners being set up by multiple registration components on the page.

Also, scope the `onMessage` handler to that component's iframe, so that we don't respond to other component's messages.
This commit is contained in:
Ray Schamp 2015-10-24 18:34:00 -04:00
parent b9ecbae5ae
commit a2327632a5
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/registration/registration.jsx
View file

@ -13,13 +13,27 @@ var Registration = React.createClass({
}, },
onMessage: function (e) { onMessage: function (e) {
if (e.origin != window.location.origin) return; if (e.origin != window.location.origin) return;
if (e.source != this.refs.registrationIframe.contentWindow) return;
if (e.data == 'registration-done') this.props.onRegistrationDone(); if (e.data == 'registration-done') this.props.onRegistrationDone();
if (e.data == 'registration-relaunch') {
this.refs.registrationIframe.contentWindow.location.reload();
}
},
toggleMessageListener: function (present) {
if (present) {
window.addEventListener('message', this.onMessage);
} else {
window.removeEventListener('message', this.onMessage);
}
}, },
componentDidMount: function () { componentDidMount: function () {
window.addEventListener('message', this.onMessage); if (this.props.isOpen) this.toggleMessageListener(true);
},
componentDidUpdate: function (prevProps) {
this.toggleMessageListener(this.props.isOpen && !prevProps.isOpen);
}, },
componentWillUnmount: function () { componentWillUnmount: function () {
window.removeEventListener('message', this.onMessage); this.toggleMessageListener(false);
}, },
render: function () { render: function () {
var frameSettings = { var frameSettings = {
@ -32,7 +46,7 @@ var Registration = React.createClass({
onRequestClose={this.props.onRequestClose} onRequestClose={this.props.onRequestClose}
className="registration" className="registration"
frameSettings={frameSettings}> frameSettings={frameSettings}>
<iframe src="/accounts/standalone-registration/" {...frameSettings} /> <iframe ref="registrationIframe" src="/accounts/standalone-registration/" {...frameSettings} />
</Modal> </Modal>
); );
} }