locize 3.0.5 → 3.1.1

package/src/locizePlugin.js

@@ -1,6 +1,7 @@
 import { PostProcessor, unwrap } from 'i18next-subliminal'
 import { start } from './process.js'
 import { startLegacy } from './processLegacy.js'
+import { getQsParameterByName } from './utils.js'
 
 let isInIframe = typeof window !== 'undefined'
 try {
@@ -9,6 +10,96 @@ try {
   // eslint-disable-next-line no-empty
 } catch (e) {}
 
+function configurePostProcessor (i18next, options) {
+  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
+}
+
+function getImplementation (i18n) {
+  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 && 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: () => {
+      let backendName
+      if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
+        backendName = 'I18NextLocizeBackend'
+      } else {
+        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')
+    }
+  }
+  return impl
+}
+
 let i18next
 export const locizePlugin = {
   type: '3rdParty',
@@ -20,92 +111,9 @@ export const locizePlugin = {
     i18next = i18n
 
     // add postProcessor and needed options now
-    if (!isInIframe) {
-      i18next.use(PostProcessor)
+    if (!isInIframe) configurePostProcessor(i18next, options)
 
-      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 && 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: () => {
-        let backendName
-        if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
-          backendName = 'I18NextLocizeBackend'
-        } else {
-          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')
-      }
-    }
+    const impl = getImplementation(i18n)
 
     // start process and expose some implementation functions
     if (!isInIframe) {
@@ -115,6 +123,36 @@ export const locizePlugin = {
     }
   }
 }
+
+export const locizeEditorPlugin = (opt = {}) => {
+  opt.qsProp = opt.qsProp || 'incontext'
+
+  return {
+    type: '3rdParty',
+
+    init (i18n) {
+      const { options } = i18n
+
+      // store for later
+      i18next = i18n
+
+      const showInContext = getQsParameterByName(opt.qsProp) === 'true'
+
+      // add postProcessor and needed options now
+      if (!isInIframe && showInContext) configurePostProcessor(i18next, options)
+
+      const impl = getImplementation(i18n)
+
+      // start process and expose some implementation functions
+      if (!isInIframe && showInContext) {
+        start(impl)
+      } else {
+        startLegacy(impl)
+      }
+    }
+  }
+}
+
 export { unwrap }
 
 export function getI18next () {

package/src/observer.js

@@ -1,7 +1,32 @@
 import { debounce } from './utils.js'
 import { validAttributes } from './vars.js'
 
+const mutationTriggeringElements = {}
+
 function ignoreMutation (ele) {
+  if (ele.uniqueID) {
+    const info = mutationTriggeringElements[ele.uniqueID]
+
+    if (
+      info &&
+      info.triggered > 10 &&
+      info.lastTriggerDate + 500 < Date.now()
+    ) {
+      if (!info.warned && console) {
+        console.warn(
+          'locize ::: ignoring element change - an element is rerendering too often in short interval',
+          '\n',
+          'consider adding the "data-locize-editor-ignore:" attribute to the element:',
+          ele
+        )
+
+        info.warned = true
+      }
+
+      return true
+    }
+  }
+
   const ret =
     ele.dataset &&
     (ele.dataset.i18nextEditorElement === 'true' ||
@@ -51,6 +76,15 @@ export function createObserver (ele, handle) {
         return
       }
 
+      // cleanup mutation triggers after some time of non triggering
+      Object.keys(mutationTriggeringElements).forEach(k => {
+        const info = mutationTriggeringElements[k]
+
+        if (info.lastTriggerDate + 60000 < Date.now()) {
+          delete mutationTriggeringElements[k]
+        }
+      })
+
       // ignore mutation done by our elements
       if (mutation.type === 'childList') {
         let notOurs = 0
@@ -73,14 +107,27 @@ export function createObserver (ele, handle) {
       // eventual text relevant mutation
       triggerMutation = true
 
+      // add to mutationTriggers to check for spamming elements
+      if (mutation.target && mutation.target.uniqueID) {
+        const info = mutationTriggeringElements[mutation.target.uniqueID] || {
+          triggered: 0
+        }
+
+        info.triggered = info.triggered + 1
+        info.lastTriggerDate = Date.now()
+
+        mutationTriggeringElements[mutation.target.uniqueID] = info
+      }
+
       // 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)
 

package/src/process.js

@@ -2,7 +2,7 @@ import { parseTree, setImplementation } from './parser.js'
 import { createObserver } from './observer.js'
 import { startMouseTracking } from './ui/mouseDistance.js'
 import { initDragElement, initResizeElement } from './ui/popup.js'
-import { Popup } from './ui/elements/popup.js'
+import { Popup, popupId } from './ui/elements/popup.js'
 import { getIframeUrl } from './vars.js'
 import { api } from './api/index.js'
 
@@ -47,13 +47,15 @@ export function start (implementation = {}) {
     startMouseTracking(observer)
 
     // append popup
-    document.body.append(
-      Popup(getIframeUrl(), () => {
-        api.requestInitialize(config)
-      })
-    )
-    initDragElement()
-    initResizeElement()
+    if (!document.getElementById(popupId)) {
+      document.body.append(
+        Popup(getIframeUrl(), () => {
+          api.requestInitialize(config)
+        })
+      )
+      initDragElement()
+      initResizeElement()
+    }
   }
 
   if (document.body) return continueToStart()

package/src/ui/elements/popup.js

@@ -137,9 +137,11 @@ function Minimize (popupEle, onMinimize) {
   return image
 }
 
+export const popupId = 'i18next-editor-popup'
+
 export function Popup (url, cb) {
   const popup = document.createElement('div')
-  popup.setAttribute('id', 'i18next-editor-popup')
+  popup.setAttribute('id', popupId)
   popup.classList.add('i18next-editor-popup')
   popup.style = `
   z-index: 9;

package/src/ui/utils.js

@@ -4,14 +4,14 @@ export function isInViewport (el) {
   // Special bonus for those using jQuery
   // if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0]
 
-  var rect = el.getBoundingClientRect()
+  const rect = el.getBoundingClientRect()
   // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
-  var windowHeight = window.innerHeight || document.documentElement.clientHeight
-  var windowWidth = window.innerWidth || document.documentElement.clientWidth
+  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
-  var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0
-  var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0
+  const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0
+  const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0
 
   return vertInView && horInView
 }

package/src/utils.js

@@ -156,3 +156,15 @@ export function getElementNamespace (el) {
 
   return found
 }
+
+export function getQsParameterByName (name, url) {
+  if (typeof window === 'undefined') return null
+  if (!url) url = window.location.href.toLowerCase()
+  // eslint-disable-next-line no-useless-escape
+  name = name.replace(/[\[\]]/g, '\\$&')
+  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
+  const results = regex.exec(url)
+  if (!results) return null
+  if (!results[2]) return ''
+  return decodeURIComponent(results[2].replace(/\+/g, ' '))
+}