From f0c846493a144ee3bbb8b04e3583864fc418d9d2 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 2 May 2017 14:51:09 -0300 Subject: [PATCH 01/12] Passing data from script tag, into Talk --- .../src/containers/Embed.js | 8 ++ client/coral-embed/src/index.js | 93 ++++++++++++------- 2 files changed, 69 insertions(+), 32 deletions(-) diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index d5399fc60..bdcc1a63f 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -21,6 +21,14 @@ class EmbedContainer extends React.Component { componentDidMount() { pym.sendMessage('childReady'); + + pym.onMessage('config', config => { + console.log(JSON.parse(config)); + }); + } + + componentWillUnmount() { + pym.remove(); } componentWillReceiveProps(nextProps) { diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js index 950fa91bc..cc2612376 100644 --- a/client/coral-embed/src/index.js +++ b/client/coral-embed/src/index.js @@ -22,18 +22,18 @@ const snackbarStyles = { transform: 'translate(-50%, 20px)', bottom: 0, boxSizing: 'border-box', - fontFamily: 'Helvetica, \'Helvetica Neue\', Verdana, sans-serif' + fontFamily: 'Helvetica, "Helvetica Neue", Verdana, sans-serif' }; // This function should return value of window.Coral const Coral = {}; -const Talk = Coral.Talk = {}; +const Talk = (Coral.Talk = {}); // build the URL to load in the pym iframe function buildStreamIframeUrl(talkBaseUrl, query) { let url = [ talkBaseUrl, - (talkBaseUrl.match(/\/$/) ? '' : '/'), // make sure no double-'/' if opts.talk already ends with '/' + talkBaseUrl.match(/\/$/) ? '' : '/', // make sure no double-'/' if opts.talk already ends with '/' 'embed/stream?' ].join(''); @@ -44,11 +44,22 @@ function buildStreamIframeUrl(talkBaseUrl, query) { // Set up postMessage listeners/handlers on the pymParent // e.g. to resize the iframe, and navigate the host page -function configurePymParent(pymParent) { +function configurePymParent(pymParent, opts) { let notificationOffset = 200; - let ready = false; + let DOMReady = false; let cachedHeight; const snackbar = document.createElement('div'); + + // Sets DOMReady + function completed() { + DOMReady = true; + } + + // Sends config to pymChild + function sendConfig(config) { + pymParent.sendMessage('config', JSON.stringify(config)); + } + snackbar.id = 'coral-notif'; for (let key in snackbarStyles) { @@ -69,12 +80,12 @@ function configurePymParent(pymParent) { } }); - pymParent.onMessage('coral-clear-notification', function () { + pymParent.onMessage('coral-clear-notification', function() { snackbar.style.opacity = 0; }); // remove the permalink comment id from the hash - pymParent.onMessage('coral-view-all-comments', function () { + pymParent.onMessage('coral-view-all-comments', function() { window.history.replaceState( {}, document.title, @@ -82,7 +93,7 @@ function configurePymParent(pymParent) { ); }); - pymParent.onMessage('coral-alert', function (message) { + pymParent.onMessage('coral-alert', function(message) { const [type, text] = message.split('|'); snackbar.style.transform = 'translate(-50%, 20px)'; snackbar.style.opacity = 0; @@ -110,39 +121,46 @@ function configurePymParent(pymParent) { pymParent.sendMessage('position', position); }); + // Sends config to the child + pymParent.onMessage('getConfig', function() { + sendConfig(opts || {}); + }); + + document.addEventListener('DOMContentLoaded', completed, false); + + // A fallback to window.onload, that will always work + window.addEventListener('load', completed, false); + // Tell child when parent's DOMContentLoaded - pymParent.onMessage('childReady', function () { - const interval = setInterval(function () { - if (ready) { + pymParent.onMessage('childReady', function() { + const interval = setInterval(function() { + if (DOMReady) { window.clearInterval(interval); - // TODO: It's weird to me that this is sent here + // DOMContentLoaded is ready pymParent.sendMessage('DOMContentLoaded'); + + // Sending the config to the child + sendConfig(opts || {}); } }, 100); }); // When end-user clicks link in iframe, open it in parent context - pymParent.onMessage('navigate', function (url) { + 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 ) ){ + if (!('innerWidth' in window)) { a = 'client'; e = document.documentElement || document.body; } return { - width : e[`${a}Width`], - height : e[`${a}Height`] + width: e[`${a}Width`], + height: e[`${a}Height`] }; }; } @@ -156,18 +174,24 @@ function configurePymParent(pymParent) { * @param {String} [opts.asset_url] - Asset URL * @param {String} [opts.asset_id] - Asset ID */ -Talk.render = function (el, opts) { +Talk.render = function(el, opts) { if (!el) { - throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.'); + 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})`); + 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'); + 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. @@ -186,16 +210,21 @@ Talk.render = function (el, opts) { try { 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.'); + 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.' + ); query.asset_url = window.location.origin + window.location.pathname; } } - configurePymParent(new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), { - title: opts.title, - id: `${el.id}_iframe`, - name: `${el.id}_iframe` - })); + configurePymParent( + new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), { + title: opts.title, + id: `${el.id}_iframe`, + name: `${el.id}_iframe` + }), + opts + ); }; export default Coral; From 17128e9a47ce718f7a11351d7637b786d5a5dc4a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 2 May 2017 15:18:04 -0300 Subject: [PATCH 02/12] Adds redux to handle external config data --- .../src/containers/Embed.js | 56 ++++++++++--------- client/coral-framework/actions/config.js | 6 ++ client/coral-framework/constants/asset.js | 1 - client/coral-framework/constants/config.js | 4 ++ client/coral-framework/reducers/config.js | 15 +++++ client/coral-framework/reducers/index.js | 2 + views/article.ejs | 3 +- 7 files changed, 58 insertions(+), 29 deletions(-) create mode 100644 client/coral-framework/actions/config.js create mode 100644 client/coral-framework/reducers/config.js diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index bdcc1a63f..5b324b35b 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -8,22 +8,24 @@ import renderComponent from 'recompose/renderComponent'; import {Spinner} from 'coral-ui'; import {authActions, assetActions, pym} from 'coral-framework'; -import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils'; -import Embed from '../components/Embed'; -import {setCommentCountCache, viewAllComments} from '../actions/stream'; -import {setActiveTab} from '../actions/embed'; + import Stream from './Stream'; +import Embed from '../components/Embed'; + +import {setActiveTab} from '../actions/embed'; +import {addExternalConfig} from 'coral-framework/actions/config'; +import {setCommentCountCache, viewAllComments} from '../actions/stream'; +import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils'; const {logout, checkLogin} = authActions; const {fetchAssetSuccess} = assetActions; class EmbedContainer extends React.Component { - componentDidMount() { pym.sendMessage('childReady'); pym.onMessage('config', config => { - console.log(JSON.parse(config)); + this.props.addExternalConfig(JSON.parse(config)); }); } @@ -32,7 +34,7 @@ class EmbedContainer extends React.Component { } componentWillReceiveProps(nextProps) { - if(this.props.root.me && !nextProps.root.me) { + if (this.props.root.me && !nextProps.root.me) { // Refetch because on logout `excludeIgnored` becomes `false`. // TODO: logout via mutation and obsolete this? @@ -40,7 +42,7 @@ class EmbedContainer extends React.Component { } const {fetchAssetSuccess} = this.props; - if(!isEqual(nextProps.root.asset, this.props.root.asset)) { + if (!isEqual(nextProps.root.asset, this.props.root.asset)) { // TODO: remove asset data from redux store. fetchAssetSuccess(nextProps.root.asset); @@ -55,7 +57,7 @@ class EmbedContainer extends React.Component { } componentDidUpdate(prevProps) { - if(!isEqual(prevProps.root.comment, this.props.root.comment)) { + if (!isEqual(prevProps.root.comment, this.props.root.comment)) { // Scroll to a permalinked comment if one is in the URL once the page is done rendering. setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0); @@ -90,10 +92,10 @@ export const withQuery = graphql(EMBED_QUERY, { assetUrl, commentId, hasComment: commentId !== '', - excludeIgnored: Boolean(auth && auth.user && auth.user.id), - }, + excludeIgnored: Boolean(auth && auth.user && auth.user.id) + } }), - props: ({data}) => separateDataAndRoot(data), + props: ({data}) => separateDataAndRoot(data) }); const mapStateToProps = state => ({ @@ -102,25 +104,25 @@ const mapStateToProps = state => ({ commentId: state.stream.commentId, assetId: state.stream.assetId, assetUrl: state.stream.assetUrl, - activeTab: state.embed.activeTab, + activeTab: state.embed.activeTab }); const mapDispatchToProps = dispatch => - bindActionCreators({ - fetchAssetSuccess, - checkLogin, - setCommentCountCache, - viewAllComments, - logout, - setActiveTab, - }, dispatch); + bindActionCreators( + { + logout, + checkLogin, + setActiveTab, + viewAllComments, + addExternalConfig, + fetchAssetSuccess, + setCommentCountCache + }, + dispatch + ); export default compose( connect(mapStateToProps, mapDispatchToProps), - branch( - props => !props.auth.checkedInitialLogin, - renderComponent(Spinner), - ), - withQuery, + branch(props => !props.auth.checkedInitialLogin, renderComponent(Spinner)), + withQuery )(EmbedContainer); - diff --git a/client/coral-framework/actions/config.js b/client/coral-framework/actions/config.js new file mode 100644 index 000000000..7e07c4c35 --- /dev/null +++ b/client/coral-framework/actions/config.js @@ -0,0 +1,6 @@ +import {ADD_EXTERNAL_CONFIG} from '../constants/config'; + +export const addExternalConfig = config => ({ + type: ADD_EXTERNAL_CONFIG, + config +}); diff --git a/client/coral-framework/constants/asset.js b/client/coral-framework/constants/asset.js index c26dd099d..40f746706 100644 --- a/client/coral-framework/constants/asset.js +++ b/client/coral-framework/constants/asset.js @@ -8,4 +8,3 @@ export const UPDATE_ASSET_SETTINGS_FAILURE = 'UPDATE_ASSET_SETTINGS_FAILURE'; export const OPEN_COMMENTS = 'OPEN_COMMENTS'; export const CLOSE_COMMENTS = 'CLOSE_COMMENTS'; - diff --git a/client/coral-framework/constants/config.js b/client/coral-framework/constants/config.js index 5dca44ba9..a7b2fa8fb 100644 --- a/client/coral-framework/constants/config.js +++ b/client/coral-framework/constants/config.js @@ -7,3 +7,7 @@ export const UPDATE_CONFIG = 'UPDATE_CONFIG'; export const OPEN_COMMENTS = 'OPEN_COMMENTS'; export const CLOSE_COMMENTS = 'CLOSE_COMMENTS'; export const ADD_ITEM = 'ADD_ITEM'; + +// TODO: Deprecate old constants + +export const ADD_EXTERNAL_CONFIG = 'ADD_EXTERNAL_CONFIG'; diff --git a/client/coral-framework/reducers/config.js b/client/coral-framework/reducers/config.js new file mode 100644 index 000000000..a602e7f59 --- /dev/null +++ b/client/coral-framework/reducers/config.js @@ -0,0 +1,15 @@ +import {ADD_EXTERNAL_CONFIG} from '../constants/config'; + +const initialState = {}; + +export default function config(state = initialState, action) { + switch (action.type) { + case ADD_EXTERNAL_CONFIG: + return { + ...state, + ...action.config + }; + default: + return state; + } +} diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js index d5b66bbae..7067bfb55 100644 --- a/client/coral-framework/reducers/index.js +++ b/client/coral-framework/reducers/index.js @@ -1,6 +1,7 @@ import auth from './auth'; import user from './user'; import asset from './asset'; +import config from './config'; import {reducer as commentBox} from '../../coral-plugin-commentbox'; import {pluginReducers} from '../helpers/plugins'; @@ -8,6 +9,7 @@ export default { auth, user, asset, + config, commentBox, ...pluginReducers }; diff --git a/views/article.ejs b/views/article.ejs index e20f91117..463076db0 100644 --- a/views/article.ejs +++ b/views/article.ejs @@ -28,7 +28,8 @@ Coral.Talk.render(document.getElementById('coralStreamEmbed'), { talk: '/', asset_url: '<%= asset_url ? asset_url : '' %>', - asset_id: '<%= asset_id ? asset_id : '' %>' + asset_id: '<%= asset_id ? asset_id : '' %>', + hola: 'asd' }) "> From b444316e1cb1fc8466e898421e415bf41a155d98 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 2 May 2017 15:31:58 -0300 Subject: [PATCH 03/12] Adding debug plugins --- client/coral-framework/components/Slot.css | 4 ++++ client/coral-framework/components/Slot.js | 11 +++++++++-- views/article.ejs | 5 ++++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/client/coral-framework/components/Slot.css b/client/coral-framework/components/Slot.css index 6048da181..6a95d79ad 100644 --- a/client/coral-framework/components/Slot.css +++ b/client/coral-framework/components/Slot.css @@ -1,3 +1,7 @@ .inline { display: inline-block; } + +.debug { + background-color: coral; +} \ No newline at end of file diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 8e2dd9502..b08484353 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -1,11 +1,13 @@ import React from 'react'; import cn from 'classnames'; import styles from './Slot.css'; +import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -export default function Slot ({fill, inline = false, ...rest}) { +function Slot ({fill, inline = false, config: {plugin_config = {}}, ...rest}) { + const {debug} = plugin_config; return ( -
+
{getSlotElements(fill, rest)}
); @@ -14,3 +16,8 @@ export default function Slot ({fill, inline = false, ...rest}) { Slot.propTypes = { fill: React.PropTypes.string }; + +const mapStateToProps = ({config}) => ({config}); + +export default connect(mapStateToProps, null)(Slot); + diff --git a/views/article.ejs b/views/article.ejs index 463076db0..bc29467f1 100644 --- a/views/article.ejs +++ b/views/article.ejs @@ -29,7 +29,10 @@ talk: '/', asset_url: '<%= asset_url ? asset_url : '' %>', asset_id: '<%= asset_id ? asset_id : '' %>', - hola: 'asd' + plugin_config: { + test: 'data', + debug: false + } }) "> From cc0a23c295c9bef2bb68e87d60a9cac5391c3241 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 2 May 2017 15:40:37 -0300 Subject: [PATCH 04/12] Deconstruct plugin config --- client/coral-framework/components/Slot.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index b08484353..eac90c6df 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,11 +4,10 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -function Slot ({fill, inline = false, config: {plugin_config = {}}, ...rest}) { - const {debug} = plugin_config; +function Slot ({fill, inline = false, plugin_config: {debug, config}, ...rest}) { return (
- {getSlotElements(fill, rest)} + {getSlotElements(fill, {config, ...rest})}
); } @@ -17,7 +16,7 @@ Slot.propTypes = { fill: React.PropTypes.string }; -const mapStateToProps = ({config}) => ({config}); +const mapStateToProps = ({config: {plugin_config = {}}}) => ({plugin_config}); export default connect(mapStateToProps, null)(Slot); From 8c219c1c4d8b3ba9d87778968fe69fb917b6d435 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 9 May 2017 15:53:57 -0300 Subject: [PATCH 05/12] Adding config with initial --- .../src}/actions/config.js | 0 .../coral-embed-stream/src/actions/embed.js | 4 +++ .../src/constants/config.js | 1 + .../src/containers/Embed.js | 15 +------- client/coral-embed-stream/src/index.js | 8 +++++ .../src}/reducers/config.js | 0 .../coral-embed-stream/src/reducers/index.js | 6 ++-- client/coral-embed/src/index.js | 36 +++---------------- client/coral-framework/components/Slot.js | 4 +-- client/coral-framework/constants/config.js | 13 ------- client/coral-framework/reducers/index.js | 2 -- 11 files changed, 25 insertions(+), 64 deletions(-) rename client/{coral-framework => coral-embed-stream/src}/actions/config.js (100%) create mode 100644 client/coral-embed-stream/src/constants/config.js rename client/{coral-framework => coral-embed-stream/src}/reducers/config.js (100%) delete mode 100644 client/coral-framework/constants/config.js diff --git a/client/coral-framework/actions/config.js b/client/coral-embed-stream/src/actions/config.js similarity index 100% rename from client/coral-framework/actions/config.js rename to client/coral-embed-stream/src/actions/config.js diff --git a/client/coral-embed-stream/src/actions/embed.js b/client/coral-embed-stream/src/actions/embed.js index 863494c68..c0eb7d844 100644 --- a/client/coral-embed-stream/src/actions/embed.js +++ b/client/coral-embed-stream/src/actions/embed.js @@ -8,3 +8,7 @@ export const setActiveTab = (tab) => (dispatch, getState) => { } }; +export const addExternalConfig = externalConfig => ({ + type: 'ADD_EXTERNAL_CONFIG', + externalConfig +}); diff --git a/client/coral-embed-stream/src/constants/config.js b/client/coral-embed-stream/src/constants/config.js new file mode 100644 index 000000000..5821316c5 --- /dev/null +++ b/client/coral-embed-stream/src/constants/config.js @@ -0,0 +1 @@ +export const ADD_EXTERNAL_CONFIG = 'ADD_EXTERNAL_CONFIG'; diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index 5b324b35b..75d5dcbaf 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -13,7 +13,6 @@ import Stream from './Stream'; import Embed from '../components/Embed'; import {setActiveTab} from '../actions/embed'; -import {addExternalConfig} from 'coral-framework/actions/config'; import {setCommentCountCache, viewAllComments} from '../actions/stream'; import {getDefinitionName, separateDataAndRoot} from 'coral-framework/utils'; @@ -21,17 +20,6 @@ const {logout, checkLogin} = authActions; const {fetchAssetSuccess} = assetActions; class EmbedContainer extends React.Component { - componentDidMount() { - pym.sendMessage('childReady'); - - pym.onMessage('config', config => { - this.props.addExternalConfig(JSON.parse(config)); - }); - } - - componentWillUnmount() { - pym.remove(); - } componentWillReceiveProps(nextProps) { if (this.props.root.me && !nextProps.root.me) { @@ -114,7 +102,6 @@ const mapDispatchToProps = dispatch => checkLogin, setActiveTab, viewAllComments, - addExternalConfig, fetchAssetSuccess, setCommentCountCache }, @@ -123,6 +110,6 @@ const mapDispatchToProps = dispatch => export default compose( connect(mapStateToProps, mapDispatchToProps), - branch(props => !props.auth.checkedInitialLogin, renderComponent(Spinner)), + branch(props => !props.auth.checkedInitialLogin && props.config, renderComponent(Spinner)), withQuery )(EmbedContainer); diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js index 2fd1e2731..52a585fb2 100644 --- a/client/coral-embed-stream/src/index.js +++ b/client/coral-embed-stream/src/index.js @@ -4,10 +4,12 @@ import {ApolloProvider} from 'react-apollo'; import {client} from 'coral-framework/services/client'; import {checkLogin} from 'coral-framework/actions/auth'; +import {addExternalConfig} from 'coral-embed-stream/src/actions/config'; import reducers from './reducers'; import localStore, {injectReducers} from 'coral-framework/services/store'; import AppRouter from './AppRouter'; +import {pym} from 'coral-framework'; injectReducers(reducers); @@ -16,6 +18,12 @@ const store = (window.opener && window.opener.coralStore) ? window.opener.coralS // Don't run this in the popup. if (store === localStore) { store.dispatch(checkLogin()); + + pym.sendMessage('getConfig'); + + pym.onMessage('config', config => { + store.dispatch(addExternalConfig(JSON.parse(config))); + }); } render( diff --git a/client/coral-framework/reducers/config.js b/client/coral-embed-stream/src/reducers/config.js similarity index 100% rename from client/coral-framework/reducers/config.js rename to client/coral-embed-stream/src/reducers/config.js diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js index a9049fc14..590b87eea 100644 --- a/client/coral-embed-stream/src/reducers/index.js +++ b/client/coral-embed-stream/src/reducers/index.js @@ -1,7 +1,9 @@ -import stream from './stream'; import embed from './embed'; +import config from './config'; +import stream from './stream'; export default { - stream, embed, + stream, + config }; diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js index cc2612376..570a63aed 100644 --- a/client/coral-embed/src/index.js +++ b/client/coral-embed/src/index.js @@ -46,20 +46,19 @@ function buildStreamIframeUrl(talkBaseUrl, query) { // e.g. to resize the iframe, and navigate the host page function configurePymParent(pymParent, opts) { let notificationOffset = 200; - let DOMReady = false; let cachedHeight; const snackbar = document.createElement('div'); - // Sets DOMReady - function completed() { - DOMReady = true; - } - // Sends config to pymChild function sendConfig(config) { pymParent.sendMessage('config', JSON.stringify(config)); } + // Sends config to the child + pymParent.onMessage('getConfig', function() { + sendConfig(opts || {}); + }); + snackbar.id = 'coral-notif'; for (let key in snackbarStyles) { @@ -121,31 +120,6 @@ function configurePymParent(pymParent, opts) { pymParent.sendMessage('position', position); }); - // Sends config to the child - pymParent.onMessage('getConfig', function() { - sendConfig(opts || {}); - }); - - document.addEventListener('DOMContentLoaded', completed, false); - - // A fallback to window.onload, that will always work - window.addEventListener('load', completed, false); - - // Tell child when parent's DOMContentLoaded - pymParent.onMessage('childReady', function() { - const interval = setInterval(function() { - if (DOMReady) { - window.clearInterval(interval); - - // DOMContentLoaded is ready - pymParent.sendMessage('DOMContentLoaded'); - - // Sending the config to the child - sendConfig(opts || {}); - } - }, 100); - }); - // When end-user clicks link in iframe, open it in parent context pymParent.onMessage('navigate', function(url) { window.open(url, '_blank').focus(); diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index eac90c6df..68b5e9964 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,10 +4,10 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -function Slot ({fill, inline = false, plugin_config: {debug, config}, ...rest}) { +function Slot ({fill, inline = false, plugin_config: {debug, ...config}, ...rest}) { return (
- {getSlotElements(fill, {config, ...rest})} + {getSlotElements(fill, {...config, ...rest})}
); } diff --git a/client/coral-framework/constants/config.js b/client/coral-framework/constants/config.js deleted file mode 100644 index a7b2fa8fb..000000000 --- a/client/coral-framework/constants/config.js +++ /dev/null @@ -1,13 +0,0 @@ -export const UPDATE_CONFIG_REQUEST = 'UPDATE_CONFIG_REQUEST'; -export const UPDATE_CONFIG_SUCCESS = 'UPDATE_CONFIG_SUCCESS'; -export const UPDATE_CONFIG_FAILURE = 'UPDATE_CONFIG_FAILURE'; - -export const UPDATE_CONFIG = 'UPDATE_CONFIG'; - -export const OPEN_COMMENTS = 'OPEN_COMMENTS'; -export const CLOSE_COMMENTS = 'CLOSE_COMMENTS'; -export const ADD_ITEM = 'ADD_ITEM'; - -// TODO: Deprecate old constants - -export const ADD_EXTERNAL_CONFIG = 'ADD_EXTERNAL_CONFIG'; diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js index 7067bfb55..d5b66bbae 100644 --- a/client/coral-framework/reducers/index.js +++ b/client/coral-framework/reducers/index.js @@ -1,7 +1,6 @@ import auth from './auth'; import user from './user'; import asset from './asset'; -import config from './config'; import {reducer as commentBox} from '../../coral-plugin-commentbox'; import {pluginReducers} from '../helpers/plugins'; @@ -9,7 +8,6 @@ export default { auth, user, asset, - config, commentBox, ...pluginReducers }; From 74ffc00c200ae412db0f75bcaf19d790a5318cd7 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 10 May 2017 15:02:43 -0300 Subject: [PATCH 06/12] Adding changes --- client/coral-embed-stream/src/actions/embed.js | 7 +------ client/coral-embed-stream/src/containers/Embed.js | 3 ++- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/client/coral-embed-stream/src/actions/embed.js b/client/coral-embed-stream/src/actions/embed.js index c0eb7d844..509de7237 100644 --- a/client/coral-embed-stream/src/actions/embed.js +++ b/client/coral-embed-stream/src/actions/embed.js @@ -6,9 +6,4 @@ export const setActiveTab = (tab) => (dispatch, getState) => { if (getState().stream.commentId) { dispatch(viewAllComments()); } -}; - -export const addExternalConfig = externalConfig => ({ - type: 'ADD_EXTERNAL_CONFIG', - externalConfig -}); +}; \ No newline at end of file diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index 75d5dcbaf..3572877ce 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -92,7 +92,8 @@ const mapStateToProps = state => ({ commentId: state.stream.commentId, assetId: state.stream.assetId, assetUrl: state.stream.assetUrl, - activeTab: state.embed.activeTab + activeTab: state.embed.activeTab, + config: state.config }); const mapDispatchToProps = dispatch => From c3dff79e6eda6ac302c603d3c97a0f30ca8d4203 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 10 May 2017 15:35:32 -0300 Subject: [PATCH 07/12] Updated --- client/coral-framework/components/Slot.js | 6 +++--- .../coral-plugin-offtopic/client/components/OffTopicTag.js | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 68b5e9964..9640ca9de 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,10 +4,10 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -function Slot ({fill, inline = false, plugin_config: {debug, ...config}, ...rest}) { +function Slot ({fill, inline = false, plugin_config: {...config}, ...rest}) { return ( -
- {getSlotElements(fill, {...config, ...rest})} +
+ {getSlotElements(fill, {...rest, ...config})}
); } diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js index 73e2372ed..5a84fc360 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js @@ -7,6 +7,7 @@ const isOffTopic = (tags) => { export default (props) => ( + {console.log(props)} { isOffTopic(props.comment.tags) ? ( From 10e8a32c2111fa0da87152a9bedef98fececf45c Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 10 May 2017 15:57:21 -0300 Subject: [PATCH 08/12] Changes --- client/coral-framework/components/Slot.js | 4 ++-- .../coral-plugin-offtopic/client/components/OffTopicTag.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 9640ca9de..3c9c17476 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -4,10 +4,10 @@ import styles from './Slot.css'; import {connect} from 'react-redux'; import {getSlotElements} from 'coral-framework/helpers/plugins'; -function Slot ({fill, inline = false, plugin_config: {...config}, ...rest}) { +function Slot ({fill, inline = false, plugin_config: config, ...rest}) { return (
- {getSlotElements(fill, {...rest, ...config})} + {getSlotElements(fill, {...rest, config}}
); } diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js index 5a84fc360..73e2372ed 100644 --- a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js +++ b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js @@ -7,7 +7,6 @@ const isOffTopic = (tags) => { export default (props) => ( - {console.log(props)} { isOffTopic(props.comment.tags) ? ( From 57d2b81b0580d667cdc35bc5cbd2face9ab346c1 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 10 May 2017 16:05:52 -0300 Subject: [PATCH 09/12] missing _ --- client/coral-embed-stream/src/actions/embed.js | 2 +- client/coral-framework/components/Slot.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/coral-embed-stream/src/actions/embed.js b/client/coral-embed-stream/src/actions/embed.js index 509de7237..98505cb99 100644 --- a/client/coral-embed-stream/src/actions/embed.js +++ b/client/coral-embed-stream/src/actions/embed.js @@ -6,4 +6,4 @@ export const setActiveTab = (tab) => (dispatch, getState) => { if (getState().stream.commentId) { dispatch(viewAllComments()); } -}; \ No newline at end of file +}; diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index 3c9c17476..939068e83 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -7,7 +7,7 @@ import {getSlotElements} from 'coral-framework/helpers/plugins'; function Slot ({fill, inline = false, plugin_config: config, ...rest}) { return (
- {getSlotElements(fill, {...rest, config}} + {getSlotElements(fill, {...rest, config})}
); } From c3048e599dee386151a2d08312b45a2a638958dd Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 10 May 2017 20:56:07 -0600 Subject: [PATCH 10/12] remove ability to un-flag a comment --- client/coral-plugin-flags/FlagButton.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js index e5daf72c9..fc7c427b0 100644 --- a/client/coral-plugin-flags/FlagButton.js +++ b/client/coral-plugin-flags/FlagButton.js @@ -15,8 +15,7 @@ class FlagButton extends Component { message: '', step: 0, posted: false, - localPost: null, - localDelete: false + localPost: null } componentDidUpdate () { @@ -27,17 +26,12 @@ class FlagButton extends Component { // When the "report" button is clicked expand the menu onReportClick = () => { - const {currentUser, deleteAction, flaggedByCurrentUser, flag} = this.props; - const {localPost, localDelete} = this.state; - const localFlagged = (flaggedByCurrentUser && !localDelete) || localPost; + const {currentUser} = this.props; if (!currentUser) { this.props.showSignInDialog(); return; } - if (localFlagged) { - this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true}); - deleteAction(localPost || flag.current_user.id); - } else if (this.state.showMenu){ + if (this.state.showMenu) { this.closeMenu(); } else { this.setState({showMenu: true}); @@ -136,14 +130,14 @@ class FlagButton extends Component { render () { const {getPopupMenu, flaggedByCurrentUser} = this.props; - const {localPost, localDelete} = this.state; - const flagged = (flaggedByCurrentUser && !localDelete) || localPost; + const {localPost} = this.state; + const flagged = flaggedByCurrentUser || localPost; const popupMenu = getPopupMenu[this.state.step](this.state.itemType); return