Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@willdurand
willdurand committed Mar 2, 2021
1 parent 761de4c commit b796a95
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 229 deletions.
2 changes: 0 additions & 2 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ module.exports = {
moduleDirectories: ['src', 'node_modules'],
moduleFileExtensions: ['js', 'json', 'jsx'],
moduleNameMapper: {
// Prevent un-transpiled react-photoswipe code being required.
'^photoswipe$': '<rootDir>/node_modules/photoswipe',
// Alias tests for tests to be able to import helpers.
'^tests/(.*)$': '<rootDir>/tests/$1',
// Replaces the following formats with an empty module.
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@
"nano-time": "1.0.0",
"normalize.css": "8.0.1",
"photon-colors": "3.3.2",
"photoswipe": "4.1.3",
"pino": "6.11.1",
"pino-mozlog": "2.2.0",
"prop-types": "15.7.2",
Expand All @@ -203,7 +204,7 @@
"react-keydown": "1.9.12",
"react-nested-status": "0.2.1",
"react-onclickoutside": "6.10.0",
"react-photoswipe": "1.3.0",
"react-photoswipe-gallery": "1.3.4",
"react-redux": "5.1.2",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
Expand Down
115 changes: 43 additions & 72 deletions src/amo/components/ScreenShots/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,13 @@
/* @flow */
/* global window */
import invariant from 'invariant';
import * as React from 'react';
import { PhotoSwipeGallery } from 'react-photoswipe';
import 'react-photoswipe/lib/photoswipe.css';
import { Gallery, Item } from 'react-photoswipe-gallery';
import invariant from 'invariant';
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';

import type { PreviewType } from 'amo/types/addons';
import './styles.scss';

type ThumbBounds =
| false
| {|
w: number,
x: number,
y: number,
|};

type GetThumbBoundsExtraParams = {|
_document: typeof document | null,
_window: typeof window | null,
|};

export const PHOTO_SWIPE_OPTIONS = {
closeEl: true,
captionEl: true,
Expand All @@ -30,68 +17,29 @@ export const PHOTO_SWIPE_OPTIONS = {
counterEl: true,
arrowEl: true,
preloaderEl: true,
// Overload getThumbBoundsFn as workaround to
// https://github.com/minhtranite/react-photoswipe/issues/23
getThumbBoundsFn: (
index: number,
{
// $FlowFixMe: see https://github.com/facebook/flow/issues/183
_document = typeof document !== 'undefined' ? document : null,
_window = typeof window !== 'undefined' ? window : null,
}: GetThumbBoundsExtraParams = {},
): ThumbBounds => {
if (!_document || !_window) {
return false;
}

const thumbnail = _document.querySelectorAll('.pswp-thumbnails')[index];

if (thumbnail && thumbnail.getElementsByTagName) {
const img = thumbnail.getElementsByTagName('img')[0];
const pageYScroll =
_window.pageYOffset ||
(_document.documentElement ? _document.documentElement.scrollTop : 0);
const rect = img.getBoundingClientRect();

return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
}

return false;
},
};

export const thumbnailContent = (item: PreviewType): React.Node => (
<img
alt={item.title}
className="ScreenShots-image"
height={item.thumbnail_h}
src={item.thumbnail_src}
title={item.title}
width={item.thumbnail_w}
/>
);

type Props = {|
previews: Array<PreviewType>,
|};

export default class ScreenShots extends React.Component<Props> {
onClose = (photoswipe: Object) => {
const index = photoswipe.getCurrentIndex();
viewport: HTMLElement | null;

onOpenPhotoswipe = (photoswipe: Object) => {
invariant(this.viewport, 'viewport ref is required');

const list = this.viewport.querySelector('.pswp-thumbnails');

const list = this.viewport.querySelector('.ScreenShots-list');
invariant(list, 'list is required');

const currentItem = list.children[index];
const offset = currentItem.getBoundingClientRect().left;
list.scrollLeft += offset - list.getBoundingClientRect().left;
photoswipe.listen('close', () => {
const index = photoswipe.getCurrentIndex();
const currentItem = list.children[index];
const offset = currentItem.getBoundingClientRect().left;
list.scrollLeft += offset - list.getBoundingClientRect().left;
});
};

viewport: HTMLElement | null;

render() {
const { previews } = this.props;

Expand All @@ -103,13 +51,36 @@ export default class ScreenShots extends React.Component<Props> {
this.viewport = el;
}}
>
<PhotoSwipeGallery
className="ScreenShots-list"
close={this.onClose}
items={previews}
options={PHOTO_SWIPE_OPTIONS}
thumbnailContent={thumbnailContent}
/>
<div className="ScreenShots-list">
<Gallery
options={PHOTO_SWIPE_OPTIONS}
onOpen={this.onOpenPhotoswipe}
>
{previews.map((preview) => (
<Item
key={preview.src}
original={preview.src}
thumbnail={preview.thumbnail_src}
width={preview.w}
height={preview.h}
title={preview.title}
>
{({ ref, open }) => (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
<img
alt=""
className="ScreenShots-image"
ref={ref}
onClick={open}
src={preview.thumbnail_src}
width={preview.thumbnail_w}
height={preview.thumbnail_h}
/>
)}
</Item>
))}
</Gallery>
</div>
</div>
</div>
);
Expand Down
19 changes: 6 additions & 13 deletions src/amo/components/ScreenShots/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@ $image-height: $screenshot-height - 20px;
$screenshot-width: 320px;

.ScreenShots {
.pswp-thumbnails {
line-height: 0;
}

.pswp__caption__center {
text-align: center;
}
Expand All @@ -20,9 +16,10 @@ $screenshot-width: 320px;
height: $screenshot-height;
}

.ScreenShots-list .pswp-thumbnails {
.ScreenShots-list {
display: flex;
height: $screenshot-height;
line-height: 0;
list-style-type: none;
margin: 0;
overflow-x: scroll;
Expand All @@ -31,22 +28,18 @@ $screenshot-width: 320px;
width: auto;
}

.ScreenShots-list .pswp-thumbnail {
.ScreenShots-image {
cursor: pointer;
display: inline-block;
height: $image-height;
margin: 0 10px;
width: $screenshot-width;

&:first-of-type {
@include margin-start(0);
}
}

.ScreenShots-image {
cursor: pointer;
display: inline-block;
height: $image-height;
width: $screenshot-width;
}

// Don't stretch the images.
.ScreenShots-image,
.pswp__img {
Expand Down
125 changes: 1 addition & 124 deletions tests/unit/amo/components/TestScreenShots.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import { shallow, mount } from 'enzyme';
import * as React from 'react';
import { PhotoSwipeGallery } from 'react-photoswipe';

import ScreenShots, {
PHOTO_SWIPE_OPTIONS,
thumbnailContent,
} from 'amo/components/ScreenShots';
import ScreenShots from 'amo/components/ScreenShots';

const HEIGHT = 400;
const WIDTH = 200;
Expand Down Expand Up @@ -34,11 +30,6 @@ describe(__filename, () => {

it('renders the previews', () => {
const root = shallow(<ScreenShots previews={previews} />);
const gallery = root.children().children();

expect(gallery.type()).toEqual(PhotoSwipeGallery);
expect(gallery.prop('items')).toEqual(previews);
expect(gallery.prop('thumbnailContent')).toEqual(thumbnailContent);
});

it('renders custom thumbnail', () => {
Expand All @@ -55,15 +46,6 @@ describe(__filename, () => {
thumbnail_h: thumbnailHeight,
thumbnail_w: thumbnailWidth,
};

const thumbnail = shallow(thumbnailContent(item));

expect(thumbnail.type()).toEqual('img');
expect(thumbnail.prop('src')).toEqual(thumbnailSrc);
expect(thumbnail.prop('height')).toEqual(thumbnailHeight);
expect(thumbnail.prop('width')).toEqual(thumbnailWidth);
expect(thumbnail.prop('alt')).toEqual('test title');
expect(thumbnail.prop('title')).toEqual('test title');
});

it('scrolls to the active item on close', () => {
Expand All @@ -88,109 +70,4 @@ describe(__filename, () => {
// 0 += 500 - 55
expect(list.scrollLeft).toEqual(445);
});

describe('PHOTO_SWIPE_OPTIONS.getThumbBoundsFn', () => {
const { getThumbBoundsFn } = PHOTO_SWIPE_OPTIONS;

const getFakeDocument = ({ left, top, width }) => {
const fakeImg = {
getBoundingClientRect: () => ({
height: 123,
left,
top,
width,
}),
};

const fakeThumbnail = {
getElementsByTagName: () => [fakeImg],
};

const fakeDocument = {
querySelectorAll: () => [fakeThumbnail],
};

return fakeDocument;
};

it('returns false if thumbnail does not exist', () => {
const bounds = getThumbBoundsFn(0);

expect(bounds).toEqual(false);
});

it('returns false if _document is null', () => {
const bounds = getThumbBoundsFn(0, { _document: null });

expect(bounds).toEqual(false);
});

it('returns false if _window is null', () => {
const bounds = getThumbBoundsFn(0, {
_document: getFakeDocument({ left: 1, top: 2, width: 3 }),
_window: null,
});

expect(bounds).toEqual(false);
});

it('returns an object with x, y and w values', () => {
const left = 123;
const top = 124;
const width = 100;

const fakeDocument = getFakeDocument({ left, top, width });

const bounds = getThumbBoundsFn(0, { _document: fakeDocument });

expect(bounds).toEqual({
w: width,
x: left,
y: top,
});
});

it('uses window.pageYOffset to compute `y` if available', () => {
const left = 123;
const top = 124;
const width = 100;

const fakeDocument = getFakeDocument({ left, top, width });

const fakeWindow = {
pageYOffset: 20,
};

const bounds = getThumbBoundsFn(0, {
_document: fakeDocument,
_window: fakeWindow,
});

expect(bounds).toEqual({
w: width,
x: left,
y: top + fakeWindow.pageYOffset,
});
});

it('uses document.documentElement.scrollTop to compute `y` if available', () => {
const left = 123;
const top = 124;
const width = 100;
const scrollTop = 30;

const fakeDocument = getFakeDocument({ left, top, width });
fakeDocument.documentElement = {
scrollTop,
};

const bounds = getThumbBoundsFn(0, { _document: fakeDocument });

expect(bounds).toEqual({
w: width,
x: left,
y: top + scrollTop,
});
});
});
});
Loading

0 comments on commit b796a95

Please sign in to comment.