diff --git a/api/js/etemplate/Et2Image/Et2Image.ts b/api/js/etemplate/Et2Image/Et2Image.ts index f12241a57c..01eac032ca 100644 --- a/api/js/etemplate/Et2Image/Et2Image.ts +++ b/api/js/etemplate/Et2Image/Et2Image.ts @@ -74,12 +74,6 @@ export class Et2Image extends Et2Widget(SlotMixin(LitElement)) implements et2_ID * widthxheight, if popup should be used, eg. 640x480 */ extra_link_popup: {type: String}, - - /** - * Expose view - * Clicking on an image with href value would popup an expose view, and will show image referenced by href. - */ - expose_view: {type: Boolean}, } } @@ -103,12 +97,13 @@ export class Et2Image extends Et2Widget(SlotMixin(LitElement)) implements et2_ID this.extra_link_target = "_self"; this.extra_link_popup = ""; this.expose_view = false; + + this._handleClick = this._handleClick.bind(this); } connectedCallback() { super.connectedCallback(); - this._handleClick = this._handleClick.bind(this); } _imageTemplate() diff --git a/api/js/etemplate/Expose/Et2ImageExpose.ts b/api/js/etemplate/Expose/Et2ImageExpose.ts new file mode 100644 index 0000000000..66169fd483 --- /dev/null +++ b/api/js/etemplate/Expose/Et2ImageExpose.ts @@ -0,0 +1,50 @@ +import {ExposeMixin, ExposeValue, MediaValue} from "./ExposeMixin"; +import {Et2Image} from "../Et2Image/Et2Image"; +import {et2_IDetachedDOM} from "../et2_core_interfaces"; + +/** + * Shows an image and if you click on it it gets bigger + * + * Set src property for the thumbnail / small image + * Set href property to the URL of the full / large image + */ +export class Et2ImageExpose extends ExposeMixin(Et2Image) implements et2_IDetachedDOM +{ + constructor() + { + super(); + } + + connectedCallback() + { + super.connectedCallback(); + } + + /** + * Used to determine if this widget is exposable. Images always are, even if we don't actually + * know the mime type. + * + * @returns {ExposeValue} + */ + get exposeValue() : ExposeValue + { + return { + mime: "image/*", + path: this.href, + download_url: this.href, + }; + } + + /** + * Get the info needed to show this image as slide(s) + */ + getMedia(_value) : MediaValue[] + { + let media = super.getMedia(_value); + media[0].thumbnail = this.src; + + return media; + } +} + +customElements.define("et2-image-expose", Et2ImageExpose as any, {extends: 'img'}); \ No newline at end of file diff --git a/api/js/etemplate/Expose/ExposeMixin.ts b/api/js/etemplate/Expose/ExposeMixin.ts index e1c1bcbb29..6e3df96f16 100644 --- a/api/js/etemplate/Expose/ExposeMixin.ts +++ b/api/js/etemplate/Expose/ExposeMixin.ts @@ -11,7 +11,7 @@ // Don't import this more than once import "../../../../node_modules/blueimp-gallery/js/blueimp-gallery.min"; -import {LitElement} from "@lion/core"; +import {html, LitElement, render} from "@lion/core"; import {et2_nextmatch} from "../et2_extension_nextmatch"; import {Et2Dialog} from "../Et2Dialog/Et2Dialog"; import {ET2_DATAVIEW_STEPSIZE} from "../et2_dataview_controller"; @@ -90,6 +90,12 @@ export function ExposeMixin>(superclass : B) connectedCallback() { super.connectedCallback(); + + if(document.body.querySelector('#blueimp-gallery') == null) + { + // Create Gallery DOM structure + render(this._galleryTemplate(), document.body); + } } disconnectedCallback() @@ -164,7 +170,6 @@ export function ExposeMixin>(superclass : B) if(!this.exposeValue || typeof this.exposeValue.mime != 'string' || (!this.exposeValue.mime.match(MIME_REGEX, 'ig') && (!fe || fe.mime && !fe.mime[this.exposeValue.mime])) || typeof this.exposeValue.download_url == 'undefined') { - this.removeEventListener("click", this.expose_onclick); this.classList.remove("et2_clickable"); if(this._gallery) { @@ -175,12 +180,24 @@ export function ExposeMixin>(superclass : B) if(!this._gallery) { - this.addEventListener("click", this.expose_onclick); this.classList.add("et2_clickable"); - this.addEventListener("click", this.expose_onclick); + + // Normal click handler will handle it } } + /** + * Just override the normal click handler + * + * @param {MouseEvent} _ev + * @returns {boolean} + */ + _handleClick(_ev : MouseEvent) : boolean + { + this.expose_onclick(_ev) + return true; + } + get expose_options() { return { @@ -326,6 +343,22 @@ export function ExposeMixin>(superclass : B) } } + protected _galleryTemplate() + { + return html` + + `; + } /** * See if the current widget is in a nextmatch, as this allows us to display @@ -360,9 +393,13 @@ export function ExposeMixin>(superclass : B) private _init_blueimp_gallery(event, _value) { + // Image list let mediaContent = []; + + // We'll customise default options + let options = this.expose_options; + let nm = this.find_nextmatch(this); - let current_index = 0; if(nm && !this._is_target_indepth(nm, event.target)) { // Get the row that was clicked, find its index in the list @@ -375,7 +412,7 @@ export function ExposeMixin>(superclass : B) { if('filemanager::' + mediaContent[i].path == current_entry.uid) { - current_index = i; + options.index = i; break; } } @@ -393,11 +430,15 @@ export function ExposeMixin>(superclass : B) // @ts-ignore mediaContent = this.getMedia(_value); // Do not show thumbnail indicator on single expose view - this.expose_options.thumbnailIndicators = false; + options.thumbnailIndicators = (mediaContent.length > 1); + if(!options.thumbnailIndicators) + { + options.indicatorContainer = 'nope'; + } } // @ts-ignore - this._gallery = new blueimp.Gallery(mediaContent, Object.assign(this.expose_options, {index: current_index})); + this._gallery = new blueimp.Gallery(mediaContent, options); } /** diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index 2cd50644bb..c464517923 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -37,6 +37,7 @@ import './Et2Date/Et2DateTimeReadonly'; import './Et2Date/Et2DateTimeToday'; import './Et2Description/Et2Description'; import './Et2Dialog/Et2Dialog'; +import './Expose/Et2ImageExpose'; import './Et2Image/Et2Image'; import './Et2Select/Et2Select'; import './Et2Select/Et2SelectAccount';