Skip to content

Commit ea980a6

Browse files
author
Daniel Morse
committed
fix: update image JS to keep any initial classes found on image tag, backwards compatibility for 'imageAttributes'
1 parent fa78212 commit ea980a6

File tree

1 file changed

+19
-5
lines changed
  • packages/components/bolt-image/src

1 file changed

+19
-5
lines changed

packages/components/bolt-image/src/image.js

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
88
import { ifDefined } from 'lit-html/directives/if-defined';
99
import path from 'path';
1010

11-
import classNames from 'classnames/bind';
11+
// Use 'dedupe' version instead of 'bind' to help merge initial classes with those defined here
12+
import classNames from 'classnames/dedupe';
1213

1314
import ratioStyles from '@bolt/components-ratio/src/ratio.scss';
1415
import imageStyles from './image.scss';
@@ -69,6 +70,10 @@ class BoltImage extends withLitHtml() {
6970
// IE fires this twice, only let it remove children once
7071
if (!this._wasInitiallyRendered) {
7172
super.connecting && super.connecting();
73+
74+
const image = this.querySelector('.c-bolt-image__image');
75+
this.initialClasses = [].slice.call(image.classList);
76+
7277
while (this.firstChild) {
7378
this.removeChild(this.firstChild);
7479
}
@@ -129,7 +134,7 @@ class BoltImage extends withLitHtml() {
129134
// Only JPGs allowed, PNGs can have transparency and may not look right layered over placeholder
130135
const _canUsePlaceholder = (_canUseRatio || cover) && _isJpg;
131136

132-
const classes = cx('c-bolt-image__image', {
137+
const classes = cx(...this.initialClasses, 'c-bolt-image__image', {
133138
'c-bolt-image__lazyload': lazyload,
134139
'c-bolt-image__lazyload--fade': lazyload,
135140
'c-bolt-image__lazyload--blur': lazyload && _isJpg,
@@ -160,9 +165,18 @@ class BoltImage extends withLitHtml() {
160165
if (_canUsePlaceholder) {
161166
return html`
162167
<img
163-
class="${cx('c-bolt-image__image-placeholder', {
164-
'c-bolt-image--cover': cover,
165-
})}"
168+
class="${cx(
169+
...this.initialClasses,
170+
'c-bolt-image__image-placeholder',
171+
{
172+
'c-bolt-image__image': false,
173+
'c-bolt-image__lazyload': false,
174+
'c-bolt-image__lazyload--fade': false,
175+
'c-bolt-image__lazyload--blur': false,
176+
'js-lazyload': false,
177+
'c-bolt-image--cover': cover,
178+
},
179+
)}"
166180
src="${placeholderImage}"
167181
alt="${ifDefined(alt ? alt : undefined)}"
168182
/>

0 commit comments

Comments
 (0)