mirror of https://github.com/zulip/zulip.git
Move lightbox events to lightbox.js from clickhandlers.js.
This consolidates lightbox logic to lightbox.js.
This commit is contained in:
Brock Whittaker
Tim Abbott
parent
9c38dc84a7
commit
1b31f9be38
|
|
@ -511,65 +511,6 @@ $(function () {
|
||||||
.text(i18n.t("Bringing you to your latest messages…")));
|
.text(i18n.t("Bringing you to your latest messages…")));
|
||||||
});
|
});
|
||||||
|
|
||||||
(function () {
|
|
||||||
$("#main_div").on("click", ".message_inline_image a", function (e) {
|
|
||||||
var $img = $(this).find("img");
|
|
||||||
|
|
||||||
// prevent the link from opening in a new page.
|
|
||||||
e.preventDefault();
|
|
||||||
// prevent the message compose dialog from happening.
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
lightbox.show_from_inline_image($img);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#lightbox_overlay .download").click(function () {
|
|
||||||
this.blur();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#lightbox_overlay").on("click", ".image-list .image", function () {
|
|
||||||
var $image_list = $(this).parent();
|
|
||||||
|
|
||||||
var image = new Image();
|
|
||||||
image.src = this.dataset.src;
|
|
||||||
image.title = this.title;
|
|
||||||
|
|
||||||
lightbox.open({
|
|
||||||
type: "photo",
|
|
||||||
user: message_store.get($(this).attr("data-zid")).sender_full_name,
|
|
||||||
image: image,
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".image-list .image.selected").removeClass("selected");
|
|
||||||
$(this).addClass("selected");
|
|
||||||
|
|
||||||
var parentOffset = this.parentNode.clientWidth + this.parentNode.scrollLeft;
|
|
||||||
// this is the left and right of the image compared to its parent.
|
|
||||||
var coords = {
|
|
||||||
left: this.offsetLeft,
|
|
||||||
right: this.offsetLeft + this.clientWidth,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (coords.right > parentOffset) {
|
|
||||||
// add 2px margin
|
|
||||||
$image_list.animate({
|
|
||||||
scrollLeft: coords.right - this.parentNode.clientWidth + 2,
|
|
||||||
}, 100);
|
|
||||||
} else if (coords.left < this.parentNode.scrollLeft) {
|
|
||||||
// subtract 2px margin
|
|
||||||
$image_list.animate({ scrollLeft: coords.left - 2 }, 100);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#lightbox_overlay").on("click", ".center .arrow", function () {
|
|
||||||
var direction = $(this).attr("data-direction");
|
|
||||||
|
|
||||||
if (/^(next|prev)$/.test(direction)) {
|
|
||||||
lightbox[direction]();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}());
|
|
||||||
|
|
||||||
// MAIN CLICK HANDLER
|
// MAIN CLICK HANDLER
|
||||||
|
|
||||||
$(document).on('click', function (e) {
|
$(document).on('click', function (e) {
|
||||||
|
|
|
||||||
|
|
@ -126,6 +126,67 @@ Object.defineProperty(exports, "is_open", {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// this is a block of events that are required for the lightbox to work.
|
||||||
|
$(function () {
|
||||||
|
$("#main_div").on("click", ".message_inline_image a", function (e) {
|
||||||
|
var $img = $(this).find("img");
|
||||||
|
|
||||||
|
// prevent the link from opening in a new page.
|
||||||
|
e.preventDefault();
|
||||||
|
// prevent the message compose dialog from happening.
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
lightbox.show_from_inline_image($img);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#lightbox_overlay .download").click(function () {
|
||||||
|
this.blur();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#lightbox_overlay").on("click", ".image-list .image", function () {
|
||||||
|
var $image_list = $(this).parent();
|
||||||
|
|
||||||
|
var image = $("<img />", {
|
||||||
|
src: this.dataset.src,
|
||||||
|
title: this.title,
|
||||||
|
});
|
||||||
|
|
||||||
|
lightbox.open({
|
||||||
|
type: "photo",
|
||||||
|
user: message_store.get($(this).attr("data-zid")).sender_full_name,
|
||||||
|
image: image,
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".image-list .image.selected").removeClass("selected");
|
||||||
|
$(this).addClass("selected");
|
||||||
|
|
||||||
|
var parentOffset = this.parentNode.clientWidth + this.parentNode.scrollLeft;
|
||||||
|
// this is the left and right of the image compared to its parent.
|
||||||
|
var coords = {
|
||||||
|
left: this.offsetLeft,
|
||||||
|
right: this.offsetLeft + this.clientWidth,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (coords.right > parentOffset) {
|
||||||
|
// add 2px margin
|
||||||
|
$image_list.animate({
|
||||||
|
scrollLeft: coords.right - this.parentNode.clientWidth + 2,
|
||||||
|
}, 100);
|
||||||
|
} else if (coords.left < this.parentNode.scrollLeft) {
|
||||||
|
// subtract 2px margin
|
||||||
|
$image_list.animate({ scrollLeft: coords.left - 2 }, 100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#lightbox_overlay").on("click", ".center .arrow", function () {
|
||||||
|
var direction = $(this).attr("data-direction");
|
||||||
|
|
||||||
|
if (/^(next|prev)$/.test(direction)) {
|
||||||
|
lightbox[direction]();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return exports;
|
return exports;
|
||||||
}());
|
}());
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue