mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add link to parent

Browse Source
This commit is contained in:
igoradamenko
2018-05-12 13:57:21 +03:00
parent 091eb33f35
commit 1b0beb2a7f
7 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/common/constants.js
+2
View File
@@ -2,6 +2,7 @@ const BASE_URL = 'https://remark42.radio-t.com';
const API_BASE = '/api/v1';
const NODE_ID = 'remark42';
const COUNTER_NODE_CLASSNAME = 'remark42__counter';
const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
const DEFAULT_LAST_COMMENTS_MAX = 15;
const DEFAULT_MAX_COMMENT_SIZE = 1000;
@@ -12,6 +13,7 @@ module.exports = {
NODE_ID,
COUNTER_NODE_CLASSNAME,
LAST_COMMENTS_NODE_CLASSNAME,
COMMENT_NODE_CLASSNAME_PREFIX,
DEFAULT_LAST_COMMENTS_MAX,
DEFAULT_MAX_COMMENT_SIZE,
};
web/app/components/comment/__link-to-parent/_focused/comment__link-to-parent__focused.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 11">
<path fill="#0aa" d="M.815 5.905L2.915 4v7H4.08V4l2.105 1.905.815-.74-3.5-3.17L0 5.165l.815.74zM0 1.045h7V0H0v1.045z" fill-rule="evenodd"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 209 B

web/app/components/comment/__link-to-parent/comment__link-to-parent.scss
+13
View File
@@ -0,0 +1,13 @@
.comment__link-to-parent {
display: inline-block;
height: 12px;
width: 16px;
margin-left: 8px;
vertical-align: -2px;
background: url('comment__link-to-parent.svg') center no-repeat;
cursor: pointer;
&:hover {
background-image: url('./_focused/comment__link-to-parent__focused.svg');
}
}
web/app/components/comment/__link-to-parent/comment__link-to-parent.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 11">
<path fill="#dedede" d="M.815 5.905L2.915 4v7H4.08V4l2.105 1.905.815-.74-3.5-3.17L0 5.165l.815.74zM0 1.045h7V0H0v1.045z" fill-rule="evenodd"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

web/app/components/comment/comment.jsx
+24 -5
View File
@@ -1,7 +1,7 @@
import { h, Component } from 'preact';
import api from 'common/api';
import { API_BASE, BASE_URL } from 'common/constants';
import { API_BASE, BASE_URL, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
import { url } from 'common/settings';
import store from 'common/store';
@@ -22,6 +22,7 @@ export default class Comment extends Component {
this.increaseScore = this.increaseScore.bind(this);
this.toggleInputVisibility = this.toggleInputVisibility.bind(this);
this.toggleUserIdVisibility = this.toggleUserIdVisibility.bind(this);
this.scrollToParent = this.scrollToParent.bind(this);
this.onReply = this.onReply.bind(this);
this.onPinClick = this.onPinClick.bind(this);
this.onUnpinClick = this.onUnpinClick.bind(this);
@@ -181,6 +182,14 @@ export default class Comment extends Component {
});
}
scrollToParent(e) {
const { data: { pid } } = this.props;
e.preventDefault();
window.location.hash = `#${COMMENT_NODE_CLASSNAME_PREFIX}${pid}`;
}
render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isInputVisible }) {
const { data, mix, mods = {} } = props;
const isAdmin = !guest && store.get('user').admin;
@@ -224,10 +233,10 @@ export default class Comment extends Component {
if (mods.view === 'preview') {
return (
<div className={b('comment', props, defaultMods)} id={`remark__comment-${o.id}`}>
<div className={b('comment', props, defaultMods)} id={`${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
<div className="comment__body">
<div className="comment__info">
<a href={`${o.locator.url}#remark__comment-${o.id}`} className="comment__username">{o.user.name}</a>
<a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__username">{o.user.name}</a>
</div>
{' '}
<div
@@ -240,7 +249,7 @@ export default class Comment extends Component {
}
return (
<div className={b('comment', props, defaultMods)} id={`remark__comment-${o.id}`}>
<div className={b('comment', props, defaultMods)} id={`${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
<div className="comment__body">
<div className="comment__info">
<img
@@ -259,7 +268,7 @@ export default class Comment extends Component {
isUserIdVisible && <span className="comment__user-id"> ({o.user.id})</span>
}
<a href={`${o.locator.url}#remark__comment-${o.id}`} className="comment__time">{o.time}</a>
<a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">{o.time}</a>
{
isAdmin && userBlocked && (
@@ -291,6 +300,16 @@ export default class Comment extends Component {
title={isGuest ? 'Only authorized users are allowed to vote' : (isCurrentUser ? 'You can\'t vote for your own comment' : null)}
>Vote down</span>
</span>
{
mods.level > 0 && (
<a
className="comment__link-to-parent"
href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
onClick={this.scrollToParent}
/>
)
}
</div>
<div
web/app/components/comment/index.js
+1
View File
@@ -13,6 +13,7 @@ require('./__control/comment__control.scss');
require('./__controls/comment__controls.scss');
require('./__info/comment__info.scss');
require('./__input/comment__input.scss');
require('./__link-to-parent/comment__link-to-parent.scss');
require('./__score/comment__score.scss');
require('./__score/_view/_negative/comment__score_view_negative.scss');
web/app/components/root/root.jsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { h, Component } from 'preact';
import api from 'common/api';
import { BASE_URL, NODE_ID } from 'common/constants';
import { BASE_URL, NODE_ID, COMMENT_NODE_CLASSNAME_PREFIX } from 'common/constants';
import { url } from 'common/settings';
import store from 'common/store';
@@ -82,7 +82,7 @@ export default class Root extends Component {
}
checkUrlHash() {
if (window.location.hash.indexOf('#remark__comment-') === 0) {
if (window.location.hash.indexOf(`#${COMMENT_NODE_CLASSNAME_PREFIX}`) === 0) {
const comment = document.querySelector(window.location.hash);
if (comment) {