lightgallery: add custom admin link plugin

This commit is contained in:
Alexandre Iooss 2021-12-27 18:22:07 +01:00
parent 5bbc4c7cc3
commit b6de0c9b6b
2 changed files with 29 additions and 2 deletions

View file

@ -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() { }
}

View file

@ -14,12 +14,13 @@ 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: [lgHash, lgThumbnail, lgZoom],
plugins: [{% if request.user.is_staff %}lgAdmin, {% endif %}lgHash, lgThumbnail, lgZoom],
customSlideName: true,
});
</script>
@ -68,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 }}" data-slide-name="{{ photo.slug }}">
<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 %}