Implement a click-to-view spoiler system

This commit is contained in:
blackle
2017-01-12 23:54:26 -05:00
parent 1761d3f9c3
commit bf0f6eb62d
18 changed files with 192 additions and 77 deletions

View File

@ -18,6 +18,12 @@ const StatusContent = React.createClass({
componentDidMount () {
const node = ReactDOM.findDOMNode(this);
const links = node.querySelectorAll('a');
const spoilers = node.querySelectorAll('.spoiler');
for (var i = 0; i < spoilers.length; ++i) {
let spoiler = spoilers[i];
spoiler.addEventListener('click', this.onSpoilerClick.bind(this, spoiler), true);
}
for (var i = 0; i < links.length; ++i) {
let link = links[i];
@ -52,6 +58,18 @@ const StatusContent = React.createClass({
}
},
onSpoilerClick (spoiler, e) {
if (e.button === 0) {
//only toggle if we're not clicking a visible link
var hasClass = $(spoiler).hasClass('spoiler-on');
if (hasClass || e.target === spoiler) {
e.stopPropagation();
e.preventDefault();
$(spoiler).siblings(".spoiler").andSelf().toggleClass('spoiler-on', !hasClass);
}
}
},
onNormalClick (e) {
e.stopPropagation();
},