Use image gallery feature of magnific

commit cc7061e9458d04dd02aad9c02ba3a89306e0fae7
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 11:21:08 2017 +0900

    ;

commit 9233be7e432daff605812e6b49042f69d348b6e7
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 10:01:26 2017 +0900

    Don't break if $elem is undefined

commit 598a694c070c86df8d9f5ffa1ed84e2f8756e65f
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 04:51:14 2017 +0900

    .

commit 1711685a33ccd236011f54d3e652991728530b3a
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 04:34:11 2017 +0900

    ;

commit 81703f36c0593250aeac3418fde86660fd307092
Author: James Kiesel <james.kiesel@gmail.com>
Date:   Tue Apr 25 04:12:37 2017 +0900

    Use image gallery functionality in magnific
This commit is contained in:
James Kiesel 2017-04-25 11:23:15 +09:00
parent dad2024094
commit 48c0f3faf3
4 changed files with 40 additions and 39 deletions

View File

@ -2,47 +2,47 @@ import loadScript from 'discourse/lib/load-script';
import { escapeExpression } from 'discourse/lib/utilities';
export default function($elem) {
$("a.lightbox", $elem).each(function(i, e) {
loadScript("/javascripts/jquery.magnific-popup-min.js").then(function() {
const $e = $(e);
// do not lightbox spoiled images
if ($e.parents(".spoiler").length > 0 || $e.parents(".spoiled").length > 0) { return; }
if (!$elem) { return; }
loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
const spoilers = $elem.find('.spoiler a.lightbox, .spoiled a.lightbox');
$elem.find('a.lightbox').not(spoilers).magnificPopup({
type: "image",
closeOnContentClick: false,
removalDelay: 300,
mainClass: "mfp-zoom-in",
$e.magnificPopup({
type: "image",
closeOnContentClick: false,
removalDelay: 300,
mainClass: "mfp-zoom-in",
gallery: {
enabled: true
},
callbacks: {
open() {
const wrap = this.wrap,
img = this.currItem.img,
maxHeight = img.css("max-height");
callbacks: {
open() {
const wrap = this.wrap,
img = this.currItem.img,
maxHeight = img.css("max-height");
wrap.on("click.pinhandler", "img", function() {
wrap.toggleClass("mfp-force-scrollbars");
img.css("max-height", wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight);
});
},
beforeClose() {
this.wrap.off("click.pinhandler");
this.wrap.removeClass("mfp-force-scrollbars");
}
wrap.on("click.pinhandler", "img", function() {
wrap.toggleClass("mfp-force-scrollbars");
img.css("max-height", wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight);
});
},
image: {
titleSrc(item) {
const href = item.el.data("download-href") || item.src;
let src = [escapeExpression(item.el.attr("title")), $("span.informations", item.el).text().replace('x', '&times;')];
if (!Discourse.SiteSettings.prevent_anons_from_downloading_files || Discourse.User.current()) {
src.push('<a class="image-source-link" href="' + href + '">' + I18n.t("lightbox.download") + '</a>');
}
return src.join(' &middot; ');
}
beforeClose() {
this.wrap.off("click.pinhandler");
this.wrap.removeClass("mfp-force-scrollbars");
}
},
image: {
titleSrc(item) {
const href = item.el.data("download-href") || item.src;
let src = [escapeExpression(item.el.attr("title")), $("span.informations", item.el).text().replace('x', '&times;')];
if (!Discourse.SiteSettings.prevent_anons_from_downloading_files || Discourse.User.current()) {
src.push('<a class="image-source-link" href="' + href + '">' + I18n.t("lightbox.download") + '</a>');
}
return src.join(' &middot; ');
}
}
});
});
});
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -39,7 +39,7 @@
//= require plugin_tests
//= require_self
//
//= require jquery.magnific-popup-min.js
//= require jquery.magnific-popup.min.js
window.inTestEnv = true;