You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
doushio/client/hover.js

127 lines
2.9 KiB

(function () {
var preview, previewNum;
$DOC.mousemove(mouse_ugoku);
function mouse_ugoku(event) {
if (!nashi.hover && /^A$/i.test(event.target.tagName)) {
var m = $(event.target).text().match(/^>>(\d+)/);
if (m && preview_miru(event, parseInt(m[1], 10)))
return;
}
if (preview) {
preview.remove();
preview = previewNum = null;
}
}
function preview_miru(event, num) {
/* If there was an old preview of a different thread, remove it */
if (num != previewNum) {
var post = $('#' + num);
if (!post.length)
return false;
if (preview)
preview.remove();
var bits = post.children();
if (bits.find('video').length) {
preview = proper_preview(event, num);
}
else {
/* stupid hack, should be using views */
if (bits[0] && $(bits[0]).is('.select-handle'))
bits = bits.slice(1);
if (post.is('section'))
bits = bits.slice(0, 3);
preview = $('<div class="preview"/>').append(
bits.clone());
}
}
if (!preview)
return false;
var overflow = position_preview(event, preview);
/* Add it to the page if it's new */
if (num != previewNum) {
if (overflow > 0) {
scale_down_to_fit(preview.find('img'), overflow);
position_preview(event, preview);
}
$(document.body).append(preview);
previewNum = num;
}
return true;
}
function proper_preview(event, num) {
var model = Threads.get(num);
if (!model) {
var $s = $(event.target).closest('section');
if ($s.length)
model = Threads.lookup(num, extract_num($s));
}
if (!model)
return false;
// TEMP: OPs not extracted
if (!model.get('image'))
return false;
var article = new Article({model: model});
return $(article.render().el).addClass('preview');
}
function position_preview(event, $el) {
var width = $el.width();
var height = $el.height();
if (height < 5) {
$el.hide();
$(document.body).append($el);
width = $el.width();
height = $el.height();
$el.detach().show();
}
var x = event.pageX + 20;
var y = event.pageY - height - 20;
var $w = $(window);
var overflow = x + width - $w.innerWidth();
if (overflow > 0) {
x = Math.max(0, event.pageX - width - 20);
overflow = x + width - $w.innerWidth();
}
var scrollTop = $w.scrollTop();
if (y < scrollTop) {
var newY = event.pageY + 20;
if (newY + height <= scrollTop + $w.height())
y = newY;
}
$el.css({left: x, top: y});
return overflow;
}
function scale_down_to_fit($img, amount) {
var w = $img.width(), h = $img.height();
if (w - amount > 50) {
var aspect = h / w;
w -= amount;
h = aspect * w;
$img.width(w).height(h);
}
}
/* We'll get annoying preview pop-ups on touch screens, so disable it.
Touch detection is unreliable, so wait for an actual touch event */
document.addEventListener('touchstart', touch_screen_event, false);
function touch_screen_event() {
nashi.hover = true;
nashi.shortcuts = true;
if (preview)
preview.remove();
$DOC.unbind('mousemove', mouse_ugoku);
document.removeEventListener('touchstart', touch_screen_event, false);
}
})();