Merge pull request #31 from nemtsov/feature/slide_caption

nemtsov · web-flow · commit e8db940294fc · 2016-10-10T12:47:52.000-04:00
Refactor and add cross-fade animations
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -8,42 +8,38 @@
   </head>
   <body>
     <div class="project">
-      <div class="project-slide" data-picture='{
-        "img": { "src": "http://placehold.it/250x150" },
-        "sources": [{
-          "srcset": "http://placehold.it/550x450",
-          "media_query": "(min-width: 1px)"
-        }]
-      }'>
-        <img alt="first" width="350" height="150"
-          src="http://placehold.it/350x150" />
+      <div class="project-slide">
+        <script type="text/html" class="js-lightbox-slide-content">
+          <picture>
+            <source srcset="http://placehold.it/700x300" media="(min-width: 1px)">
+            <img src="http://placehold.it/250x150">
+          </picture>
+        </script>
+        <img alt="first" width="350" height="150" src="http://placehold.it/350x150">
       </div>
 
-      <div class="project-slide" data-picture='{
-        "img": { "src": "http://placehold.it/250x160" },
-        "sources": [{
-          "srcset": "http://placehold.it/550x460",
-          "media_query": "(min-width: 1px)"
-        }]
-      }'>
-        <img alt="second" width="350" height="160"
-          src="http://placehold.it/350x160" />
-      </div>
+      <img class="project-slide" alt="second"
+        width="350" height="160"
+        src="http://placehold.it/350x160"
+        data-src="http://placehold.it/700x320" />
 
-      <div class="project-slide" data-picture='{
-        "img": { "src": "http://placehold.it/250x170" },
-        "sources": [{
-          "srcset": "http://placehold.it/550x470",
-          "media_query": "(min-width: 1px)"
-        }]
-      }'>
-        <img alt="third" width="350" height="170"
-          src="http://placehold.it/350x170" />
+      <div class="project-slide">
+        <script type="text/html" class="js-lightbox-slide-content">
+          <picture>
+            <source srcset="http://placehold.it/700x340" media="(min-width: 1px)">
+            <img src="http://placehold.it/260x170">
+          </picture>
+        </script>
+        <img alt="third" width="350" height="170" src="http://placehold.it/350x170" />
       </div>
 
-      <script type="text/template" class="project-slide" data-contains-slide-content="true">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen></iframe>
-      </script>
+      <div class="project-slide">
+        <script type="text/html" class="js-lightbox-slide-content">
+          <iframe width="560" height="315"
+            src="https://www.youtube.com/embed/oHg5SJYRHA0"
+            frameborder="0" allowfullscreen></iframe>
+        </script>
+      </div>
     </div>
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     <script src="/bundle.js"></script>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightbox",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "Image lightbox",
   "main": "src",
   "scripts": {
diff --git a/sass/lightbox.scss b/sass/lightbox.scss
@@ -6,6 +6,15 @@ $button-padding: 40px;
   #{$property}: calc(#{$params}) #{$important};
 }
 
+html.lightbox-enabled {
+
+  &,
+  body {
+    overflow: hidden;
+  }
+
+} // html.lightbox-enabled
+
 .lightbox-link {
   cursor: pointer;
 }
@@ -17,6 +26,26 @@ $button-padding: 40px;
   user-select: none;
 }
 
+.lightbox-content {
+
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  opacity: 1;
+  position: fixed;
+  top: 0;
+  transition: .2s;
+  width: 100vw;
+
+  &.hidden {
+    opacity: 0;
+  }
+
+} // .lightbox-content
+
+
 #lightbox-blocking {
   bottom: 0;
   left: 0;
@@ -32,7 +61,6 @@ $button-padding: 40px;
   height: 100%;
   left: 0;
   position: fixed;
-  text-align: center;
   top: 0;
   width: 100%;
   z-index: 1001;
diff --git a/src/ChromeView.js b/src/ChromeView.js
@@ -1,3 +1,4 @@
+import 'style!../sass/lightbox.scss';
 import $ from 'jquery';
 import idleTimer from 'idle-timer';
 import tinycolor from 'tinycolor2';
@@ -7,6 +8,8 @@ const ESCAPE_KEYCODE = 27;
 const LEFT_ARROW_KEYCODE = 37;
 const RIGHT_ARROW_KEYCODE = 39;
 const EXTRAS_HIDDEN_CLASS = 'extras-hidden';
+const CONTENT_CLASS = 'lightbox-content';
+const ENABLED_CLASS = 'lightbox-enabled';
 const HIDDEN_CLASS = 'hidden';
 
 export default class ChromeView {
@@ -54,6 +57,8 @@ export default class ChromeView {
         }
       });
 
+    $('html').addClass(ENABLED_CLASS);
+
     this._$view
       .find('.js-blocking')
       .css({
@@ -73,7 +78,15 @@ export default class ChromeView {
 
   renderSlide(slide) {
     this._maybeHidePrevNext(slide);
-    this._$contents.html(this._getSlideContent(slide));
+
+    const $next = $(`<div class="${CONTENT_CLASS} ${HIDDEN_CLASS}">`);
+    $next.html(this._getSlideContent(slide));
+
+    this._$contents.find(`.${HIDDEN_CLASS}`).remove();
+    this._$contents.append($next);
+
+    this._$contents.find(`.${CONTENT_CLASS}:lt(1)`).addClass(HIDDEN_CLASS);
+    setTimeout(() => $next.removeClass(HIDDEN_CLASS), 0);
   }
 
   destroy() {
@@ -83,6 +96,8 @@ export default class ChromeView {
       .add(this._$context)
       .off('.lightbox');
 
+    $('html').removeClass(ENABLED_CLASS);
+
     if (this._idleTimer) {
       this._idleTimer.destroy();
     }
@@ -106,24 +121,8 @@ export default class ChromeView {
   }
 
   _getSlideContent(slide) {
-    const picture = slide.$node.data('picture');
-    const src = slide.$node.data('src');
-    let $content;
-    if (picture) {
-      $content = $('<picture />');
-      picture.sources.forEach(({ srcset, media_query: media }) => {
-        $('<source />', { srcset, media }).appendTo($content);
-      });
-      const { src, alt } = picture.img;
-      $('<img />', { src, alt }).appendTo($content);
-    }
-    else if (slide.$node.data('containsSlideContent')) {
-      $content = slide.$node.html();
-    }
-    else {
-      $content = $('<img />', { src: src });
-    }
-    return $content;
+    const { src } = slide;
+    return src ? $('<img />', { src }) : slide.content;
   }
 
   _maybeHidePrevNext(activeSlide) {
diff --git a/src/Controller.js b/src/Controller.js
@@ -1,5 +1,7 @@
 import $ from 'jquery';
 
+const SLIDE_ID_ATTR = 'lightbox-slide-id';
+
 export default class Controller {
   constructor($context, props) {
     this._props = props;
@@ -53,15 +55,21 @@ export default class Controller {
   destroy() {
     this.close();
     this._$eventNode.off();
-    this._$links.removeClass('lightbox-link').off('click');
+    this._$links
+      .removeClass('lightbox-link')
+      .removeData(SLIDE_ID_ATTR)
+      .off('click');
   }
 
   _bind() {
     const self = this;
-    this._$links.addClass('lightbox-link').click(function(e) {
-      e.stopPropagation();
-      self.open(self.slides.filter(slide => slide.$node.is(this))[0].id);
-    });
+    this._$links.addClass('lightbox-link')
+      .each((id, el) => $(el).data(SLIDE_ID_ATTR, id))
+      .click(function(e) {
+        e.stopPropagation();
+        self.open(self.slides.filter(
+          slide => slide.id === $(this).data(SLIDE_ID_ATTR))[0].id);
+      });
   }
 
   _trigger(eventName, params) {
@@ -71,9 +79,13 @@ export default class Controller {
   _createSlides($links) {
     return $links
       .toArray()
-      .map((node, i) => ({
-        id: i,
-        $node: $(node)
-      }));
+      .map((node, i) => {
+        const $node = $(node);
+        return {
+          id: i,
+          src: $node.data('src'),
+          content: $node.find(this._props.slideContentSelector).html()
+        };
+      });
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,7 @@ export default {
   init(props) {
     props = Object.assign({
       context: document.body,
+      slideContentSelector: '.js-lightbox-slide-content',
       slideSelector: '.js-lightbox',
       bgColor: '#fff',
       opacity: '0.94',
diff --git a/src/templates.js b/src/templates.js
@@ -37,7 +37,9 @@ export const lightbox = `
         ${prevControl}
         ${nextControl}
         ${closeControl}
-        <div class="lightbox-contents js-contents"></div>
+        <div class="lightbox-contents js-contents">
+          <div class="lightbox-content"></div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/test/fixtures/css/disable_animations.css b/test/fixtures/css/disable_animations.css
@@ -0,0 +1,22 @@
+* {
+  /*CSS transitions*/
+  -o-transition-property: none !important;
+  -moz-transition-property: none !important;
+  -ms-transition-property: none !important;
+  -webkit-transition-property: none !important;
+  transition-property: none !important;
+
+  /*CSS transforms*/
+  -o-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+  -webkit-transform: none !important;
+  transform: none !important;
+
+  /*CSS animations*/
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  -o-animation: none !important;
+  -ms-animation: none !important;
+  animation: none !important;
+}
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -9,6 +9,7 @@ module.exports = function(config) {
       'jasmine'
     ],
     files: [
+      'test/fixtures/css/disable_animations.css',
       require.resolve('es6-shim'),
       'node_modules/jquery/dist/jquery.js',
       'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
diff --git a/test/specs/ChromeView.js b/test/specs/ChromeView.js
@@ -70,8 +70,8 @@ describe('ChromeView', function() {
     expectNextToBeShown();
   });
 
-  it('should render the html contents of a slide that has a data-contains-slide-contents="true" attr', function() {
-    this.set({}, [{ id: 0, $node: $('<div data-contains-slide-content="true"><button /></div>') }]);
+  it('should render the html contents of a slide', function() {
+    this.set({}, [{ id: 0, content: $('<div><button /></div>') }]);
     this.listeners.open(this.controller.slides[0]);
     expect($(CHROME_WRAP_CLASS)).toContainElement('button');
   });
diff --git a/test/specs/index.js b/test/specs/index.js
@@ -38,7 +38,7 @@ describe('lightbox', function() {
 
   it('should render the blocking div when clicked on the lightbox node', function() {
     lightbox.init();
-    expect($(BLOCKING_CLASS)).not.toBeVisible();
+    expect($(BLOCKING_CLASS)).not.toBeInDOM();
     $(LIGHTBOX_CLASS).first().click();
     expect($(BLOCKING_CLASS)).toBeVisible();
   });
@@ -52,12 +52,12 @@ describe('lightbox', function() {
 
       expect($next).toBeVisible();
       expect($(img(1))).toBeVisible();
-      expect($(img(2))).not.toBeVisible();
+      expect($(img(2))).not.toBeInDOM();
 
       $next.click();
 
       tempWait(() => {
-        expect($(img(1))).not.toBeVisible();
+        expect($(img(1)).parent().css('opacity')).toBe('0');
         expect($(img(2))).toBeVisible();
         done();
       });
@@ -74,17 +74,4 @@ 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({ slideSelector: '.picture-lightbox' });
-    $('.picture-lightbox').first().click();
-    tempWait(() => {
-      expect($('img[src$="1.png"]')).toBeVisible();
-      done();
-    });
-  });
 });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "lightbox",`
`3`		`- "version": "4.2.0",`
	`3`	`+ "version": "5.0.0",`
`4`	`4`	`"description": "Image lightbox",`
`5`	`5`	`"main": "src",`
`6`	`6`	`"scripts": {`