From 3b85e2b875d75b07cd3b41c825a8269d8a95738e Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Thu, 15 Feb 2018 23:31:24 +0200 Subject: [PATCH 1/4] add embed script for iframe and test page for them --- web/app/app.js | 25 ------------------------- web/app/embed.js | 42 ++++++++++++++++++++++++++++++++++++++++++ web/app/remark.js | 16 ++++++++++++++++ web/test-embed.html | 27 +++++++++++++++++++++++++++ web/webpack.config.js | 7 ++++--- 5 files changed, 89 insertions(+), 28 deletions(-) delete mode 100644 web/app/app.js create mode 100644 web/app/embed.js create mode 100644 web/app/remark.js create mode 100644 web/test-embed.html diff --git a/web/app/app.js b/web/app/app.js deleted file mode 100644 index 89a8e9b0..00000000 --- a/web/app/app.js +++ /dev/null @@ -1,25 +0,0 @@ -import 'babel-polyfill'; // TODO: remove it - -import 'common/polyfills'; // TODO: check it - -import { h, render } from 'preact'; -import Root from './components/root'; - -import { id } from './common/settings'; - -if (document.readyState !== 'complete') { - window.addEventListener('DOMContentLoaded', initApp); -} else { - initApp(); -} - -function initApp() { - const node = document.getElementById(id); - - if (!node) { - console.error('Remark42: Can\'t find root node.'); - return; - } - - render(, node.parentElement, node); -} diff --git a/web/app/embed.js b/web/app/embed.js new file mode 100644 index 00000000..e87ded8b --- /dev/null +++ b/web/app/embed.js @@ -0,0 +1,42 @@ +if (document.readyState !== 'interactive') { + document.addEventListener('DOMContentLoaded', initEmbed); +} else { + initEmbed(); +} + +function initEmbed() { + remark_config = remark_config || {} + + const siteId = remark_config.site_id || 'remark42'; + const node = document.getElementById(siteId); + + if (!node) { + console.error('Remark42: Can\'t find root node.'); + return; + } + + node.innerHTML = ` + + `; + + const iframe = node.getElementsByTagName('iframe')[0]; + let lastHeight = 0; + setInterval(() => { + if (iframe.contentWindow.html.innerHeight !== lastHeight) { + lastHeight = iframe.contentWindow.html.innerHeight; + iframe.style.height = `${lastHeight}px`; + } + }, 200); +} + diff --git a/web/app/remark.js b/web/app/remark.js new file mode 100644 index 00000000..a83c8d04 --- /dev/null +++ b/web/app/remark.js @@ -0,0 +1,16 @@ +import 'babel-polyfill'; // TODO: remove it +import 'common/polyfills'; // TODO: check it + +import { h, render } from 'preact'; +import Root from './components/root'; + +import { id } from './common/settings'; + +const node = document.getElementById(id); + +if (!node) { + console.error('Remark42: Can\'t find root node.'); + return; +} + +render(, node.parentElement, node); diff --git a/web/test-embed.html b/web/test-embed.html new file mode 100644 index 00000000..05ff9e9c --- /dev/null +++ b/web/test-embed.html @@ -0,0 +1,27 @@ + + + + + + Test page + + +
+ + + + diff --git a/web/webpack.config.js b/web/webpack.config.js index d1c0b6f8..7b99c727 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -39,11 +39,12 @@ const commonStyleLoaders = [ module.exports = { context: __dirname, entry: { - app: './app/app', + remark: './app/remark', + embed: './app/embed', }, output: { path: publicFolder, - filename: `remark${hash}.js` + filename: `[name]${hash}.js` }, resolve: { extensions: ['.jsx', '.js'], @@ -105,7 +106,7 @@ module.exports = { }), new webpack.optimize.ModuleConcatenationPlugin(), ...(env === 'production' ? [new webpack.optimize.UglifyJsPlugin()] : []), - ...(env === 'production' ? [new Copy(['./iframe.html'])] : []), + ...(env === 'production' ? [new Copy(['./iframe.html', './test-embed.html'])] : []), ], watch: env === 'dev', watchOptions: { From 1e4704d01eca2afb8597256c1d095132f72de181 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Thu, 15 Feb 2018 23:33:13 +0200 Subject: [PATCH 2/4] fix missing function wrapper around init js --- web/app/remark.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/web/app/remark.js b/web/app/remark.js index a83c8d04..30fa677d 100644 --- a/web/app/remark.js +++ b/web/app/remark.js @@ -6,11 +6,15 @@ import Root from './components/root'; import { id } from './common/settings'; -const node = document.getElementById(id); +init(); -if (!node) { - console.error('Remark42: Can\'t find root node.'); - return; +function init() { + const node = document.getElementById(id); + + if (!node) { + console.error('Remark42: Can\'t find root node.'); + return; + } + + render(, node.parentElement, node); } - -render(, node.parentElement, node); From fdc3188155a962fd002bab3f818597b183b3bc56 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Fri, 16 Feb 2018 00:07:17 +0200 Subject: [PATCH 3/4] update method of communication between iframe and embed script --- web/app/embed.js | 18 ++++++++++-------- web/iframe.html | 9 +++++++++ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/web/app/embed.js b/web/app/embed.js index e87ded8b..1934a198 100644 --- a/web/app/embed.js +++ b/web/app/embed.js @@ -17,7 +17,7 @@ function initEmbed() { node.innerHTML = `