Lightbox 2.0: be able to expand overflown caption

extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css

@@ -65,25 +65,54 @@
   opacity: 0;
 }
 
+.i-amphtml-lbv-top-bar.overflow {
+  background: rgba(0,0,0,0.7);
+}
+
 .i-amphtml-lbv-desc-box {
   position: absolute !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
-  max-height: 30vh !important;
-  padding: 10px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow-x: hidden !important;
   color: #ffffff;
-  background-color: rgba(0,0,0,0.7);
   opacity: 1;
   transition: opacity 1s;
 }
 
+.i-amphtml-lbv-desc-box.standard {
+  max-height: 100px;
+  background-color: rgba(0,0,0,0.7);
+  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
+}
+
+.i-amphtml-lbv-desc-box.overflow {
+  overflow-y: auto !important;
+  background-color: rgba(0,0,0,0.7);
+  top: 0 !important;
+  padding-top: 50px !important;
+}
+
 .i-amphtml-lbv-desc-box.hide {
   opacity: 0;
 }
 
+.i-amphtml-lbv-desc-text {
+  padding: 20px;
+}
+
+.i-amphtml-lbv-desc-box.standard .i-amphtml-lbv-desc-text {
+  overflow-y: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.i-amphtml-lbv-desc-box.overflow .i-amphtml-lbv-desc-text {
+  position: absolute !important;
+  bottom: 0;
+  padding-top: 0;
+}
+
 .i-amphtml-lbv[gallery-view] .i-amphtml-lbv-gallery {
   display: flex;
   flex-wrap: wrap;

extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js

@@ -22,7 +22,7 @@ import {isExperimentOn} from '../../../src/experiments';
 import {Layout} from '../../../src/layout';
 import {user, dev} from '../../../src/log';
 import {extensionsFor} from '../../../src/services';
-import {toggle} from '../../../src/style';
+import {toggle, setStyle} from '../../../src/style';
 import {listen} from '../../../src/event-helper';
 import {LightboxManager} from './service/lightbox-manager-impl';
 
@@ -82,6 +82,9 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     /** @private {?Element} */
     this.descriptionBox_ = null;
 
+    /** @private {?Element} */
+    this.descriptionTextArea_ = null;
+
     /** @private {!Array<!Element>} */
     this.clonedLightboxableElements_ = [];
 
@@ -176,9 +179,18 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     dev().assert(this.container_);
     this.descriptionBox_ = this.win.document.createElement('div');
     this.descriptionBox_.classList.add('i-amphtml-lbv-desc-box');
+    this.descriptionBox_.classList.add('standard');
+
+    this.descriptionTextArea_ = this.win.document.createElement('div');
+    this.descriptionTextArea_.classList.add('i-amphtml-lbv-desc-text');
+    this.descriptionBox_.appendChild(this.descriptionTextArea_);
 
     const toggleDescription = this.toggleDescriptionBox_.bind(this);
     listen(this.container_, 'click', toggleDescription);
+    this.descriptionBox_.addEventListener('click', event => {
+      this.toggleDescriptionOverflow_();
+      event.stopPropagation();
+    });
     this.container_.appendChild(this.descriptionBox_);
   }
 
@@ -189,7 +201,7 @@ export class AmpLightboxViewer extends AMP.BaseElement {
   updateDescriptionBox_() {
     const descText = this.clonedLightboxableElements_[this.currentElementId_]
         .descriptionText;
-    this.descriptionBox_.textContent = descText;
+    this.descriptionTextArea_.textContent = descText;
     if (!descText) {
       this.descriptionBox_.classList.add('hide');
     }
@@ -206,6 +218,25 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Toggle the overflow state of description box
+   * @private
+   */
+  toggleDescriptionOverflow_() {
+    if (this.descriptionBox_.classList.contains('standard')) {
+      this.descriptionBox_.classList.remove('standard');
+      this.descriptionBox_.classList.add('overflow');
+      if (this.descriptionTextArea_./*OK*/scrollHeight
+          > this.descriptionBox_./*OK*/clientHeight) {
+        setStyle(this.descriptionTextArea_, 'bottom', 'auto');
+      }
+    } else if (this.descriptionBox_.classList.contains('overflow')) {
+      this.descriptionBox_.classList.remove('overflow');
+      this.descriptionBox_.classList.add('standard');
+      setStyle(this.descriptionTextArea_, 'bottom', '');
+    }
+  }
+
   /**
    * Toggle lightbox top bar
    * @private

extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js

@@ -57,6 +57,10 @@ describe('amp-lightbox-viewer', () => {
         const descriptionBox = viewer.querySelector('.i-amphtml-lbv-desc-box');
         expect(descriptionBox).to.exist;
 
+        const descriptionTextArea = viewer.querySelector(
+            '.i-amphtml-lbv-desc-text');
+        expect(descriptionTextArea).to.exist;
+
         const carousel = viewer.querySelector('amp-carousel');
         expect(carousel).to.exist;
       });

test/manual/amp-lightbox-viewer-optin.amp.html

@@ -101,7 +101,7 @@ <h2>Image - Landscape size - normal length description</h2>
   <amp-img lightbox on="tap:myLightboxViewer.activate" src="http://placehold.it/800x600/6235c4?text=2" aria-describedby="normal-length-description" layout="responsive" width="8" height="6"></amp-img>
 
   <h2>Image - Landscape size - long description - Lightboxable no Tap</h2>
-  <amp-img lightbox on="tap:myLightboxViewer.activate" src="http://placehold.it/800x600/efc847?text=3" aria-describedby="long-description" layout="responsive" width="8" height="6"></amp-img>
+  <amp-img lightbox src="http://placehold.it/800x600/efc847?text=3" aria-describedby="long-description" layout="responsive" width="8" height="6"></amp-img>
 
   <h2>Image - Not Lightboxable</h2>
   <amp-img src="http://placehold.it/800x600/efc847?text=Not Lightboxable" layout="responsive" width="8" height="6"></amp-img>