Refactor preview extension.

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

@@ -25,7 +25,16 @@
 #pv-spinner {
     position: absolute;
 
-    img {
+    .back {
+        width: 240px;
+        height: 240px;
+        margin: -120px -120px;
+        border-radius: 120px;
+        background: #f00;
+        opacity: 0.5;
+        overflow: hidden;
+    }
+    .spinner {
         width: 100px;
         height: 100px;
         margin: -50px -50px;
@@ -137,7 +146,7 @@
 }
 
 @media only screen and (max-width: 700px) {
-#pv-prev-area, #pv-next-area, #pv-close-area {
+#pv-prev-area, #pv-next-area {
     display: none !important;
 }
 }

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

@@ -7,6 +7,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'co
         }, allsettings['preview-img']);
     var templateLoading = '<img id="pv-img-image" class="loading"/>';
     var spinnerThreshold = 200;
+    var spinnerTimeoutId;
     var currentItems, currentIdx, currentItem;
 
 
@@ -29,47 +30,17 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'co
         });
     }
 
-    function showSpinner(item) {
-
-        var timeoutId;
-
-        function start() {
-
-            $('#pv-content')
-                .empty()
-                .append($(templateLoading).attr('src', item.thumbSquare))
-                .show();
-
-            onAdjustSize();
-
-            preview.setLabels([item.label]);
-            preview.showSpinner(true);
-        }
-
-        function stop() {
-
-            clearTimeout(timeoutId);
-            preview.showSpinner(false);
-        }
-
-        timeoutId = setTimeout(start, spinnerThreshold);
-        return stop;
-    }
-
     function preloadImg(item, callback) {
 
-        var hide = showSpinner(item);
-
         requestSample(item.absHref, function (src) {
 
             $('<img/>')
                 .one('load', function (ev) {
 
-                    hide();
                     callback(item, ev.target);
 
                     // for testing
-                    // setTimeout(function () { hide(); callback(item, ev.target); }, 1000);
+                    // setTimeout(function () { callback(item, ev.target); }, 1000);
                 })
                 .attr('src', src);
         });
@@ -102,15 +73,29 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'co
         currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
         currentItem = currentItems[currentIdx];
 
+        preview.setLabels([currentItem.label]);
         preview.setIndex(currentIdx + 1, currentItems.length);
         preview.setRawLink(currentItem.absHref);
 
+        $('#pv-content').hide();
+        if (preview.isSpinnerVisible()) {
+            preview.showSpinner(true, currentItem.thumbSquare);
+        } else {
+            clearTimeout(spinnerTimeoutId);
+            spinnerTimeoutId = setTimeout(function () {
+
+                preview.showSpinner(true, currentItem.thumbSquare);
+            }, spinnerThreshold);
+        }
+
         preloadImg(currentItem, function (item, preloaded_img) {
 
             if (item !== currentItem) {
                 return;
             }
 
+            clearTimeout(spinnerTimeoutId);
+            preview.showSpinner(false);
             $('#pv-content')
                 .empty()
                 .append($(preloaded_img).attr('id', 'pv-img-image'))

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

@@ -7,7 +7,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
     var template =
             '<div id="pv-overlay">' +
                 '<div id="pv-content"/>' +
-                '<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
+                '<div id="pv-spinner"><img class="back"/><img class="spinner" src="' + resource.image('spinner') + '"/></div>' +
                 '<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview-prev') + '"/></div>' +
                 '<div id="pv-next-area" class="hof"><img src="' + resource.image('preview-next') + '"/></div>' +
                 '<div id="pv-bottombar" class="clearfix hof">' +
@@ -28,6 +28,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
     var userAliveTimeoutId = null;
     var onIndexChange = null;
     var onAdjustSize = null;
+    var spinnerVisible = false;
 
 
     function adjustSize() {
@@ -182,17 +183,32 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
         onAdjustSize = fn;
     }
 
-    function showSpinner(show, millis) {
+    function showSpinner(show, src, millis) {
 
         if (!_.isNumber(millis)) {
-            millis = 400;
+            millis = 300;
         }
 
+        var $spinner = $('#pv-spinner').stop(true, true);
+        var $back = $spinner.find('.back');
+
         if (show) {
-            $('#pv-spinner').stop(true, true).fadeIn(millis);
+            if (src) {
+                $back.attr('src', src).show();
             } else {
-            $('#pv-spinner').stop(true, true).fadeOut(millis);
+                $back.hide();
             }
+            spinnerVisible = true;
+            $spinner.fadeIn(millis);
+        } else {
+            spinnerVisible = false;
+            $spinner.fadeOut(millis);
+        }
+    }
+
+    function isSpinnerVisible() {
+
+        return spinnerVisible;
     }
 
     function init() {
@@ -206,7 +222,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
         $('#pv-spinner').hide();
         $('#pv-bar-prev, #pv-prev-area').on('click', onPrevious);
         $('#pv-bar-next, #pv-next-area').on('click', onNext);
-        $('#pv-bar-close, #pv-close-area').on('click', onExit);
+        $('#pv-bar-close').on('click', onExit);
         $('#pv-bar-fullscreen').on('click', onFullscreen);
 
         $('#pv-overlay')
@@ -214,11 +230,9 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
             .on('mousemove mousedown', userAlive)
             .on('click mousedown mousemove keydown keypress', function (ev) {
 
-                if (ev.type === 'click') {
+                if (ev.type === 'click' && (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-content')) {
-                    if (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-content') {
                     onExit();
                 }
-                }
                 ev.stopImmediatePropagation();
             });
 
@@ -236,6 +250,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
         setLabels: setLabels,
         setOnIndexChange: setOnIndexChange,
         setOnAdjustSize: setOnAdjustSize,
-        showSpinner: showSpinner
+        showSpinner: showSpinner,
+        isSpinnerVisible: isSpinnerVisible
     };
 });