Merged branch master into make-links-less-linky

README.md

@@ -1,6 +1,9 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html) 
+A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+
+Third party licenses are available via the `/client/3rdpartylicenses.txt`
+endpoint when the server is running with built assets.
 
 ## Contributing to Talk
 

client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js

@@ -28,7 +28,7 @@ class FlagBox extends Component {
                 <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
               )}
             </ul>
-            {/*<a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>*/}
+            {/* <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>*/}
           </div>
           {this.state.showDetail && (<div className={styles.detail}>
             <ul>

client/coral-embed/src/index.js

@@ -0,0 +1,125 @@
+import pym from 'pym.js';
+
+// This function should return value of window.Coral
+const Coral = {};
+const Talk = Coral.Talk = {};
+
+// build the URL to load in the pym iframe
+function buildStreamIframeUrl(talkBaseUrl, asset, comment) {
+  let iframeArray = [
+    talkBaseUrl,
+    (talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/'
+    'embed/stream?asset_url=',
+    encodeURIComponent(asset)
+  ];
+
+  if (comment) {
+    iframeArray.push('&comment_id=');
+    iframeArray.push(encodeURIComponent(comment));
+  }
+  return iframeArray.join('');
+}
+
+// Set up postMessage listeners/handlers on the pymParent
+// e.g. to resize the iframe, and navigate the host page
+function configurePymParent(pymParent, assetUrl) {
+  let notificationOffset = 200;
+  let ready = false;
+
+  // Resize parent iframe height when child height changes
+  pymParent.onMessage('height', function(height) {
+
+    // TODO: In local testing, this is firing nonstop. Maybe there's a bug on the inside?
+    // Or it's by design of pym... but that's very wasteful of CPU and DOM reflows (jank)
+    pymParent.el.querySelector('iframe').height = `${height  }px`;
+  });
+
+  // Helps child show notifications at the right scrollTop
+  pymParent.onMessage('getPosition', function() {
+    let position = viewport().height + document.body.scrollTop;
+
+    if (position > notificationOffset) {
+      position = position - notificationOffset;
+    }
+
+    pymParent.sendMessage('position', position);
+  });
+
+  // Tell child when parent's DOMContentLoaded
+  pymParent.onMessage('childReady', function () {
+    const interval = setInterval(function () {
+      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', assetUrl);
+      }
+    }, 100);
+  });
+
+  // When end-user clicks link in iframe, open it in parent context
+  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;
+  });
+
+  // get dimensions of viewport
+  const viewport = () => {
+    let e = window, a = 'inner';
+    if ( !( 'innerWidth' in window ) ){
+      a = 'client';
+      e = document.documentElement || document.body;
+    }
+    return {
+      width : e[`${a}Width`],
+      height : e[`${a}Height`]
+    };
+  };
+}
+
+/**
+ * Render a Talk stream
+ * @param {HTMLElement} el - Element to render the stream in
+ * @param {Object} opts - Configuration options for talk
+ * @param {String} opts.talk - Talk base URL
+ * @param {String} [opts.title] - Title of Stream (rendered in iframe)
+ * @param {String} [opts.asset] - parent Asset ID or URL. Comments in the
+ * stream will replies to this asset
+ */
+Talk.render = function (el, opts) {
+  if ( ! el) {
+    throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
+  }
+  if (typeof el !== 'object') {
+    throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
+  }
+  opts = opts || {};
+
+  // @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
+  if (!el.id) {
+    el.id = `_${Math.random()}`;
+  }
+
+  let asset = opts.asset || window.location.href.split('#')[0];
+  let comment = window.location.hash.slice(1);
+  let pymParent = new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, asset, comment), {
+    title: opts.title,
+    asset_url: asset,
+    id: `${el.id}_iframe`,
+    name: `${el.id}_iframe`
+  });
+
+  configurePymParent(pymParent, asset);
+};
+
+export default Coral;

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "start": "./bin/cli serve --jobs",
     "dev-start": "nodemon --config .nodemon.json --exec \"./bin/cli -c .env serve --jobs\"",
-    "build": "NODE_ENV=production webpack -p --config webpack.config.js --bail",
-    "build-watch": "NODE_ENV=development webpack --config webpack.config.js --watch",
+    "build": "NODE_ENV=production webpack --progress -p --config webpack.config.js --bail",
+    "build-watch": "NODE_ENV=development webpack --progress --config webpack.config.js --watch",
     "lint": "eslint bin/* .",
     "lint-fix": "eslint bin/* . --fix",
     "test": "TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
@@ -130,6 +130,7 @@
     "jsdom": "^9.8.3",
     "json-loader": "^0.5.4",
     "keymaster": "^1.6.2",
+    "license-webpack-plugin": "^0.4.2",
     "material-design-lite": "^1.2.1",
     "mocha": "^3.1.2",
     "mocha-junit-reporter": "^1.12.1",

routes/index.js

@@ -5,16 +5,20 @@ const router = express.Router();
 router.use('/api/v1', require('./api'));
 router.use('/admin', require('./admin'));
 router.use('/embed', require('./embed'));
-router.get('/embed.js', (req, res) => res.sendFile(path.join(__dirname, '../client/coral-embed/index.js')));
-router.use('/assets', require('./assets'));
+router.get('/embed.js', (req, res) => res.sendFile(path.join(__dirname, '../dist/embed.js')));
+router.get('/embed.js.map', (req, res) => res.sendFile(path.join(__dirname, '../dist/embed.js.map')));
 
-router.get('/', (req, res) => {
-  return res.render('article', {
-    title: 'Coral Talk',
-    asset_url: '',
-    body: '',
-    basePath: '/client/embed/stream'
+if (process.env.NODE_ENV !== 'production') {
+  router.use('/assets', require('./assets'));
+
+  router.get('/', (req, res) => {
+    return res.render('article', {
+      title: 'Coral Talk',
+      asset_url: '',
+      body: '',
+      basePath: '/client/embed/stream'
+    });
   });
-});
+}
 
 module.exports = router;

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const autoprefixer = require('autoprefixer');
 const precss = require('precss');
 const Copy = require('copy-webpack-plugin');
+const LicenseWebpackPlugin = require('license-webpack-plugin');
 const webpack = require('webpack');
 
 // Edit the build targets and embeds below.
@@ -17,7 +18,12 @@ const buildEmbeds = [
 
 module.exports = {
   devtool: 'cheap-source-map',
-  entry: buildTargets.reduce((entry, target) => {
+  entry: Object.assign({}, {
+    'embed': [
+      'babel-polyfill',
+      path.join(__dirname, 'client/coral-embed/src/index')
+    ]
+  }, buildTargets.reduce((entry, target) => {
 
     // Add the entry for the bundle.
     entry[`${target}/bundle`] = [
@@ -26,7 +32,7 @@ module.exports = {
     ];
 
     return entry;
-  }, buildEmbeds.reduce((entry, embed) => {
+  }, {}), buildEmbeds.reduce((entry, embed) => {
 
     // Add the entry for the bundle.
     entry[`embed/${embed}/bundle`] = [
@@ -38,14 +44,22 @@ module.exports = {
   }, {})),
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: '[name].js'
+    publicPath: '/client/',
+    filename: '[name].js',
+
+    // NOTE: this causes all exports to override the global.Coral, so no more
+    // than one bundle.js can be included on a page.
+    library: 'Coral'
   },
   module: {
     rules: [
       {
         loader: 'babel-loader',
         exclude: /node_modules/,
-        test: /\.js$/
+        test: /\.js$/,
+        query: {
+          cacheDirectory: true
+        }
       },
       {
         loader: 'json-loader',
@@ -80,6 +94,10 @@ module.exports = {
     ]
   },
   plugins: [
+    new LicenseWebpackPlugin({
+      pattern: /^(MIT|ISC|BSD.*)$/,
+      addUrl: true
+    }),
     new Copy([
       ...buildEmbeds.map(embed => ({
         from: path.join(__dirname, 'client', `coral-embed-${embed}`, 'style'),

yarn.lock

@@ -4385,6 +4385,12 @@ libqp@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/libqp/-/libqp-1.1.0.tgz#f5e6e06ad74b794fb5b5b66988bf728ef1dedbe8"
 
+license-webpack-plugin@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.4.2.tgz#188df5418a72ab61cad648b9ffd9355be270242b"
+  dependencies:
+    object-assign "^4.1.0"
+
 linkify-it@^1.2.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-1.2.4.tgz#0773526c317c8fd13bd534ee1d180ff88abf881a"