Files
danbooru/app/assets/javascripts/post_tooltips.js.erb
evazion 08e25e40c5 post tooltips: disable tooltips on touchscreens (#3689).
On phones / tablets, long pressing a thumbnail sends emulated mouse events
that trigger the tooltip. Disable tooltips while touching is active.
2018-04-29 00:05:33 -05:00

84 lines
2.5 KiB
Plaintext

Danbooru.PostTooltip = {};
Danbooru.PostTooltip.render_tooltip = function (event, qtip) {
var post_id = $(event.target).parents("[data-id]").data("id");
$.get("/posts/" + post_id, { variant: "tooltip" }).then(function (html) {
qtip.set("content.text", html);
qtip.elements.tooltip.removeClass("post-tooltip-loading");
});
};
// Hide the tooltip the first time it is shown, while we wait on the ajax call to complete.
Danbooru.PostTooltip.on_show = function (event, qtip) {
if (!qtip.cache.hasBeenShown) {
qtip.elements.tooltip.addClass("post-tooltip-loading");
qtip.cache.hasBeenShown = true;
}
};
Danbooru.PostTooltip.POST_SELECTOR = "*:not(.ui-sortable-handle) > .post-preview img";
// http://qtip2.com/options
Danbooru.PostTooltip.QTIP_OPTIONS = {
style: "qtip-light post-tooltip",
content: Danbooru.PostTooltip.render_tooltip,
overwrite: false,
position: {
my: "top left",
at: "bottom left",
target: "mouse",
// `viewport: $(window)` is better, but it requires jquery-migrate until https://github.com/qTip2/qTip2/issues/797 is fixed.
viewport: true,
adjust: {
mouse: false,
y: 25,
method: "shift",
},
},
show: {
solo: true,
delay: 450,
effect: false,
ready: true,
event: "mouseenter",
},
hide: {
delay: 50,
fixed: true,
effect: false,
event: "unfocus mouseleave",
},
events: {
show: Danbooru.PostTooltip.on_show,
},
};
Danbooru.PostTooltip.initialize = function () {
$(document).on("mouseenter", Danbooru.PostTooltip.POST_SELECTOR, function (event) {
if (Danbooru.PostTooltip.disabled()) {
$(this).qtip("disable");
} else {
$(this).qtip(Danbooru.PostTooltip.QTIP_OPTIONS, event);
}
});
// Hide tooltips when clicking thumbnails.
$(document).on("click", Danbooru.PostTooltip.POST_SELECTOR, Danbooru.PostTooltip.hide);
// Disable tooltips on touch devices. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
Danbooru.PostTooltip.isTouching = false;
$(document).on("touchstart", function (event) { Danbooru.PostTooltip.isTouching = true; });
$(document).on("touchend", function (event) { Danbooru.PostTooltip.isTouching = false; });
};
Danbooru.PostTooltip.hide = function (event) {
$(".post-tooltip:visible").qtip("hide");
};
Danbooru.PostTooltip.disabled = function (event) {
return Danbooru.PostTooltip.isTouching || Danbooru.meta("disable-post-tooltips") === "true";
};
$(document).ready(Danbooru.PostTooltip.initialize);