Skip to content

Commit

Permalink
Imageviewer 2 refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@henrikekelof
henrikekelof committed Jul 13, 2023
1 parent 5a81647 commit da43dab
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 74 deletions.
168 changes: 113 additions & 55 deletions packages/envision-docs/src/pages/components/image-viewer-2.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,22 @@ and/or a lightbox viewer with navigation between images.
<section id="demoImageViewer2"
class="env-m-vertical--large"
aria-label="Photos from Örebro">
<div>
<span data-href="/placeholders/originals/10.jpeg" data-zoom>
<img src="/placeholders/900x400/10.jpeg" data-alt="Örebro Castle" alt="">
</span>
<div class="env-image-viewer-2__viewer__caption">
Örebro Castle
</div>
</div>
<div>
<span data-alt="Karlslund Manor House" data-href="/placeholders/originals/05.jpeg" data-zoom>
<img src="/placeholders/900x400/05.jpeg" alt="">
</span>
<div class="env-image-viewer-2__viewer__caption">
Karlslund Manor House
</div>
</div>
<div>
<img data-href="/placeholders/originals/02.jpeg" data-alt="Highland cattle at Oset outside Örebro" data-zoom src="/placeholders/900x400/02.jpeg" alt="">
<div class="env-image-viewer-2__viewer__caption">
Highland cattle at Oset outside Örebro
</div>
</div>
<figure data-href="/placeholders/originals/10.webp" data-zoom>
<img src="/placeholders/900x400/10.webp" alt="">
<figcaption class="env-image-viewer-2__viewer__caption">Örebro Castle</figcaption>
</figure>
<figure data-href="/placeholders/originals/05.webp" data-zoom>
<img src="/placeholders/900x400/05.webp" alt="">
<figcaption class="env-image-viewer-2__viewer__caption">
Karlslund Manor House
</figcaption>
</figure>
<figure data-href="/placeholders/originals/02.webp" data-zoom>
<img src="/placeholders/900x400/02.webp" alt="">
<figcaption class="env-image-viewer-2__viewer__caption">
Highland cattle at Oset outside Örebro
</figcaption>
</figure>
</section>

## Features include
Expand All @@ -54,17 +48,17 @@ with navigation arrows to switch between images. The link href:s should point to
id="example-imageviewer2-1"
class="example-imageviewer2-images env-text env-flex env-flex--justify-content-around"
>
<a href="/placeholders/originals/03.jpeg" data-zoom>
<img loading="lazy" src="/placeholders/225x100/03.jpeg" alt="Grass" />
<a href="/placeholders/originals/03.webp" data-zoom>
<img loading="lazy" src="/placeholders/225x100/03.webp" alt="Grass" />
</a>
<a href="/placeholders/originals/04.jpeg" data-zoom>
<img loading="lazy" src="/placeholders/225x100/04.jpeg" alt="Fern" />
<a href="/placeholders/originals/04.webp" data-zoom>
<img loading="lazy" src="/placeholders/225x100/04.webp" alt="Fern" />
</a>
<a href="/placeholders/originals/08.jpeg" data-zoom>
<img loading="lazy" src="/placeholders/225x100/08.jpeg" alt="Snail" />
<a href="/placeholders/originals/08.webp" data-zoom>
<img loading="lazy" src="/placeholders/225x100/08.webp" alt="Snail" />
</a>
<a href="/placeholders/originals/09.jpeg" data-zoom>
<img loading="lazy" src="/placeholders/225x100/09.jpeg" alt="Dandelion" />
<a href="/placeholders/originals/09.webp" data-zoom>
<img loading="lazy" src="/placeholders/225x100/09.webp" alt="Dandelion" />
</a>
</div>
```
Expand All @@ -81,31 +75,24 @@ envision.imageViewer2(document.querySelector('#example-imageviewer2-1'));
class="env-p-around--medium"
aria-label="Photos from Örebro"
>
<div>
<span data-href="/placeholders/originals/10.jpeg" data-zoom>
<img src="/placeholders/900x400/10.jpeg" alt="" />
</span>
<div class="env-image-viewer-2__viewer__caption">Örebro Castle</div>
</div>
<div>
<span data-href="/placeholders/originals/05.jpeg" data-zoom>
<img src="/placeholders/900x400/05.jpeg" alt="" />
</span>
<div class="env-image-viewer-2__viewer__caption">
<figure data-href="/placeholders/originals/10.webp" data-zoom>
<img src="/placeholders/900x400/10.webp" alt="" />
<figcaption class="env-image-viewer-2__viewer__caption">
Örebro Castle
</figcaption>
</figure>
<figure data-href="/placeholders/originals/05.webp" data-zoom>
<img src="/placeholders/900x400/05.webp" alt="" />
<figcaption class="env-image-viewer-2__viewer__caption">
Karlslund Manor House
</div>
</div>
<div>
<img
data-href="/placeholders/originals/02.jpeg"
data-zoom
src="/placeholders/900x400/02.jpeg"
alt=""
/>
<div class="env-image-viewer-2__viewer__caption">
Highland cattle at Oset
</div>
</div>
</figcaption>
</figure>
<figure data-href="/placeholders/originals/02.webp" data-zoom>
<img src="/placeholders/900x400/02.webp" alt="" />
<figcaption class="env-image-viewer-2__viewer__caption">
Highland cattle at Oset outside Örebro
</figcaption>
</figure>
</section>
```

Expand All @@ -123,9 +110,80 @@ envision.imageViewer2(document.querySelector('#example-imageviewer2-2'), {
});
```

### Slideshow markup

- All immediate child elements of the container will be included in slideshow.
- The container used for initialization should have an `aria-label` attribute.

```html-no-example
<section aria-label="Slideshow label">
<img src="example-1.webp" alt="Image description">
<img src="example-2.webp" alt="Image description">
</section>
```

#### Zoom

Add attribute `data-zoom` to activate zoom/lightbox. Add URL to larger images in `data-href`.

```html-no-example
<section aria-label="Slideshow label">
<img src="example-1.webp" alt="Image description" data-href="example-1-large.webp" data-zoom>
<img src="example-2.webp" alt="Image description" data-href="example-2-large.webp" data-zoom>
</section>
```

Optionally wrap the image in a link pointing to the larger image. The `href` attribute will be used for zoom
and `data-zoom` should be added to the link, not the image.

```html-no-example
<section aria-label="Slideshow label">
<a href="example-1-large.webp" data-zoom>
<img src="example-1.webp" alt="Image description">
</a>
<a href="example-2-large.webp" data-zoom>
<img src="example-2.webp" alt="Image description">
</a>
</section>
```

#### Caption

Wrap the images in a `figure` tag and add a `figcaption` with class `env-image-viewer-2__viewer__caption`.

```html-no-example
<section aria-label="Slideshow label">
<figure>
<img src="example-1.webp" alt="">
<figcaption class="env-image-viewer-2__viewer__caption">Image 1 caption</figcaption>
</figure>
<figure>
<img src="example-2.webp" alt="">
<figcaption class="env-image-viewer-2__viewer__caption">Image 2 caption</figcaption>
</figure>
</section>
```

#### Zoom and caption

Combine zoom and captions using data attributes or links:

```html-no-example
<section aria-label="Slideshow label">
<figure data-href="example-1-large.webp" data-zoom>
<img src="example-1.webp" alt="">
<figcaption class="env-image-viewer-2__viewer__caption">Image 1 caption</figcaption>
</figure>
<a href="example-2-large.webp" data-zoom>
<img src="example-2.webp" alt="">
<div class="env-image-viewer-2__viewer__caption">Image 2 caption</div>
</a>
</section>
```

## Options

```javascript
```js-no-expand
// Default options
{
slides: false,
Expand Down
40 changes: 21 additions & 19 deletions packages/envision/src/js/image-viewer/image-viewer-2-lightbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default class Imageviewer2Lightbox {
#config;
#lightbox;
#images;
#currentHref;
#currentSrc;
#downloadButton;

constructor(element, settings) {
Expand All @@ -50,9 +50,9 @@ export default class Imageviewer2Lightbox {
}

#getImageData(el) {
const href = el.href || el.dataset.href;
const src = el.href || el.dataset.href;
if (el.href && !el.href.startsWith('#')) {
el.dataset.href = href;
el.dataset.href = src;
el.href = '#0';
}
let altEl;
Expand All @@ -67,7 +67,7 @@ export default class Imageviewer2Lightbox {
alt = alt || altEl.dataset.alt;
}
return {
href: href,
src: src,
alt: alt,
};
}
Expand All @@ -94,17 +94,19 @@ export default class Imageviewer2Lightbox {
this.#lightbox
);
imgContainer.innerHTML = TEMPLATE.SPINNER;
const img = new Image();
const image = this.#images.find((img) => img.href === this.#currentHref);
img.src = image.href;
img.alt = image.alt;
img.classList.add(`${CLASSNAME.LIGHTBOX}__image`);
img.onload = () => {
const imgEl = new Image();
const imageData = this.#images.find(
(item) => item.src === this.#currentSrc
);
imgEl.src = imageData.src;
imgEl.alt = imageData.alt;
imgEl.classList.add(`${CLASSNAME.LIGHTBOX}__image`);
imgEl.onload = () => {
if (this.#config.buttons.download) {
this.#downloadButton.href = img.src;
this.#downloadButton.href = imgEl.src;
}
setStyle(lightboxBgPanel, 'background-image', `url('${img.src}')`);
imgContainer.replaceChildren(img);
setStyle(lightboxBgPanel, 'background-image', `url('${imgEl.src}')`);
imgContainer.replaceChildren(imgEl);
};
this.setVisibleButtons();
setTimeout(this.#setFocus, 1);
Expand Down Expand Up @@ -190,7 +192,7 @@ export default class Imageviewer2Lightbox {
if (i < 0 || i > this.#images.length - 1) {
i = 0;
}
this.#currentHref = this.#images[i].href;
this.#currentSrc = this.#images[i].src;
this.showLightbox();
}

Expand All @@ -200,7 +202,7 @@ export default class Imageviewer2Lightbox {
e.target.closest('[data-zoom]') &&
e.target.closest('[data-zoom]').dataset.href
) {
this.#currentHref = e.target.closest('[data-zoom]').dataset.href;
this.#currentSrc = e.target.closest('[data-zoom]').dataset.href;
}
this.showLightbox();
};
Expand All @@ -220,13 +222,13 @@ export default class Imageviewer2Lightbox {

getCurrentIndex() {
const i = this.#images.findIndex(
(image) => image.href === this.#currentHref
(image) => image.src === this.#currentSrc
);
return i >= 0 ? i : 0;
}

goTo(i) {
this.#currentHref = this.#images[i].href;
this.#currentSrc = this.#images[i].src;
this.loadImage();
}

Expand All @@ -235,7 +237,7 @@ export default class Imageviewer2Lightbox {
i++;
if (i >= this.#images.length) {
i = this.#images.length - 1;
this.#currentHref = this.#images[i].href;
this.#currentSrc = this.#images[i].src;
} else {
this.goTo(i);
}
Expand All @@ -245,7 +247,7 @@ export default class Imageviewer2Lightbox {
let i = this.getCurrentIndex();
i--;
if (i < 0) {
this.#currentHref = this.#images[0].href;
this.#currentSrc = this.#images[0].src;
} else {
this.goTo(i);
}
Expand Down
4 changes: 4 additions & 0 deletions packages/envision/src/scss/image-viewer-2.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ $inset: css-var('spacing-xx-large');
position: relative;
overflow: hidden;

figure {
margin: 0;
}

img {
display: block;
max-width: 100%;
Expand Down

0 comments on commit da43dab

Please sign in to comment.