diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md index 36b8b8e2380..b912ac2b95f 100644 --- a/src/LazyImage/README.md +++ b/src/LazyImage/README.md @@ -37,6 +37,9 @@ page has been rendered: {{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }} data-hd-src="{{ asset('image/large.png') }}" + srcset="{{ asset('image/small.png') }} 1x, {{ asset('image/small2x.png') }} 2x" + data-hd-srcset="{{ asset('image/large.png') }} 1x, {{ asset('image/large2x.png') }} 2x" + {# Optional but avoids having a page jump when the image is loaded #} width="200" height="150" diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js index cb303cad8e7..83eaf838081 100644 --- a/src/LazyImage/Resources/assets/dist/controller.js +++ b/src/LazyImage/Resources/assets/dist/controller.js @@ -29,7 +29,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } @@ -57,12 +57,20 @@ var _default = /*#__PURE__*/function (_Controller) { hd.addEventListener('load', function () { _this.element.src = _this.element.getAttribute('data-hd-src'); + if (_this.element.getAttribute('data-hd-srcset')) { + _this.element.srcset = _this.element.getAttribute('data-hd-srcset'); + } + _this._dispatchEvent('lazy-image:ready', { hd: hd }); }); hd.src = this.element.getAttribute('data-hd-src'); + if (this.element.getAttribute('data-hd-srcset')) { + hd.srcset = this.element.getAttribute('data-hd-srcset'); + } + this._dispatchEvent('lazy-image:connect', { hd: hd }); diff --git a/src/LazyImage/Resources/assets/src/controller.js b/src/LazyImage/Resources/assets/src/controller.js index 403cab71875..5d0354342da 100644 --- a/src/LazyImage/Resources/assets/src/controller.js +++ b/src/LazyImage/Resources/assets/src/controller.js @@ -17,10 +17,16 @@ export default class extends Controller { hd.addEventListener('load', () => { this.element.src = this.element.getAttribute('data-hd-src'); + if (this.element.getAttribute('data-hd-srcset')) { + this.element.srcset = this.element.getAttribute('data-hd-srcset'); + } this._dispatchEvent('lazy-image:ready', { hd }); }); hd.src = this.element.getAttribute('data-hd-src'); + if (this.element.getAttribute('data-hd-srcset')) { + hd.srcset = this.element.getAttribute('data-hd-srcset'); + } this._dispatchEvent('lazy-image:connect', { hd }); } diff --git a/src/LazyImage/Resources/assets/test/controller.test.js b/src/LazyImage/Resources/assets/test/controller.test.js index 1d96aaa91f6..7bd890977d5 100644 --- a/src/LazyImage/Resources/assets/test/controller.test.js +++ b/src/LazyImage/Resources/assets/test/controller.test.js @@ -34,10 +34,13 @@ describe('LazyImageController', () => { beforeEach(() => { container = mountDOM(` - + `); });