Merge pull request #803 from GrabarzUndPartner/feature/speedkit-pictu…

…re-prop-sort-sources fix(speedkit-picture): added prop for disable source sorting
basics · May 2, 2023 · 54f56f8 · 54f56f8
2 parents e85f8c3 + fa73be1
commit 54f56f8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/docs/content/3.guide/5.components/speedkit-picture.md b/docs/content/3.guide/5.components/speedkit-picture.md
@@ -161,6 +161,15 @@ If not set, the global crossorigin is used `this.$speedkit.crossorigin`.
 
 [MDN - HTML.Attributes.crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)
 
+### `sortSources`
+
+- Type: `Boolean`
+  - Default: `true`
+
+If set, the sources are sorted by the `media` properties.
+
+This is made possible by [`sort-css-media-queries`](https://www.npmjs.com/package/sort-css-media-queries).
+
 ### `critical`
 
 - Type: `Boolean`

diff --git a/src/runtime/components/SpeedkitPicture/Base.vue b/src/runtime/components/SpeedkitPicture/Base.vue
@@ -62,6 +62,11 @@ export default {
         return this.$speedkit.crossorigin;
       },
       validator: val => ['anonymous', 'use-credentials', '', true, false].includes(val)
+    },
+
+    sortSources: {
+      type: Boolean,
+      default: true
     }
 
   },
@@ -92,7 +97,7 @@ export default {
 
   computed: {
     sourceList () {
-      return SourceList.create(this.sources);
+      return SourceList.create(this.sources, { sort: this.sortSources });
     },
 
     formatSources () {

diff --git a/src/runtime/components/SpeedkitPicture/classes/SourceList.js b/src/runtime/components/SpeedkitPicture/classes/SourceList.js
@@ -6,8 +6,11 @@ const sortByMediaQueries = createSort();
 
 export default class SourceList {
   #list = [];
+  #sort = false;
 
-  constructor (list) {
+  constructor (list, options = {}) {
+    options = options || {};
+    this.#sort = options.sort || false;
     this.#list = this.#list.concat(Array.from(list || this.#list).map(item => new Source(item)));
   }
 
@@ -20,7 +23,11 @@ export default class SourceList {
   get list () { return this.#list; }
 
   get sorted () {
-    return this.#list.sort((a, b) => sortByMediaQueries(a.media, b.media));
+    if (this.#sort) {
+      return this.#list.sort((a, b) => sortByMediaQueries(a.media, b.media));
+    } else {
+      return this.#list;
+    }
   }
 
   get style () {