diff --git a/photologue_custom/static/lightgallery/plugins/admin/lg-admin.js b/photologue_custom/static/lightgallery/plugins/admin/lg-admin.js new file mode 100644 index 0000000000000000000000000000000000000000..64ba238bec7539225e805485889ebcd8d54cb298 --- /dev/null +++ b/photologue_custom/static/lightgallery/plugins/admin/lg-admin.js @@ -0,0 +1,26 @@ +/* + * Custom LightGallery plugin to add some buttons for administration + * + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +class lgAdmin { + constructor(instance, $LG) { + this.core = instance; + this.$LG = $LG; + return this; + } + + init() { + this.core.$toolbar.append("<a href=\"#\" id=\"lg-admin\" class=\"lg-icon\">\uE033</a>"); + this.core.LGel.on("lgAfterSlide.admin", this.onAfterSlide.bind(this)); + } + + onAfterSlide(event) { + const photoId = this.core.galleryItems[event.detail.index].slideName; + document.getElementById("lg-admin").href = `https://photos.crans.org/admin/photologue/photo/${photoId}/change/`; + } + + // Admin must have destroy prototype + destroy() { } +} diff --git a/photologue_custom/static/lightgallery/plugins/hash/lg-hash.min.js b/photologue_custom/static/lightgallery/plugins/hash/lg-hash.min.js new file mode 100644 index 0000000000000000000000000000000000000000..54e927edf4de92856c22147159447b25460354fd --- /dev/null +++ b/photologue_custom/static/lightgallery/plugins/hash/lg-hash.min.js @@ -0,0 +1,8 @@ +/** + * lightgallery | 2.2.1 | September 4th 2021 + * http://www.lightgalleryjs.com/ + * Copyright (c) 2020 Sachin Neravath; + * @license GPLv3 + */ + + !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgHash=e()}(this,(function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,i=1,o=arguments.length;i<o;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},e="lgAfterSlide",i="lgAfterClose",o={hash:!0,galleryId:"1",customSlideName:!1};return function(){function s(e,i){return this.core=e,this.$LG=i,this.settings=t(t({},o),this.core.settings),this}return s.prototype.init=function(){var t=this;this.settings.hash&&(this.oldHash=window.location.hash,setTimeout((function(){t.buildFromHash()}),100),this.core.LGel.on(e+".hash",this.onAfterSlide.bind(this)),this.core.LGel.on(i+".hash",this.onCloseAfter.bind(this)),this.$LG(window).on("hashchange.lg.hash.global"+this.core.lgId,this.onHashchange.bind(this)))},s.prototype.onAfterSlide=function(t){var e=this.core.galleryItems[t.detail.index].slideName;e=this.settings.customSlideName&&e||t.detail.index,history.replaceState?history.replaceState(null,"",window.location.pathname+window.location.search+"#lg="+this.settings.galleryId+"&slide="+e):window.location.hash="lg="+this.settings.galleryId+"&slide="+e},s.prototype.getIndexFromUrl=function(t){void 0===t&&(t=window.location.hash);var e=t.split("&slide=")[1],i=0;if(this.settings.customSlideName)for(var o=0;o<this.core.galleryItems.length;o++){if(this.core.galleryItems[o].slideName===e){i=o;break}}else i=parseInt(e,10);return isNaN(i)?0:i},s.prototype.buildFromHash=function(){var t=window.location.hash;if(t.indexOf("lg="+this.settings.galleryId)>0){this.$LG(document.body).addClass("lg-from-hash");var e=this.getIndexFromUrl(t);return this.core.openGallery(e),!0}},s.prototype.onCloseAfter=function(){this.oldHash&&this.oldHash.indexOf("lg="+this.settings.galleryId)<0?history.replaceState?history.replaceState(null,"",this.oldHash):window.location.hash=this.oldHash:history.replaceState?history.replaceState(null,document.title,window.location.pathname+window.location.search):window.location.hash=""},s.prototype.onHashchange=function(){if(this.core.lgOpened){var t=window.location.hash,e=this.getIndexFromUrl(t);t.indexOf("lg="+this.settings.galleryId)>-1?this.core.slide(e,!1,!1):this.core.lGalleryOn&&this.core.closeGallery()}},s.prototype.closeGallery=function(){this.settings.hash&&this.$LG(document.body).removeClass("lg-from-hash")},s.prototype.destroy=function(){this.core.LGel.off(".lg.hash"),this.core.LGel.off(".hash"),this.$LG(window).off("hashchange.lg.hash.global"+this.core.lgId)},s}()})); diff --git a/photologue_custom/templates/photologue/gallery_detail.html b/photologue_custom/templates/photologue/gallery_detail.html index 7fac58709475bedd68e4e98042f64f44d5e8a969..dcbb43bf046405aa208016d1b7e58d8e4e1abe15 100644 --- a/photologue_custom/templates/photologue/gallery_detail.html +++ b/photologue_custom/templates/photologue/gallery_detail.html @@ -14,11 +14,14 @@ SPDX-License-Identifier: GPL-3.0-or-later {% block extrajs %} <script src="{% static 'lightgallery/lightgallery.min.js' %}"></script> +<script src="{% static 'lightgallery/plugins/admin/lg-admin.js' %}"></script> +<script src="{% static 'lightgallery/plugins/hash/lg-hash.min.js' %}"></script> <script src="{% static 'lightgallery/plugins/thumbnail/lg-thumbnail.min.js' %}"></script> <script src="{% static 'lightgallery/plugins/zoom/lg-zoom.min.js' %}"></script> <script> lightGallery(document.getElementById('lightgallery'), { - plugins: [lgZoom, lgThumbnail] + plugins: [{% if request.user.is_staff %}lgAdmin, {% endif %}lgHash, lgThumbnail, lgZoom], + customSlideName: true, }); </script> {% endblock %} @@ -66,7 +69,7 @@ SPDX-License-Identifier: GPL-3.0-or-later </div> <div class="card-body row" id="lightgallery"> {% for photo in photos %} - <a class="col-6 col-md-3 mb-2 text-center" href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}"> + <a class="col-6 col-md-3 mb-2 text-center" href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}" data-slide-name="{{ photo.id }}"> <img src="{{ photo.get_thumbnail_url }}" loading="lazy" class="img-thumbnail" alt="{{ photo.title }}{% if photo.date_taken %} - {{ photo.date_taken|date }} {{ photo.date_taken|time }}{% endif %} - {{ photo.extended.owner.get_full_name }}{% if photo.extended.license %} - {{ photo.extended.license }}{% endif %}"> </a> {% endfor %}