Closes #34: exclude svg use from lrc

src/BeaconLrc.js

@@ -23,12 +23,23 @@ class BeaconLrc {
 
     _getLazyRenderElements() {
         const elements = document.querySelectorAll('[data-rocket-location-hash]');
+        const svgUseTargets = this._getSvgUseTargets();
 
         if (elements.length <= 0) {
             return [];
         }
 
-        const validElements = Array.from(elements).filter(element => !this._skipElement(element));
+        const validElements = Array.from(elements).filter(element => {
+            if (this._skipElement(element)) {
+                return false;
+            }
+            if (svgUseTargets.includes(element)) {
+                this.logger.logColoredMessage(`Element skipped because of SVG: ${element.tagName}`, 'orange');
+                return false;
+            }
+            return true;
+        });
+
 
         return validElements.map(element => ({
             element: element,
@@ -192,6 +203,21 @@ class BeaconLrc {
             : 'No hash detected';
     }
 
+    _getSvgUseTargets() {
+        const useElements = document.querySelectorAll('use');
+        const targets = new Set();
+
+        useElements.forEach(use => {
+            let parent = use.parentElement;
+            while (parent && parent !== document.body) {
+                targets.add(parent);
+                parent = parent.parentElement;
+            }
+        });
+
+        return Array.from(targets);
+    }
+
     getResults() {
         return this.lazyRenderElements;
     }

test/BeaconLrc.test.js

@@ -57,7 +57,7 @@ describe('BeaconLrc', function() {
         // Mocking document.querySelectorAll
         global.document = {
             querySelectorAll: (selector) => {
-                if (selector === '[data-rocket-location-hash]') {
+                if (selector === '[data-rocket-location-hash]' || selector === 'use') {
                     return mockElements;
                 }
                 return [];
@@ -148,6 +148,21 @@ describe('BeaconLrc', function() {
         _skipElementStub.restore();
     });
 
+    it('should skip elements with svg use', function() {
+        const _getElementDepthStub = sinon.stub(beaconLrc, '_getElementDepth');
+        _getElementDepthStub.returns(1);
+
+        const _svgElementStub = sinon.stub(beaconLrc, '_getSvgUseTargets');
+        _svgElementStub.returns([mockElements[2]]);
+
+        const elements = beaconLrc._getLazyRenderElements();
+        const skippedElement = elements.find(el => el.hash === 'hash3'); 
+        assert.strictEqual(skippedElement, undefined);
+
+        _getElementDepthStub.restore();
+        _svgElementStub.restore();
+    });
+
     it('should return correct distance', () => {
         const distance = beaconLrc._getElementDistance(mockElements[2]);
         assert.strictEqual(distance, 600);
@@ -328,4 +343,14 @@ describe('BeaconLrc', function() {
 
         window.getComputedStyle.restore();
     })
+
+    it('should return the correct SVG use target elements', function() {
+        mockElements[0].parentElement = { tagName: 'svg', parentElement: null };
+        mockElements[1].parentElement = { tagName: 'div', parentElement: null };
+
+        const targets = beaconLrc._getSvgUseTargets();
+        assert.strictEqual(targets.length, 2);
+        assert.strictEqual(targets[0].tagName, 'svg');
+        assert.strictEqual(targets[1].tagName, 'div');
+    });
 });