WIP - fixes images loading progress bar, still needs manifest loader

pulibrary · Mar 9, 2018 · 589fe81 · 589fe81
1 parent 40d6621
commit 589fe81
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 64 deletions.
diff --git a/valhalla/app/javascript/components/Thumbnails.vue b/valhalla/app/javascript/components/Thumbnails.vue
@@ -1,13 +1,5 @@
 <template>
   <div class="gallery" @click.capture="deselect($event)">
-    <transition name="fade">
-      <div v-if="show" class="overlay" v-on:click="show = !show">
-          <div class="progress">
-            <div class="progress-bar" role="progressbar" v-bind:style="'width: ' + pctLoaded + '%'" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="txt">Loading images &hellip;</div>
-      </div>
-    </transition>
     <div class="gallery_controls">
       <div class="dropdown">
         <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="selectOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -29,20 +21,26 @@
         <i class="fa fa-image fa-lg"></i>
       </div>
     </div>
-    <draggable v-model="thumbnails" tag="div" name="list-complete" class="img_gallery">
-      <div v-images-loaded:on.progress="imageProgress">
-        <div @click.capture="select(thumbnail.id, $event)"
-              v-bind:style="{'max-width': thumbPixelWidth + 'px' }"
-              class="thumbnail"
-              v-bind:class="{ hasChanged: hasChanged(thumbnail.id), selected: isSelected(thumbnail) }"
-              v-for="thumbnail in thumbnails" :key="thumbnail.id">
-          <img :src="thumbnail.url" class="thumb">
-          <div v-bind:style="{'padding': captionPixelPadding + 'px' }" class="caption">
-            {{thumbnail.label}}
-          </div>
-        </div>
+    <transition name="fade">
+      <div v-if="show" class="progress">
+          <div class="progress-bar" role="progressbar" v-bind:style="'width: '
+          + pctLoaded + '%'" v-bind:aria-valuenow="pctLoaded" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
-    </draggable>
+    </transition>
+    <div v-images-loaded:on.progress="imageProgress">
+      <draggable v-model="thumbnails" tag="div" name="list-complete" class="img_gallery">
+          <div @click.capture="select(thumbnail.id, $event)"
+                v-bind:style="{'max-width': thumbPixelWidth + 'px' }"
+                class="thumbnail"
+                v-bind:class="{ hasChanged: hasChanged(thumbnail.id), selected: isSelected(thumbnail) }"
+                v-for="thumbnail in thumbnails" :key="thumbnail.id">
+            <img :src="thumbnail.url" class="thumb">
+            <div v-bind:style="{'padding': captionPixelPadding + 'px' }" class="caption">
+              {{thumbnail.label}}
+            </div>
+          </div>
+      </draggable>
+    </div>
   </div>
 </template>
 
@@ -101,17 +99,6 @@ export default {
     }
   },
   methods: {
-    imageProgress: function (instance, image ) {
-      const result = image.isLoaded ? 'loaded' : 'broken';
-      var total = this.thumbnails.length
-      this.numLoaded = this.numLoaded + 1
-      this.pctLoaded = this.numLoaded * 100 / total
-      console.log( 'image is ' + result + ' for ' + image.img.src )
-      console.log( this.pctLoaded + '% of images loaded.')
-      if (this.numLoaded == total) {
-        this.show = false
-      }
-    },
     deselect: function (event) {
       if (event.target.className === 'img_gallery') {
         this.selectNone()
@@ -133,6 +120,17 @@ export default {
         return false
       }
     },
+    hideProgressBar: function () {
+      this.show = false
+    },
+    imageProgress: function (instance, image ) {
+      let total = this.thumbnails.length
+      this.numLoaded = this.numLoaded + 1
+      this.pctLoaded = this.numLoaded * 100 / total
+      if (this.numLoaded == total) {
+        setTimeout(this.hideProgressBar, 1000)
+      }
+    },
     isSelected: function (thumbnail) {
       if (this.selected.indexOf(thumbnail) > -1) {
         return true
@@ -302,8 +300,8 @@ export default {
 }
 
 .progress {
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
+  border-radius: 0px;
+  max-height: 3px;
 }
 
 </style>
diff --git a/valhalla/app/javascript/test/unit/specs/__snapshots__/Thumbnails.spec.js.snap b/valhalla/app/javascript/test/unit/specs/__snapshots__/Thumbnails.spec.js.snap
@@ -99,44 +99,59 @@ exports[`Thumbnails.vue has the expected html structure 1`] = `
   </div>
    
   <div
-    class="img_gallery"
-    name="list-complete"
-    tag="div"
+    class="progress"
   >
     <div
-      class="thumbnail"
-      style="max-width: 200px;"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
+      class="progress-bar"
+      role="progressbar"
+      style="width: 0%;"
+    />
+  </div>
+   
+  <div>
+    <div
+      class="img_gallery"
+      name="list-complete"
+      tag="div"
     >
-      <img
-        class="thumb"
-        src="http://example.com"
-      />
-       
       <div
-        class="caption"
-        style="padding: 9px;"
+        class="thumbnail"
+        style="max-width: 200px;"
       >
-        
-          baz
-        
+        <img
+          class="thumb"
+          src="http://example.com"
+        />
+         
+        <div
+          class="caption"
+          style="padding: 9px;"
+        >
+          
+            baz
+          
+        </div>
       </div>
-    </div>
-    <div
-      class="thumbnail"
-      style="max-width: 200px;"
-    >
-      <img
-        class="thumb"
-        src="http://example.com"
-      />
-       
       <div
-        class="caption"
-        style="padding: 9px;"
+        class="thumbnail"
+        style="max-width: 200px;"
       >
-        
-          foo
-        
+        <img
+          class="thumb"
+          src="http://example.com"
+        />
+         
+        <div
+          class="caption"
+          style="padding: 9px;"
+        >
+          
+            foo
+          
+        </div>
       </div>
     </div>
   </div>