Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fix amp img lightbox #5279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
erwinmombay merged 3 commits into from
Sep 28, 2016
Merged

Fix amp img lightbox #5279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1125d36
ImageViewer class does not inherit `loadPromise`
erwinmombay Sep 28, 2016
cce74b9
add simple test
erwinmombay Sep 28, 2016
2c1060e
bind the function passed in since it is an instance method
erwinmombay Sep 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions build-system/tasks/presubmit-checks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,6 +554,7 @@ var forbiddenTermsSrcInclusive = {
'src/service/performance-impl.js',
'src/service/url-replacements-impl.js',
'extensions/amp-ad/0.1/amp-ad-api-handler.js',
'extensions/amp-image-lightbox/0.1/amp-image-lightbox.js',
'extensions/amp-analytics/0.1/transport.js',
]
},
Expand Down
12 changes: 9 additions & 3 deletions extensions/amp-image-lightbox/0.1/amp-image-lightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,19 @@ export class ImageViewer {
/**
* @param {!AmpImageLightbox} lightbox
* @param {!Window} win
* @param {!function(T, number=):Promise<T>} loadPromise
* @template T
*/
constructor(lightbox, win) {
constructor(lightbox, win, loadPromise) {
/** @private {!AmpImageLightbox} */
this.lightbox_ = lightbox;

/** @const {!Window} */
this.win = win;

/** @private {function(T, number=):Promise<T>} */
this.loadPromise_ = loadPromise;

/** @private {!Element} */
this.viewer_ = lightbox.element.ownerDocument.createElement('div');
this.viewer_.classList.add('-amp-image-lightbox-viewer');
Expand Down Expand Up @@ -289,7 +294,7 @@ export class ImageViewer {
// and then naturally upgrade to a higher quality image.
return timerFor(this.win).promise(1).then(() => {
this.image_.setAttribute('src', src);
return this.loadPromise(this.image_);
return this.loadPromise_(this.image_);
});
}

Expand Down Expand Up @@ -679,7 +684,8 @@ class AmpImageLightbox extends AMP.BaseElement {
this.element.appendChild(this.container_);

/** @private {!ImageViewer} */
this.imageViewer_ = new ImageViewer(this, this.win);
this.imageViewer_ = new ImageViewer(this, this.win,
this.loadPromise.bind(this));
this.container_.appendChild(this.imageViewer_.getElement());

/** @private {!Element} */
Expand Down
17 changes: 16 additions & 1 deletion extensions/amp-image-lightbox/0.1/test/test-amp-image-lightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ describe('amp-image-lightbox image viewer', () => {
let lightbox;
let lightboxMock;
let imageViewer;
let loadPromiseStub;

beforeEach(() => {
sandbox = sinon.sandbox.create();
Expand All @@ -195,8 +196,10 @@ describe('amp-image-lightbox image viewer', () => {
},
};
lightboxMock = sandbox.mock(lightbox);
loadPromiseStub = sandbox.stub().returns(Promise.resolve());

imageViewer = new ImageViewer(lightbox, window);
sandbox.stub(timerFor(window), 'promise').returns(Promise.resolve());
imageViewer = new ImageViewer(lightbox, window, loadPromiseStub);
document.body.appendChild(imageViewer.getElement());
});

Expand Down Expand Up @@ -350,6 +353,18 @@ describe('amp-image-lightbox image viewer', () => {
expect(imageViewer.imageBox_.left).to.be.closeTo(10, 1);
expect(imageViewer.imageBox_.top).to.equal(0);
});

it('should use the load function passed in when switching images', () => {
expect(loadPromiseStub.callCount).to.equal(0);
imageViewer.getElement().style.width = '100px';
imageViewer.getElement().style.height = '200px';
imageViewer.srcset_ = parseSrcset('image1');
imageViewer.sourceWidth_ = 80;
imageViewer.sourceHeight_ = 60;
return imageViewer.measure().then(() => {
expect(loadPromiseStub.callCount).to.equal(1);
});
});
});


Expand Down