From f3f79417d75a9d6c57db41f1e3c23e7742ba151b Mon Sep 17 00:00:00 2001 From: Yuxi Chen Date: Thu, 22 Jun 2017 15:23:22 -0700 Subject: [PATCH] Lightbox 2.0: be able to expand overflown caption --- .../0.1/amp-lightbox-viewer.css | 39 ++++++++++++++++--- .../0.1/amp-lightbox-viewer.js | 35 ++++++++++++++++- .../0.1/test/test-amp-lightbox-viewer.js | 4 ++ .../manual/amp-lightbox-viewer-optin.amp.html | 2 +- 4 files changed, 72 insertions(+), 8 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 b2491de480c9..be3857bdbcb0 100644 --- a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.css +++ b/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; 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 b010ff7cd9ef..622a915aef7e 100644 --- a/extensions/amp-lightbox-viewer/0.1/amp-lightbox-viewer.js +++ b/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} */ 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 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 41479eecd06f..6d9294562914 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 @@ -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; }); diff --git a/test/manual/amp-lightbox-viewer-optin.amp.html b/test/manual/amp-lightbox-viewer-optin.amp.html index a93c316b28dc..e0ef350daa88 100644 --- a/test/manual/amp-lightbox-viewer-optin.amp.html +++ b/test/manual/amp-lightbox-viewer-optin.amp.html @@ -101,7 +101,7 @@

Image - Landscape size - normal length description

Image - Landscape size - long description - Lightboxable no Tap

- +

Image - Not Lightboxable