From 02aaeedf430590231a19760988af8b6e5266ec2c Mon Sep 17 00:00:00 2001
From: Glenn Sayers <glennsayers.gs@gmail.com>
Date: Tue, 18 Jul 2023 17:12:10 +0100
Subject: [PATCH] Add CSS class name prefix to prevent conflicting styles when
 using SVG mode

---
 src/core/QRSVG.ts | 29 +++++++++++++++++------------
 src/index.html    | 20 ++++++++++++++++++++
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/core/QRSVG.ts b/src/core/QRSVG.ts
index 60608ef0..f1be5388 100644
--- a/src/core/QRSVG.ts
+++ b/src/core/QRSVG.ts
@@ -41,6 +41,7 @@ export default class QRSVG {
   _options: RequiredOptions;
   _qr?: QRCode;
   _image?: HTMLImageElement;
+  _classPrefix: string;
 
   //TODO don't pass all options to this class
   constructor(options: RequiredOptions) {
@@ -50,7 +51,7 @@ export default class QRSVG {
     this._element.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
     this._defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
     this._style = document.createElementNS("http://www.w3.org/2000/svg", "style");
-
+    this._classPrefix = this.generateClassPrefix();
     this._options = options;
   }
 
@@ -76,6 +77,10 @@ export default class QRSVG {
     this._element.appendChild(this._defs);
   }
 
+  generateClassPrefix(): string {
+    return Array.from({ length: 8 }, () => Math.floor(Math.random() * 25 + 10).toString(36)).join("");
+  }
+
   async drawQR(qr: QRCode): Promise<void> {
     const count = qr.getModuleCount();
     const minSize = Math.min(this._options.width, this._options.height) - this._options.margin * 2;
@@ -157,12 +162,12 @@ export default class QRSVG {
           y: 0,
           height: options.height,
           width: options.width,
-          name: "background-color"
+          name: `${this._classPrefix}-background-color`
         });
       } else if (options.backgroundOptions?.color) {
         this._createStyle({
           color: color,
-          name: "background-color"
+          name: `${this._classPrefix}-background-color`
         });
       }
     }
@@ -198,15 +203,15 @@ export default class QRSVG {
         y: yBeginning,
         height: count * dotSize,
         width: count * dotSize,
-        name: "dot-color"
+        name: `${this._classPrefix}-dot-color`
       });
     } else if (options.dotsOptions.color) {
       this._dots = document.createElementNS("http://www.w3.org/2000/svg", "g");
-      this._dots.setAttribute("class", "dot-color");
+      this._dots.setAttribute("class", `${this._classPrefix}-dot-color`);
       this._element.appendChild(this._dots);
       this._createStyle({
         color: options.dotsOptions.color,
-        name: "dot-color"
+        name: `${this._classPrefix}-dot-color`
       });
     }
 
@@ -287,15 +292,15 @@ export default class QRSVG {
           y,
           height: cornersSquareSize,
           width: cornersSquareSize,
-          name: `corners-square-color-${column}-${row}`
+          name: `${this._classPrefix}-corners-square-color-${column}-${row}`
         });
       } else {
         this._cornerSquares = document.createElementNS("http://www.w3.org/2000/svg", "g");
-        this._cornerSquares.setAttribute("class", `corners-square-color-${column}-${row}`);
+        this._cornerSquares.setAttribute("class", `${this._classPrefix}-corners-square-color-${column}-${row}`);
         this._element.appendChild(this._cornerSquares);
         this._createStyle({
           color: options.cornersSquareOptions?.color,
-          name: `corners-square-color-${column}-${row}`
+          name: `${this._classPrefix}-corners-square-color-${column}-${row}`
         });
       }
 
@@ -348,15 +353,15 @@ export default class QRSVG {
           y: y + dotSize * 2,
           height: cornersDotSize,
           width: cornersDotSize,
-          name: `corners-dot-color-${column}-${row}`
+          name: `${this._classPrefix}-corners-dot-color-${column}-${row}`
         });
       } else {
         this._cornerDots = document.createElementNS("http://www.w3.org/2000/svg", "g");
-        this._cornerDots.setAttribute("class", `corners-dot-color-${column}-${row}`);
+        this._cornerDots.setAttribute("class", `${this._classPrefix}-corners-dot-color-${column}-${row}`);
         this._element.appendChild(this._cornerDots);
         this._createStyle({
           color: options.cornersDotOptions?.color,
-          name: `corners-dot-color-${column}-${row}`
+          name: `${this._classPrefix}-corners-dot-color-${column}-${row}`
         });
       }
 
diff --git a/src/index.html b/src/index.html
index 15b95239..67fe2c92 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,6 +17,8 @@
     <div id="container"></div>
     <hr />
     <div id="container2"></div>
+    <hr />
+    <div id="container3"></div>
 
     <script type="text/javascript">
       //Test out dot options
@@ -33,6 +35,10 @@
           type: "square",
           color: "#321ccc"
         },
+        cornersDotOptions: {
+          type: "square",
+          color: "#321ccc"
+        },
         imageOptions: {
           crossOrigin: "anonymous",
           margin: 30
@@ -73,6 +79,20 @@
         const qrCode = new QRCodeStyling(options);
         qrCode.append(container2);
       });
+
+      // Draw SVG
+      const container3 = document.getElementById("container3");
+
+      dotOptions.forEach((dotOption, i) => {
+        options["dotsOptions"] = {
+          type: dotOptions[i],
+          color: color[i]
+        };
+        options.type = "svg";
+
+        const qrCode = new QRCodeStyling(options);
+        qrCode.append(container3);
+      });
     </script>
   </body>
 </html>