[O] Fix photoswipe dimension requirement in a better way

https://github.com/dimsemenov/PhotoSwipe/issues/741#issuecomment-568915867

src/App.ts

@@ -15,9 +15,6 @@ class Artwork
     format: string;
     description: string;
 
-    width: number;
-    height: number;
-
     constructor(date: string, title: string, format: string, description: string)
     {
         this.rawDate = date;
@@ -52,23 +49,6 @@ class Artwork
             return './404.jpg'
         }
     }
-
-    loadDimensions()
-    {
-        let img = new Image();
-        img.onload = () =>
-        {
-            this.width = img.width;
-            this.height = img.height;
-        };
-        img.src = this.imgFull;
-        return this;
-    }
-
-    get isLoaded()
-    {
-        return this.width != undefined && this.height != undefined;
-    }
 }
 
 @Component({components: {PhotoSwipper}})
@@ -83,9 +63,6 @@ export default class App extends Vue
     // Responsive view
     responsive = new Responsive(30, 2);
 
-    // Loaded
-    loaded = false;
-
     /**
      * Initialize
      */
@@ -103,17 +80,11 @@ export default class App extends Vue
             if (a.format == null) a.format = config.artwork.default_format;
 
             // Add it
-            this.artworks.push(new Artwork(a.date, a.title, a.format, a.description).loadDimensions());
+            this.artworks.push(new Artwork(a.date, a.title, a.format, a.description));
         });
 
         // Sort by date
         this.artworks.sort((a, b) => b.date.getTime() - a.date.getTime());
-
-        // Check loaded
-        pWaitFor(() => this.artworks.every(a => a.isLoaded)).then(() =>
-        {
-            this.loaded = true;
-        });
     }
 
     /**
@@ -151,25 +122,21 @@ export default class App extends Vue
         }
     }
 
-    get swipeItems()
+    swipeItems()
     {
         return this.artworks.map(a =>
         {
             return {
                 src: a.imgFull,
                 alt: a.title,
-                title: a.description ? a.title + ': ' + a.description : a.title,
+                title: a.description ? a.title + ': ' + a.description : a.title
-                w: a.width,
-                h: a.height
             }
         })
     }
 
     onImageClick(index: number)
     {
-        if (!this.loaded) return;
-
         // @ts-ignore
-        this.$refs.ps.show(this.swipeItems, {index: index});
+        this.$refs.ps.show(this.swipeItems(), {index: index});
     }
 }

src/App.vue

@@ -18,7 +18,7 @@
             </el-card>
         </div>
 
-        <photo-swipper v-if="loaded" ref="ps"/>
+        <photo-swipper ref="ps"/>
 
         <div id="footer" :style="footerStyle">
 

src/PhotoSwipper.vue

@@ -59,14 +59,33 @@
     @Component
     export default class PhotoSwipper extends Vue
     {
+        ps: PhotoSwipe<any>;
+
         show(items: any[], options: any)
         {
-            let ps = new PhotoSwipe(this.$refs.pswp as any, PhotoSwipeUI_Default, items, options);
+            this.update(items);
-            ps.init();
+            this.ps = new PhotoSwipe(this.$refs.pswp as any, PhotoSwipeUI_Default, items, options);
+            this.ps.init();
+
+            window.addEventListener("resize", () => this.update(this.ps.items));
+        }
+
+        update(items: PhotoSwipe.Item[])
+        {
+            // Update inner width and inner height
+            items.forEach(item =>
+            {
+                item.w = window.innerWidth;
+                item.h = window.innerHeight;
+            })
         }
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
-
+    .pswp img
+    {
+        max-width: none !important;
+        object-fit: contain !important;
+    }
 </style>