locize 3.3.0 → 4.0.0

package/src/ui/highlightNode.js

@@ -1,6 +1,8 @@
 import { colors } from '../vars.js'
 import { RibbonBox } from './elements/ribbonBox.js'
+import { HighlightBox } from './elements/highlightBox.js'
 import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom'
+import { getOptimizedBoundingRectEle } from './utils.js'
 
 const eleToOutline = [
   'DIV',
@@ -18,15 +20,22 @@ const eleToOutline = [
   'DL',
   'PRE'
 ]
-const overriddenStyles = ['outline', 'border-radius', 'outline-offset', 'filter']
+const overriddenStyles = [
+  'outline',
+  'border-radius',
+  'outline-offset',
+  'filter'
+]
 const originalStyles = {}
 const selected = {}
 
 export function highlight (item, node, keys) {
   const { id } = item
 
-  if (selected[id]) return
+  // uncomment below if we do not won't the ribbon box to show on selected
+  // if (selected[id]) return
 
+  /*
   if (!originalStyles[id]) {
     originalStyles[id] = overriddenStyles.reduce((mem, s) => {
       mem[s] = node.style[s]
@@ -46,33 +55,22 @@ export function highlight (item, node, keys) {
     node.style.filter = 'brightness(110%)'
     // node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
   }
+    */
+
+  // get a bounding rect on main element or optimized inner text
+  const rectEle = getOptimizedBoundingRectEle(node)
+
+  if (!item.highlightBox) {
+    const box = HighlightBox(rectEle, colors.highlight)
+    document.body.appendChild(box)
+    item.highlightBox = box
+  }
 
   if (!item.ribbonBox) {
     const { box: actions, arrow: arrowEle } = RibbonBox(keys)
     document.body.appendChild(actions)
 
-    let refEle = node
-    // const arrowLen = arrowEle.offsetWidth
-
-    // better placement for element only containing text
-    // note: for html we would have to calculate based on children...
-    if (node.childNodes.length === 1) {
-      const childNode = node.childNodes[0]
-
-      if (childNode && childNode.nodeName === '#text') {
-        const range = document.createRange()
-        range.selectNode(childNode)
-        const rect = range.getBoundingClientRect()
-
-        refEle = {
-          getBoundingClientRect () {
-            return rect
-          }
-        }
-      }
-    }
-
-    computePosition(refEle, actions, {
+    computePosition(rectEle, actions, {
       placement: 'right',
       middleware: [
         flip({ fallbackPlacements: ['left', 'bottom'] }),
@@ -111,7 +109,12 @@ export function highlight (item, node, keys) {
           right: '',
           bottom: '',
           [staticSide]: `${side === 'bottom' ? -18 : -25}px`,
-          transform: side === 'bottom' ? 'rotate(90deg)' : side === 'left' ? 'rotate(180deg)' : ''
+          transform:
+            side === 'bottom'
+              ? 'rotate(90deg)'
+              : side === 'left'
+              ? 'rotate(180deg)'
+              : ''
         })
       }
     })
@@ -126,71 +129,99 @@ export function highlightUninstrumented (item, node, keys) {
 
   if (selected[id]) return
 
-  if (!originalStyles[id]) {
-    originalStyles[id] = overriddenStyles.reduce((mem, s) => {
-      mem[s] = node.style[s]
-      return mem
-    }, {})
-  }
-
-  if (eleToOutline.includes(node.nodeName)) {
-    node.style.outline = `${colors.warning} solid 1px`
-    node.style.setProperty('border-radius', '1px')
-    node.style.setProperty('outline-offset', '2px')
-    node.style.filter = 'brightness(110%)'
-  } else {
-    node.style.outline = `${colors.warning} solid 1px`
-    node.style.setProperty('border-radius', '1px')
-    node.style.setProperty('outline-offset', '1px')
-    node.style.filter = 'brightness(110%)'
-    // node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
+  // if (!originalStyles[id]) {
+  //   originalStyles[id] = overriddenStyles.reduce((mem, s) => {
+  //     mem[s] = node.style[s]
+  //     return mem
+  //   }, {})
+  // }
+
+  // if (eleToOutline.includes(node.nodeName)) {
+  //   node.style.outline = `${colors.warning} solid 1px`
+  //   node.style.setProperty('border-radius', '1px')
+  //   node.style.setProperty('outline-offset', '2px')
+  //   node.style.filter = 'brightness(110%)'
+  // } else {
+  //   node.style.outline = `${colors.warning} solid 1px`
+  //   node.style.setProperty('border-radius', '1px')
+  //   node.style.setProperty('outline-offset', '1px')
+  //   node.style.filter = 'brightness(110%)'
+  //   // node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
+  // }
+
+  const rectEle = getOptimizedBoundingRectEle(node)
+
+  if (!item.highlightBox) {
+    const box = HighlightBox(rectEle, colors.warning)
+    document.body.appendChild(box)
+    item.highlightBox = box
   }
 }
 
 export function selectedHighlight (item, node, keys) {
   const { id } = item
 
-  if (!originalStyles[id]) {
-    originalStyles[id] = overriddenStyles.reduce((mem, s) => {
-      mem[s] = node.style[s]
-      return mem
-    }, {})
-  }
-
-  if (eleToOutline.includes(node.nodeName)) {
-    node.style.outline = `${colors.highlight} solid 1px`
-    node.style.setProperty('border-radius', '1px')
-    node.style.setProperty('outline-offset', '2px')
-    // node.style.filter = 'brightness(110%)';
-    node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
-  } else {
-    node.style.outline = `${colors.highlight} solid 1px`
-    node.style.setProperty('border-radius', '1px')
-    node.style.setProperty('outline-offset', '1px')
-    // node.style.filter = 'brightness(110%)';
-    node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
+  // if (!originalStyles[id]) {
+  //   originalStyles[id] = overriddenStyles.reduce((mem, s) => {
+  //     mem[s] = node.style[s]
+  //     return mem
+  //   }, {})
+  // }
+
+  // if (eleToOutline.includes(node.nodeName)) {
+  //   // node.style.outline = `${colors.highlight} solid 1px`
+  //   // node.style.setProperty('border-radius', '1px')
+  //   // node.style.setProperty('outline-offset', '2px')
+  //   // node.style.filter = 'brightness(110%)';
+  //   node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
+  // } else {
+  //   // node.style.outline = `${colors.highlight} solid 1px`
+  //   // node.style.setProperty('border-radius', '1px')
+  //   // node.style.setProperty('outline-offset', '1px')
+  //   // node.style.filter = 'brightness(110%)';
+  //   node.style.filter = `brightness(110%) drop-shadow(0px 0px 2px ${colors.highlight} )`
+  // }
+
+  const rectEle = getOptimizedBoundingRectEle(node)
+
+  if (!item.highlightBox) {
+    const box = HighlightBox(rectEle, colors.highlight, colors.gray)
+    document.body.appendChild(box)
+    item.highlightBox = box
   }
 
   // hide ribbons
-  if (item.ribbonBox) {
-    document.body.removeChild(item.ribbonBox)
+  // if (item.ribbonBox) {
+  //   document.body.removeChild(item.ribbonBox)
 
-    delete item.ribbonBox
-  }
+  //   delete item.ribbonBox
+  // }
 
   selected[id] = true
 }
 
+export function recalcSelectedHighlight (item, node, keys) {
+  if (!selected[item.id]) return
+  resetHighlight(item, node, keys, false)
+  selectedHighlight(item, node, keys)
+}
+
 export function resetHighlight (item, node, keys, ignoreSelected = true) {
   const { id } = item
 
   if (ignoreSelected && selected[id]) return
 
-  if (originalStyles[id]) {
-    overriddenStyles.forEach(s => {
-      node.style.setProperty(s, originalStyles[id][s])
-    })
-    delete originalStyles[id]
+  // if (originalStyles[id]) {
+  //   overriddenStyles.forEach(s => {
+  //     node.style.setProperty(s, originalStyles[id][s])
+  //   })
+  //   delete originalStyles[id]
+  // }
+
+  if (item.highlightBox) {
+    document.body.removeChild(item.highlightBox)
+
+    delete item.highlightBox
   }
 
   if (item.ribbonBox) {

package/src/ui/popup.js

@@ -25,7 +25,8 @@ export function initDragElement () {
   }
 
   function dragMouseDown (e) {
-    if (!overlay) overlay = document.getElementById('i18next-editor-popup-overlay')
+    if (!overlay)
+      overlay = document.getElementById('i18next-editor-popup-overlay')
     if (overlay) overlay.style.display = 'block'
     stopMouseTracking()
 
@@ -61,13 +62,24 @@ export function initDragElement () {
     startMouseTracking()
     if (overlay) overlay.style.display = 'none'
 
+    const ele = document.getElementById('i18next-editor-popup')
+    localStorage.setItem(
+      'locize_popup_pos',
+      JSON.stringify({
+        top: parseInt(document.defaultView.getComputedStyle(ele).top, 10),
+        left: parseInt(document.defaultView.getComputedStyle(ele).left, 10)
+      })
+    )
+
     /* stop moving when mouse button is released: */
     document.onmouseup = null
     document.onmousemove = null
   }
 
   function getHeader (element) {
-    const headerItems = element.getElementsByClassName('i18next-editor-popup-header')
+    const headerItems = element.getElementsByClassName(
+      'i18next-editor-popup-header'
+    )
 
     if (headerItems.length === 1) {
       return headerItems[0]
@@ -107,15 +119,22 @@ export function initResizeElement () {
 
   function initDrag (e) {
     stopMouseTracking()
-    if (!overlay) overlay = document.getElementById('i18next-editor-popup-overlay')
+    if (!overlay)
+      overlay = document.getElementById('i18next-editor-popup-overlay')
     if (overlay) overlay.style.display = 'block'
 
     element = this.parentPopup
 
     startX = e.clientX
     startY = e.clientY
-    startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10)
-    startHeight = parseInt(document.defaultView.getComputedStyle(element).height, 10)
+    startWidth = parseInt(
+      document.defaultView.getComputedStyle(element).width,
+      10
+    )
+    startHeight = parseInt(
+      document.defaultView.getComputedStyle(element).height,
+      10
+    )
     document.documentElement.addEventListener('mousemove', doDrag, false)
     document.documentElement.addEventListener('mouseup', stopDrag, false)
   }
@@ -129,6 +148,15 @@ export function initResizeElement () {
     startMouseTracking()
     if (overlay) overlay.style.display = 'none'
 
+    const ele = document.getElementById('i18next-editor-popup')
+    localStorage.setItem(
+      'locize_popup_size',
+      JSON.stringify({
+        width: parseInt(document.defaultView.getComputedStyle(ele).width, 10),
+        height: parseInt(document.defaultView.getComputedStyle(ele).height, 10)
+      })
+    )
+
     document.documentElement.removeEventListener('mousemove', doDrag, false)
     document.documentElement.removeEventListener('mouseup', stopDrag, false)
   }

package/src/ui/utils.js

@@ -6,7 +6,8 @@ export function isInViewport (el) {
 
   const rect = el.getBoundingClientRect()
   // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
-  const windowHeight = window.innerHeight || document.documentElement.clientHeight
+  const windowHeight =
+    window.innerHeight || document.documentElement.clientHeight
   const windowWidth = window.innerWidth || document.documentElement.clientWidth
 
   // http://stackoverflow.com/questions/325933/determine-whether-two-date-ranges-overlap
@@ -41,3 +42,29 @@ export function mouseDistanceFromElement (mouseEvent, element) {
     hypot = (distX ** 2 + distY ** 2) ** (1 / 2)
   return Math.floor(hypot) // this will output 0 when next to your element.
 }
+
+export function getOptimizedBoundingRectEle (node) {
+  // get a bounding rect on main element or optimized inner text
+  let refEle = node
+  // const arrowLen = arrowEle.offsetWidth
+
+  // better placement for element only containing text
+  // note: for html we would have to calculate based on children...
+  if (node.childNodes.length === 1) {
+    const childNode = node.childNodes[0]
+
+    if (childNode && childNode.nodeName === '#text') {
+      const range = document.createRange()
+      range.selectNode(childNode)
+      const rect = range.getBoundingClientRect()
+
+      refEle = {
+        getBoundingClientRect () {
+          return rect
+        }
+      }
+    }
+  }
+
+  return refEle
+}

package/src/uninstrumentedStore.js

@@ -11,7 +11,7 @@ function clean () {
   })
 }
 
-function save (id, type, node) {
+function save (id, type, node, txt) {
   if (!id || !type || !node) return
 
   if (!data[id]) {
@@ -23,16 +23,32 @@ function save (id, type, node) {
 
   data[id].keys = {
     ...data[id].keys,
-    [`${type}`]: 'uninstrumented'
+    [`${type}`]: { value: txt, eleUniqueID: id, textType: type }
   }
 }
 
+function remove (id, node) {
+  resetHighlight(id, node)
+  delete data[id]
+}
+
+function removeKey (id, key, node) {
+  const item = get(id)
+  if (!item) return
+
+  delete item.keys[`${key}`]
+
+  if (!Object.keys(item.keys).length) remove(id, node)
+}
+
 function get (id) {
   return data[id]
 }
 
 export const uninstrumentedStore = {
   save,
+  remove,
+  removeKey,
   clean,
   get,
   data

package/src/utils.js

@@ -56,7 +56,12 @@ export function getClickedElement (e) {
     e.srcElement.nodeType === 1 &&
     (e.srcElement.nodeName === 'BUTTON' || e.srcElement.nodeName === 'INPUT')
   ) {
-    if (e.srcElement.getAttribute && e.srcElement.getAttribute('ignorelocizeeditor') === '') { return null }
+    if (
+      e.srcElement.getAttribute &&
+      e.srcElement.getAttribute('ignorelocizeeditor') === ''
+    ) {
+      return null
+    }
     return e.srcElement
   }
 
@@ -67,7 +72,8 @@ export function getClickedElement (e) {
     el = e.originalEvent.explicitOriginalTarget
   } else {
     const parent = e.srcElement
-    if (parent.getAttribute && parent.getAttribute('ignorelocizeeditor') === '') return null
+    if (parent.getAttribute && parent.getAttribute('ignorelocizeeditor') === '')
+      return null
 
     const left = e.pageX
     const top = e.pageY
@@ -87,11 +93,13 @@ export function getClickedElement (e) {
       if (n.nodeType === 1 && nOffset.bottom < top) topStartsAt = i + 1
 
       // if node is below top click set end index to this node
-      if (!topBreaksAt && nOffset.top + (n.clientHeight || 0) > top) topBreaksAt = i
+      if (!topBreaksAt && nOffset.top + (n.clientHeight || 0) > top)
+        topBreaksAt = i
     }
 
     // check we are inside children lenght
-    if (topStartsAt + 1 > parent.childNodes.length) topStartsAt = parent.childNodes.length - 1
+    if (topStartsAt + 1 > parent.childNodes.length)
+      topStartsAt = parent.childNodes.length - 1
     if (!topBreaksAt) topBreaksAt = parent.childNodes.length
     // console.warn('bound', topStartsAt, topBreaksAt)
 
@@ -125,10 +133,69 @@ function getAttribute (el, name) {
 export function getElementI18nKey (el) {
   const key = getAttribute(el, 'data-i18n')
   if (key) return key
-  if (el.nodeType === window.Node.TEXT_NODE && el.parentElement) { return getElementI18nKey(el.parentElement) }
+  if (el.nodeType === window.Node.TEXT_NODE && el.parentElement) {
+    return getElementI18nKey(el.parentElement)
+  }
   return undefined
 }
 
+function parseAttrFromKey (key) {
+  let attr = 'text'
+
+  if (key.indexOf('[') == 0) {
+    var parts = key.split(']')
+    key = parts[1]
+    attr = parts[0].substr(1, parts[0].length - 1)
+  }
+
+  const newKey =
+    key.indexOf(';') == key.length - 1 ? key.substr(0, key.length - 2) : key
+
+  return [newKey, attr]
+}
+
+export function getI18nMetaFromNode (el, hasNamespacePrependToKey = true) {
+  const key = getElementI18nKey(el)
+  const ns = getElementNamespace(el)
+
+  const allKeys = {}
+
+  if (key && key.indexOf(';') >= 0) {
+    let keys = key.split(';')
+    for (let ix = 0, l_ix = keys.length; ix < l_ix; ix++) {
+      if (keys[ix] != '') {
+        const [usedKey, attr] = parseAttrFromKey(keys[ix])
+
+        allKeys[attr] = usedKey
+      }
+    }
+  } else if (key) {
+    const [usedKey, attr] = parseAttrFromKey(key)
+
+    allKeys[attr] = usedKey
+  }
+
+  if (Object.keys(allKeys).length < 1) return null
+
+  const res = Object.keys(allKeys).reduce((mem, attr) => {
+    let key = allKeys[attr]
+    let usedNS = ns
+    let usedKey = key
+
+    if (hasNamespacePrependToKey && key.indexOf(':') > -1) {
+      const parts = key.split(':')
+      usedKey = parts[1]
+      usedNS = parts[0]
+    }
+
+    mem[attr] = { key: usedKey, ns: usedNS }
+
+    return mem
+  }, {})
+
+  return res
+}
+
 export function getElementNamespace (el) {
   let found
 

package/src/vars.js

@@ -1,7 +1,9 @@
 export const validAttributes = ['placeholder', 'title', 'alt']
+export const ignoreElements = ['SCRIPT']
 export const colors = {
-  highlight: '#26a69a',
-  warning: '#e67a00'
+  highlight: '#1976d2',
+  warning: '#e67a00',
+  gray: '#ccc'
 }
 
 export const getIframeUrl = () => {
@@ -13,6 +15,6 @@ export const getIframeUrl = () => {
   return env === 'development'
     ? 'http://localhost:3003/'
     : env === 'staging'
-      ? 'https://incontext-dev.locize.app'
-      : 'https://incontext.locize.app'
+    ? 'https://incontext-dev.locize.app'
+    : 'https://incontext.locize.app'
 }

package/dist/cjs/api/handleTurnOff.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var postMessage = require('./postMessage.js');
-
-function handler(payload, e) {
-  postMessage.api.turnOff();
-}
-postMessage.api.addHandler('turnOff', handler);

package/dist/cjs/api/handleTurnOn.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var postMessage = require('./postMessage.js');
-
-function handler(payload, e) {
-  postMessage.api.turnOn();
-}
-postMessage.api.addHandler('turnOn', handler);

package/dist/esm/api/handleTurnOff.js

@@ -1,6 +0,0 @@
-import { api } from './postMessage.js';
-
-function handler(payload, e) {
-  api.turnOff();
-}
-api.addHandler('turnOff', handler);

package/dist/esm/api/handleTurnOn.js

@@ -1,6 +0,0 @@
-import { api } from './postMessage.js';
-
-function handler(payload, e) {
-  api.turnOn();
-}
-api.addHandler('turnOn', handler);