@hkdigital/lib-sveltekit 0.0.88 → 0.0.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/classes/svelte/image/ImageVariantsLoader.svelte.d.ts +1 -1
- package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js +3 -9
- package/dist/classes/svelte/image/index.d.ts +1 -1
- package/dist/classes/svelte/image/index.js +1 -1
- package/dist/components/image/ResponsiveImage.svelte +2 -2
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import { untrack } from 'svelte';
|
|
|
6
6
|
|
|
7
7
|
import ImageLoader from './ImageLoader.svelte.js';
|
|
8
8
|
|
|
9
|
-
export default class
|
|
9
|
+
export default class ImageVariantsLoader {
|
|
10
10
|
/** @type {number} */
|
|
11
11
|
#devicePixelRatio;
|
|
12
12
|
|
|
@@ -69,11 +69,7 @@ export default class ImageMetasLoader {
|
|
|
69
69
|
updateOptimalImageMeta(containerWidth) {
|
|
70
70
|
const newVariant = this.getOptimalImageMeta(containerWidth);
|
|
71
71
|
|
|
72
|
-
if (
|
|
73
|
-
!newVariant ||
|
|
74
|
-
!this.#imageVariant ||
|
|
75
|
-
newVariant.width > this.#imageVariant.width
|
|
76
|
-
) {
|
|
72
|
+
if (!newVariant || !this.#imageVariant || newVariant.width > this.#imageVariant.width) {
|
|
77
73
|
// Only update imageVariant is width is larger
|
|
78
74
|
this.#imageVariant = newVariant;
|
|
79
75
|
}
|
|
@@ -141,9 +137,7 @@ export default class ImageMetasLoader {
|
|
|
141
137
|
|
|
142
138
|
// Find the smallest image that's larger than our required width
|
|
143
139
|
|
|
144
|
-
const optimal = imagesMeta.find(
|
|
145
|
-
(current) => current.width >= requiredWidth
|
|
146
|
-
);
|
|
140
|
+
const optimal = imagesMeta.find((current) => current.width >= requiredWidth);
|
|
147
141
|
|
|
148
142
|
// Fall back to the largest image if nothing is big enough
|
|
149
143
|
return optimal || imagesMeta[imagesMeta.length - 1];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as ImageLoader } from "./ImageLoader.svelte";
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as ImageVariantsLoader } from "./ImageVariantsLoader.svelte";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* @type {{
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
...attrs
|
|
30
30
|
} = $props();
|
|
31
31
|
|
|
32
|
-
let variantsLoader = new
|
|
32
|
+
let variantsLoader = new ImageVariantsLoader(images);
|
|
33
33
|
|
|
34
34
|
let containerWidth = $state(0);
|
|
35
35
|
|