add loading status feedback in the side panel for canvas resources

ProjectMirador · Mar 22, 2017 · f9edf0a · f9edf0a
1 parent a6b1495
commit f9edf0a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 11 deletions.
diff --git a/css/less/panels/layers-tab.less b/css/less/panels/layers-tab.less
@@ -16,7 +16,11 @@
     border-bottom: 1px solid gray;
     padding: 10px 10px 10px 0;
     margin-right: 20px;
+    &>h4 {
+      margin-bottom: 5px;
+    }
     .thumb-container {
+      position:relative;
       float:left;
       width: 60px;
       height: 60px;
@@ -32,21 +36,57 @@
         box-shadow: inset 0 0 12px gray;
         top: 50%;
         transform: translateY(-50%);
+        &.loaded {
+          transition: all 0.2s ease-out;
+          opacity:1;
+        }
       }
-      .loaded {
+      .spinner, .failed, .thumb-failed {
+        position:absolute;
+        display:inline-block;
+        width:100%;
+        margin:0 auto;
+        top:50%;
+        transform: translateY(-50%);
+        opacity:0;
         transition: all 0.2s ease-out;
-        opacity:1;
+        color: #666;
+      }
+      &.awaiting-thumbnail {
+        .spinner {
+          opacity:1;
+        }
+      }
+    }
+    &.requested {
+      .spinner {
+        opacity: 1;
+        transition: all 0.2s ease-out;
+      }
+      .thumb-container img {
+        transition: all 0.2s ease-out;
+        opacity: 0.5;
       }
+    }
+    &.failed {
       .failed {
-        visbility:hidden;
+        opacity:1;
+        transition: all 0.2s ease-out;
+      }
+      .thumb-container img {
+        transition: all 0.2s ease-out;
+        opacity: 0.5;
+      }
+      .thumb-failed {
+        opacity: 0;
+      }
+      .thumb-container.awaiting-thumbnail .spinner {
+        opacity:0;
         transition: all 0.2s ease-out;
       }
     }
-    h4 {
-      margin-bottom: 5px;
+    .visibility-toggle {
+      margin-bottom: 10px;
     }
   }
-  .visibility-toggle {
-    margin-bottom: 10px;
-  }
 }
diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js
@@ -650,7 +650,10 @@
         showNavigationControl: false
       });
 
+      console.log(canvasModel.getVisibleImages());
       canvasModel.getVisibleImages().forEach(function(imageResource) {
+        console.log(imageResource);
+        window.imageResource = imageResource;
         _this.loadImage(null, imageResource);
       });
     },

diff --git a/js/src/widgets/layersTab.js b/js/src/widgets/layersTab.js
@@ -65,6 +65,13 @@
     },
 
     updateImageResourceStatus: function(event, imageResource) {
+      var _this = this;
+
+      ['loaded', 'requested', 'initialized', 'drawn'].forEach(function(statusString){
+        _this.element.find('.layers-list-item[data-imageid="'+ imageResource.id + '"]').removeClass(statusString);
+      });
+
+      this.element.find('.layers-list-item[data-imageid="'+ imageResource.id + '"]').addClass(imageResource.getStatus());
     },
     showImageResource: function(event, imageResource) {
       this.element.find('.visibility-toggle[data-imageid="'+ imageResource.id + '"]').prop('checked', true);
@@ -96,7 +103,7 @@
       });
 
       _this.eventEmitter.subscribe('currentCanvasIDUpdated.' + _this.windowId, _this.canvasIdUpdated.bind(_this));
-      // _this.eventEmitter.subscribe('image-needed, image-status-updated', _this.updateImageResourceStatus.bind(_this));
+      _this.eventEmitter.subscribe('image-status-updated', _this.updateImageResourceStatus.bind(_this));
       _this.eventEmitter.subscribe('image-show', _this.showImageResource.bind(_this));
       _this.eventEmitter.subscribe('image-hide', _this.hideImageResource.bind(_this));
       _this.eventEmitter.subscribe('image-opacity-updated', _this.updateImageResourceOpacity.bind(_this));
@@ -117,11 +124,14 @@
       this.element.find('img').on('load', function(event) {
         // fades in thumbs when they finish loading.
         jQuery(this).addClass('loaded');
+        jQuery(this).closest('.thumb-container').removeClass('awaiting-thumbnail');
       });
 
       this.element.find('img').on('error', function(event) {
         // prevents failed images from showing.
         jQuery(this).addClass('failed');
+        jQuery(this).closest('.thumb-container').removeClass('awaiting-thumbnail');
+        jQuery(this).closest('.thumb-container').addClass('thumb-failed');
       });
 
       this.element.on('input', '.opacity-slider', function(event) {
@@ -189,10 +199,13 @@
       '{{#if hasLayers}}',
       '<ul class="layers-listing">',
       '{{#each layers}}',
-      '<li class="layers-list-item {{loadingStatus}}">',
+      '<li class="layers-list-item {{loadingStatus}}" data-imageid="{{imageId}}">',
       '<h4>{{this.title}}</h4>',
-      '<div class="thumb-container">',
+      '<div class="thumb-container awaiting-thumbnail">',
       '<img class="layer-thumb" src="{{url}}" alt="{{canvasTitle}} title="{{canvasTitle}}">',
+      '<span class="spinner"><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></span>',
+      '<span class="failed"><i class="fa fa-ban fa-3x fa-fw"></i></span>',
+      '<span class="thumb-failed"><i class="fa fa-picture-o fa-3x fa-fw"></i></span>',
       '</div>',
       '<form>',
       '<div>',