Add caption support.

Closes #7
strawdynamics · Jan 13, 2016 · d73bf08 · d73bf08
1 parent 479a39d
commit d73bf08
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,8 @@ var options = {
 	namespace: null,
 	// Which attribute to pull the lightbox image source from.
 	sourceAttribute: 'href',
+	// Which attribute to pull the caption from, if any.
+	captionAttribute: null,
 	// The event to listen to on the _trigger_ element: triggers opening.
 	openTrigger: 'click',
 	// The event to listen to on the _lightbox_ element: triggers closing.

diff --git a/dist/luminous-basic.css b/dist/luminous-basic.css
@@ -39,7 +39,7 @@
 }
 
 .lum-lightbox {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .lum-lightbox-inner {
@@ -53,6 +53,13 @@
   position: relative;
 }
 
+.lum-lightbox-inner .lum-lightbox-caption {
+  margin: 0 auto;
+  color: #fff;
+  max-width: 700px;
+  text-align: center;
+}
+
 .lum-lightbox-loader {
   display: block;
   position: absolute;
@@ -107,11 +114,18 @@
 
 /* This media query makes screens less than 460px wide display in a "fullscreen"-esque mode. Users can then scroll around inside the lightbox to see the entire image. */
 @media (max-width: 460px) {
-  .lum-lightbox-inner {
+  .lum-lightbox-image-wrapper {
+    display: block;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
   }
 
+  .lum-lightbox-caption {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }
+
   .lum-lightbox-inner img {
     max-width: none;
     max-height: none;

diff --git a/dist/luminous-basic.min.css b/dist/luminous-basic.min.css
diff --git a/dist/luminous.js b/dist/luminous.js
@@ -32,7 +32,7 @@ var Lightbox = (function () {
     this._sizeImgWrapperEl = function () {
       var style = _this.imgWrapperEl.style;
       style.width = _this.innerEl.clientWidth + 'px';
-      style.height = _this.innerEl.clientHeight + 'px';
+      style.height = _this.innerEl.clientHeight - _this.captionEl.clientHeight + 'px';
     };
 
     this._completeOpen = function () {
@@ -56,10 +56,12 @@ var Lightbox = (function () {
     var triggerEl = _options$triggerEl === undefined ? (0, _throwIfMissing2.default)() : _options$triggerEl;
     var _options$sourceAttrib = options.sourceAttribute;
     var sourceAttribute = _options$sourceAttrib === undefined ? (0, _throwIfMissing2.default)() : _options$sourceAttrib;
+    var _options$captionAttri = options.captionAttribute;
+    var captionAttribute = _options$captionAttri === undefined ? (0, _throwIfMissing2.default)() : _options$captionAttri;
     var _options$includeImgix = options.includeImgixJSClass;
     var includeImgixJSClass = _options$includeImgix === undefined ? false : _options$includeImgix;
 
-    this.settings = { namespace: namespace, parentEl: parentEl, triggerEl: triggerEl, sourceAttribute: sourceAttribute, includeImgixJSClass: includeImgixJSClass };
+    this.settings = { namespace: namespace, parentEl: parentEl, triggerEl: triggerEl, sourceAttribute: sourceAttribute, captionAttribute: captionAttribute, includeImgixJSClass: includeImgixJSClass };
 
     if (!(0, _dom.isDOMElement)(this.settings.parentEl)) {
       throw new TypeError('`new Lightbox` requires a DOM element passed as `parentEl`.');
@@ -109,14 +111,27 @@ var Lightbox = (function () {
       this.imgEl = document.createElement('img');
       positionHelperEl.appendChild(this.imgEl);
 
+      this.captionEl = document.createElement('p');
+      (0, _dom.addClasses)(this.captionEl, this._buildClasses('lightbox-caption'));
+      positionHelperEl.appendChild(this.captionEl);
+
       this.settings.parentEl.appendChild(this.el);
 
       this._updateImgSrc();
+      this._updateCaption();
 
       if (this.settings.includeImgixJSClass) {
         this.imgEl.classList.add('imgix-fluid');
       }
     }
+  }, {
+    key: '_updateCaption',
+    value: function _updateCaption() {
+      var captionAttr = this.settings.captionAttribute;
+      if (captionAttr) {
+        this.captionEl.innerText = this.settings.triggerEl.getAttribute(captionAttr);
+      }
+    }
   }, {
     key: '_updateImgSrc',
     value: function _updateImgSrc() {
@@ -139,6 +154,7 @@ var Lightbox = (function () {
       // Make sure to re-set the `img` `src`, in case it's been changed
       // by someone/something else.
       this._updateImgSrc();
+      this._updateCaption();
 
       (0, _dom.addClasses)(this.el, this.openClasses);
 
@@ -230,6 +246,10 @@ var Luminous = (function () {
     var
     // Which attribute to pull the lightbox image source from.
     sourceAttribute = _options$sourceAttrib === undefined ? 'href' : _options$sourceAttrib;
+    var _options$captionAttri = options.captionAttribute;
+    var
+    // Which attribute to pull the caption from, if any.
+    captionAttribute = _options$captionAttri === undefined ? null : _options$captionAttri;
     var _options$openTrigger = options.openTrigger;
     var
     // The event to listen to on the _trigger_ element: triggers opening.
@@ -272,7 +292,7 @@ var Luminous = (function () {
     // section of README.md for more information.
     injectBaseStyles = _options$injectBaseSt === undefined ? true : _options$injectBaseSt;
 
-    this.settings = { namespace: namespace, sourceAttribute: sourceAttribute, openTrigger: openTrigger, closeTrigger: closeTrigger, closeWithEscape: closeWithEscape, closeOnScroll: closeOnScroll, appendToSelector: appendToSelector, onOpen: onOpen, onClose: onClose, includeImgixJSClass: includeImgixJSClass, injectBaseStyles: injectBaseStyles };
+    this.settings = { namespace: namespace, sourceAttribute: sourceAttribute, captionAttribute: captionAttribute, openTrigger: openTrigger, closeTrigger: closeTrigger, closeWithEscape: closeWithEscape, closeOnScroll: closeOnScroll, appendToSelector: appendToSelector, onOpen: onOpen, onClose: onClose, includeImgixJSClass: includeImgixJSClass, injectBaseStyles: injectBaseStyles };
 
     if (this.settings.injectBaseStyles) {
       (0, _injectBaseStylesheet2.default)();
@@ -290,6 +310,7 @@ var Luminous = (function () {
         parentEl: document.querySelector(this.settings.appendToSelector),
         triggerEl: this.trigger,
         sourceAttribute: this.settings.sourceAttribute,
+        captionAttribute: this.settings.captionAttribute,
         includeImgixJSClass: this.settings.includeImgixJSClass
       });
     }

diff --git a/dist/luminous.min.js b/dist/luminous.min.js
diff --git a/src/css/luminous-basic.css b/src/css/luminous-basic.css
@@ -39,7 +39,7 @@
 }
 
 .lum-lightbox {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .lum-lightbox-inner {
@@ -53,6 +53,13 @@
   position: relative;
 }
 
+.lum-lightbox-inner .lum-lightbox-caption {
+  margin: 0 auto;
+  color: #fff;
+  max-width: 700px;
+  text-align: center;
+}
+
 .lum-lightbox-loader {
   display: block;
   position: absolute;
@@ -107,11 +114,18 @@
 
 /* This media query makes screens less than 460px wide display in a "fullscreen"-esque mode. Users can then scroll around inside the lightbox to see the entire image. */
 @media (max-width: 460px) {
-  .lum-lightbox-inner {
+  .lum-lightbox-image-wrapper {
+    display: block;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
   }
 
+  .lum-lightbox-caption {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }
+
   .lum-lightbox-inner img {
     max-width: none;
     max-height: none;

diff --git a/src/js/Lightbox.js b/src/js/Lightbox.js
@@ -12,10 +12,11 @@ export default class Lightbox {
       parentEl = throwIfMissing(),
       triggerEl = throwIfMissing(),
       sourceAttribute = throwIfMissing(),
+      captionAttribute = throwIfMissing(),
       includeImgixJSClass = false,
     } = options;
 
-    this.settings = { namespace, parentEl, triggerEl, sourceAttribute, includeImgixJSClass };
+    this.settings = { namespace, parentEl, triggerEl, sourceAttribute, captionAttribute, includeImgixJSClass };
 
     if (!isDOMElement(this.settings.parentEl)) {
       throw new TypeError('`new Lightbox` requires a DOM element passed as `parentEl`.');
@@ -62,9 +63,14 @@ export default class Lightbox {
     this.imgEl = document.createElement('img');
     positionHelperEl.appendChild(this.imgEl);
 
+    this.captionEl = document.createElement('p');
+    addClasses(this.captionEl, this._buildClasses('lightbox-caption'));
+    positionHelperEl.appendChild(this.captionEl);
+
     this.settings.parentEl.appendChild(this.el);
 
     this._updateImgSrc();
+    this._updateCaption();
 
     if (this.settings.includeImgixJSClass) {
       this.imgEl.classList.add('imgix-fluid');
@@ -74,9 +80,16 @@ export default class Lightbox {
   _sizeImgWrapperEl = () => {
     let style = this.imgWrapperEl.style;
     style.width = `${this.innerEl.clientWidth}px`
-    style.height = `${this.innerEl.clientHeight}px`
+    style.height = `${this.innerEl.clientHeight - this.captionEl.clientHeight}px`
   };
 
+  _updateCaption() {
+    let captionAttr = this.settings.captionAttribute;
+    if (captionAttr) {
+      this.captionEl.innerText = this.settings.triggerEl.getAttribute(captionAttr);
+    }
+  }
+
   _updateImgSrc() {
     let imageURL = this.settings.triggerEl.getAttribute(this.settings.sourceAttribute);
 
@@ -96,6 +109,7 @@ export default class Lightbox {
     // Make sure to re-set the `img` `src`, in case it's been changed
     // by someone/something else.
     this._updateImgSrc();
+    this._updateCaption();
 
     addClasses(this.el, this.openClasses);
 

diff --git a/src/js/Luminous.js b/src/js/Luminous.js
@@ -24,6 +24,8 @@ export default class Luminous {
       namespace = null,
       // Which attribute to pull the lightbox image source from.
       sourceAttribute = 'href',
+      // Which attribute to pull the caption from, if any.
+      captionAttribute = null,
       // The event to listen to on the _trigger_ element: triggers opening.
       openTrigger = 'click',
       // The event to listen to on the _lightbox_ element: triggers closing.
@@ -49,7 +51,7 @@ export default class Luminous {
       injectBaseStyles = true,
     } = options
 
-    this.settings = { namespace, sourceAttribute, openTrigger, closeTrigger, closeWithEscape, closeOnScroll, appendToSelector, onOpen, onClose, includeImgixJSClass, injectBaseStyles };
+    this.settings = { namespace, sourceAttribute, captionAttribute, openTrigger, closeTrigger, closeWithEscape, closeOnScroll, appendToSelector, onOpen, onClose, includeImgixJSClass, injectBaseStyles };
 
     if (this.settings.injectBaseStyles) {
       injectBaseStylesheet();
@@ -109,6 +111,7 @@ export default class Luminous {
       parentEl: document.querySelector(this.settings.appendToSelector),
       triggerEl: this.trigger,
       sourceAttribute: this.settings.sourceAttribute,
+      captionAttribute: this.settings.captionAttribute,
       includeImgixJSClass: this.settings.includeImgixJSClass,
     });
   }

diff --git a/test/lightbox.js b/test/lightbox.js
@@ -32,22 +32,22 @@ describe('Lightbox', () => {
     expect(() => {
       let triggerEl = document.querySelector('.test-anchor');
 
-      new Lightbox({namespace: 'test', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href'});
+      new Lightbox({namespace: 'test', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href', captionAttribute: null});
     }).not.toThrowError();
   });
 
   it('throws if passed `parentEl` is not a DOM element', () => {
     expect(() => {
       let triggerEl = document.querySelector('.test-anchor');
 
-      new Lightbox({namespace: 'test', parentEl: '.not-an-element', triggerEl: triggerEl, sourceAttribute: 'href'});
+      new Lightbox({namespace: 'test', parentEl: '.not-an-element', triggerEl: triggerEl, sourceAttribute: 'href', captionAttribute: null});
     }).toThrowError(TypeError, '`new Lightbox` requires a DOM element passed as `parentEl`.');
   });
 
   it('assigns the correct class to its element', () => {
     let triggerEl = document.querySelector('.test-anchor');
 
-    let lightbox = new Lightbox({namespace: 'test-namespace', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href'});
+    let lightbox = new Lightbox({namespace: 'test-namespace', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href', captionAttribute: null});
     lightbox.open();
     lightbox.close();
 
@@ -61,7 +61,7 @@ describe('Lightbox', () => {
 
     let triggerEl = document.querySelector('.test-anchor');
 
-    let lightbox = new Lightbox({namespace: 'lum', parentEl: demoDiv, triggerEl: triggerEl, sourceAttribute: 'href'});
+    let lightbox = new Lightbox({namespace: 'lum', parentEl: demoDiv, triggerEl: triggerEl, sourceAttribute: 'href', captionAttribute: null});
     lightbox.open();
     lightbox.close();
 
@@ -71,7 +71,7 @@ describe('Lightbox', () => {
   it('cleans up its element when destroyed', () => {
     let triggerEl = document.querySelector('.test-anchor');
 
-    let lightbox = new Lightbox({namespace: 'to-destroy', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href'});
+    let lightbox = new Lightbox({namespace: 'to-destroy', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href', captionAttribute: null});
     lightbox.open();
     lightbox.close();
     lightbox.destroy();
@@ -82,7 +82,7 @@ describe('Lightbox', () => {
   it('adds the `imgix-fluid` param if configured', () => {
     let triggerEl = document.querySelector('.test-anchor');
 
-    let lightbox = new Lightbox({namespace: 'fluid', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href', includeImgixJSClass: true});
+    let lightbox = new Lightbox({namespace: 'fluid', parentEl: document.body, triggerEl: triggerEl, sourceAttribute: 'href', captionAttribute: null, includeImgixJSClass: true});
     lightbox.open();
     lightbox.close();