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

Make mention previews work on touch devices

Browse Source
This commit is contained in:
Toby Zerner 2015-06-24 11:47:30 +09:30
parent e53cc010e4
commit cf4074b3b8
1 changed files with 57 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
extensions/mentions/js/src/post-mention-previews.js
View File

@ -26,61 +26,71 @@ export default function postMentionPreviews() {
return $('.discussion-posts .item[data-number='+number+']'); return $('.discussion-posts .item[data-number='+number+']');
}; };
var showPreview = function() {
// When the user hovers their mouse over the mention, look for the
// post that it's referring to in the stream, and determine if it's
// in the viewport. If it is, we will "pulsate" it.
var $post = getPostElement();
var visible = false;
if ($post.length) {
var top = $post.offset().top;
var scrollTop = window.pageYOffset;
if (top > scrollTop && top + $post.height() < scrollTop + $(window).height()) {
$post.addClass('pulsate');
visible = true;
}
}
// Otherwise, we will show a popup preview of the post. If the post
// hasn't yet been loaded, we will need to do that.
if (!visible) {
var showPost = function(post) {
m.render($preview[0], m('li', PostPreview.component({post})));
positionPreview();
};
// Position the preview so that it appears above the mention.
// (The offsetParent should be .post-body.)
var positionPreview = function() {
$preview.show().css('top', $this.offset().top - $this.offsetParent().offset().top - $preview.outerHeight(true));
};
var post = discussion.posts().filter(post => post && post.number() == number)[0];
if (post) {
showPost(post);
} else {
m.render($preview[0], LoadingIndicator.component());
app.store.find('posts', {discussions: discussion.id(), number}).then(posts => showPost(posts[0]));
positionPreview();
}
setTimeout(() => $preview.off('transitionend').addClass('in'));
}
};
var hidePreview = () => {
getPostElement().removeClass('pulsate');
if ($preview.hasClass('in')) {
$preview.removeClass('in').one('transitionend', () => $preview.hide());
}
};
$this.parent().hover( $this.parent().hover(
function() { function() {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(function() { timeout = setTimeout(showPreview, 500);
// When the user hovers their mouse over the mention, look for the
// post that it's referring to in the stream, and determine if it's
// in the viewport. If it is, we will "pulsate" it.
var $post = getPostElement();
var visible = false;
if ($post.length) {
var top = $post.offset().top;
var scrollTop = window.pageYOffset;
if (top > scrollTop && top + $post.height() < scrollTop + $(window).height()) {
$post.addClass('pulsate');
visible = true;
}
}
// Otherwise, we will show a popup preview of the post. If the post
// hasn't yet been loaded, we will need to do that.
if (!visible) {
var showPost = function(post) {
m.render($preview[0], m('li', PostPreview.component({post})));
positionPreview();
};
// Position the preview so that it appears above the mention.
// (The offsetParent should be .post-body.)
var positionPreview = function() {
$preview.show().css('top', $this.offset().top - $this.offsetParent().offset().top - $preview.outerHeight(true));
};
var post = discussion.posts().filter(post => post && post.number() == number)[0];
if (post) {
showPost(post);
} else {
m.render($preview[0], LoadingIndicator.component());
app.store.find('posts', {discussions: discussion.id(), number}).then(posts => showPost(posts[0]));
positionPreview();
}
setTimeout(() => $preview.off('transitionend').addClass('in'));
}
}, 500);
}, },
function() { function() {
clearTimeout(timeout); clearTimeout(timeout);
getPostElement().removeClass('pulsate'); getPostElement().removeClass('pulsate');
timeout = setTimeout(() => { timeout = setTimeout(hidePreview, 250);
if ($preview.hasClass('in')) {
$preview.removeClass('in').one('transitionend', () => $preview.hide());
}
}, 250);
} }
); )
.on('click', e => e.preventDefault())
.on('touchend', e => {
showPreview();
e.stopPropagation();
});
$(document).on('touchend', hidePreview);
}); });
}); });
} }