Merge branch 'master' of github.com:umputun/remark

2018-02-15 22:47:43 -06:00
parent d73f539eab f5652fe8a7
commit 1151ac8852
6 changed files with 86 additions and 13 deletions
@@ -1,8 +1,5 @@
 critical features:

- improve iframe
-  - add default attrs
-  - auto height
 - get settings from outside
  - get path from url or by params
  - get siteid by params
@@ -0,0 +1,44 @@
+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="https://demo.remark42.com/web/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];
+
+  window.addEventListener('message', updateIframeHeight);
+
+  function updateIframeHeight(event) {
+    try {
+      const data = JSON.parse(event.data);
+      iframe.style.height = `${data.remarkIframeHeight}px`;
+    } catch (e) {}
+  }
+}
+
@@ -1,5 +1,4 @@
 import 'babel-polyfill'; // TODO: remove it
-
 import 'common/polyfills'; // TODO: check it

 import { h, render } from 'preact';
@@ -7,13 +6,9 @@ import Root from './components/root';

 import { id } from './common/settings';

-if (document.readyState !== 'complete') {
-  window.addEventListener('DOMContentLoaded', initApp);
-} else {
-  initApp();
-}
+init();

-function initApp() {
+function init() {
  const node = document.getElementById(id);

  if (!node) {
@@ -9,5 +9,14 @@
 <body>
 <div id="remark42"></div>
 <script type="text/javascript" src="/web/remark.js"></script>
+<script>
+  var lastHeight = 0;
+  setInterval(() => {
+    if (document.body.offsetHeight !== lastHeight) {
+      lastHeight = document.body.offsetHeight;
+      window.parent.postMessage(JSON.stringify({ remarkIframeHeight: lastHeight }), '*');
+    }
+  }, 200);
+</script>
 </body>
 </html>
@@ -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: {