add embed script for iframe and test page for them

2018-02-15 23:31:24 +02:00
parent b347dfd749
commit 3b85e2b875
5 changed files with 89 additions and 28 deletions
@@ -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(<Root/>, node.parentElement, node);
-}
@@ -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 = `
+    <iframe
+      src="http://demo.remark42.com/iframe.html"
+      width="100%"
+      frameborder="0"
+      allowtransparency="true"
+      scrolling="no"
+      tabindex="0"
+      title="Remark42"
+      style="width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
+      horizontalscrolling="no"
+      verticalscrolling="no"
+    ></iframe>
+  `;
+
+  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);
+}
+
@@ -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(<Root/>, node.parentElement, node);
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Test page</title>
+</head>
+<body>
+<div id="remark42"></div>
+<script>
+  var remark_config = {
+    // site_id: 'YOUR_SITE_ID',
+    // page_id: 'YOUR_IDENTIFIER';
+  };
+
+  (function() {
+    var d = document, s = d.createElement('script');
+    // s.src = 'https://demo.remark42.com/web/embed.js';
+    s.src = 'https://demo.remark42.com/web/embed.js';
+    (d.head || d.body).appendChild(s);
+  })();
+</script>
+<noscript>
+  Please enable JavaScript to view the comments powered by Remark.
+</noscript>
+</body>
+</html>
@@ -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: {