Sebinemeth/issue9

dist/index.js

@@ -299,6 +299,16 @@ class LiveTranslatorManager {
                     badge.addEventListener('mouseleave', () => this.hideBox());
                     badges.push(badge);
                     cacheKeyParts.push(meta.path);
+                    if (attribute.name === 'href') {
+                        node.onclick = (ev) => {
+                            ev.stopPropagation();
+                            ev.preventDefault();
+                            const clone = node.cloneNode();
+                            const href = ZeroWidthEncoder.cleanString(clone.getAttribute('href'));
+                            clone.setAttribute('href', href);
+                            clone.click();
+                        };
+                    }
                 }
             }
             if (badges.length) {

src/demo/App.vue

@@ -45,8 +45,10 @@
         <div class="item translated" v-for="i in 5">{{ t('LTPlugin.ListItemN', [i]) }}</div>
       </div>
       <h3>Attribute</h3>
-      <img class="image" src="https://source.unsplash.com/random/500x500" :alt="t('LTPlugin.Attrs.ImageAlt')"
+      <img class="image" src="https://picsum.photos/600/400" :alt="t('LTPlugin.Attrs.ImageAlt')"
         :title="t('LTPlugin.Attrs.ImageTitle')">
+      <h3>HREF attribute</h3>
+      <a :href="t('LTPlugin.Link.Href')" target="_blank">{{ t('LTPlugin.Link.Title') }}</a>
 
       <div id="draggable" draggable @mousedown="dragStart" @mousemove="dragMove" @mouseup="dragEnd" ref="draggable" :title="t('LTPlugin.PositionAbsolute')">
         <h3>Absolute position</h3>
@@ -142,7 +144,6 @@ function dragEnd() {
 }
 
 .image {
-  width: 80%;
   border-radius: 8px;
 }
 

src/demo/lang/en.json

@@ -13,6 +13,10 @@
         "ListItemN": "Item {0}",
         "MultipleTitle": "Multiple strings inside one tag",
         "Draggable": "Drag me around to cover elements",
-        "PositionAbsolute": "Position is absolute"
+        "PositionAbsolute": "Position is absolute",
+        "Link": {
+            "Href": "https://en.wikipedia.org/",
+            "Title": "Link to Wikipedia"
+        }
     }
 }

src/demo/lang/hu.json

@@ -13,6 +13,10 @@
         "ListItemN": "Elem {0}",
         "MultipleTitle": "Több string egy tagen belül",
         "Draggable": "Mozgass egy elem fölé, hogy eltakard azt",
-        "PositionAbsolute": "'absolute' pozíció"
+        "PositionAbsolute": "'absolute' pozíció",
+        "Link": {
+            "Href": "https://hu.wikipedia.org/",
+            "Title": "Link a Wikipediára"
+        }
     }
 }

src/index.ts

@@ -355,6 +355,17 @@ class LiveTranslatorManager {
           badge.addEventListener('mouseleave', () => this.hideBox())
           badges.push(badge)
           cacheKeyParts.push(meta.path)
+
+          if (attribute.name === 'href') {
+            node.onclick = (ev) => {
+              ev.stopPropagation()
+              ev.preventDefault()
+              const clone = node.cloneNode() as HTMLElement
+              const href = ZeroWidthEncoder.cleanString(clone.getAttribute('href'))
+              clone.setAttribute('href', href)
+              clone.click()
+            }
+          }
         }
       }