diff --git a/web/app/components/dropdown/dropdown.jsx b/web/app/components/dropdown/dropdown.jsx index 439d11df..c28773f5 100644 --- a/web/app/components/dropdown/dropdown.jsx +++ b/web/app/components/dropdown/dropdown.jsx @@ -13,6 +13,7 @@ export default class Dropdown extends Component { this.onTitleClick = this.onTitleClick.bind(this); this.onOutsideClick = this.onOutsideClick.bind(this); + this.receiveMessage = this.receiveMessage.bind(this); } onTitleClick() { @@ -25,6 +26,20 @@ export default class Dropdown extends Component { } } + receiveMessage(e) { + try { + const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; + + if (data.clickOutside) { + if (this.state.isActive) { + this.setState({ + isActive: false, + }); + } + } + } catch (e) {} + } + onOutsideClick(e) { if (!this.rootNode.contains(e.target)) { if (this.state.isActive) { @@ -38,17 +53,13 @@ export default class Dropdown extends Component { componentDidMount() { document.addEventListener('click', this.onOutsideClick); - if (parent) { - parent.document.addEventListener('click', this.onOutsideClick); - } + window.addEventListener('message', this.receiveMessage); } componentWillUnmount() { document.removeEventListener('click', this.onOutsideClick); - if (parent) { - parent.document.removeEventListener('click', this.onOutsideClick); - } + window.removeEventListener('message', this.receiveMessage); } render(props, { isActive }) { diff --git a/web/app/deleteme.js b/web/app/deleteme.js index 2186461c..e3c96194 100644 --- a/web/app/deleteme.js +++ b/web/app/deleteme.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { NODE_ID } from 'common/constants'; import { approveDeleteMe } from 'common/api'; import { token } from 'common/settings'; diff --git a/web/app/embed.js b/web/app/embed.js index 17a7eae3..efc07637 100644 --- a/web/app/embed.js +++ b/web/app/embed.js @@ -51,9 +51,8 @@ function init() { const iframe = node.getElementsByTagName('iframe')[0]; window.addEventListener('message', receiveMessages); - window.addEventListener('hashchange', postHashToIframe); - + document.addEventListener('click', postClickOutsideToIframe); setTimeout(postHashToIframe, 1000); const remarkRootId = 'remark-km423lmfdslkm34'; @@ -230,4 +229,10 @@ function init() { iframe.contentWindow.postMessage(JSON.stringify({ hash }), '*'); } } + + function postClickOutsideToIframe(e) { + if (!iframe.contains(e.target)) { + iframe.contentWindow.postMessage(JSON.stringify({ clickOutside: true }), '*'); + } + } } diff --git a/web/webpack.config.js b/web/webpack.config.js index cceb3a6f..b73ddb28 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -17,7 +17,7 @@ const remarkUrl = process.env.REMARK_URL || 'https://demo.remark42.com'; const NODE_ID = 'remark42'; // let's log some env variables because we can console.log(`NODE_ENV = ${env}`); -console.log(`REMARK_ENV = ${process.env.REMARK_URL}`); +console.log(`REMARK_ENV = ${remarkUrl}`); const commonStyleLoaders = [ 'css-loader',