Merge pull request #459 from coralproject/support-lazy-assets

Added support for a plugin which disables lazy assets

client/coral-embed/src/index.js

@@ -1,5 +1,7 @@
 import pym from 'pym.js';
 
+import {stringify} from 'querystring';
+
 const snackbarStyles = {
   position: 'fixed',
   cursor: 'default',
@@ -26,30 +28,21 @@ const Coral = {};
 const Talk = Coral.Talk = {};
 
 // build the URL to load in the pym iframe
-function buildStreamIframeUrl(talkBaseUrl, asset_url, comment, asset_id) {
-  let iframeArray = [
+function buildStreamIframeUrl(talkBaseUrl, query) {
+  let url = [
     talkBaseUrl,
     (talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/'
-    'embed/stream?asset_url=',
-    encodeURIComponent(asset_url)
-  ];
+    'embed/stream?'
+  ].join('');
 
-  if (comment) {
-    iframeArray.push('&comment_id=');
-    iframeArray.push(encodeURIComponent(comment));
-  }
+  url += stringify(query);
 
-  if (asset_id) {
-    iframeArray.push('&asset_id=');
-    iframeArray.push(encodeURIComponent(asset_id));
-  }
-
-  return iframeArray.join('');
+  return url;
 }
 
 // Set up postMessage listeners/handlers on the pymParent
 // e.g. to resize the iframe, and navigate the host page
-function configurePymParent(pymParent, asset_url) {
+function configurePymParent(pymParent) {
   let notificationOffset = 200;
   let ready = false;
   let cachedHeight;
@@ -117,8 +110,8 @@ function configurePymParent(pymParent, asset_url) {
       if (ready) {
         window.clearInterval(interval);
 
-        // @todo - It's weird to me that this is sent here in addition to the iframe URL. Could it just be in one place?
-        pymParent.sendMessage('DOMContentLoaded', asset_url);
+        // TODO: It's weird to me that this is sent here
+        pymParent.sendMessage('DOMContentLoaded');
       }
     }, 100);
   });
@@ -166,42 +159,37 @@ Talk.render = function (el, opts) {
   }
   opts = opts || {};
 
-  // @todo infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
+  // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
   if (!opts.talk) {
     throw new Error('Coral.Talk.render() expects opts.talk as the Talk Base URL');
   }
 
-  // ensure el has an id, as pym can't directly accept the HTMLElement
+  // Ensure el has an id, as pym can't directly accept the HTMLElement.
   if (!el.id) {
     el.id = `_${Math.random()}`;
   }
 
-  let asset_url = opts.asset_url;
-  if (!asset_url) {
+  // Compose the query to send down to the Talk API so it knows what to load.
+  let query = {};
+
+  query.comment_id = window.location.hash.slice(1);
+  query.asset_id = opts.asset_id;
+
+  query.asset_url = opts.asset_url;
+  if (!query.asset_url) {
     try {
-      asset_url = document.querySelector('link[rel="canonical"]').href;
+      query.asset_url = document.querySelector('link[rel="canonical"]').href;
     } catch (e) {
       console.warn('This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.');
-      asset_url = window.location.origin + window.location.pathname;
+      query.asset_url = window.location.origin + window.location.pathname;
     }
   }
 
-  let comment = window.location.hash.slice(1);
-
-  let query = {
+  configurePymParent(new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
     title: opts.title,
-    asset_url: asset_url,
     id: `${el.id}_iframe`,
     name: `${el.id}_iframe`
-  };
-
-  if (opts.asset_id && opts.asset_id.length > 0) {
-    query.asset_id = opts.asset_id;
-  }
-
-  let pymParent = new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, asset_url, comment), query);
-
-  configurePymParent(pymParent, asset_url);
+  }));
 };
 
 export default Coral;

client/coral-framework/graphql/queries/streamQuery.graphql

@@ -1,6 +1,6 @@
 #import "../fragments/commentView.graphql"
 
-query AssetQuery($asset_id: ID, $asset_url: String!, $comment_id: ID!, $has_comment: Boolean!) {
+query AssetQuery($asset_id: ID, $asset_url: String, $comment_id: ID!, $has_comment: Boolean!) {
     # the comment here is for loading one comment and it's children, probably after following a permalink
     # $has_comment is derived from the comment_id query param in the iframe url,
     # which is in turn pulled from the host page url

graph/resolvers/root_query.js

@@ -8,11 +8,6 @@ const RootQuery = {
   },
   asset(_, query, {loaders: {Assets}}) {
     if (query.id) {
-
-      // TODO: we may not always have a comment stream here, therefore, when we
-      // load it, we may also need to create with the url. This may also have to
-      // move the logic over to the mutators function as an upsert operation
-      // possibly.
       return Assets.getByID.load(query.id);
     }
 

routes/assets/index.js

@@ -14,6 +14,7 @@ router.get('/id/:asset_id', (req, res, next) => {
       }
       res.render('article', {
         title: asset.title,
+        asset_id: asset.id,
         asset_url: asset.url,
         body: '',
         basePath: '/client/embed/stream'
@@ -26,6 +27,7 @@ router.get('/title/:asset_title', (req, res) => {
   return res.render('article', {
     title: req.params.asset_title.split('-').join(' '),
     asset_url: '',
+    asset_id: null,
     body: body,
     basePath: '/client/embed/stream'
   });

routes/index.js

@@ -18,6 +18,7 @@ if (process.env.NODE_ENV !== 'production') {
     return res.render('article', {
       title: 'Coral Talk',
       asset_url: '',
+      asset_id: '',
       body: '',
       basePath: '/client/embed/stream'
     });

views/article.ejs

@@ -27,7 +27,8 @@
     <script src="/embed.js" async onload="
       Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
         talk: '/',
-        asset_url: '<%= asset_url ? asset_url : '' %>'
+        asset_url: '<%= asset_url ? asset_url : '' %>',
+        asset_id: '<%= asset_id ? asset_id : '' %>'
       })
     "></script>
   </main>

views/embed-stream.ejs

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
-    <title>Talk - Coral Admin</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-    <link rel="stylesheet" href="<%= basePath %>/default.css">
-    <style media="screen">
-      body, #root {
-        width: 100%;
-        height: 100%;
-        min-height: 600px;
-        margin: 0;
-        background: #fff;
-      }
-    </style>
-  </head>
-  <body>
-    <div id='coralStreamEmbed'></div>
-    <script type='text/javascript' src='<%= basePath %>/pym.v1.min.js'></script>
-    <script>
-    var ready = false;
-    var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
-    pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'});
-    pymParent.onMessage('childReady', function () {
-      var interval = setInterval(function () {
-        if (ready) {
-          window.clearInterval(interval);
-          pymParent.sendMessage('DOMContentLoaded', window.location.hash);
-        }
-      }, 100);
-    }
-    pymParent.onMessage('navigate', function (url) {
-      window.open(url, '_blank').focus();
-    })
-  );
-
-    // wait till images and other iframes are loaded before scrolling the page.
-    // or do we want to be more aggressive and scroll when we hit DOM ready?
-    document.addEventListener('DOMContentLoaded', function (e) {
-      ready = true;
-    });
-
-    </script>
-  </body>
-</html>