Merge pull request #26 from nemtsov/feature/picture

Add support for a high-resolution images that are no larger than the browser can support
behance · Sep 29, 2016 · 388a621 · 388a621
2 parents 286dda4 + 90f695b
commit 388a621
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightbox",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Image lightbox",
   "main": "src",
   "scripts": {

diff --git a/sass/lightbox.scss b/sass/lightbox.scss
@@ -6,15 +6,6 @@ $button-padding: 40px;
   #{$property}: calc(#{$params}) #{$important};
 }
 
-.lightbox-active {
-  overflow: hidden;
-}
-
-.lightbox-loading,
-.lightbox-loading * {
-  cursor: wait;
-}
-
 .lightbox-link {
   cursor: pointer;
 }
@@ -27,16 +18,17 @@ $button-padding: 40px;
 }
 
 #lightbox-blocking {
-  height: 100%;
+  bottom: 0;
   left: 0;
   position: fixed;
+  right: 0;
   top: 0;
-  width: 100%;
   z-index: 1001;
 } // #lightbox-blocking
 
 #lightbox-wrap {
 
+  display: flex;
   height: 100%;
   left: 0;
   position: fixed;
@@ -50,15 +42,14 @@ $button-padding: 40px;
     visibility: visible;
   }
 
-  img {
+  .lightbox-contents {
     @extend %user-select-none;
 
     cursor: zoom-out;
     display: inline-block;
     max-height: 100%;
     max-width: 100%;
     position: relative;
-    width: auto;
   }
 
   &.single {
@@ -75,19 +66,21 @@ $button-padding: 40px;
 
   } // &.single
 
-  &.extras-hidden #lightbox-img-wrap > :not(img) {
+  &.extras-hidden #lightbox-img-wrap > :not(.lightbox-contents) {
     opacity: 0;
     transition: 1s;
   }
 
+  img {
+    max-height: 100vh;
+    max-width: 100vw;
+  }
+
 } // #lightbox-wrap
 
 #lightbox-inner-wrap {
 
-  height: 90%; // height must be set explicitly for img sizing
   margin: auto;
-  max-height: 90%;
-  max-width: 90%;
   position: relative;
 
   .control {
@@ -158,8 +151,8 @@ $button-padding: 40px;
 
     position: fixed;
     height: 40px;
-    right: 40px;
-    top: 40px;
+    right: 20px;
+    top: 20px;
     width: 40px;
 
     &:hover {
@@ -173,9 +166,3 @@ $button-padding: 40px;
   } // .close
 
 } // #lightbox-inner-wrap
-
-#lightbox-img-wrap {
-  display: inline-block;
-  height: 100%;
-  position: relative;
-}
diff --git a/src/Lightbox.js b/src/Lightbox.js
@@ -33,7 +33,9 @@ export default class Lightbox {
     this.$context.find(config.imageSelector).each((i, el) => {
       const $img = $(el);
       $img.data('img-id', i).addClass('lightbox-link');
-      this.images[i] = new LightboxImage(this, $img.data(config.imageSrcDataAttr), i);
+      this.images[i] = new LightboxImage(this,
+        $img.data('picture') || $img.data(config.imageSrcDataAttr),
+        i);
     });
 
     const self = this;
@@ -58,7 +60,7 @@ export default class Lightbox {
       this.$activeImage.remove();
       this.$activeImage = null;
       this.$body.find(this.$blocking).remove();
-      this.$body.removeClass('lightbox-active');
+      $('html').removeClass('lightbox-active');
       this.activeImageId = false;
     });
   }

diff --git a/src/LightboxImage.js b/src/LightboxImage.js
@@ -23,7 +23,7 @@ const LIGHTBOX_TEMPLATE = `
             <polygon class="lightbox-icon-close" points="64.5,39.8 60.2,35.5 50,45.7 39.8,35.5 35.5,39.8 45.7,50 35.5,60.2 39.8,64.5 50,54.3 60.2,64.5 64.5,60.2 54.3,50"/>
           </svg>
         </div>
-        <img/>
+        <div class="lightbox-contents js-contents"></div>
       </div>
     </div>
   </div>
@@ -38,10 +38,7 @@ export default class LightboxImage {
     this.$view = $(LIGHTBOX_TEMPLATE).hide();
   }
 
-  loadImage($loadedImg) {
-    let top;
-
-    this.lightbox.$body.removeClass('lightbox-loading');
+  appendWrap() {
     this.lightbox.$body.append(this.$view);
     this.$view.fadeIn(this.lightbox.fadeTimeInMs);
 
@@ -58,14 +55,8 @@ export default class LightboxImage {
     }
 
     this.lightbox.activeImageId = this.id;
-    if ($loadedImg.height()) {
-      top = ($(window).height() - $loadedImg.height()) / 2;
-      this.$view.addClass('shown');
-      this.$view.css('top', top);
-      this.$view.find('.js-img-wrap').height($loadedImg.height());
-    }
-
     this._setCloseIconColor(this.$view, this.lightbox.bgColor);
+    this.$view.addClass('shown');
   }
 
   showExtras() {
@@ -81,10 +72,12 @@ export default class LightboxImage {
       return;
     }
 
-    const $img = this.$view.find('img');
+    const $contents = this.$view.find('.js-contents');
+    const isSrcPicture = (typeof this.src === 'object');
+
     this.lightbox.isLoading = true;
 
-    this.lightbox.$body.addClass('lightbox-active lightbox-loading');
+    $('html').addClass('lightbox-active');
 
     if (this.lightbox.isSingle) {
       this.$view.addClass('single');
@@ -99,17 +92,25 @@ export default class LightboxImage {
       this.lightbox.$body.append(this.lightbox.$blocking);
     }
 
-    $img.attr('src', this.src);
-    // because IOS doesnt fire load for cached images,
-    // but luckily this will be true immediately if that is the case
-    if ($img[0].complete) {
-      this.loadImage($img);
+    $contents.empty();
+
+    if (isSrcPicture) {
+      const $picture = $('<picture />');
+
+      this.src.sources.forEach(({ srcset, media_query: media }) => {
+        $('<source />', { srcset, media }).appendTo($picture);
+      });
+
+      const { src, alt } = this.src.img;
+      $('<img />', { src, alt }).appendTo($picture);
+
+      $picture.appendTo($contents);
     }
     else {
-      $img.on('load', () => {
-        this.loadImage($img);
-      });
+      $('<img />', { src: this.src }).appendTo($contents);
     }
+
+    this.appendWrap();
   }
 
   _setCloseIconColor($context, bgColor) {

diff --git a/test/specs/index.js b/test/specs/index.js
@@ -74,4 +74,17 @@ describe('lightbox', function() {
       }, 15);
     });
   });
+
+  it('should support data-picture in the lightbox image', function(done) {
+    affix(`.picture-lightbox[data-picture="${JSON.stringify({
+      sources: [{ srcset: imagePath(1), media_query: '(min-width: 1px)' }],
+      img: { src: imagePath(1) }
+    }).replace(/"/g, '&quot;')}"] img[style="width:50px;height:50px"]`);
+    lightbox.init({ imageSelector: '.picture-lightbox' });
+    $('.picture-lightbox').first().click();
+    tempWait(() => {
+      expect($('img[src$="1.png"]')).toBeVisible();
+      done();
+    });
+  });
 });