From 2d65673d42d5c8b88c52bb7f26a9ec2acbbfdf93 Mon Sep 17 00:00:00 2001
From: Yuxi Chen <yuxichen@google.com>
Date: Fri, 9 Jun 2017 15:10:36 -0700
Subject: [PATCH] Lightbox 2.0: add toggling between gallery and slide view

---
 .../amp-lightbox-viewer/0.1/amp-lightbox-viewer.css   | 11 +++++------
 .../amp-lightbox-viewer/0.1/amp-lightbox-viewer.js    | 10 +++-------
 .../0.1/test/test-amp-lightbox-viewer.js              |  6 +++---
 3 files changed, 11 insertions(+), 16 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
index e06ec6acf4cfb..ca644279e0378 100644
--- a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
+++ b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css
@@ -89,7 +89,7 @@
 /* Controls */
 .amp-lbv-button-close,
 .amp-lbv-button-gallery,
-.amp-lbv-button-back{
+.amp-lbv-button-slide {
   position: absolute !important;
   cursor: pointer;
   width: 50px;
@@ -111,18 +111,17 @@
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" width="24" height="24" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>');
 }
 
-.amp-lbv-button-back {
+.amp-lbv-button-slide {
   top: 0;
+  right: 0;
   display: none;
-  left: 0;
-  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" width="24" height="24" viewBox="0 0 512 512"><path d="M368,224c26.5,0,48-21.5,48-48c0-26.5-21.5-48-48-48c-26.5,0-48,21.5-48,48C320,202.5,341.5,224,368,224z"/><path d="M452,64H60c-15.6,0-28,12.7-28,28.3v327.4c0,15.6,12.4,28.3,28,28.3h392c15.6,0,28-12.7,28-28.3V92.3 C480,76.7,467.6,64,452,64z M348.9,261.7c-3-3.5-7.6-6.2-12.8-6.2c-5.1,0-8.7,2.4-12.8,5.7l-18.7,15.8c-3.9,2.8-7,4.7-11.5,4.7 c-4.3,0-8.2-1.6-11-4.1c-1-0.9-2.8-2.6-4.3-4.1L224,215.3c-4-4.6-10-7.5-16.7-7.5c-6.7,0-12.9,3.3-16.8,7.8L64,368.2V107.7 c1-6.8,6.3-11.7,13.1-11.7h357.7c6.9,0,12.5,5.1,12.9,12l0.3,260.4L348.9,261.7z"/></svg>');
 }
 
-.i-amphtml-lbv[gallery-view] .amp-lbv-button-close,
 .i-amphtml-lbv[gallery-view] .amp-lbv-button-gallery {
   display: none;
 }
 
-.i-amphtml-lbv[gallery-view] .amp-lbv-button-back {
+.i-amphtml-lbv[gallery-view] .amp-lbv-button-slide {
   display: block;
 }
diff --git a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
index fe9a0fcc64a7a..3cfeb725c7bc3 100644
--- a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
+++ b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
@@ -213,11 +213,12 @@ export class AmpLightboxViewer extends AMP.BaseElement {
   buildControls_() {
     const close = this.close_.bind(this);
     const openGallery = this.openGallery_.bind(this);
+    const closeGallery = this.closeGallery_.bind(this);
 
     // TODO(aghassemi): i18n and customization. See https://git.io/v6JWu
     this.buildButton_('Close', 'amp-lbv-button-close', close);
-    this.buildButton_('Gallery', 'amp-lbv-button-gallery',
-        openGallery);
+    this.buildButton_('Gallery', 'amp-lbv-button-gallery', openGallery);
+    this.buildButton_('Content', 'amp-lbv-button-slide', closeGallery);
   }
 
   /**
@@ -368,11 +369,6 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     this.vsync_.mutate(() => {
       this.container_.appendChild(this.gallery_);
     });
-
-    // Add go back button
-    const back = this.closeGallery_.bind(this);
-    this.buildButton_('Back', 'amp-lbv-button-back', back);
-
   }
 
   /**
diff --git a/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js b/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js
index 77f7a3e8cd2b4..224444ba6d611 100644
--- a/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js
+++ b/extensions/amp-lightbox-viewer/0.1/test/test-amp-lightbox-viewer.js
@@ -48,10 +48,10 @@ describe('amp-lightbox-viewer', () => {
         expect(carousel).to.exist;
 
         const btns = viewer.querySelectorAll('.i-amphtml-lbv > [role=button]');
-        expect(btns.length).to.equal(2);
+        expect(btns.length).to.equal(3);
         expect(btns[0].className).to.equal('amp-lbv-button-close');
-        expect(btns[1].className).to.equal(
-            'amp-lbv-button-gallery');
+        expect(btns[1].className).to.equal('amp-lbv-button-gallery');
+        expect(btns[2].className).to.equal('amp-lbv-button-slide');
       });
     });