Merge pull request #4 from apicore-engineering/develop

Check visibility of element

Author: sebinemeth

dist/index.d.ts

@@ -10,6 +10,7 @@ type LiveTranslatorPluginOptions = {
     persist?: boolean;
     root?: HTMLElement;
     refreshRate?: number;
+    checkVisibility?: boolean;
 };
 export declare function encodeMessages(messagesObject: any): any;
 export declare const LiveTranslatorPlugin: {

dist/index.js

@@ -259,19 +259,26 @@ class LiveTranslatorManager {
             if (badges.length) {
                 let position = { top: 0, left: 0 };
                 try {
+                    let isVisible = !this._options.checkVisibility;
                     if (node instanceof Text) {
                         const clientRect = getBoundingClientRect(node);
                         position.top = clientRect.top + window.scrollY;
                         position.left = clientRect.left + window.screenX;
+                        isVisible = isVisible || node.parentElement.contains(document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2));
                     }
                     else {
                         const clientRect = node.getClientRects()[0];
                         position.top = clientRect.top + clientRect.height - 10 + window.scrollY;
                         position.left = clientRect.left + window.screenX;
+                        isVisible = isVisible || node.contains(document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2));
+                    }
+                    if (!isVisible) {
+                        continue;
                     }
                 }
                 catch (error) {
                     // console.warn('Could not get bounding box for', node);
+                    continue;
                 }
                 const container = document.createElement('span');
                 container.classList.add('live-translator-badge-container');

src/demo/App.vue

@@ -47,6 +47,11 @@
       <h3>Attribute</h3>
       <img class="image" src="https://source.unsplash.com/random/500x500" :alt="t('LTPlugin.Attrs.ImageAlt')"
         :title="t('LTPlugin.Attrs.ImageTitle')">
+
+      <div id="draggable" draggable @mousedown="dragStart" @mousemove="dragMove" @mouseup="dragEnd" ref="draggable" :title="t('LTPlugin.PositionAbsolute')">
+        <h3>Absolute position</h3>
+        {{ t('LTPlugin.Draggable') }}
+      </div>
     </div>
   </div>
 </template>
@@ -66,6 +71,26 @@ const showMeta = computed(() => {
   return null
 })
 
+const dragPos = ref<{ x: number, y: number } | null>(null)
+const draggable = ref<HTMLDivElement>()
+
+function dragStart(e: MouseEvent) {
+  dragPos.value = {
+    x: e.offsetX,
+    y: e.offsetY,
+  }
+}
+
+function dragMove(e: MouseEvent) {
+  if (!dragPos.value) return
+  draggable.value!.style.top = e.pageY - dragPos.value.y + 'px'
+  draggable.value!.style.left = e.pageX - dragPos.value.x + 'px'
+}
+
+function dragEnd() {
+  dragPos.value = null
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -120,4 +145,32 @@ const showMeta = computed(() => {
   width: 80%;
   border-radius: 8px;
 }
+
+#draggable {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  background: #eeeeeee2;
+  width: 200px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  padding: 1rem;
+  cursor: grab;
+  flex-direction: column;
+
+  h3 {
+    margin-top: 0;
+  }
+
+  &:hover {
+    outline: solid 2px #eeeeee;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
 </style>

src/demo/lang/en.json

@@ -11,6 +11,8 @@
         "PartOne": "Part one",
         "PartTwo": "Part two",
         "ListItemN": "Item {0}",
-        "MultipleTitle": "Multiple strings inside one tag"
+        "MultipleTitle": "Multiple strings inside one tag",
+        "Draggable": "Drag me around to cover elements",
+        "PositionAbsolute": "Position is absolute"
     }
 }

src/demo/lang/hu.json

@@ -11,6 +11,8 @@
         "PartOne": "Első rész",
         "PartTwo": "Második rész",
         "ListItemN": "Elem {0}",
-        "MultipleTitle": "Több string egy tagen belül"
+        "MultipleTitle": "Több string egy tagen belül",
+        "Draggable": "Mozgass egy elem fölé, hogy eltakard azt",
+        "PositionAbsolute": "'absolute' pozíció"
     }
 }

src/demo/main.ts

@@ -13,7 +13,8 @@ app.use(LiveTranslatorPlugin, {
   },
   persist: true,
   root: document.getElementById('app'),
-  refreshRate: 200,
+  refreshRate: 50,
+  checkVisibility: true,
 })
 
 app.mount('#app')

src/demo/style.css

@@ -28,6 +28,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 h1 {

src/index.ts

@@ -84,7 +84,8 @@ type LiveTranslatorPluginOptions = {
   translationLink: (meta: TranslationMeta) => string
   persist?: boolean
   root?: HTMLElement
-  refreshRate?: number
+  refreshRate?: number,
+  checkVisibility?: boolean,
 }
 
 function deepForIn(object: Object, fn: (value: string, key: string) => void) {
@@ -305,17 +306,28 @@ class LiveTranslatorManager {
       if (badges.length) {
         let position = { top: 0, left: 0}
         try {
+          let isVisible = !this._options.checkVisibility
           if (node instanceof Text) {
             const clientRect = getBoundingClientRect(node)
             position.top = clientRect.top + window.scrollY
             position.left = clientRect.left + window.screenX
+            isVisible = isVisible || node.parentElement.contains(
+              document.elementFromPoint(clientRect.left + clientRect.width/2, clientRect.top + clientRect.height/2)
+            )
           } else {
             const clientRect = node.getClientRects()[0]
             position.top = clientRect.top + clientRect.height - 10 + window.scrollY
             position.left = clientRect.left + window.screenX
+            isVisible = isVisible || node.contains(
+              document.elementFromPoint(clientRect.left + clientRect.width/2, clientRect.top + clientRect.height/2)
+            )
+          }
+          if (!isVisible) {
+            continue
           }
         } catch (error) {
           // console.warn('Could not get bounding box for', node);
+          continue
         }
         const container = document.createElement('span')
         container.classList.add('live-translator-badge-container')