wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-04 06:44:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into fetch-helper

Browse Source
This commit is contained in:
Riley Davis
2016-11-29 15:34:30 -07:00
committed by GitHub
parent a7f94fce83 ef172cabfc
commit 257ecd3328
13 changed files with 145 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+2 -1
View File
@@ -1 +1,2 @@
dist
dist
client/lib
client/coral-embed-stream/public/samplearticle.html
+1 -1
View File
@@ -7,7 +7,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis sollicitudin eros a ornare. Curabitur dignissim vestibulum massa non rhoncus. Cras laoreet ante vel nunc hendrerit, ac imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Pellentesque interdum nec elit sed tincidunt. Donec volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non enim nec neque congue faucibus porttitor sit amet dui.</p>
<p>Nunc pharetra orci id diam feugiat, vitae rutrum magna efficitur. Morbi porttitor blandit lorem, et facilisis tellus luctus at. Morbi tincidunt eget nisl id placerat. Nullam consectetur quam vel mauris lacinia, non consectetur est faucibus. Duis cursus auctor nulla nec sagittis. Aenean sem erat, ultrices a hendrerit consectetur, accumsan non lorem. Integer ac neque sed magna sodales vulputate at quis neque. Praesent eget ornare lacus. Donec ultricies, dolor eget commodo faucibus, arcu velit ullamcorper tellus, in cursus tellus elit sed urna. Suspendisse in consequat magna. Duis vel ullamcorper tortor, vel cursus libero. Proin et nisi luctus ligula faucibus luctus. Morbi pulvinar, justo ac feugiat elementum, libero tellus congue justo, pharetra ultrices felis felis id leo. Integer mattis quam tempus libero porta, ac pretium ligula elementum.</p>
<div id='coralStreamEmbed'></div>
<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script type='text/javascript' src='/client/js/lib/pym.v1.min.js'></script>
<script>
var pymParent = new pym.Parent('coralStreamEmbed', 'index.html', {title: 'comments'});
pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
client/coral-embed-stream/src/CommentStream.js
+33 -14
View File
@@ -78,13 +78,32 @@ class CommentStream extends Component {
componentDidMount () {
// Set up messaging between embedded Iframe an parent component
// Using recommended Pym init code which violates .eslint standards
const pym = new Pym.Child({polling: 100});
this.pym = new Pym.Child({polling: 100});
if (/https?\:\/\/([^?]+)/.test(pym.parentUrl)) {
this.props.getStream(pym.parentUrl);
} else {
this.props.getStream(window.location);
}
const path = this.pym.parentUrl.split('#')[0];
this.props.getStream(path || window.location);
this.path = path;
this.pym.sendMessage('childReady');
this.pym.onMessage('DOMContentLoaded', hash => {
// the comment ids can start with numbers, which is invalid for DOM id attributes
const commentId = hash.replace('#', 'c_');
let count = 0;
const interval = setInterval(() => {
if (document.getElementById(commentId)) {
window.clearInterval(interval);
this.pym.scrollParentToChildEl(commentId);
}
if (++count > 100) { // ~10 seconds
// give up waiting for the comments to load.
// it would be weird for the page to jump after that long.
window.clearInterval(interval);
}
}, 100);
});
}
render () {
@@ -109,11 +128,11 @@ class CommentStream extends Component {
const {actions, users, comments} = this.props.items;
const {loggedIn, user, showSignInDialog} = this.props.auth;
const {activeTab} = this.state;
return <div className={showSignInDialog ? 'expandForSignin' : ''}>
{
rootItem
? <div>
? <div className="commentStream">
<TabBar onChange={this.changeTab} activeTab={activeTab}>
<Tab><Count id={rootItemId} items={this.props.items}/></Tab>
<Tab>Settings</Tab>
@@ -141,7 +160,7 @@ class CommentStream extends Component {
{
rootItem.comments && rootItem.comments.map((commentId) => {
const comment = comments[commentId];
return <div className="comment" key={commentId}>
return <div className="comment" key={commentId} id={`c_${commentId}`}>
<hr aria-hidden={true}/>
<AuthorName author={users[comment.author_id]}/>
<PubDate created_at={comment.created_at}/>
@@ -172,8 +191,8 @@ class CommentStream extends Component {
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}/>
<PermalinkButton
comment_id={commentId}
asset_id={comment.asset_id}/>
commentId={commentId}
articleURL={this.path}/>
</div>
<ReplyBox
addNotification={this.props.addNotification}
@@ -189,7 +208,7 @@ class CommentStream extends Component {
comment.children &&
comment.children.map((replyId) => {
let reply = this.props.items.comments[replyId];
return <div className="reply" key={replyId}>
return <div className="reply" key={replyId} id={`c_${replyId}`}>
<hr aria-hidden={true}/>
<AuthorName author={users[reply.author_id]}/>
<PubDate created_at={reply.created_at}/>
@@ -220,8 +239,8 @@ class CommentStream extends Component {
updateItem={this.props.updateItem}
currentUser={this.props.auth.user}/>
<PermalinkButton
comment_id={reply.parent_id}
asset_id={rootItemId}
commentId={reply.parent_id}
articleURL={this.path}
/>
</div>
<ReplyBox
client/coral-embed-stream/style/default.css
+38 -3
View File
@@ -71,6 +71,11 @@ hr {
display: none;
}
.commentStream {
/* prevent absolutely positioned final permalink popover from being clipped */
padding-bottom: 50px;
}
/* Comment Box Styles */
.coral-plugin-commentbox-container {
display: flex;
@@ -106,6 +111,7 @@ hr {
/* Comment styles */
.comment {
margin-bottom: 10px;
position: relative;
}
.coral-plugin-commentcontent-text {
@@ -139,9 +145,8 @@ hr {
width: 50%;
}
.commentActionsLeft .material-icons,.commentActionsRight .material-icons,
.replyActionsLeft .material-icons, .replyActionsRight .material-icons {
font-size: 12px;
.material-icons {
font-size: 12px !important;
margin-left: 3px;
vertical-align: middle;
}
@@ -158,3 +163,33 @@ hr {
color: #CCC;
display: inline-block;
}
.coral-plugin-permalinks-container {
/*position: relative;*/
z-index: 2;
}
.coral-plugin-permalinks-popover {
display: none;
background-color: white;
border: 1px solid black;
width: calc(100% - 15px);
position: absolute;
top: 70px;
right: 0;
padding: 5px;
}
.coral-plugin-permalinks-popover.active {
display: block;
}
.coral-plugin-permalinks-copy-field {
display: block;
width: calc(100% - 5px);
}
.coral-plugin-permalinks-copied-text {
float: right;
margin: 8px;
}
client/coral-plugin-permalinks/PermalinkButton.js
+8 -27
View File
@@ -9,8 +9,8 @@ const lang = new I18n(translations);
class PermalinkButton extends React.Component {
static propTypes = {
asset_id: PropTypes.string.isRequired,
comment_id: PropTypes.string.isRequired
articleURL: PropTypes.string.isRequired,
commentId: PropTypes.string.isRequired
}
constructor (props) {
@@ -43,29 +43,27 @@ class PermalinkButton extends React.Component {
}
render () {
const publisherUrl = `${location.protocol}//${location.host}/`;
return (
<div className={`${name}-container`} style={styles}>
<div className={`${name}-container`}>
<button onClick={this.toggle} className={`${name}-button`}>
<i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
{lang.t('permalink.permalink')}
</button>
<div
style={styles.popover(this.state.popoverOpen)}
className={`${name}-popover`}>
className={`${name}-popover ${this.state.popoverOpen ? 'active' : ''}`}>
<input
className={`${name}-copy-field`}
type='text'
ref={input => this.permalinkInput = input}
value={`${publisherUrl}${this.props.asset_id}#${this.props.comment_id}`}
value={`${this.props.articleURL}#${this.props.commentId}`}
onChange={() => {}} />
<button className={`${name}-copy-button`} onClick={this.copyPermalink}>Copy</button>
{
this.state.copySuccessful ? <p>copied to clipboard</p> : null
this.state.copySuccessful ? <p className={`${name}-copied-text`}>copied to clipboard</p> : null
}
{
this.state.copyFailure
? <p>copying to clipboard not supported in this browser. Use Cmd + C.</p>
? <p className={`${name}-copied-error`}>copying to clipboard not supported in this browser. Use Cmd + C.</p>
: null
}
</div>
@@ -75,20 +73,3 @@ class PermalinkButton extends React.Component {
}
export default onClickOutside(PermalinkButton);
const styles = {
position: 'relative',
popover: active => {
return {
display: active ? 'block' : 'none',
backgroundColor: 'white',
border: '1px solid black',
minWidth: 400,
position: 'absolute',
top: 30,
right: 0,
padding: 5
};
}
};
client/coral-sign-in/components/ForgotContent.js
+1 -1
View File
@@ -44,7 +44,7 @@ class ForgotContent extends React.Component {
}
{
passwordRequestFailure
? <p className={styles.attention}>{passwordRequestFailure}</p>
? <p className={styles.passwordRequestFailure}>{passwordRequestFailure}</p>
: null
}
</form>
client/coral-sign-in/components/styles.css
+2 -1
View File
@@ -138,5 +138,6 @@ input.error{
.passwordRequestFailure {
border: 1px solid orange;
background-color: 1px solid coral
background-color: 1px solid coral;
padding: 10px;
}
client/lib/pym.v1.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
mongoose.js
+1 -5
View File
@@ -1,11 +1,7 @@
const mongoose = require('mongoose');
const debug = require('debug')('talk:db');
const enabled = require('debug').enabled;
let url = process.env.TALK_MONGO_URL || 'mongodb://localhost';
if (process.env.NODE_ENV === 'test') {
url = 'mongodb://localhost/coral-test';
}
const url = process.env.TALK_MONGO_URL || (process.env.NODE_ENV === 'test' ? 'mongodb://localhost/test' : 'mongodb://localhost/talk');
// Use native promises
mongoose.Promise = global.Promise;
routes/index.js
+8 -2
View File
@@ -6,11 +6,17 @@ router.use('/admin', require('./admin'));
router.use('/embed', require('./embed'));
router.get('/', (req, res) => {
res.render('article', {title: 'Coral Talk'});
return res.render('article', {
title: 'Coral Talk',
basePath: '/client/embed/stream'
});
});
router.get('/assets/:asset_title', (req, res) => {
res.render('article', {title: req.params.asset_title.split('-').join(' ')});
return res.render('article', {
title: req.params.asset_title.split('-').join(' '),
basePath: '/client/embed/stream'
});
});
module.exports = router;
views/article.ejs
+20 -8
View File
@@ -32,13 +32,25 @@
<div id='coralStreamEmbed'></div>
</main>
<!--- Script --->
<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script>
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
pymParent.onMessage('height', function(height) {
document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
});
</script>
<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);
});
// 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;
});
</script>
</body>
</html>
views/embed-stream.ejs
+19 -7
View File
@@ -19,14 +19,26 @@
</head>
<body>
<div id='coralStreamEmbed'></div>
<!--- Script --->
<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script type='text/javascript' src='<%= basePath %>/pym.v1.min.js'></script>
<script>
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
pymParent.onMessage('height', function(height) {
document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
});
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);
});
// 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>
webpack.config.dev.js
+10 -4
View File
@@ -74,10 +74,16 @@ module.exports = {
]
},
plugins: [
new Copy(buildEmbeds.map(embed => ({
from: path.join(__dirname, 'client', `coral-embed-${embed}`, 'style'),
to: path.join(__dirname, 'dist', 'embed', embed)
}))),
new Copy([
...buildEmbeds.map(embed => ({
from: path.join(__dirname, 'client', `coral-embed-${embed}`, 'style'),
to: path.join(__dirname, 'dist', 'embed', embed)
})),
{
from: path.join(__dirname, 'client', 'lib'),
to: path.join(__dirname, 'dist', 'embed', 'stream')
}
]),
autoprefixer,
precss,
new webpack.ProvidePlugin({