locize 2.4.6 → 3.0.1

package/src/ui/elements/popup.js

@@ -0,0 +1,226 @@
+// import { colors } from '../../vars.js'
+import { sheet } from '../stylesheet.js'
+import { startMouseTracking, stopMouseTracking } from '../mouseDistance.js'
+
+import { minimizeIconUrl, locizeIconUrl } from './icons.js'
+
+if (sheet) {
+  sheet.insertRule(
+    `@keyframes i18next-editor-animate-top { 
+      from {
+        top: calc(100vh + 600px); 
+        left: calc(100vw + 300px);
+        opacity: 0;
+      }
+      to {
+        top: var(--i18next-editor-popup-position-top);
+        left: var(--i18next-editor-popup-position-left);
+        opacity: 1;
+      }
+    }`
+  )
+  sheet.insertRule(
+    `@keyframes i18next-editor-animate-bottom { 
+      from {
+        top: var(--i18next-editor-popup-position-top);
+        left: var(--i18next-editor-popup-position-left);
+        opacity: 1;
+      }
+      to {
+        top: calc(100vh + 600px); 
+        left: calc(100vw + 300px);
+        opacity: 0;
+      }
+    }`
+  )
+  sheet.insertRule(
+    `.i18next-editor-popup * { 
+      -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+      -khtml-user-select: none; /* Konqueror HTML */
+      -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+      user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+    }`
+  )
+  sheet.insertRule(
+    `.i18next-editor-popup .resizer-right {
+      width: 15px;
+      height: 100%;
+      background: transparent;
+      position: absolute;
+      right: -15px;
+      bottom: 0;
+      cursor: e-resize;
+    }`
+  )
+  sheet.insertRule(
+    `.i18next-editor-popup .resizer-both {
+      width: 15px;
+      height: 15px;
+      background: transparent;
+      z-index: 10;
+      position: absolute;
+      right: -15px;
+      bottom: -15px;
+      cursor: se-resize;
+    }`
+  )
+  sheet.insertRule(
+    `.i18next-editor-popup .resizer-bottom {
+      width: 100%;
+      height: 15px;
+      background: transparent;
+      position: absolute;
+      right: 0;
+      bottom: -15px;
+      cursor: s-resize;
+    }`
+  )
+}
+
+function Ribbon (popupEle, onMaximize) {
+  const ribbon = document.createElement('div')
+  ribbon.setAttribute('data-i18next-editor-element', 'true')
+  ribbon.style = `
+  cursor: pointer;
+  position: fixed;
+  bottom: 25px;
+  right: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  background-color:  rgba(249, 249, 249, 0.2);
+  backdrop-filter: blur(3px);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  border-radius: 50%
+  `
+
+  ribbon.onclick = () => {
+    onMaximize()
+  }
+
+  // i18next Logo
+  const image = document.createElement('img')
+  image.src = locizeIconUrl
+  image.style.width = '45px'
+
+  ribbon.appendChild(image)
+
+  return ribbon
+}
+
+function Minimize (popupEle, onMinimize) {
+  const image = document.createElement('img')
+  image.setAttribute('data-i18next-editor-element', 'true')
+  image.src = minimizeIconUrl
+  image.style.width = '24px'
+  image.style.cursor = 'pointer'
+
+  image.onclick = () => {
+    popupEle.style.setProperty('--i18next-editor-popup-position-top', popupEle.style.top)
+    popupEle.style.setProperty('--i18next-editor-popup-position-left', popupEle.style.left)
+
+    popupEle.style.animation = 'i18next-editor-animate-bottom 2s forwards'
+
+    onMinimize()
+  }
+
+  return image
+}
+
+export function Popup (url, cb) {
+  const popup = document.createElement('div')
+  popup.setAttribute('id', 'i18next-editor-popup')
+  popup.classList.add('i18next-editor-popup')
+  popup.style = `
+  z-index: 9;
+  background-color: transparent;
+  border: 1px solid rgba(200, 200, 200, 0.9);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  --i18next-editor-popup-height: 200px;
+  height: var(--i18next-editor-popup-height);
+  min-height: 150px;
+  min-width: 300px;
+  --i18next-editor-popup-width: 400px;
+  width: var(--i18next-editor-popup-width);
+  max-height: 600px;
+  max-width: 800px;
+
+  position: fixed;
+  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);
+  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);
+  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);
+  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);
+
+  overflow: visible;
+  `
+  popup.setAttribute('data-i18next-editor-element', 'true')
+
+  const header = document.createElement('div')
+  header.classList.add('i18next-editor-popup-header')
+  header.style = `
+  padding: 2px 10px;
+  cursor: move;
+  z-index: 10;
+  backdrop-filter: blur(3px);
+  background-color: rgba(200, 200, 200, 0.5);
+  background: linear-gradient(0deg, rgba(200, 200, 200, 0.6), rgba(200, 200, 200, 0.5));
+  color: #fff;
+  text-align: right;
+  `
+
+  popup.appendChild(header)
+  header.appendChild(
+    Minimize(popup, () => {
+      const ribbon = Ribbon(popup, () => {
+        popup.style.animation = 'i18next-editor-animate-top 1s'
+
+        startMouseTracking()
+
+        setTimeout(() => {
+          document.body.removeChild(ribbon)
+        }, 1000)
+      })
+
+      document.body.appendChild(ribbon)
+      stopMouseTracking()
+    })
+  )
+
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('id', 'i18next-editor-iframe')
+  iframe.setAttribute('data-i18next-editor-element', 'true')
+  iframe.style = `
+    z-index: 100;
+    width: 100%;
+    height: calc(100% - 32px);
+    border: none;
+    background: #fff;
+  `
+  iframe.setAttribute('src', url)
+  iframe.addEventListener('load', cb)
+  popup.appendChild(iframe)
+
+  // a blur over to avoid mouse tracking during drag, resize
+  const overlay = document.createElement('div')
+  overlay.setAttribute('id', 'i18next-editor-popup-overlay')
+  overlay.setAttribute('data-i18next-editor-element', 'true')
+  overlay.style = `
+  display: none;
+  position: absolute;
+  top: 32px;
+  z-index: 101;
+  width: 100%;
+  height: calc(100% - 32px);
+  background-color: rgba(200, 200, 200, 0.5);
+  background: linear-gradient(0deg, rgba(240, 240, 240, 0.6), rgba(255, 255, 255, 0.5));
+  backdrop-filter: blur(2px);
+`
+  popup.appendChild(overlay)
+
+  return popup
+}

package/src/ui/elements/ribbonBox.js

@@ -0,0 +1,76 @@
+import { colors } from '../../vars.js'
+import { sheet } from '../stylesheet.js'
+import { api } from '../../api/index.js'
+
+import { RibbonLogo, EditIcon } from './icons.js'
+
+if (sheet) {
+  sheet.insertRule(
+    '.i18next-editor-button:hover { background-color: rgba(38, 166, 154, 1) !important; }'
+  )
+}
+export function RibbonButton (text, attrTitle, onClick) {
+  const btn = document.createElement('button')
+
+  btn.style =
+    'font-family: Arial; position: relative; backdrop-filter: blur(3px); cursor: pointer; padding: 2px 10px 2px 20px; font-size: 15px; font-weight: 300; text-transform: uppercase; color: #fff; background-color: rgba(38, 166, 154, 0.8); border: none; border-radius: 12px'
+  btn.classList.add('i18next-editor-button')
+  btn.setAttribute('data-i18next-editor-element', 'true')
+  btn.setAttribute('title', attrTitle)
+
+  const icon = EditIcon()
+  icon.style = 'position: absolute; left: 4px; top: 3px;'
+  icon.style.width = '15px'
+  btn.appendChild(icon)
+
+  const span = document.createElement('span')
+  span.textContent = text
+  btn.appendChild(span)
+
+  btn.onclick = onClick
+
+  return btn
+}
+
+export function RibbonBox (keys = {}) {
+  const box = document.createElement('div')
+  box.style =
+    'position: absolute; top: 0; left: 0; display: flex; align-items: flex-start; justify-content: center; filter: drop-shadow(0px 0px 20px #aaa );'
+  box.setAttribute('data-i18next-editor-element', 'true')
+
+  const arrow = document.createElement('div')
+  arrow.style = `
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-top-width: 7px;
+    border-bottom-width: 7px;
+    border-left-width: 10px;
+    border-right-width: 10px;
+    border-style: solid;
+    border-color: transparent ${colors.highlight} transparent
+      transparent;
+    `
+  box.appendChild(arrow)
+
+  const logo = RibbonLogo()
+  box.appendChild(logo)
+
+  const btnbox = document.createElement('div')
+  btnbox.style =
+    'display: flex; flex-direction: column; align-items: flex-start; margin-left: 2px; margin-top: 1px'
+
+  Object.keys(keys).forEach(k => {
+    const data = keys[k]
+
+    const btn = RibbonButton(k.replace('attr:', ''), `${data.ns}:${data.key}`, () => {
+      api.selectKey(data)
+    })
+    btn.style.marginBottom = '2px'
+    btnbox.appendChild(btn)
+  })
+
+  box.appendChild(btnbox)
+
+  return { box, arrow }
+}

package/src/ui/highlightNode.js

@@ -0,0 +1,203 @@
+import { colors } from '../vars.js'
+import { RibbonBox } from './elements/ribbonBox.js'
+import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom'
+
+const eleToOutline = [
+  'DIV',
+  'P',
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'H5',
+  'H6',
+  'OL',
+  'UL',
+  'ADDRESS',
+  'BLOCKQUOTE',
+  'DL',
+  'PRE'
+]
+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
+
+  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%)'
+  } 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 (!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, {
+      placement: 'right',
+      middleware: [
+        flip({ fallbackPlacements: ['left', 'bottom'] }),
+        shift(),
+        offset(({ placement, rects }) => {
+          if (placement === 'bottom') return rects.r
+          return 35
+        }),
+        arrow({
+          element: arrowEle
+        })
+      ]
+    }).then(({ x, y, middlewareData, placement }) => {
+      Object.assign(actions.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        display: 'inline-flex'
+      })
+
+      const side = placement.split('-')[0]
+
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side]
+
+      if (middlewareData.arrow) {
+        const { x, y } = middlewareData.arrow
+        Object.assign(arrowEle.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+          // Ensure the static side gets unset when
+          // flipping to other placements' axes.
+          right: '',
+          bottom: '',
+          [staticSide]: `${side === 'bottom' ? -18 : -25}px`,
+          transform: side === 'bottom' ? 'rotate(90deg)' : side === 'left' ? 'rotate(180deg)' : ''
+        })
+      }
+    })
+
+    // store them for remove
+    item.ribbonBox = actions
+  }
+}
+
+export function highlightUninstrumented (item, node, keys) {
+  const { id } = item
+
+  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} )`
+  }
+}
+
+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} )`
+  }
+
+  // hide ribbons
+  if (item.ribbonBox) {
+    document.body.removeChild(item.ribbonBox)
+
+    delete item.ribbonBox
+  }
+
+  selected[id] = true
+}
+
+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 (item.ribbonBox) {
+    document.body.removeChild(item.ribbonBox)
+
+    delete item.ribbonBox
+  }
+
+  delete selected[id]
+}

package/src/ui/mouseDistance.js

@@ -0,0 +1,46 @@
+import { store } from '../store.js'
+import { uninstrumentedStore } from '../uninstrumentedStore.js'
+import { isInViewport, mouseDistanceFromElement } from './utils.js'
+import { debounce } from '../utils.js'
+import { highlight, highlightUninstrumented, resetHighlight } from './highlightNode.js'
+
+const debouncedUpdateDistance = debounce(function (e, observer) {
+  Object.values(store.data).forEach(item => {
+    // if not visible do not calculate distance of mouse
+    if (!isInViewport(item.node)) return
+
+    const distance = mouseDistanceFromElement(e, item.node)
+    if (distance < 5) {
+      highlight(item, item.node, item.keys)
+    } else if (distance > 5) {
+      // check if we are over the ribbonbox
+      const boxDistance = item.ribbonBox ? mouseDistanceFromElement(e, item.ribbonBox) : 1000
+      if (boxDistance > 10) resetHighlight(item, item.node, item.keys)
+    }
+  })
+
+  Object.values(uninstrumentedStore.data).forEach(item => {
+    // if not visible do not calculate distance of mouse
+    if (!isInViewport(item.node)) return
+
+    const distance = mouseDistanceFromElement(e, item.node)
+    if (distance < 10) {
+      highlightUninstrumented(item, item.node, item.keys)
+    } else if (distance > 10) {
+      resetHighlight(item, item.node, item.keys)
+    }
+  })
+}, 50)
+
+let currentFC
+
+export function startMouseTracking (observer) {
+  currentFC = function handle (e) {
+    debouncedUpdateDistance(e, observer)
+  }
+  document.addEventListener('mousemove', currentFC)
+}
+
+export function stopMouseTracking () {
+  document.removeEventListener('mousemove', currentFC)
+}

package/src/ui/popup.js

@@ -0,0 +1,135 @@
+import { startMouseTracking, stopMouseTracking } from './mouseDistance.js'
+
+export function initDragElement () {
+  let pos1 = 0
+  let pos2 = 0
+  let pos3 = 0
+  let pos4 = 0
+  const popups = document.getElementsByClassName('i18next-editor-popup')
+  let elmnt = null
+  let overlay = null
+  let currentZIndex = 100 // TODO reset z index when a threshold is passed
+
+  for (let i = 0; i < popups.length; i++) {
+    const popup = popups[i]
+    const header = getHeader(popup)
+
+    popup.onmousedown = function () {
+      this.style.zIndex = '' + ++currentZIndex
+    }
+
+    if (header) {
+      header.parentPopup = popup
+      header.onmousedown = dragMouseDown
+    }
+  }
+
+  function dragMouseDown (e) {
+    if (!overlay) overlay = document.getElementById('i18next-editor-popup-overlay')
+    if (overlay) overlay.style.display = 'block'
+    stopMouseTracking()
+
+    elmnt = this.parentPopup
+    elmnt.style.zIndex = '' + ++currentZIndex
+
+    e = e || window.event
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX
+    pos4 = e.clientY
+    document.onmouseup = closeDragElement
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag
+  }
+
+  function elementDrag (e) {
+    if (!elmnt) {
+      return
+    }
+
+    e = e || window.event
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX
+    pos2 = pos4 - e.clientY
+    pos3 = e.clientX
+    pos4 = e.clientY
+    // set the element's new position:
+    elmnt.style.top = elmnt.offsetTop - pos2 + 'px'
+    elmnt.style.left = elmnt.offsetLeft - pos1 + 'px'
+  }
+
+  function closeDragElement () {
+    startMouseTracking()
+    if (overlay) overlay.style.display = 'none'
+
+    /* stop moving when mouse button is released: */
+    document.onmouseup = null
+    document.onmousemove = null
+  }
+
+  function getHeader (element) {
+    const headerItems = element.getElementsByClassName('i18next-editor-popup-header')
+
+    if (headerItems.length === 1) {
+      return headerItems[0]
+    }
+
+    return null
+  }
+}
+
+export function initResizeElement () {
+  const popups = document.getElementsByClassName('i18next-editor-popup')
+  let element = null
+  let overlay = null
+  let startX, startY, startWidth, startHeight
+
+  for (let i = 0; i < popups.length; i++) {
+    const p = popups[i]
+
+    const right = document.createElement('div')
+    right.className = 'resizer-right'
+    p.appendChild(right)
+    right.addEventListener('mousedown', initDrag, false)
+    right.parentPopup = p
+
+    const bottom = document.createElement('div')
+    bottom.className = 'resizer-bottom'
+    p.appendChild(bottom)
+    bottom.addEventListener('mousedown', initDrag, false)
+    bottom.parentPopup = p
+
+    const both = document.createElement('div')
+    both.className = 'resizer-both'
+    p.appendChild(both)
+    both.addEventListener('mousedown', initDrag, false)
+    both.parentPopup = p
+  }
+
+  function initDrag (e) {
+    stopMouseTracking()
+    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)
+    document.documentElement.addEventListener('mousemove', doDrag, false)
+    document.documentElement.addEventListener('mouseup', stopDrag, false)
+  }
+
+  function doDrag (e) {
+    element.style.width = startWidth + e.clientX - startX + 'px'
+    element.style.height = startHeight + e.clientY - startY + 'px'
+  }
+
+  function stopDrag () {
+    startMouseTracking()
+    if (overlay) overlay.style.display = 'none'
+
+    document.documentElement.removeEventListener('mousemove', doDrag, false)
+    document.documentElement.removeEventListener('mouseup', stopDrag, false)
+  }
+}

package/src/ui/stylesheet.js

@@ -0,0 +1,8 @@
+const sheet = (function () {
+  if (typeof document === 'undefined') return
+  const style = document.createElement('style')
+  document.head.appendChild(style)
+  return style.sheet
+})()
+
+export { sheet }