diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js index e3350e0d3..21c176500 100644 --- a/client/coral-embed/src/index.js +++ b/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; diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql index c9f9d3d5b..102c656e5 100644 --- a/client/coral-framework/graphql/queries/streamQuery.graphql +++ b/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 diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js index 6f4151ff6..32e2e4263 100644 --- a/graph/resolvers/root_query.js +++ b/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); } diff --git a/routes/assets/index.js b/routes/assets/index.js index e8c508b52..54d4e72ed 100644 --- a/routes/assets/index.js +++ b/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' }); diff --git a/routes/index.js b/routes/index.js index 9e38097f9..448bd6964 100644 --- a/routes/index.js +++ b/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' }); diff --git a/views/article.ejs b/views/article.ejs index 5f90cdf4d..e20f91117 100644 --- a/views/article.ejs +++ b/views/article.ejs @@ -27,7 +27,8 @@ diff --git a/views/embed-stream.ejs b/views/embed-stream.ejs deleted file mode 100644 index c69773bcb..000000000 --- a/views/embed-stream.ejs +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - Talk - Coral Admin - - - - - - -
- - - -