feat: add configurable HTML-ID prefix for SVG codes

This adds an option for callers to provide an HTML-ID prefix for SVG QR-codes, in order to make them unique and enable using this library for multiple QR-codes on a single page. Further it adds a .node-version file which can be used by nodenv or just manual node version selection, to specify a node version that is able to install, build and test this code base without adding any changes. Closes kozakdenys#210.
blecon-GmbH · Sep 17, 2024 · 5e1ad7b · 5e1ad7b
1 parent d923c95
commit 5e1ad7b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+14.21.3
diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ dotsOptions            |object                   |             |Dots styling opt
 cornersSquareOptions   |object                   |             |Square in the corners styling options
 cornersDotOptionsHelper|object                   |             |Dots in the corners styling options
 backgroundOptions      |object                   |             |QR background styling options
+svgOptions             |object                   |             |Only specify when you need to set things specific to the SVG implementation.
 nodeCanvas             |node-canvas              |             |Only specify when running on a node server for canvas type, please refer to node section below
 jsDom                  |jsdom                    |             |Only specify when running on a node server for svg type, please refer to node section below
 
@@ -186,6 +187,12 @@ Property|Type            |Default Value|Description
 offset  |number (`0 - 1`)|             |Position of color in gradient range
 color   |string          |             |Color of stop in gradient range
 
+`options.svgOptions` structure
+
+Property|Type   |Default Value|Description
+--------|-------|-------------|----------------------------------------------------------------------------------------------
+idPrefix|string?|`undefined`  |Use this to set different HTML IDs, for when you are using multiple QR-Codes on the same page.
+
 #### QRCodeStyling methods
 `QRCodeStyling.append(container) => void`
 

diff --git a/src/core/QRSVG.ts b/src/core/QRSVG.ts
@@ -158,6 +158,7 @@ export default class QRSVG {
     if (element) {
       const gradientOptions = options.backgroundOptions?.gradient;
       const color = options.backgroundOptions?.color;
+      const name = this._createId("background-color");
 
       if (gradientOptions || color) {
         this._createColor({
@@ -168,7 +169,7 @@ export default class QRSVG {
           y: 0,
           height: options.height,
           width: options.width,
-          name: "background-color"
+          name: name
         });
       }
     }
@@ -195,9 +196,10 @@ export default class QRSVG {
       type: options.dotsOptions.type,
       window: this._window
     });
+    const name = this._createId("dot-color");
 
     this._dotsClipPath = this._window.document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-    this._dotsClipPath.setAttribute("id", "clip-path-dot-color");
+    this._dotsClipPath.setAttribute("id", `clip-path-${name}`);
     this._defs.appendChild(this._dotsClipPath);
 
     this._createColor({
@@ -208,7 +210,7 @@ export default class QRSVG {
       y: yBeginning,
       height: count * dotSize,
       width: count * dotSize,
-      name: "dot-color"
+      name: name
     });
 
     for (let i = 0; i < count; i++) {
@@ -269,8 +271,10 @@ export default class QRSVG {
       let cornersDotClipPath = this._dotsClipPath;
 
       if (options.cornersSquareOptions?.gradient || options.cornersSquareOptions?.color) {
+        const name = this._createId(`corners-square-color-${column}-${row}`);
+
         cornersSquareClipPath = this._window.document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-        cornersSquareClipPath.setAttribute("id", `clip-path-corners-square-color-${column}-${row}`);
+        cornersSquareClipPath.setAttribute("id", `clip-path-${name}`);
         this._defs.appendChild(cornersSquareClipPath);
         this._cornersSquareClipPath = this._cornersDotClipPath = cornersDotClipPath = cornersSquareClipPath;
 
@@ -282,7 +286,7 @@ export default class QRSVG {
           y,
           height: cornersSquareSize,
           width: cornersSquareSize,
-          name: `corners-square-color-${column}-${row}`
+          name: name
         });
       }
 
@@ -326,8 +330,10 @@ export default class QRSVG {
       }
 
       if (options.cornersDotOptions?.gradient || options.cornersDotOptions?.color) {
+        const name = this._createId(`corners-dot-color-${column}-${row}`);
+
         cornersDotClipPath = this._window.document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
-        cornersDotClipPath.setAttribute("id", `clip-path-corners-dot-color-${column}-${row}`);
+        cornersDotClipPath.setAttribute("id", `clip-path-${name}`);
         this._defs.appendChild(cornersDotClipPath);
         this._cornersDotClipPath = cornersDotClipPath;
 
@@ -339,7 +345,7 @@ export default class QRSVG {
           y: y + dotSize * 2,
           height: cornersDotSize,
           width: cornersDotSize,
-          name: `corners-dot-color-${column}-${row}`
+          name: name
         });
       }
 
@@ -557,4 +563,10 @@ export default class QRSVG {
 
     this._element.appendChild(rect);
   }
+
+  _createId(name: string): string {
+    const prefix = this._options.svgOptions?.idPrefix;
+
+    return prefix ? `${prefix}-${name}` : name;
+  }
 }
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -166,6 +166,9 @@ export type Options = {
     color?: string;
     gradient?: Gradient;
   };
+  svgOptions?: {
+    idPrefix?: string;
+  };
 };
 
 export type FilterFunction = (i: number, j: number) => boolean;