locize 2.4.6 → 3.0.0

package/src/api/handleRequestPopupChanges.js

@@ -0,0 +1,25 @@
+import { api } from './postMessage.js'
+
+function handler (payload) {
+  const { containerStyle } = payload
+
+  if (containerStyle) {
+    const popup = document.getElementById('i18next-editor-popup')
+
+    if (containerStyle.height) {
+      const diff = `calc(${containerStyle.height} - ${popup.style.height})`
+
+      popup.style.setProperty('top', `calc(${popup.style.top} - ${diff})`)
+      popup.style.setProperty('height', containerStyle.height)
+    }
+
+    if (containerStyle.width) {
+      const diff = `calc(${containerStyle.width} - ${popup.style.width})`
+
+      popup.style.setProperty('left', `calc(${popup.style.left} - ${diff})`)
+      popup.style.setProperty('width', containerStyle.width)
+    }
+  }
+}
+
+api.addHandler('requestPopupChanges', handler)

package/src/api/handleRequestResourceBundle.js

@@ -0,0 +1,11 @@
+import { api } from './postMessage.js'
+
+function handler (payload) {
+  const { lng, ns, ...rest } = payload
+
+  api.i18n.getResourceBundle(lng, ns, resources => {
+    api.confirmResourceBundle({ resources, lng, ns, ...rest })
+  })
+}
+
+api.addHandler('requestResourceBundle', handler)

package/src/api/handleSelectedKeys.js

@@ -0,0 +1,32 @@
+import { api } from './postMessage.js'
+import { store } from '../store.js'
+
+import { selectedHighlight, resetHighlight } from '../ui/highlightNode.js'
+
+let previousMatches = []
+function handler (payload) {
+  const { keys } = payload
+
+  const matchingItems = []
+  Object.values(store.data).forEach(item => {
+    const matches = Object.values(item.keys).filter(k => keys.includes(k.qualifiedKey))
+
+    if (matches.length) {
+      matchingItems.push(item)
+    }
+  })
+
+  // deselect
+  previousMatches.forEach(item => {
+    resetHighlight(item, item.node, item.keys, false)
+  })
+
+  // select
+  matchingItems.forEach(item => {
+    selectedHighlight(item, item.node, item.keys)
+  })
+
+  previousMatches = matchingItems
+}
+
+api.addHandler('selectedKeys', handler)

package/src/api/handleTurnOff.js

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

package/src/api/handleTurnOn.js

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

package/src/api/index.js

@@ -0,0 +1,19 @@
+import './handleEditKey.js'
+import './handleCommitKey.js'
+import './handleCommitKeys.js'
+import './handleConfirmInitialized.js'
+import './handleRequestPopupChanges.js'
+import './handleRequestResourceBundle.js'
+import './handleSelectedKeys.js'
+import './handleIsLocizeEnabled.js'
+import './handleTurnOn.js'
+import './handleTurnOff.js'
+
+export {
+  api,
+  addLocizeSavedHandler,
+  sendMessage,
+  turnOn,
+  turnOff,
+  setEditorLng
+} from './postMessage.js'

package/src/api/postMessage.js

@@ -0,0 +1,169 @@
+import { getIframeUrl } from '../vars.js'
+import { store } from '../store.js'
+
+export function addLocizeSavedHandler (handler) {
+  api.locizeSavedHandler = handler
+}
+
+export function turnOn () {
+  api.scriptTurnedOff = false // unlock
+
+  api.turnOn()
+  return api.scriptTurnedOff
+}
+
+export function turnOff () {
+  api.turnOff()
+
+  api.scriptTurnedOff = true // lock
+  return api.scriptTurnedOff
+}
+
+export function setEditorLng (lng) {
+  api.sendCurrentTargetLanguage(lng)
+}
+
+let pendingMsgs = []
+export function sendMessage (action, payload) {
+  if (!api.source) {
+    api.source = document.getElementById('i18next-editor-iframe')?.contentWindow
+  }
+  if (!api.origin) api.origin = getIframeUrl()
+
+  if (!api.source || !api.source.postMessage) {
+    // console.warn('out nok queuing - ', api.source, api.origin, action, payload);
+    pendingMsgs.push({ action, payload })
+    return
+  }
+
+  // console.warn('out ok - ', api.source, api.origin, action, payload);
+
+  if (api.legacy) {
+    api.source.postMessage(
+      { message: action, ...payload }, // message for legacy
+      api.origin
+    )
+  } else {
+    api.source.postMessage(
+      {
+        sender: 'i18next-editor',
+        senderAPIVersion: 'v1',
+        action,
+        message: action,
+        payload
+      }, // message for legacy
+      api.origin
+    )
+  }
+
+  // handle pendings
+  const todo = pendingMsgs
+  pendingMsgs = [] // reset before recursive call
+  todo.forEach(({ action, payload }) => {
+    sendMessage(action, payload)
+  })
+}
+
+const handlers = {}
+let repeat = 5
+export const api = {
+  init: (implementation, clickHandler) => {
+    api.i18n = implementation
+    api.clickHandler = clickHandler
+  },
+
+  requestInitialize: payload => {
+    sendMessage('requestInitialize', payload)
+
+    api.initInterval = setInterval(() => {
+      repeat = repeat - 1
+      api.requestInitialize(payload)
+
+      if (repeat < 0 && api.initInterval) clearInterval(api.initInterval)
+    }, 1000)
+  },
+
+  selectKey: meta => {
+    sendMessage('selectKey', meta)
+  },
+
+  confirmResourceBundle: payload => {
+    sendMessage('confirmResourceBundle', payload)
+  },
+
+  sendCurrentParsedContent: () => {
+    sendMessage('sendCurrentParsedContent', {
+      content: Object.values(store.data).map(item => {
+        return {
+          id: item.id,
+          // subliminal: item.subliminal,
+          keys: item.keys
+        }
+      })
+    })
+  },
+
+  sendCurrentTargetLanguage: lng => {
+    sendMessage('sendCurrentTargetLanguage', {
+      targetLng: lng || api.i18n.getLng()
+    })
+  },
+
+  addHandler: (action, fc) => {
+    if (!handlers[action]) handlers[action] = []
+    handlers[action].push(fc)
+  },
+
+  // legacy
+  sendLocizeIsEnabled: () => {
+    sendMessage('locizeIsEnabled', { enabled: true })
+  },
+
+  turnOn: () => {
+    if (api.scriptTurnedOff) return sendMessage('forcedOff')
+
+    if (!api.clickInterceptionEnabled) {
+      window.document.body.addEventListener('click', api.clickHandler, true)
+    }
+    api.clickInterceptionEnabled = true
+    sendMessage('turnedOn')
+  },
+
+  turnOff: () => {
+    if (api.scriptTurnedOff) return sendMessage('forcedOff')
+
+    if (api.clickInterceptionEnabled) {
+      window.document.body.removeEventListener('click', api.clickHandler, true)
+    }
+    api.clickInterceptionEnabled = false
+    sendMessage('turnedOff')
+  },
+
+  onAddedKey: (lng, ns, key, value) => {
+    const msg = {
+      lng,
+      ns,
+      key,
+      value
+    }
+
+    sendMessage('added', msg)
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('message', e => {
+    const { sender, /* senderAPIVersion, */ action, message, payload } = e.data
+
+    if (message && handlers[message]) {
+      handlers[message].forEach(fc => {
+        fc(payload, e)
+      })
+    } else if (sender === 'i18next-editor-frame' && handlers[action]) {
+      // console.warn('ok in', action, payload);
+      handlers[action].forEach(fc => {
+        fc(payload)
+      })
+    }
+  })
+}

package/src/clickHandler.js

@@ -0,0 +1,48 @@
+/* eslint-disable import/prefer-default-export */
+import { getClickedElement, getElementText, getElementI18nKey, getElementNamespace } from './utils.js'
+
+export function createClickHandler (cb, options = {}) {
+  // eslint-disable-next-line consistent-return
+  const handler = e => {
+    const el = getClickedElement(e)
+    if (!el) return {}
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const text = getElementText(el)
+    const key = getElementI18nKey(el)
+
+    const rectEl = el.getBoundingClientRect ? el : el.parentElement
+    const { top, left, width, height } = rectEl.getBoundingClientRect()
+
+    const style = window.getComputedStyle(rectEl, null)
+    const pT = parseFloat(style.getPropertyValue('padding-top'))
+    const pB = parseFloat(style.getPropertyValue('padding-bottom'))
+    const pR = parseFloat(style.getPropertyValue('padding-right'))
+    const pL = parseFloat(style.getPropertyValue('padding-left'))
+    const sizing = style.getPropertyValue('box-sizing')
+
+    // eslint-disable-next-line consistent-return
+    function getFallbackNS () {
+      if (options.isLocizify) return options.defaultNS
+    }
+
+    // eslint-disable-next-line n/no-callback-literal
+    cb({
+      tagName: rectEl.tagName,
+      text,
+      key,
+      ns: getElementNamespace(el) || getFallbackNS(),
+      box: {
+        top,
+        left,
+        width: sizing === 'border-box' ? width : width - pR - pL,
+        height: sizing === 'border-box' ? height : height - pT - pB
+      },
+      style: style.cssText
+    })
+  }
+
+  return handler
+}

package/src/index.js

@@ -0,0 +1,30 @@
+import { locizePlugin } from './locizePlugin.js'
+import { startStandalone } from './startStandalone.js'
+import { addLocizeSavedHandler, turnOn, turnOff, setEditorLng } from './api/index.js'
+import { wrap, unwrap, containsHiddenMeta, PostProcessor } from 'i18next-subliminal'
+
+export {
+  wrap,
+  unwrap,
+  containsHiddenMeta,
+  PostProcessor,
+  locizePlugin,
+  addLocizeSavedHandler,
+  turnOn,
+  turnOff,
+  setEditorLng,
+  startStandalone
+}
+
+export default {
+  wrap,
+  unwrap,
+  containsHiddenMeta,
+  PostProcessor,
+  addLocizeSavedHandler,
+  locizePlugin,
+  turnOn,
+  turnOff,
+  setEditorLng,
+  startStandalone
+}

package/src/locizePlugin.js

@@ -0,0 +1,117 @@
+import { PostProcessor, unwrap } from 'i18next-subliminal'
+import { start } from './process.js'
+import { startLegacy } from './processLegacy.js'
+
+let isInIframe = typeof window !== 'undefined'
+try {
+  // eslint-disable-next-line no-undef, no-restricted-globals
+  isInIframe = self !== top
+  // eslint-disable-next-line no-empty
+} catch (e) {}
+
+let i18next
+export const locizePlugin = {
+  type: '3rdParty',
+
+  init (i18n) {
+    const { options } = i18n
+
+    // store for later
+    i18next = i18n
+
+    // add postProcessor and needed options now
+    if (!isInIframe) {
+      i18next.use(PostProcessor)
+
+      if (typeof options.postProcess === 'string') {
+        options.postProcess = [options.postProcess, 'subliminal']
+      } else if (Array.isArray(options.postProcess)) {
+        options.postProcess.push('subliminal')
+      } else {
+        options.postProcess = 'subliminal'
+      }
+
+      options.postProcessPassResolved = true
+    }
+
+    const impl = {
+      getResource: (lng, ns, key) => {
+        return i18n.getResource(lng, ns, key)
+      },
+      setResource: (lng, ns, key, value) => {
+        return i18n.addResource(lng, ns, key, value, { silent: true })
+      },
+      getResourceBundle: (lng, ns, cb) => {
+        i18n.loadNamespaces(ns, () => {
+          cb(i18n.getResourceBundle(lng, ns))
+        })
+      },
+      getLng: () => {
+        return i18n.languages[0]
+      },
+      getSourceLng: () => {
+        const fallback = i18n.options.fallbackLng
+        if (typeof fallback === 'string') return fallback
+        if (Array.isArray(fallback)) return fallback[fallback.length - 1]
+
+        if (fallback.default) {
+          if (typeof fallback.default === 'string') return fallback
+          if (Array.isArray(fallback.default)) return fallback.default[fallback.default.length - 1]
+        }
+
+        if (typeof fallback === 'function') {
+          const res = fallback(i18n.resolvedLanguage)
+          if (typeof res === 'string') return res
+          if (Array.isArray(res)) return res[res.length - 1]
+        }
+
+        return 'dev'
+      },
+      getLocizeDetails: () => {
+        const backendName = i18n.services.backendConnector.backend
+          ? i18n.services.backendConnector.backend.constructor.name
+          : 'options.resources'
+
+        const opts = {
+          backendName,
+          sourceLng: impl.getSourceLng(),
+          i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+          i18nFramework: 'i18next',
+          isLocizify: i18n.options.isLocizify,
+          defaultNS: i18n.options.defaultNS
+        }
+
+        if (!i18n.options.backend && !i18n.options.editor) return opts
+        const pickFrom = i18n.options.backend || i18n.options.editor
+        return {
+          ...opts,
+          projectId: pickFrom.projectId,
+          version: pickFrom.version
+        }
+      },
+      bindLanguageChange: cb => {
+        i18n.on('languageChanged', cb)
+      },
+      bindMissingKeyHandler: cb => {
+        i18n.options.missingKeyHandler = (lng, ns, k, val, isUpdate, opts) => {
+          if (!isUpdate) cb(lng, ns, k, val)
+        }
+      },
+      triggerRerender: () => {
+        i18n.emit('editorSaved')
+      }
+    }
+
+    // start process and expose some implementation functions
+    if (!isInIframe) {
+      start(impl)
+    } else {
+      startLegacy(impl)
+    }
+  }
+}
+export { unwrap }
+
+export function getI18next () {
+  return i18next
+}

package/src/observer.js

@@ -0,0 +1,93 @@
+import { debounce } from './utils.js'
+import { validAttributes } from './vars.js'
+
+export function createObserver (ele, handle) {
+  // enable some skip for internal mutations
+  let internalChange
+  let lastToggleTimeout
+  const toggleInternal = () => {
+    if (lastToggleTimeout) clearTimeout(lastToggleTimeout)
+
+    lastToggleTimeout = setTimeout(() => {
+      if (internalChange) internalChange = false
+    }, 200)
+  }
+
+  // hold elements with mutations
+  let targetEles = []
+  const debouncedHandler = debounce(function h () {
+    handle(targetEles)
+    targetEles = []
+  }, 100)
+
+  // eslint-disable-next-line no-undef
+  const observer = new MutationObserver(mutations => {
+    if (internalChange) {
+      toggleInternal()
+      return
+    }
+
+    // check if mutation is relevant
+    let triggerMutation = false
+
+    // store most outer element for mutation
+    mutations.forEach(function (mutation) {
+      // ignore, eg. we're not interested in style changes
+      if (mutation.type === 'attributes' && !validAttributes.includes(mutation.attributeName)) { return }
+
+      // ignore mutation done by our elements
+      if (mutation.type === 'childList') {
+        let notOurs = 0
+
+        mutation.addedNodes.forEach(n => {
+          if (n.dataset && n.dataset.i18nextEditorElement === 'true') return
+          notOurs = notOurs + 1
+        }, 0)
+
+        mutation.removedNodes.forEach(n => {
+          if (n.dataset && n.dataset.i18nextEditorElement === 'true') return
+          notOurs = notOurs + 1
+        }, 0)
+
+        if (notOurs === 0) return
+      }
+
+      // eventual text relevant mutation
+      triggerMutation = true
+
+      // test if mutated element is already part of another mutation
+      const includedAlready = targetEles.reduce((mem, element) => {
+        if (mem || element.contains(mutation.target) || !mutation.target.parentElement) return true
+        return false
+      }, false)
+
+      // if not remove elements contained in this mutation element
+      // and add it
+      if (!includedAlready) {
+        targetEles = targetEles.filter(element => !mutation.target.contains(element))
+        targetEles.push(mutation.target)
+      }
+
+      // console.log('MUTATION', mutation.type, mutation)
+    })
+
+    // trigger handle
+    if (triggerMutation) debouncedHandler()
+  })
+
+  return {
+    start: (
+      observerConfig = {
+        attributes: true,
+        childList: true,
+        characterData: true,
+        subtree: true
+      }
+    ) => {
+      observer.observe(ele, observerConfig)
+    },
+    skipNext () {
+      internalChange = true
+    }
+  }
+}