locize 2.4.6 → 3.0.0

package/src/ui/utils.js

@@ -0,0 +1,37 @@
+/* eslint-disable prefer-const, one-var */
+
+export function isInViewport (element) {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export function mouseDistanceFromElement (mouseEvent, element) {
+  let $n = element,
+    mX = mouseEvent.pageX,
+    mY = mouseEvent.pageY,
+    from = { x: mX, y: mY },
+    off = $n.getBoundingClientRect(),
+    ny1 = off.top + document.body.scrollTop, // top
+    ny2 = ny1 + $n.offsetHeight, // bottom
+    nx1 = off.left + document.body.scrollLeft, // left
+    nx2 = nx1 + $n.offsetWidth, // right
+    maxX1 = Math.max(mX, nx1),
+    minX2 = Math.min(mX, nx2),
+    maxY1 = Math.max(mY, ny1),
+    minY2 = Math.min(mY, ny2),
+    intersectX = minX2 >= maxX1,
+    intersectY = minY2 >= maxY1,
+    to = {
+      x: intersectX ? mX : nx2 < mX ? nx2 : nx1,
+      y: intersectY ? mY : ny2 < mY ? ny2 : ny1
+    },
+    distX = to.x - from.x,
+    distY = to.y - from.y,
+    hypot = (distX ** 2 + distY ** 2) ** (1 / 2)
+  return Math.floor(hypot) // this will output 0 when next to your element.
+}

package/src/uninstrumentedStore.js

@@ -0,0 +1,39 @@
+import { resetHighlight } from './ui/highlightNode.js'
+
+const data = {}
+
+function clean () {
+  Object.values(data).forEach(item => {
+    if (!document.body.contains(item.node)) {
+      resetHighlight(item.id, item.node)
+      delete data[item.id]
+    }
+  })
+}
+
+function save (id, type, node) {
+  if (!id || !type || !node) return
+
+  if (!data[id]) {
+    data[id] = {
+      id,
+      node
+    }
+  }
+
+  data[id].keys = {
+    ...data[id].keys,
+    [`${type}`]: 'uninstrumented'
+  }
+}
+
+function get (id) {
+  return data[id]
+}
+
+export const uninstrumentedStore = {
+  save,
+  clean,
+  get,
+  data
+}

package/src/utils.js

@@ -0,0 +1,158 @@
+export function debounce (func, wait, immediate) {
+  let timeout
+  return function () {
+    const context = this
+    const args = arguments
+    const later = function () {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }
+    const callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+    if (callNow) func.apply(context, args)
+  }
+}
+
+export function isWindow (obj) {
+  return obj != null && obj === obj.window
+}
+
+export function getWindow (elem) {
+  return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView
+}
+
+export function offset (elem) {
+  let box = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+  const doc = elem && elem.ownerDocument
+
+  const docElem = doc && doc.documentElement
+  if (!docElem) return box
+
+  if (typeof elem.getBoundingClientRect !== typeof undefined) {
+    box = elem.getBoundingClientRect()
+  }
+  const win = getWindow(doc)
+
+  const top = box.top + win.pageYOffset - docElem.clientTop
+  const left = box.left + win.pageXOffset - docElem.clientLeft
+  return {
+    top,
+    left,
+    right: left + (box.right - box.left),
+    bottom: top + (box.bottom - box.top)
+  }
+}
+
+export function getClickedElement (e) {
+  // clicked input
+  if (
+    e.srcElement &&
+    e.srcElement.nodeType === 1 &&
+    (e.srcElement.nodeName === 'BUTTON' || e.srcElement.nodeName === 'INPUT')
+  ) {
+    if (e.srcElement.getAttribute && e.srcElement.getAttribute('ignorelocizeeditor') === '') { return null }
+    return e.srcElement
+  }
+
+  let el
+  let toLeft
+
+  if (e.originalEvent && e.originalEvent.explicitOriginalTarget) {
+    el = e.originalEvent.explicitOriginalTarget
+  } else {
+    const parent = e.srcElement
+    if (parent.getAttribute && parent.getAttribute('ignorelocizeeditor') === '') return null
+
+    const left = e.pageX
+    const top = e.pageY
+    // let pOffset = offset(parent);
+    // console.warn('click', top, left);
+    // console.warn('parent', parent, pOffset, parent.clientHeight, parent.offsetHeight);
+
+    let topStartsAt = 0
+    let topBreaksAt
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < parent.childNodes.length; i++) {
+      const n = parent.childNodes[i]
+      const nOffset = offset(n)
+      // console.warn('child', n, nOffset, n.clientHeight, n.offsetHeight)
+
+      // if a node is with the bottom over the top click set the next child as start index
+      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
+    }
+
+    // check we are inside children lenght
+    if (topStartsAt + 1 > parent.childNodes.length) topStartsAt = parent.childNodes.length - 1
+    if (!topBreaksAt) topBreaksAt = parent.childNodes.length
+    // console.warn('bound', topStartsAt, topBreaksAt)
+
+    // inside our boundaries check when left is to big and out of clicks left
+    // eslint-disable-next-line no-plusplus
+    for (let y = topStartsAt; y < topBreaksAt; y++) {
+      const n = parent.childNodes[y]
+      const nOffset = offset(n)
+
+      if (!toLeft && nOffset.left > left) {
+        break
+      }
+
+      if (n && n.nodeType !== 8) el = n
+    }
+  }
+  return el
+}
+
+export function getElementText (el) {
+  const str = el.textContent || (el.text && el.text.innerText) || el.placeholder
+  if (typeof str !== 'string') return
+  // eslint-disable-next-line consistent-return
+  return str.replace(/\n +/g, '').trim()
+}
+
+function getAttribute (el, name) {
+  return el && el.getAttribute && el.getAttribute(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) }
+  return undefined
+}
+
+export function getElementNamespace (el) {
+  let found
+
+  const find = ele => {
+    let opts = getAttribute(ele, 'i18next-options')
+    if (!opts) opts = getAttribute(ele, 'data-i18next-options')
+    if (!opts) opts = getAttribute(ele, 'i18n-options')
+    if (!opts) opts = getAttribute(ele, 'data-i18n-options')
+    if (opts) {
+      let jsonData = {}
+      try {
+        jsonData = JSON.parse(opts)
+      } catch (e) {
+        // not our problem here in editor
+      }
+      if (jsonData.ns) found = jsonData.ns
+    }
+    if (!found) found = getAttribute(ele, 'i18next-ns')
+    if (!found) found = getAttribute(ele, 'data-i18next-ns')
+    if (!found) found = getAttribute(ele, 'i18n-ns')
+    if (!found) found = getAttribute(ele, 'data-i18n-ns')
+    if (!found && ele.parentElement) find(ele.parentElement)
+  }
+  find(el)
+
+  return found
+}

package/src/vars.js

@@ -0,0 +1,18 @@
+export const validAttributes = ['placeholder', 'title', 'alt']
+export const colors = {
+  highlight: '#26a69a',
+  warning: '#e67a00'
+}
+
+export const getIframeUrl = () => {
+  let p
+  if (typeof process !== 'undefined') p = process
+  if (!p && typeof window !== 'undefined') p = window.process
+  const prc = p || {}
+  const env = prc.env?.locizeIncontext || 'production'
+  return env === 'development'
+    ? 'http://localhost:3003/'
+    : env === 'staging'
+      ? 'https://incontext-dev.locize.app'
+      : 'https://incontext.locize.app'
+}

package/tsconfig.json

@@ -4,11 +4,11 @@
     "lib": [ "es2015" ],
     "module": "commonjs",
     "noEmit": true,
-    "strict": true,
-    "paths": { "locize": ["./index.d.ts"] }
+    "strict": true
   },
   "include": [
-    "/test/types/*.test-d.ts",
-    "/*.d.ts"
+    "test/types/*.test-d.ts",
+    "*.d.ts",
+    "*.d.mts"
   ]
 }

package/.eslintrc.js

@@ -1,20 +0,0 @@
-module.exports = {
-  parser: 'babel-eslint',
-  extends: 'airbnb',
-
-  rules: {
-    'max-len': 'off',
-    'padded-blocks': 'off',
-    'react/prop-types': 'off',
-    'no-constant-condition': 'off',
-    'comma-dangle': ['error', 'never'],
-    'arrow-body-style': ['warn', 'as-needed'],
-    'no-unused-vars': ['error', { vars: 'all', args: 'none' }],
-    'no-param-reassign': 'off',
-    'prefer-rest-params': 'off'
-  },
-  globals: {
-    window: true,
-    expect: false
-  }
-};

package/debuggingApp/README.md

@@ -1,11 +0,0 @@
-## run
-
-```
-# npm install
-$ npm install
-
-# run server
-$ node server.js
-
-# open http://localhost:8080
-```

package/debuggingApp/debugEditor.html

@@ -1,28 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-  <head>
-  </head>
-  <body class="landing-page">
-    <div id="results"></div>
-    <script>
-      var results = document.getElementById('results');
-      var source;
-
-      window.addEventListener('message', function(ev) {
-        if (ev.data.message === 'searchForKey') {
-          // console.warn("result: ", ev.data);
-          // parent => ev.source;
-          var textnode = document.createTextNode(JSON.stringify(ev.data));         // Create a text node
-          results.appendChild(textnode);
-
-          if (!source) source = ev.source;
-        }
-      });
-
-      document.addEventListener('keypress', (e) => {
-        if (source) source.postMessage({ which: e.which, metaKey: e.metaKey, altKey: e.altKey, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, '*');
-      });
-    </script>
-  </body>
-</html>

package/debuggingApp/index.html

@@ -1,151 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <script src="https://unpkg.com/i18next/i18next.js"></script>
-    <script src="https://unpkg.com/locizer/locizer.min.js"></script>
-    <script src="/locize.js"></script>
-  </head>
-
-  <body style="display: block">
-    <div id="app">
-      <div>
-        <p>lorem ipsum</p>
-
-        <div i18next-options='{"ns": "ns1"}'>
-          <p>different namespace common is used</p>
-          <p>all the way down</p>
-
-          <p data-i18n="myKey">this has even a key</p>
-        </div>
-
-        <button onclick="i18next.changeLanguage('en')">english</button>
-        <button onclick="i18next.changeLanguage('de')">german</button>
-        <button
-          onclick="history.pushState({}, 'nope', '/#test');i18next.changeLanguage('it')"
-        >
-          href
-        </button>
-
-        <div id="output"></div>
-      </div>
-    </div>
-    <script>
-      // console.warn(this.locize, this.i18next);
-      this.locize.showLocizeLink({
-        projectId: '3f71a25a-00db-4780-adcf-6a07dc96e00f',
-        version: 'latest',
-        // editorUrl: 'https://dev.locize.app'
-      });
-
-      i18next.use(this.locize.locizePlugin);
-      i18next.init(
-        {
-          lng: 'en',
-          defaultNS: 'app',
-          debug: true,
-          isLocizify: true,
-          resources: {
-            en: {
-              app: {
-                key: 'hello world',
-              },
-            },
-            de: {
-              app: {
-                key: 'hello welt',
-              },
-            },
-            it: {
-              app: {
-                key: 'ciao mondo',
-              },
-            },
-          },
-        },
-        function (err, t) {
-          // init set content
-          updateContent();
-        }
-      );
-
-      function updateContent() {
-        document.getElementById('output').innerHTML = i18next.t('key', {
-          count: 10,
-        });
-      }
-
-      function changeLng(lng) {
-        i18next.changeLanguage(lng);
-      }
-
-      i18next.on('languageChanged', () => {
-        updateContent();
-      });
-
-      // var NAMESPACE = 'translations';
-      // var PROJECTID = '832e1b7a-fb77-4a10-b3cb-78b75e0b78db';
-      // var APIKEY = 'cd2b28ed-a2d7-43fb-b215-5d0deade8441';
-      // var REFERENCELANGUAGE = 'en';
-      // // init locizer (https://github.com/locize/locizer)
-      // locizer
-      //   .init({
-      //     fallbackLng: 'en',
-      //     referenceLng: REFERENCELANGUAGE,
-      //     projectId: PROJECTID,
-      //     apiKey: APIKEY,
-      //     loadPath:
-      //       'https://api-dev.locize.app/{{projectId}}/latest/{{lng}}/{{ns}}',
-      //     addPath:
-      //       'https://api-dev.locize.app/missing/{{projectId}}/latest/{{lng}}/{{ns}}'
-      //   })
-      //   .load(NAMESPACE, (err, translations, detectedLng) => {
-      //     // build message catalog format
-      //     var messages = {};
-      //     messages[detectedLng] = translations;
-      //     // Create VueI18n instance with options
-      //     const i18n = new VueI18n({
-      //       locale: detectedLng, // set locale
-      //       messages: messages, // set locale messages
-      //       missing: function(locale, path, vue) {
-      //         // pipe to locize - that key will be created for you
-      //         locizer.add(NAMESPACE, path, path);
-      //       }
-      //     });
-      //     // Create a Vue instance with `i18n` option
-      //     new Vue({ i18n }).$mount('#app');
-      //     // set body visible on ready
-      //     document.body.style.display = 'block';
-      //     // init incontext editor
-      //     locizeEditor.init({
-      //       autoOpen: true,
-      //       lng: detectedLng,
-      //       defaultNS: NAMESPACE,
-      //       referenceLng: REFERENCELANGUAGE,
-      //       projectId: PROJECTID,
-      //       enabled: true,
-      //       enableByQS: true,
-      //       url: 'https://dev-old.locize.app', //'http://localhost:8080/editor' //
-      //       onEditorSaved: function(lng, ns) {
-      //         location.reload();
-      //       },
-      //       // locizeEditorWindow: {
-      //       //  appendTarget: document.querySelector('.example-div'),
-      //       //   containerClasses: 'custom-class-window',
-      //       // },
-      //       // locizeEditorToggle: {
-      //       //   appendTarget: document.querySelector('.example-div'),
-      //       //   containerClasses: 'custom-class-toggle second-custom-class-toggle',
-      //       //   title: 'Custom Title'
-      //       // }
-      //     });
-
-      //     document
-      //       .getElementById('openEditor')
-      //       .addEventListener('click', function() {
-      //         locizeEditor.open();
-      //       });
-      //   });
-    </script>
-  </body>
-</html>