Start on Expose mixin

api/js/etemplate/Expose/ExposeMixin.ts

@@ -0,0 +1,795 @@
+/**
+ * EGroupware eTemplate2 - Mixin to add expose view of media and a gallery view
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link https://www.egroupware.org
+ * @author Hadi Nategh <hn[at]egroupware.org>
+ * @author Nathan Gray <ng[at]egroupware.org>
+ */
+
+// Don't import this more than once
+import "../../../../node_modules/blueimp-gallery/js/blueimp-gallery.min";
+import {LitElement} from "@lion/core";
+import {et2_nextmatch} from "../et2_extension_nextmatch";
+import {Et2Dialog} from "../Et2Dialog/Et2Dialog";
+import {ET2_DATAVIEW_STEPSIZE} from "../et2_dataview_controller";
+
+// Minimum data to qualify as an image and not cause errors
+const IMAGE_DEFAULT = {
+	title: egw.lang('loading'),
+	href: '',
+	type: 'image/png',
+	thumbnail: '',
+	loading: true
+};
+
+// For filtering to only show things we can handle
+const MIME_REGEX = (navigator.userAgent.match(/(MSIE|Trident)/)) ?
+	// IE only supports video/mp4 mime type
+				   new RegExp(/(video\/mp4)|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/) :
+				   new RegExp(/(video\/(mp4|ogg|webm))|(image\/:*(?!tif|x-xcf|pdf))|(audio\/:*)/);
+
+const MIME_AUDIO_REGEX = new RegExp(/(audio\/:*)/);
+// open office document mime type currently supported by webodf editor
+const MIME_ODF_REGEX = new RegExp(/application\/vnd\.oasis\.opendocument\.text/);
+
+type Constructor<T> = { new(...args : any[]) : T };
+
+/**
+ * Interface used to determine if widget can expose
+ */
+export interface ExposeValue
+{
+	path : any;
+	mime : string,
+	download_url? : string
+}
+
+/**
+ * Data to show the slide
+ */
+export interface MediaValue
+{
+	title : string,
+	href : string,
+	type : string,
+	thumbnail? : string
+}
+
+export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
+{
+	return class extends superclass
+	{
+		// @ts-ignore
+		private _gallery : blueimp.Gallery;
+
+		constructor(...args : any[])
+		{
+			super(...args);
+
+			// bind handler context to instance
+			const handlers = [
+				"expose_onclick",
+				"expose_onopen",
+				"expose_onopened",
+				"expose_onslide",
+				"expose_onslideend",
+				"expose_onslidecomplete",
+				"expose_onclose",
+				"expose_onclosed"
+			];
+
+			for(let key of handlers)
+			{
+				this[key] = (<Function><unknown>this[key]).bind(this);
+			}
+		}
+
+		connectedCallback()
+		{
+			super.connectedCallback();
+		}
+
+		disconnectedCallback()
+		{
+			super.disconnectedCallback();
+			this.removeEventListener("click", this.expose_onclick);
+		}
+
+		/**
+		 * Get the info needed to determine if this widget's value allows it to participate in expose
+		 * It needs to have a path, and we use mime to determine if it can expose
+		 *
+		 * It's also passed to getMedia() when we're not reading from a nextmatch
+		 *
+		 * @returns {ExposeValue}
+		 */
+		get exposeValue() : ExposeValue
+		{
+			//@ts-ignore value might not exist
+			return this.value || null;
+		}
+
+		/**
+		 * Get the info needed to show the given value as slide(s)
+		 *
+		 * _value is (usually?) pulled from egw.dataGetUIDdata()
+		 *
+		 * Override this
+		 */
+		getMedia(_value) : MediaValue[]
+		{
+			let base_url = egw.webserverUrl.match(/^\/ig/) ? egw(window).window.location.origin + egw.webserverUrl + '/' : egw.webserverUrl + '/';
+			let mediaContent = [];
+			if(_value)
+			{
+				mediaContent = [{
+					title: _value.label,
+					href: _value.download_url ? base_url + _value.download_url : base_url + _value.path,
+					type: _value.mime || (_value.type ? _value.type + "/*" : "")
+				}];
+				mediaContent[0].thumbnail = _value.thumbnail ? (base_url + _value.thumbnail) : mediaContent[0].href;
+			}
+			return mediaContent;
+		}
+
+		/**
+		 * Handle changes that have to happen based on changes to properties
+		 *
+		 */
+		requestUpdate(name?, oldValue?, options?)
+		{
+			super.requestUpdate(name, oldValue, options);
+
+			// if there's a value change, (de)bind the gallery
+			if(name === "value")
+			{
+				this._bindGallery();
+			}
+		}
+
+		/**
+		 * Binds a click handler so if the user clicks, we'll initialize & show the gallery
+		 *
+		 * @protected
+		 */
+		protected _bindGallery()
+		{
+			//@ts-ignore Expects a parameter, but not actually required
+			let fe = egw_get_file_editor_prefered_mimes();
+
+			// If the media type is not supported do not bind the click handler
+			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)
+				{
+					this._gallery.close();
+				}
+				return;
+			}
+
+			if(!this._gallery)
+			{
+				this.addEventListener("click", this.expose_onclick);
+				this.classList.add("et2_clickable");
+				this.addEventListener("click", this.expose_onclick);
+			}
+		}
+
+		get expose_options()
+		{
+			return {
+				// The Id, element or querySelector of the gallery widget:
+				container: '#blueimp-gallery',
+				// The tag name, Id, element or querySelector of the slides container:
+				slidesContainer: 'div',
+				// The tag name, Id, element or querySelector of the title element:
+				titleElement: 'h3',
+				// The class to add when the gallery is visible:
+				displayClass: 'blueimp-gallery-display',
+				// The class to add when the gallery controls are visible:
+				controlsClass: 'blueimp-gallery-controls',
+				// The class to add when the gallery only displays one element:
+				singleClass: 'blueimp-gallery-single',
+				// The class to add when the left edge has been reached:
+				leftEdgeClass: 'blueimp-gallery-left',
+				// The class to add when the right edge has been reached:
+				rightEdgeClass: 'blueimp-gallery-right',
+				// The class to add when the automatic slideshow is active:
+				playingClass: 'blueimp-gallery-playing',
+				// The class for all slides:
+				slideClass: 'slide',
+				// The slide class for loading elements:
+				slideLoadingClass: '',
+				// The slide class for elements that failed to load:
+				slideErrorClass: 'slide-error',
+				// The class for the content element loaded into each slide:
+				slideContentClass: 'slide-content',
+				// The class for the "toggle" control:
+				toggleClass: 'toggle',
+				// The class for the "prev" control:
+				prevClass: 'prev',
+				// The class for the "next" control:
+				nextClass: 'next',
+				// The class for the "close" control:
+				closeClass: 'close',
+				// The class for the "play-pause" toggle control:
+				playPauseClass: 'play-pause',
+				// The class to add for fullscreen button option
+				fullscreenClass: 'fullscreen',
+				// The list object property (or data attribute) with the object type:
+				typeProperty: 'type',
+				// The list object property (or data attribute) with the object title:
+				titleProperty: 'title',
+				// The list object property (or data attribute) with the object URL:
+				urlProperty: 'href',
+				// The gallery listens for transitionend events before triggering the
+				// opened and closed events, unless the following option is set to false:
+				displayTransition: true,
+				// Defines if the gallery slides are cleared from the gallery modal,
+				// or reused for the next gallery initialization:
+				clearSlides: true,
+				// Defines if images should be stretched to fill the available space,
+				// while maintaining their aspect ratio (will only be enabled for browsers
+				// supporting background-size="contain", which excludes IE < 9).
+				// Set to "cover", to make images cover all available space (requires
+				// support for background-size="cover", which excludes IE < 9):
+				stretchImages: true,
+				// Toggle the controls on pressing the Return key:
+				toggleControlsOnReturn: true,
+				// Toggle the automatic slideshow interval on pressing the Space key:
+				toggleSlideshowOnSpace: true,
+				// Navigate the gallery by pressing left and right on the keyboard:
+				enableKeyboardNavigation: true,
+				// Close the gallery on pressing the ESC key:
+				closeOnEscape: true,
+				// Close the gallery when clicking on an empty slide area:
+				closeOnSlideClick: false,
+				// Close the gallery by swiping up or down:
+				closeOnSwipeUpOrDown: true,
+				// Emulate touch events on mouse-pointer devices such as desktop browsers:
+				emulateTouchEvents: true,
+				// Stop touch events from bubbling up to ancestor elements of the Gallery:
+				stopTouchEventsPropagation: false,
+				// Hide the page scrollbars:
+				hidePageScrollbars: true,
+				// Stops any touches on the container from scrolling the page:
+				disableScroll: true,
+				// Carousel mode (shortcut for carousel specific options):
+				carousel: true,
+				// Allow continuous navigation, moving from last to first
+				// and from first to last slide:
+				continuous: false,
+				// Remove elements outside of the preload range from the DOM:
+				unloadElements: true,
+				// Start with the automatic slideshow:
+				startSlideshow: false,
+				// Delay in milliseconds between slides for the automatic slideshow:
+				slideshowInterval: 3000,
+				// The starting index as integer.
+				// Can also be an object of the given list,
+				// or an equal object with the same url property:
+				index: 0,
+				// The number of elements to load around the current index:
+				preloadRange: 2,
+				// The transition speed between slide changes in milliseconds:
+				transitionSpeed: 400,
+				//Hide controls when the slideshow is playing
+				hideControlsOnSlideshow: true,
+				//Request fullscreen on slide show
+				toggleFullscreenOnSlideShow: true,
+				// The transition speed for automatic slide changes, set to an integer
+				// greater 0 to override the default transition speed:
+				slideshowTransitionSpeed: undefined,
+				// The tag name, Id, element or querySelector of the indicator container:
+				indicatorContainer: 'ol',
+				// The class for the active indicator:
+				activeIndicatorClass: 'active',
+				// The list object property (or data attribute) with the thumbnail URL,
+				// used as alternative to a thumbnail child element:
+				thumbnailProperty: 'thumbnail',
+				// Defines if the gallery indicators should display a thumbnail:
+				thumbnailIndicators: true,
+				//thumbnail with image tag
+				thumbnailWithImgTag: true,
+				// Callback function executed when the Gallery is initialized.
+				// Is called with the gallery instance as "this" object:
+				onopen: this.expose_onopen,
+				// Callback function executed when the Gallery has been initialized
+				// and the initialization transition has been completed.
+				// Is called with the gallery instance as "this" object:
+				onopened: this.expose_onopened,
+				// Callback function executed on slide change.
+				// Is called with the gallery instance as "this" object and the
+				// current index and slide as arguments:
+				onslide: this.expose_onslide,
+				// Callback function executed after the slide change transition.
+				// Is called with the gallery instance as "this" object and the
+				// current index and slide as arguments:
+				onslideend: this.expose_onslideend,
+				//// Callback function executed on slide content load.
+				// Is called with the gallery instance as "this" object and the
+				// slide index and slide element as arguments:
+				onslidecomplete: this.expose_onslidecomplete,
+				//// Callback function executed when the Gallery is about to be closed.
+				// Is called with the gallery instance as "this" object:
+				onclose: this.expose_onclose,
+				// Callback function executed when the Gallery has been closed
+				// and the closing transition has been completed.
+				// Is called with the gallery instance as "this" object:
+				onclosed: this.expose_onclosed
+			}
+		}
+
+
+		/**
+		 * See if the current widget is in a nextmatch, as this allows us to display
+		 * thumbnails underneath
+		 *
+		 * @param {et2_IExposable} widget
+		 * @returns {et2_nextmatch | null}
+		 */
+		protected find_nextmatch(widget)
+		{
+			let current = widget;
+			let nextmatch = null;
+			while(nextmatch == null && current)
+			{
+				current = current.getParent();
+				if(typeof current != 'undefined' && current.instanceOf(et2_nextmatch))
+				{
+					nextmatch = current;
+				}
+			}
+			// No nextmatch, or nextmatch not quite ready
+			// At the moment only filemanger nm would work
+			// as gallery, thus we disable other nestmatches
+			// to build up gallery but filemanager
+			if(nextmatch == null || nextmatch.controller == null || !nextmatch.dom_id.match(/filemanager/, 'ig'))
+			{
+				return null;
+			}
+
+			return nextmatch;
+		};
+
+		private _init_blueimp_gallery(event, _value)
+		{
+			let mediaContent = [];
+			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
+				let current_entry = nm.controller.getRowByNode(event.target);
+
+				// But before it goes, we'll pull everything we can
+				this.read_from_nextmatch(nm, mediaContent);
+				// find current_entry in array and set it's array-index
+				for(let i = 0; i < mediaContent.length; i++)
+				{
+					if('filemanager::' + mediaContent[i].path == current_entry.uid)
+					{
+						current_index = i;
+						break;
+					}
+				}
+
+				// This will trigger nm to refresh and get just the ones we can handle
+				// but it might take a while, so do it later - make sure our current
+				// one is loaded first.
+				window.setTimeout(function()
+				{
+					nm.applyFilters({col_filter: {mime: '/' + MIME_REGEX.source + '/'}});
+				}, 1);
+			}
+			else
+			{
+				// @ts-ignore
+				mediaContent = this.getMedia(_value);
+				// Do not show thumbnail indicator on single expose view
+				this.expose_options.thumbnailIndicators = false;
+			}
+
+			// @ts-ignore
+			this._gallery = new blueimp.Gallery(mediaContent, Object.assign(this.expose_options, {index: current_index}));
+		}
+
+		/**
+		 * Read images out of the data for the nextmatch
+		 *
+		 * @param {et2_nextmatch} nm
+		 * @param {Object[]} images
+		 * @param {number} start_at
+		 * @returns {undefined}
+		 */
+		protected read_from_nextmatch(nm, images, start_at?)
+		{
+			if(!start_at)
+			{
+				start_at = 0;
+			}
+			let image_index = start_at;
+			let stop = Math.max.apply(null, Object.keys(nm.controller._indexMap));
+
+			for(let i = start_at; i <= stop; i++)
+			{
+				if(!nm.controller._indexMap[i] || !nm.controller._indexMap[i].uid)
+				{
+					// Returning instead of using IMAGE_DEFAULT means we stop as
+					// soon as a hole is found, instead of getting everything that is
+					// available.  The gallery can't fill in the holes.
+					images[image_index++] = IMAGE_DEFAULT;
+					continue;
+				}
+				let uid = nm.controller._indexMap[i].uid;
+				if(!uid)
+				{
+					continue;
+				}
+				let data = egw.dataGetUIDdata(uid);
+				if(data && data.data && data.data.mime && MIME_REGEX.test(data.data.mime) && !MIME_AUDIO_REGEX.test(data.data.mime))
+				{
+					let media = this.getMedia(data.data);
+					images[image_index++] = Object.assign({}, data.data, media[0]);
+				}
+			}
+		}
+
+		/**
+		 * Set a particular index/image in the gallery instead of just appending
+		 * it to the end
+		 *
+		 * @param {integer} index
+		 * @param {Object} image
+		 * @returns {undefined}
+		 */
+		protected set_slide(index, image)
+		{
+			let active = (index == this._gallery.index);
+
+			// Pad with blanks until length is right
+			while(index > this._gallery.getNumber())
+			{
+				this._gallery.add([Object.assign({}, IMAGE_DEFAULT)]);
+			}
+
+			// Don't bother with adding a default, we just did that
+			if(image.loading)
+			{
+				//Add load class if it's really a slide with error
+				if(this._gallery.slidesContainer.find('[data-index="' + index + '"]').hasClass(this._gallery.options.slideErrorClass))
+				{
+					this._gallery.slides[index].classList.add(this._gallery.options.slideLoadingClass)
+					this._gallery.slides[index].classList.remove(this._gallery.options.slideErrorClass);
+				}
+				return;
+			}
+			// Remove the loading class if the slide is loaded
+			else
+			{
+				this._gallery.slides[index].classList.remove(this._gallery.options.slideLoadingClass);
+			}
+
+			// Just use add to let gallery create everything it needs
+			let new_index = this._gallery.num;
+			this._gallery.add([image]);
+
+			// Move it to where we want it.
+			// Gallery uses arrays and indexes and has several internal variables
+			// that need to be updated.
+			//
+			// list
+			this._gallery.list[index] = this._gallery.list[new_index];
+			this._gallery.list.splice(new_index, 1);
+
+			// indicators & slides
+			let dom_nodes = ['indicators', 'slides'];
+			for(let i in dom_nodes)
+			{
+				let var_name = dom_nodes[i];
+				// Remove old one from DOM
+				this._gallery[var_name][index].remove();
+				// Move new one into it's place in gallery
+				this._gallery[var_name][index] = this._gallery[var_name][new_index];
+				// Move into place in DOM
+				let node = this._gallery[var_name][index];
+				node.setAttribute('data-index', index)
+				this._gallery.slidesContainer[0].insertBefore(this._gallery.slides[(index + 1)], undefined);
+				if(active)
+				{
+					node.addClass(this._gallery.options.activeIndicatorClass);
+				}
+				this._gallery[var_name].splice(new_index, 1);
+			}
+			if(active)
+			{
+				this._gallery.activeIndicator = this._gallery.indicators[index];
+			}
+
+			// positions
+			this._gallery.positions[index] = active ? 0 : (index > this._gallery.index ? this._gallery.slideWidth : -this._gallery.slideWidth);
+			this._gallery.positions.splice(new_index, 1);
+
+			// elements - removing will allow to re-do the slide
+			if(this._gallery.elements[index])
+			{
+				delete this._gallery.elements[index];
+				this._gallery.loadElement(index);
+			}
+
+			// Remove the one we just added
+			this._gallery.num -= 1;
+		};
+
+		/**
+		 * audio player expose
+		 * @param _value
+		 * @private
+		 */
+		private _audio_player(_value)
+		{
+			let button = [
+				{"button_id": 1, "text": egw.lang('close'), id: '1', image: 'cancel', default: true}
+			];
+
+			// @ts-ignore
+			let mediaContent = this.getMedia(_value)[0];
+			let dialog = new Et2Dialog();
+			dialog.transformAttributes({
+				callback: function(_btn, value)
+				{
+					if(_btn == Et2Dialog.OK_BUTTON)
+					{
+
+					}
+				},
+				beforeClose: function()
+				{
+
+				},
+				title: mediaContent.title,
+				buttons: button,
+				minWidth: 350,
+				minHeight: 200,
+				modal: false,
+				position: "right bottom,right-50 bottom-10",
+				value: {
+					content: {
+						src: mediaContent.download_href
+					}
+				},
+				resizable: false,
+				template: egw.webserverUrl + '/api/templates/default/audio_player.xet',
+				dialogClass: "audio_player"
+			});
+			document.body.appendChild(dialog);
+		}
+
+
+		/**
+		 * Check if clicked target from nm is in depth
+		 *
+		 *  @param nm nextmatch widget
+		 *  @param target selected target dom node
+		 *
+		 *  @return {boolean} returns false if target is not in depth otherwise True
+		 */
+		private _is_target_indepth(nm, target?)
+		{
+			let res = false;
+			if(nm)
+			{
+				if(!target)
+				{
+					// @ts-ignore
+					let target = this.getDOMNode();
+				}
+				let entry = nm.controller.getRowByNode(target);
+				if(entry && entry.controller.getDepth() > 0)
+				{
+					res = true;
+				}
+			}
+			return res;
+		}
+
+		protected expose_onclick(event : MouseEvent)
+		{
+			event.stopImmediatePropagation();
+			// Do not trigger expose view if one of the operator keys are held
+			if(event.altKey || event.ctrlKey || event.shiftKey || event.metaKey)
+			{
+				return;
+			}
+
+			// @ts-ignore Wants an argument, but does not require it
+			let fe = egw_get_file_editor_prefered_mimes();
+
+			if(this.exposeValue.mime.match(MIME_REGEX, 'ig') && !this.exposeValue.mime.match(MIME_AUDIO_REGEX, 'ig'))
+			{
+				this._init_blueimp_gallery(event, this.exposeValue);
+			}
+			else if(this.exposeValue.mime.match(MIME_AUDIO_REGEX, 'ig'))
+			{
+				this._audio_player(this.exposeValue);
+			}
+			else if(fe && fe.mime && fe.edit && fe.mime[this.exposeValue.mime])
+			{
+				egw.open_link(egw.link('/index.php', {
+					menuaction: fe.edit.menuaction,
+					path: this.exposeValue.path,
+					cd: 'no'	// needed to not reload framework in sharing
+				}), '', fe.edit_popup);
+			}
+
+		}
+
+		protected expose_onopen() {}
+
+		protected expose_onopened()
+		{
+			// Check to see if we're in a nextmatch, do magic
+			let nm = this.find_nextmatch(this);
+			let self = this;
+			if(nm)
+			{
+				// Add scrolling to the indicator list
+				let total_count = nm.controller._grid.getTotalCount();
+				if(total_count >= this._gallery.num)
+				{
+					let $indicator = this._gallery.container.find('.indicator');
+					$indicator
+						.addClass('paginating');
+					/*
+						.swipe(function(event, direction, distance)
+						{
+							// @ts-ignore
+							if(direction == jQuery.fn.swipe.directions.LEFT)
+							{
+								distance *= -1;
+							}
+							// @ts-ignore
+							else if(direction == jQuery.fn.swipe.directions.RIGHT)
+							{
+								// OK.
+							}
+							else
+							{
+								return;
+							}
+							jQuery(this).css('left', Math.min(0, parseInt(jQuery(this).css('left')) - (distance * 30)) + 'px');
+						});
+
+					 */
+
+
+					// Bind the mousewheel handler
+					$indicator[0].addEventListener('wheel', function(event, _delta)
+					{
+						let delta = _delta || event.deltaY / 120;
+						let g_width = parseInt(getComputedStyle(this._gallery.container[0]).width);
+						let width = parseInt(getComputedStyle(this._gallery.indicatorContainer[0]).width);
+						let left = parseInt(getComputedStyle(this._gallery.indicatorContainer[0]).left);
+						if(delta > 0 && left > g_width / 2)
+						{
+							return;
+						}
+
+						//Reload next pictures into the gallery by scrolling on thumbnails
+						if(delta < 0 && width + left < g_width)
+						{
+							let nextIndex = this._gallery.indicatorContainer.find('[title="loading"]')[0];
+							if(nextIndex)
+							{
+								self.expose_onslideend(this._gallery, nextIndex.dataset.index - 1);
+							}
+							return;
+						}
+						// Move it about 5 indicators
+						let i_width = parseInt(getComputedStyle(this._gallery.activeIndicator[0]).width);
+						jQuery($indicator[0]).css('left', left - (-delta * i_width * 5) + 'px');
+
+						event.preventDefault();
+					}.bind(this));
+				}
+			}
+		}
+
+		protected expose_onslide(index, slide)
+		{
+			//todo
+			//if (typeof this._super == 'undefined') return;
+			// First let parent try
+			let nm = this.find_nextmatch(this);
+			if(nm)
+			{
+				// See if we need to move the indicator
+				let indicator = this._gallery.container.find('.indicator');
+				let current = jQuery('.active', indicator).position();
+
+				if(current)
+				{
+					let width = parseInt(window.getComputedStyle(this._gallery.container[0]).width)
+					//	indicator.animate({left: (width / 2) - current.left}, 10);
+				}
+			}
+		}
+
+		protected expose_onslideend(index, slide)
+		{
+			// Check to see if we're in a nextmatch, do magic
+			let nm = this.find_nextmatch(this);
+			if(nm)
+			{
+				// Check to see if we're near the end, or maybe some pagination
+				// would be good.
+				let total_count = nm.controller._grid.getTotalCount();
+
+				// Already at the end, don't bother
+				if(index == total_count - 1 || index == 0)
+				{
+					return;
+				}
+
+				// Try to determine direction from state of next & previous slides
+				let direction = 1;
+				for(let i in this._gallery.elements)
+				{
+					// Loading or error
+					if(this._gallery.elements[i] == 1 || this._gallery.elements[i] == 3 || this._gallery.list[i].loading)
+					{
+						direction = i >= index ? 1 : -1;
+						break;
+					}
+				}
+
+				if(!this._gallery.list[index + direction] || this._gallery.list[index + direction].loading ||
+					total_count > this._gallery.getNumber() && index + ET2_DATAVIEW_STEPSIZE > this._gallery.getNumber())
+				{
+					// This will get the next batch of rows
+					let start = Math.max(0, direction > 0 ? index : index - ET2_DATAVIEW_STEPSIZE);
+					let end = Math.min(total_count - 1, start + ET2_DATAVIEW_STEPSIZE);
+					nm.controller._gridCallback(start, end);
+					let images = [];
+					this.read_from_nextmatch(nm, images, start);
+
+					// Gallery always adds to the end, causing problems with pagination
+					for(let i in images)
+					{
+						this.set_slide(i, images[i]);
+					}
+				}
+			}
+
+		}
+
+		protected expose_onslidecomplete() {}
+
+		protected expose_onclose()
+		{
+			// Check to see if we're in a nextmatch, remove magic
+			let nm = this.find_nextmatch(this);
+			if(nm && !this._is_target_indepth(nm))
+			{
+				// Remove scrolling from thumbnails
+				this._gallery.container.find('.indicator')
+					.removeClass('paginating')
+					.off('mousewheel')
+					.off('swipe');
+
+				// Remove applied mime filter
+				nm.applyFilters({col_filter: {mime: ''}});
+			}
+
+		}
+
+		protected expose_onclosed() {}
+
+	}
+}

api/templates/default/etemplate2.css

@@ -3399,23 +3399,17 @@ span.et2_egw_action_ddHelper_itemsCnt {
     display: inline-block;
     width: auto;
     height: 100px;
+    min-width: 32px;
+    min-height: 32px;
     margin: 0;
-    background: transparent;
+    background-size: contain;
+    background-color: transparent;
     opacity: 1;
     cursor: pointer;
     border-radius: 0;
     border: 0;
 }
 
-.blueimp-gallery > .indicator > li > img {
-    display: inline-block;
-    width: auto;
-    height: 100px;
-    margin: 0;
-    cursor: pointer;
-    z-index: -1;
-    position: relative;
-}
 
 /*Make indicator visible all the time to be able accuratley estimate
   current active slide position in thubmnal bar*/
@@ -3430,7 +3424,7 @@ span.et2_egw_action_ddHelper_itemsCnt {
     -webkit-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
     -moz-box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
     box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 1);
-    background: transparent;
+    background-color: transparent;
 }
 
 /*Active thumbnail border*/
@@ -3438,7 +3432,7 @@ span.et2_egw_action_ddHelper_itemsCnt {
     -webkit-box-shadow: inset 0px 0px 0px 4px #0c5da5;
     -moz-box-shadow: inset 0px 0px 0px 4px #0c5da5;
     box-shadow: inset 0px 0px 0px 4px #0c5da5;
-    background: transparent;
+    background-color: transparent;
 }
 
 /*Slideshow Play/Pause button*/

package.json

@@ -63,6 +63,7 @@
     "@lion/select": "^0.15.0",
     "@lion/textarea": "^0.14.0",
     "@shoelace-style/shoelace": "^2.0.0-beta.73",
+    "blueimp-gallery": "^3.4.0",
     "lit-flatpickr": "^0.3.0",
     "sortablejs": "^1.14.0"
   },