Lightbox 2.0: add gradient effect to gallery view and overflown capti…

…on (#11038)
ampproject · Aug 22, 2017 · d841b81 · d841b81
1 parent 7ebed34
commit d841b81
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
@@ -53,8 +53,7 @@
   left: 0 !important;
   right: 0 !important;
   top: 0 !important;
-  height: 50px;
-  overflow: hidden !important;
+  height: 50px !important;
   background-color: rgba(0,0,0,0.7);
   background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0));
   transition: opacity 1s;
@@ -65,10 +64,28 @@
   opacity: 0;
 }
 
-.i-amphtml-lbv-top-bar.overflow {
+.i-amphtml-lbv-top-bar.fullscreen {
+  background: rgba(0,0,0,0.7);
+}
+
+.i-amphtml-lbv-top-bar.fullscreen
+.i-amphtml-lbv-top-bar-top-fill, .i-amphtml-lbv-top-gradient {
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 50px !important;
+}
+
+.i-amphtml-lbv-top-bar.fullscreen .i-amphtml-lbv-top-bar-top-fill {
+  top: 0 !important;
   background: rgba(0,0,0,0.7);
 }
 
+.i-amphtml-lbv-top-bar.fullscreen .i-amphtml-lbv-top-gradient {
+  top: 50px !important;
+  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0));
+}
+
 .i-amphtml-lbv-desc-box {
   position: absolute !important;
   left: 0 !important;

diff --git a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
@@ -85,6 +85,12 @@ export class AmpLightboxViewer extends AMP.BaseElement {
 
     /** @private  {?Element} */
     this.topBar_ = null;
+
+    /** @private  {?Element} */
+    this.topFill_ = null;
+
+    /** @private  {?Element} */
+    this.topGradient_ = null;
   }
 
   /** @override */
@@ -274,15 +280,15 @@ export class AmpLightboxViewer extends AMP.BaseElement {
 
       this.descriptionBox_.classList.remove('standard');
       this.descriptionBox_.classList.add('overflow');
-      this.topBar_.classList.add('overflow');
+      this.topBar_.classList.add('fullscreen');
       this.vsync_.run({
         measure: measureBeforeExpandingDescTextArea,
         mutate: mutateExpandingDescTextArea,
       }, {});
     } else if (this.descriptionBox_.classList.contains('overflow')) {
       this.vsync_.mutate(() => {
         this.descriptionBox_.classList.remove('overflow');
-        this.topBar_.classList.remove('overflow');
+        this.topBar_.classList.remove('fullscreen');
         this.descriptionBox_.classList.add('standard');
         this.descriptionTextArea_.classList.add('non-expanded');
         setStyle(this.descriptionTextArea_, 'top', '');
@@ -327,6 +333,14 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     this.topBar_ = this.win.document.createElement('div');
     this.topBar_.classList.add('i-amphtml-lbv-top-bar');
 
+    this.topFill_ = this.win.document.createElement('div');
+    this.topFill_.classList.add('i-amphtml-lbv-top-bar-top-fill');
+    this.topBar_.appendChild(this.topFill_);
+
+    this.topGradient_ = this.win.document.createElement('div');
+    this.topGradient_.classList.add('i-amphtml-lbv-top-gradient');
+    this.topBar_.appendChild(this.topGradient_);
+
     const close = this.close_.bind(this);
     const openGallery = this.openGallery_.bind(this);
     const closeGallery = this.closeGallery_.bind(this);
@@ -460,6 +474,7 @@ export class AmpLightboxViewer extends AMP.BaseElement {
       this.buildGallery_();
     }
     this.container_.setAttribute('gallery-view', '');
+    this.topBar_.classList.add('fullscreen');
   }
 
   /**
@@ -468,6 +483,9 @@ export class AmpLightboxViewer extends AMP.BaseElement {
    */
   closeGallery_() {
     this.container_.removeAttribute('gallery-view');
+    if (this.descriptionBox_.classList.contains('standard')) {
+      this.topBar_.classList.remove('fullscreen');
+    }
   }
 
   /**