Go to target slide in gallary view in lightbox 2.0

ampproject · Jun 6, 2017 · 094ac7b · 094ac7b
1 parent 7d89b5d
commit 094ac7b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/extensions/amp-carousel/0.1/slidescroll.js b/extensions/amp-carousel/0.1/slidescroll.js
@@ -208,7 +208,7 @@ export class AmpSlideScroll extends BaseSlides {
     this.registerAction('goToSlide', invocation => {
       const args = invocation.args;
       if (args) {
-        this.showSlideWhenReady_(args['index']);
+        this.showSlideWhenReady(args['index']);
       }
     });
   }
@@ -222,7 +222,7 @@ export class AmpSlideScroll extends BaseSlides {
   mutatedAttributesCallback(mutations) {
     const slide = mutations['slide'];
     if (slide !== undefined) {
-      this.showSlideWhenReady_(slide);
+      this.showSlideWhenReady(slide);
     }
   }
 
@@ -493,9 +493,8 @@ export class AmpSlideScroll extends BaseSlides {
    * Parses given value as integer and shows the slide with that index value
    * when element has been laid out.
    * @param {*} value
-   * @private
    */
-  showSlideWhenReady_(value) {
+  showSlideWhenReady(value) {
     const index = parseInt(value, 10);
     if (isFinite(index) && index >= 0 && index < this.noOfSlides_) {
       // If we haven't been laid out yet, set `initialSlideIndex_` instead.

diff --git a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js b/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js
@@ -279,8 +279,8 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     this.updateInViewport(this.container_, true);
     this.scheduleLayout(this.container_);
 
-    this.carousel_.implementation_.showSlideWhenReady_(element.lightboxItemId);
     this.currentElementId_ = element.lightboxItemId;
+    this.carousel_.implementation_.showSlideWhenReady(this.currentElementId_);
 
     this.win.document.documentElement.addEventListener(
         'keydown', this.boundHandleKeyboardEvents_);
@@ -412,11 +412,14 @@ export class AmpLightboxViewer extends AMP.BaseElement {
     imgElement.classList.add('i-amphtml-lbv-gallery-thumbnail-img');
     imgElement.setAttribute('src', thumbnailObj.url);
     element.appendChild(imgElement);
-    const redirect = event => {
+    const closeGallaryAndShowTargetSlide = event => {
       this.closeGallery_();
+      this.currentElementId_ = thumbnailObj.element.lightboxItemId;
+      this.updateDescriptionBox_();
+      this.carousel_.implementation_.showSlideWhenReady(this.currentElementId_);
       event.stopPropagation();
     };
-    element.addEventListener('click', redirect);
+    element.addEventListener('click', closeGallaryAndShowTargetSlide);
     return element;
   }
 }

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
@@ -130,11 +130,11 @@ describe('amp-lightbox-viewer', () => {
         return impl.activate({source: item1}).then(() => {
           impl.openGallery_();
           const container = viewer.querySelector('.i-amphtml-lbv');
-          expect(container.getAttribute('gallery-view')).to.equal('');
+          expect(container.hasAttribute('gallery-view')).to.be.true;
           const gallery = viewer.querySelector('.i-amphtml-lbv-gallery');
           expect(gallery.childNodes).to.have.length(3);
           gallery.childNodes[1].dispatchEvent(new Event('click'));
-          expect(container.getAttribute('gallery-view')).to.be.null;
+          expect(container.hasAttribute('gallery-view')).to.be.false;
         });
       });
     });