From ac88760f9cfdca2e2bc430f963d5740edc518e69 Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 07:27:55 +0200 Subject: [PATCH 1/7] add srcset functionality --- src/LazyImage/Resources/assets/dist/controller.js | 2 ++ src/LazyImage/Resources/assets/src/controller.js | 2 ++ .../Resources/assets/test/controller.test.js | 11 +++++++---- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js index cb303cad8e7..a29caa59a85 100644 --- a/src/LazyImage/Resources/assets/dist/controller.js +++ b/src/LazyImage/Resources/assets/dist/controller.js @@ -56,12 +56,14 @@ var _default = /*#__PURE__*/function (_Controller) { var hd = new Image(); hd.addEventListener('load', function () { _this.element.src = _this.element.getAttribute('data-hd-src'); + _this.element.srcset = _this.element.getAttribute('data-hd-srcset'); _this._dispatchEvent('lazy-image:ready', { hd: hd }); }); hd.src = this.element.getAttribute('data-hd-src'); + 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..2e5d6e399b5 100644 --- a/src/LazyImage/Resources/assets/src/controller.js +++ b/src/LazyImage/Resources/assets/src/controller.js @@ -17,10 +17,12 @@ export default class extends Controller { hd.addEventListener('load', () => { this.element.src = this.element.getAttribute('data-hd-src'); + this.element.srcset = this.element.getAttribute('data-hd-srcset'); this._dispatchEvent('lazy-image:ready', { hd }); }); hd.src = this.element.getAttribute('data-hd-src'); + 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(` - + `); }); From 3dd8aa6e6f066dfa2269e71a2ac1ea960fceb9ac Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 07:45:42 +0200 Subject: [PATCH 2/7] add srcset functionality+ --- src/LazyImage/README.md | 3 +++ src/LazyImage/Resources/assets/dist/controller.js | 12 +++++++++--- src/LazyImage/Resources/assets/src/controller.js | 10 +++++++--- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md index 36b8b8e2380..6e41bba6e34 100644 --- a/src/LazyImage/README.md +++ b/src/LazyImage/README.md @@ -36,6 +36,9 @@ page has been rendered: src="{{ asset('image/small.png') }}" {{ 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" diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js index a29caa59a85..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; } @@ -56,14 +56,20 @@ var _default = /*#__PURE__*/function (_Controller) { var hd = new Image(); hd.addEventListener('load', function () { _this.element.src = _this.element.getAttribute('data-hd-src'); - _this.element.srcset = _this.element.getAttribute('data-hd-srcset'); + + 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'); - hd.srcset = this.element.getAttribute('data-hd-srcset'); + + 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 2e5d6e399b5..df34d29d69e 100644 --- a/src/LazyImage/Resources/assets/src/controller.js +++ b/src/LazyImage/Resources/assets/src/controller.js @@ -16,13 +16,17 @@ export default class extends Controller { const hd = new Image(); hd.addEventListener('load', () => { - this.element.src = this.element.getAttribute('data-hd-src'); + 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 }); + } + this._dispatchEvent('lazy-image:ready', { hd }); }); - hd.src = this.element.getAttribute('data-hd-src'); + 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 }); } From cc3523925337e7b3070b4723ebbaf8fcd2d4713b Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 07:47:35 +0200 Subject: [PATCH 3/7] add srcset functionality++ --- .../Resources/assets/src/controller.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/LazyImage/Resources/assets/src/controller.js b/src/LazyImage/Resources/assets/src/controller.js index df34d29d69e..44637309414 100644 --- a/src/LazyImage/Resources/assets/src/controller.js +++ b/src/LazyImage/Resources/assets/src/controller.js @@ -16,17 +16,17 @@ export default class extends Controller { const hd = new Image(); 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 }); + 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'); - } + 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 }); } From 43e6de775119a67103d7444819292b48f372a013 Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 07:56:20 +0200 Subject: [PATCH 4/7] add srcset functionality+++ --- src/LazyImage/README.md | 2 +- src/LazyImage/Resources/assets/src/controller.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md index 6e41bba6e34..b912ac2b95f 100644 --- a/src/LazyImage/README.md +++ b/src/LazyImage/README.md @@ -36,7 +36,7 @@ page has been rendered: src="{{ asset('image/small.png') }}" {{ 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" diff --git a/src/LazyImage/Resources/assets/src/controller.js b/src/LazyImage/Resources/assets/src/controller.js index 44637309414..5d0354342da 100644 --- a/src/LazyImage/Resources/assets/src/controller.js +++ b/src/LazyImage/Resources/assets/src/controller.js @@ -18,7 +18,7 @@ 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.element.srcset = this.element.getAttribute('data-hd-srcset'); } this._dispatchEvent('lazy-image:ready', { hd }); }); From a7597aa66605e11c059154c32fd067bc0da9432b Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 12:13:05 +0200 Subject: [PATCH 5/7] handle unresolvable image file --- src/LazyImage/BlurHash/BlurHash.php | 48 +++++++++++++++++------------ 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/src/LazyImage/BlurHash/BlurHash.php b/src/LazyImage/BlurHash/BlurHash.php index 24f5f18c3b0..b925b9cea99 100644 --- a/src/LazyImage/BlurHash/BlurHash.php +++ b/src/LazyImage/BlurHash/BlurHash.php @@ -33,6 +33,11 @@ public function createDataUriThumbnail(string $filename, int $width, int $height // Resize and encode $encoded = $this->encode($filename, $encodingWidth, $encodingHeight); + if ($encoded instanceof \Exception) { + // Return 1 x 1 pixel JPG in case of error (so we don't break the whole app) + return 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////wAALCAABAAEBAREA/8QAJgABAAAAAAAAAAAAAAAAAAAAAxABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwBH/9k'; + } + // Create a new blurred thumbnail from encoded BlurHash $pixels = \kornrunner\Blurhash\Blurhash::decode($encoded, $width, $height); @@ -52,28 +57,31 @@ public function encode(string $filename, int $encodingWidth = 75, int $encodingH throw new \LogicException("Missing package, to use the \"blur_hash\" Twig function, run:\n\ncomposer require intervention/image"); } - // Resize image to increase encoding performance - $image = $this->imageManager->make(file_get_contents($filename)); - $image->resize($encodingWidth, $encodingHeight, static function ($constraint) { - $constraint->aspectRatio(); - $constraint->upsize(); - }); + try { + // Resize image to increase encoding performance + $image = $this->imageManager->make(file_get_contents($filename)); + $image->resize($encodingWidth, $encodingHeight, static function ($constraint) { + $constraint->aspectRatio(); + $constraint->upsize(); + }); - // Encode using BlurHash - $width = $image->getWidth(); - $height = $image->getHeight(); - - $pixels = []; - for ($y = 0; $y < $height; ++$y) { - $row = []; - for ($x = 0; $x < $width; ++$x) { - $color = $image->pickColor($x, $y); - $row[] = [$color[0], $color[1], $color[2]]; - } + // Encode using BlurHash + $width = $image->getWidth(); + $height = $image->getHeight(); - $pixels[] = $row; - } + $pixels = []; + for ($y = 0; $y < $height; ++$y) { + $row = []; + for ($x = 0; $x < $width; ++$x) { + $color = $image->pickColor($x, $y); + $row[] = [$color[0], $color[1], $color[2]]; + } - return \kornrunner\Blurhash\Blurhash::encode($pixels, 4, 3); + $pixels[] = $row; + } + return \kornrunner\Blurhash\Blurhash::encode($pixels, 4, 3); + } catch (\Exception $e) { + return $e; + } } } From a1e540e142ee077dc66e5fe38d56e4f20e342097 Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 12:21:40 +0200 Subject: [PATCH 6/7] handle unresolvable image file+ --- src/LazyImage/BlurHash/BlurHash.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/LazyImage/BlurHash/BlurHash.php b/src/LazyImage/BlurHash/BlurHash.php index b925b9cea99..ec2825206ab 100644 --- a/src/LazyImage/BlurHash/BlurHash.php +++ b/src/LazyImage/BlurHash/BlurHash.php @@ -34,8 +34,8 @@ public function createDataUriThumbnail(string $filename, int $width, int $height $encoded = $this->encode($filename, $encodingWidth, $encodingHeight); if ($encoded instanceof \Exception) { - // Return 1 x 1 pixel JPG in case of error (so we don't break the whole app) - return 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////wAALCAABAAEBAREA/8QAJgABAAAAAAAAAAAAAAAAAAAAAxABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwBH/9k'; + // Return 1 x 1 pixel transparent PNG + return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='; } // Create a new blurred thumbnail from encoded BlurHash From 0d0f757658c6c3f68e327080bac1236ed5c55f90 Mon Sep 17 00:00:00 2001 From: Plamen Date: Mon, 29 Nov 2021 12:40:41 +0200 Subject: [PATCH 7/7] handle unresolvable image file++ --- src/LazyImage/BlurHash/BlurHash.php | 48 ++++++++++++----------------- 1 file changed, 20 insertions(+), 28 deletions(-) diff --git a/src/LazyImage/BlurHash/BlurHash.php b/src/LazyImage/BlurHash/BlurHash.php index ec2825206ab..24f5f18c3b0 100644 --- a/src/LazyImage/BlurHash/BlurHash.php +++ b/src/LazyImage/BlurHash/BlurHash.php @@ -33,11 +33,6 @@ public function createDataUriThumbnail(string $filename, int $width, int $height // Resize and encode $encoded = $this->encode($filename, $encodingWidth, $encodingHeight); - if ($encoded instanceof \Exception) { - // Return 1 x 1 pixel transparent PNG - return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='; - } - // Create a new blurred thumbnail from encoded BlurHash $pixels = \kornrunner\Blurhash\Blurhash::decode($encoded, $width, $height); @@ -57,31 +52,28 @@ public function encode(string $filename, int $encodingWidth = 75, int $encodingH throw new \LogicException("Missing package, to use the \"blur_hash\" Twig function, run:\n\ncomposer require intervention/image"); } - try { - // Resize image to increase encoding performance - $image = $this->imageManager->make(file_get_contents($filename)); - $image->resize($encodingWidth, $encodingHeight, static function ($constraint) { - $constraint->aspectRatio(); - $constraint->upsize(); - }); + // Resize image to increase encoding performance + $image = $this->imageManager->make(file_get_contents($filename)); + $image->resize($encodingWidth, $encodingHeight, static function ($constraint) { + $constraint->aspectRatio(); + $constraint->upsize(); + }); - // Encode using BlurHash - $width = $image->getWidth(); - $height = $image->getHeight(); + // Encode using BlurHash + $width = $image->getWidth(); + $height = $image->getHeight(); - $pixels = []; - for ($y = 0; $y < $height; ++$y) { - $row = []; - for ($x = 0; $x < $width; ++$x) { - $color = $image->pickColor($x, $y); - $row[] = [$color[0], $color[1], $color[2]]; - } - - $pixels[] = $row; + $pixels = []; + for ($y = 0; $y < $height; ++$y) { + $row = []; + for ($x = 0; $x < $width; ++$x) { + $color = $image->pickColor($x, $y); + $row[] = [$color[0], $color[1], $color[2]]; } - return \kornrunner\Blurhash\Blurhash::encode($pixels, 4, 3); - } catch (\Exception $e) { - return $e; - } + + $pixels[] = $row; + } + + return \kornrunner\Blurhash\Blurhash::encode($pixels, 4, 3); } }