github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-18 12:33:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move replies preview dropdown out of Post-footer (#55)

Browse Source
This commit is contained in:
Sami Mazouz 2021-05-12 20:42:33 +01:00 committed by GitHub
parent 8ed08b63cd
commit 3e596aaadf
1 changed files with 65 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
extensions/mentions/js/src/forum/addMentionedByList.js
View File

@ -11,58 +11,74 @@ import icon from 'flarum/helpers/icon';
export default function addMentionedByList() {
Post.prototype.mentionedBy = Model.hasMany('mentionedBy');
function hidePreview() {
this.$('.Post-mentionedBy-preview')
.removeClass('in')
.one('transitionend', function() { $(this).hide(); });
}
extend(CommentPost.prototype, 'oncreate', function() {
let timeout;
const post = this.attrs.post;
const replies = post.mentionedBy();
if (replies && replies.length) {
const $preview = $('<ul class="Dropdown-menu Post-mentionedBy-preview fade"/>');
this.$().append($preview);
const $parentPost = this.$();
const $this = this.$('.Post-mentionedBy');
const showPreview = () => {
if (!$preview.hasClass('in') && $preview.is(':visible')) return;
// When the user hovers their mouse over the list of people who have
// replied to the post, render a list of reply previews into a
// popup.
m.render($preview[0], replies.map(reply => (
<li data-number={reply.number()}>
{PostPreview.component({
post: reply,
onclick: hidePreview.bind(this)
})}
</li>
)));
$preview.show()
.css('top', $this.offset().top - $parentPost.offset().top + $this.outerHeight(true))
.css('left', $this.offsetParent().offset().left - $parentPost.offset().left)
.css('max-width', $parentPost.width());
setTimeout(() => $preview.off('transitionend').addClass('in'));
}
$this.add($preview).hover(
() => {
clearTimeout(timeout);
timeout = setTimeout(showPreview, 250);
},
() => {
clearTimeout(timeout);
timeout = setTimeout(hidePreview, 250);
}
);
// Whenever the user hovers their mouse over a particular name in the
// list of repliers, highlight the corresponding post in the preview
// popup.
this.$().find('.Post-mentionedBy-summary a').hover(function() {
$preview.find('[data-number="' + $(this).data('number') + '"]').addClass('active');
}, function() {
$preview.find('[data-number]').removeClass('active');
});
}
});
extend(CommentPost.prototype, 'footerItems', function(items) {
const post = this.attrs.post;
const replies = post.mentionedBy();
if (replies && replies.length) {
const hidePreview = () => {
this.$('.Post-mentionedBy-preview')
.removeClass('in')
.one('transitionend', function() { $(this).hide(); });
};
const oncreate = function(vnode) {
const $this = $(vnode.dom);
let timeout;
const $preview = $('<ul class="Dropdown-menu Post-mentionedBy-preview fade"/>');
$this.append($preview);
$this.children().hover(function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
if (!$preview.hasClass('in') && $preview.is(':visible')) return;
// When the user hovers their mouse over the list of people who have
// replied to the post, render a list of reply previews into a
// popup.
m.render($preview[0], replies.map(reply => (
<li data-number={reply.number()}>
{PostPreview.component({
post: reply,
onclick: hidePreview
})}
</li>
)));
$preview.show();
setTimeout(() => $preview.off('transitionend').addClass('in'));
}, 500);
}, function() {
clearTimeout(timeout);
timeout = setTimeout(hidePreview, 250);
});
// Whenever the user hovers their mouse over a particular name in the
// list of repliers, highlight the corresponding post in the preview
// popup.
$this.find('.Post-mentionedBy-summary a').hover(function() {
$preview.find('[data-number="' + $(this).data('number') + '"]').addClass('active');
}, function() {
$preview.find('[data-number]').removeClass('active');
});
};
const users = [];
const repliers = replies
.sort(reply => reply.user() === app.session.user ? -1 : 0)
@ -86,7 +102,7 @@ export default function addMentionedByList() {
return (
<Link href={app.route.post(reply)}
onclick={hidePreview}
onclick={hidePreview.bind(this)}
data-number={reply.number()}>
{app.session.user === user ? app.translator.trans('flarum-mentions.forum.post.you_text') : username(user)}
</Link>
@ -105,7 +121,7 @@ export default function addMentionedByList() {
}
items.add('replies',
<div className="Post-mentionedBy" oncreate={oncreate}>
<div className="Post-mentionedBy">
<span className="Post-mentionedBy-summary">
{icon('fas fa-reply')}
{app.translator.transChoice('flarum-mentions.forum.post.mentioned_by' + (repliers[0].user() === app.session.user ? '_self' : '') + '_text', names.length, {