Updates image preview.

src/_h5ai/client/css/inc/preview-img.less

@@ -14,9 +14,8 @@
 	text-align: center;
 }
 
-#pv-img-content {
+#pv-img-content, #pv-spinner {
 	position: fixed;
-
 }
 
 @check-white: #f8f8f8;

src/_h5ai/client/images/spinner.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+	xmlns:svg="http://www.w3.org/2000/svg"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	version="1.1"
+	width="36"
+	height="36"
+	viewBox="-18 -18 36 36"
+>
+	<defs>
+		<circle id="c" cx="10" cy="10" r="4" style="fill:#ffffff;stroke:#cccccc;stroke-width:0.2;" />
+	</defs>
+	<g id="a">
+		<use
+			xlink:href="#c"
+			style="opacity:1;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(45)"
+			style="opacity:0.3;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(90)"
+			style="opacity:0.4;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(135)"
+			style="opacity:0.5;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(180)"
+			style="opacity:0.6;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(225)"
+			style="opacity:0.7;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(270)"
+			style="opacity:0.8;"
+		/>
+		<use
+			xlink:href="#c"
+			transform="rotate(315)"
+			style="opacity:0.9;"
+		/>
+		<animateTransform
+			attributeName="transform"
+			attributeType="XML"
+			type="rotate"
+			begin="0s"
+			dur="0.7s"
+			repeatCount="indefinite"
+			calcMode="discrete"
+			values="0; 45; 90; 135; 180; 225; 270; 315"
+			keyTimes="0.0; 0.1; 0.2; 0.3; 0.4; 0.5; 0.6; 0.7"
+		/>
+	</g>
+</svg>

src/_h5ai/client/js/inc/ext/preview-img.js

@@ -10,6 +10,9 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 						'<div id="pv-img-content">' +
 							'<img id="pv-img-image"/>' +
 						'</div>' +
+						'<div id="pv-spinner">' +
+							'<img src="' + resource.image('spinner') + '"/>' +
+						'</div>' +
 						'<div id="pv-img-close"/>' +
 						'<div id="pv-img-prev"/>' +
 						'<div id="pv-img-next"/>' +
@@ -38,11 +41,13 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 
 			var rect = $(window).fracs('viewport'),
 				$container = $('#pv-img-content'),
+				$spinner = $('#pv-spinner'),
+				$spinnerimg = $spinner.find('img').width(100).height(100),
 				$img = $('#pv-img-image'),
 				margin = isFullscreen ? 0 : 20,
 				barheight = isFullscreen ? 0 : 31;
 
-			$container.css({
+			$container.add($spinner).css({
 				width: rect.width - 2 * margin,
 				height: rect.height - 2 * margin - barheight,
 				left: margin,
@@ -55,6 +60,9 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 			$img.css({
 				margin: '' + tb + 'px ' + lr + 'px'
 			});
+			$spinnerimg.css({
+				margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px'
+			});
 
 			rect = $img.fracs('rect');
 			if (!rect) {
@@ -75,6 +83,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 				height: rect.height
 			});
 
+			$('#pv-img-bar-percent').text('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%');
 			if (isFullscreen) {
 				$('#pv-img-overlay').addClass('fullscreen');
 				$('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen'));
@@ -88,22 +97,13 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 
 		preloadImg = function (src, callback) {
 
-			var $hidden = $('<div><img/></div>')
+			var $img = $('<img/>')
-							.css({
+				.one('load', function () {
-								position: 'absolute',
-								overflow: 'hidden',
-								width: 0,
-								height: 0
-							})
-							.appendTo('body'),
-				$img = $hidden.find('img')
-							.one('load', function () {
 
-								$hidden.remove();
+					callback($img);
-								callback($img);
+					// setTimeout(function () { callback($img); }, 1000); // for testing
-								// setTimeout(function () { callback($img); }, 1000); // for testing
+				})
-							})
+				.attr('src', src);
-							.attr('src', src);
 		},
 
 		onIndexChange = function (idx) {
@@ -113,36 +113,24 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 			var $container = $('#pv-img-content'),
 				$img = $('#pv-img-image'),
 				src = currentEntries[currentIdx].absHref,
-				spinnerTimeout = setTimeout(function () {
+				spinnerTimeout = setTimeout(function () { $('#pv-spinner').show(); }, 200);
-
-					$container.spin({
-						length: 12,
-						width: 4,
-						radius: 24,
-						color: '#ccc',
-						shadow: true
-					});
-				}, 200);
 
 			preloadImg(src, function ($preloaded_img) {
 
 				clearTimeout(spinnerTimeout);
-				$container.spin(false);
+				$('#pv-spinner').hide();
 
 				$('#pv-img-image').fadeOut(100, function () {
 
-					var width = $preloaded_img.width(),
-						height = $preloaded_img.height();
-
 					$('#pv-img-image').replaceWith($preloaded_img.hide());
 					$preloaded_img.attr('id', 'pv-img-image').fadeIn(200);
 
 					// small timeout, so $preloaded_img is visible and therefore $preloaded_img.width is available
 					setTimeout(function () {
+
 						adjustSize();
-						$('#pv-img-bar-percent').text('' + (100 * $preloaded_img.width() / width).toFixed(0) + '%');
 						$('#pv-img-bar-label').text(currentEntries[currentIdx].label);
-						$('#pv-img-bar-size').text('' + width + 'x' + height);
+						$('#pv-img-bar-size').text('' + $preloaded_img[0].naturalWidth + 'x' + $preloaded_img[0].naturalHeight);
 						$('#pv-img-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
 						$('#pv-img-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref);
 					}, 10);
@@ -153,9 +141,11 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
 		onEnter = function (items, idx) {
 
 			$(window).on('keydown', onKeydown);
+			$('#pv-img-image').hide();
 			$('#pv-img-overlay').stop(true, true).fadeIn(200);
 
 			currentEntries = items;
+			adjustSize();
 			onIndexChange(idx);
 		},