Add. SVG sprite support for styled option.

afonja14755 · May 30, 2024 · 6f10f18 · 6f10f18
1 parent eef8ef6
commit 6f10f18
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 136 deletions.
diff --git a/dist/js/ux-select.es.js b/dist/js/ux-select.es.js
diff --git a/dist/js/ux-select.es.js.map b/dist/js/ux-select.es.js.map
diff --git a/dist/js/ux-select.iife.js b/dist/js/ux-select.iife.js
diff --git a/dist/js/ux-select.iife.js.map b/dist/js/ux-select.iife.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ux-select",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "UX Select is a lightweight Native JavaScript plugin that replace native select elements with customization",
   "keywords": [
     "web",

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -29,6 +29,11 @@ export type UxSelectOptions = {
     width: number;
     height: number;
   };
+  svg?: {
+    src: string;
+    width: number;
+    height: number;
+  };
   element: HTMLOptionElement;
   uxOption: HTMLLIElement | undefined;
 };

diff --git a/src/ux-select.ts b/src/ux-select.ts
@@ -91,7 +91,8 @@ export default class UxSelect {
         uxOption = this.uxEl.querySelector(`.ux-select-group__elem[data-value='${option.value}']`);
       }
 
-      let optionImage = undefined;
+      let optionImage = undefined,
+        optionSvg = undefined;
       if (this.config.optionStyle === 'image' && option.dataset.imageSrc) {
         optionImage = {
           src: option.dataset.imageSrc,
@@ -100,6 +101,12 @@ export default class UxSelect {
           width: option.dataset.imageWidth ? Number(option.dataset.imageWidth) : 24,
           height: option.dataset.imageHeight ? Number(option.dataset.imageHeight) : 24,
         };
+      } else if (this.config.optionStyle === 'image' && option.dataset.svgSrc) {
+        optionSvg = {
+          src: option.dataset.svgSrc,
+          width: option.dataset.svgWidth ? Number(option.dataset.svgWidth) : 24,
+          height: option.dataset.svgHeight ? Number(option.dataset.svgHeight) : 24,
+        };
       }
 
       optionsData.push(<UxSelectOptions>{
@@ -113,6 +120,7 @@ export default class UxSelect {
           value: option.value,
         },
         image: optionImage,
+        svg: optionSvg,
         element: option,
         uxOption,
       });
@@ -242,6 +250,21 @@ export default class UxSelect {
         selectListElem.appendChild(optionImageElem);
       }
 
+      if (this.config.optionStyle === 'image' && option.svg) {
+        const optionSvgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+          optionUseElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+
+        optionSvgElem.classList.add('ux-select-group-elem__image');
+        optionSvgElem.setAttribute('viewBox', `0 0 ${String(option.svg.width)} ${String(option.svg.height)}`);
+        optionSvgElem.setAttribute('width', String(option.svg.width));
+        optionSvgElem.setAttribute('height', String(option.svg.height));
+        optionUseElem.setAttribute('href', option.svg.src);
+
+        optionSvgElem.appendChild(optionUseElem);
+
+        selectListElem.appendChild(optionSvgElem);
+      }
+
       selectListElem.addEventListener('click', this.onClickOption.bind(this));
 
       optionsFragmentsByGroup[option.attributes.group].appendChild(selectListElem);