Futureproof Embed Code

* Add client/coral-embed-api module. It's meant to be included in an HTML page and define window.Coral
* Serve coral-embed-api at /Coral.js
* Update / handler (article view) to use new embed format
* Update Talk Admin embed code section to use new embed format

app.js

@@ -34,6 +34,7 @@ app.use(helmet({
 }));
 app.use(bodyParser.json());
 app.use('/client', express.static(path.join(__dirname, 'dist')));
+app.get('/Coral.js', (req, res) => res.sendFile(path.join(__dirname, 'client/coral-embed-api/index.js')));
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 

client/coral-admin/src/containers/Configure/EmbedLink.js

@@ -25,8 +25,24 @@ class EmbedLink extends Component {
   }
 
   render () {
-    const embedText = `<div id='coralStreamEmbed'></div><script type='text/javascript' src='${window.location.protocol}//pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/embed/stream', {title: 'Comments'});</script>`;
-
+    const location = window.location;
+    const talkBaseUrl = [
+      location.protocol,
+      '//',
+      location.hostname,
+      location.port ? (`:${  window.location.port}`) : ''
+    ].join('');
+    const coralJsUrl = [talkBaseUrl, '/Coral.js'].join('');
+    const nonce = String(Math.random()).slice(2);
+    const streamElementId = `coral_talk_${nonce}`;
+    const embedText = `
+<div id="${streamElementId}"></div>
+<script src="${coralJsUrl}" onload="
+  Coral.Talk.render(document.getElementById('${streamElementId}'), {
+    talk: '${talkBaseUrl}'
+  });
+"></script>
+    `.trim();
     return (
       <div>
         <h3>{this.props.title}</h3>

views/article.ejs

@@ -23,72 +23,12 @@
     <p><%= body %></p>
     <p><a href="/admin">Admin</a> - <a href="/assets">All Assets</a></p>
     <div id='coralStreamEmbed'></div>
+    <script src="/Coral.js" onload="
+      Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
+        talk: '/',
+        asset: <%= asset_url ? asset_url : 'undefined' %>
+      })
+    "></script>
   </main>
-
-<script type='text/javascript' src='<%= basePath %>/pym.v1.min.js'></script>
-<script>
-  var ready = false;
-  var notificationOffset = 200;
-
-  // default to using the window.location
-  var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
-
-  // if a url is passed into the template prefer it to the current url
-  <%if (asset_url.length > 0) { %>
-    url = '<%= asset_url %>';
-  <%}%>
-
-  var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream?asset_url=' + encodeURIComponent(url), {title: 'Talk Comments', id:'coralStreamIframe', name: 'coralStreamIframe', asset_url: url});
-  pymParent.onMessage('height', function(height) {
-    document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
-  })
-
-
-  pymParent.onMessage('getPosition', function(notification) {
-    var position = viewport().height + document.body.scrollTop;
-
-    if (position > notificationOffset) {
-      position = position - notificationOffset;
-    }
-
-    pymParent.sendMessage('position', position);
-  });
-
-  pymParent.onMessage('childReady', function () {
-    var interval = setInterval(function () {
-      if (ready) {
-        window.clearInterval(interval);
-
-        // default to using the window.location
-        var url = window.location.hash;
-
-        // if a url is passed into the template prefer it to the current url
-        <%if (asset_url.length > 0) { %>
-          url = '<%= asset_url %>';
-        <%}%>
-
-        pymParent.sendMessage('DOMContentLoaded', url);
-      }
-    }, 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 () {
-    ready = true;
-  });
-
-  function viewport() {
-    var e = window, a = 'inner';
-    if ( !( 'innerWidth' in window ) ){
-      a = 'client';
-      e = document.documentElement || document.body;
-    }
-  return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
-  }
-</script>
   </body>
 </html>