locize 2.4.6 → 3.0.1

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "@babel/env" ]
+}

package/.ts.eslintrc

@@ -0,0 +1,37 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "env": { "node": true },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "project": "./tsconfig.json",
+    "createDefaultProgram": true
+  },
+  "rules": {
+    "semi": ["error", "never"],
+    "import/export": "off", // this errors on multiple exports (overload interfaces)
+    "require-path-exists/exists": "off"
+  },
+  "overrides": [
+    {
+      "files": ["*.d.ts","*.test-d.ts"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    },
+    {
+      "files": ["*.test-d.ts"],
+      "rules": {
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-non-null-assertion": "off"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 3.0.1
+
+- fix for use cases where body may be invisible first
+
+### 3.0.0
+
+- This module can now be used for both type of incontext editors - as iframe (old) or with iframe (new).
+- showLocizeLink has been removed, since conflicting with new incontext editor
+
 ### 2.4.6
 
 - add basic types

package/README.md

@@ -58,16 +58,19 @@ This plugin is already included in [locizify](https://github.com/locize/locizify
 ### with other as module
 
 ```js
-import { addLocizeSavedHandler, setEditorLng } from 'locize';
+import { addLocizeSavedHandler, startStandalone, setEditorLng } from 'locize';
 
-addLocizeSavedHandler((res) => {
-  res.updated.forEach((item) => {
+addLocizeSavedHandler(res => {
+  res.updated.forEach(item => {
     const { lng, ns, key, data } = item;
     // load the translations somewhere...
     // and maybe rerender your UI
   });
 });
 
+// start
+startStandalone();
+
 // switch lng in locize editor
 setEditorLng(lng);
 ```
@@ -79,13 +82,15 @@ setEditorLng(lng);
 ```
 
 ```js
-window.locizeSavedHandler = (res) => {
-  res.updated.forEach((item) => {
+window.locizeSavedHandler = res => {
+  res.updated.forEach(item => {
     const { lng, ns, key, data } = item;
     // load the translations somewhere...
     // and maybe rerender your UI
   });
 };
+
+window.locizeStartStandalone();
 ```
 
 ## turn on/off programmatically
@@ -99,17 +104,3 @@ let isOff;
 isOff = turnOff(); // -> true
 isOff = turnOn(); // -> false
 ```
-
-## show link to locize
-
-```js
-import { showLocizeLink } from 'locize';
-
-// or use window.locize.showLocizeLink
-showLocizeLink({
-  projectId: 'YOUR PROJECTID',
-  version: 'latest',
-});
-
-// when using with i18next of locizify projectId and version will be picked from backend options if available
-```

package/dist/cjs/api/handleCommitKey.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var postMessage = require('./postMessage.js');
+var handleEditKey = require('./handleEditKey.js');
+
+function handler(payload) {
+  var meta = payload.meta,
+    value = payload.value,
+    lng = payload.lng;
+  if (meta && value !== undefined) {
+    handleEditKey.setValueOnNode(meta, value);
+    var usedLng = lng || postMessage.api.i18n.getLng();
+    postMessage.api.i18n.setResource(usedLng, meta.ns, meta.key, value);
+    postMessage.api.i18n.triggerRerender();
+  }
+}
+postMessage.api.addHandler('commitKey', handler);

package/dist/cjs/api/handleCommitKeys.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var postMessage = require('./postMessage.js');
+var store = require('../store.js');
+var handleEditKey = require('./handleEditKey.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+
+function handler(payload) {
+  var updated = payload.updated;
+  updated.forEach(function (item) {
+    var lng = item.lng,
+      ns = item.ns,
+      key = item.key,
+      data = item.data,
+      metas = item.metas,
+      meta = item.meta;
+    if (meta && data.value) handleEditKey.setValueOnNode(meta, data.value);
+    if (metas) {
+      Object.values(metas).forEach(function (metaItem) {
+        handleEditKey.setValueOnNode(metaItem, data.value);
+      });
+    }
+    postMessage.api.i18n.setResource(lng, ns, key, data.value);
+  });
+  Object.values(store.store.data).forEach(function (item) {
+    if (item.originalChildNodes) {
+      var _item$node;
+      (_item$node = item.node).replaceChildren.apply(_item$node, _toConsumableArray__default["default"](item.originalChildNodes));
+    }
+  });
+  postMessage.api.i18n.triggerRerender();
+  if (postMessage.api.locizeSavedHandler) postMessage.api.locizeSavedHandler(payload);
+  if (window.locizeSavedHandler) window.locizeSavedHandler(payload);
+}
+postMessage.api.addHandler('commitKeys', handler);

package/dist/cjs/api/handleConfirmInitialized.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var postMessage = require('./postMessage.js');
+
+function handler(payload) {
+  postMessage.api.initialized = true;
+  clearInterval(postMessage.api.initInterval);
+  postMessage.api.sendCurrentParsedContent();
+  postMessage.api.sendCurrentTargetLanguage();
+}
+postMessage.api.addHandler('confirmInitialized', handler);

package/dist/cjs/api/handleEditKey.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var i18nextSubliminal = require('i18next-subliminal');
+var postMessage = require('./postMessage.js');
+var store = require('../store.js');
+
+function setValueOnNode(meta, value) {
+  var item = store.store.get(meta.eleUniqueID);
+  if (!item || !item.keys[meta.textType]) return;
+  var txtWithHiddenMeta = i18nextSubliminal.wrap(value, item.subliminal);
+  if (meta.textType === 'text') {
+    item.node.textContent = txtWithHiddenMeta;
+  } else if (meta.textType.indexOf('attr:') === 0) {
+    var attr = meta.textType.replace('attr:', '');
+    item.node.setAttribute(attr, txtWithHiddenMeta);
+  } else if (meta.textType === 'html') {
+    var id = "".concat(meta.textType, "-").concat(meta.children);
+    if (!item.originalChildNodes) {
+      var clones = [];
+      item.node.childNodes.forEach(function (c) {
+        clones.push(c);
+      });
+      item.originalChildNodes = clones;
+    }
+    if (item.children[id].length === item.node.childNodes.length) {
+      item.node.innerHTML = txtWithHiddenMeta;
+    } else {
+      var children = item.children[id];
+      var first = children[0].child;
+      var dummy = document.createElement('div');
+      dummy.innerHTML = txtWithHiddenMeta;
+      var nodes = [];
+      dummy.childNodes.forEach(function (c) {
+        nodes.push(c);
+      });
+      nodes.forEach(function (c) {
+        try {
+          item.node.insertBefore(c, first);
+        } catch (error) {
+          item.node.appendChild(c);
+        }
+      });
+      children.forEach(function (replaceable) {
+        if (item.node.contains(replaceable.child)) item.node.removeChild(replaceable.child);
+      });
+    }
+  }
+}
+function handler(payload) {
+  var meta = payload.meta,
+    value = payload.value;
+  if (meta && value !== undefined) {
+    setValueOnNode(meta, value);
+  }
+}
+postMessage.api.addHandler('editKey', handler);
+
+exports.setValueOnNode = setValueOnNode;

package/dist/cjs/api/handleIsLocizeEnabled.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var postMessage = require('./postMessage.js');
+
+function handler(payload, e) {
+  postMessage.api.source = e.source;
+  postMessage.api.origin = e.origin;
+  postMessage.api.legacy = true;
+  postMessage.api.sendLocizeIsEnabled();
+}
+postMessage.api.addHandler('isLocizeEnabled', handler);

package/dist/cjs/api/handleRequestPopupChanges.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var postMessage = require('./postMessage.js');
+
+function handler(payload) {
+  var containerStyle = payload.containerStyle;
+  if (containerStyle) {
+    var popup = document.getElementById('i18next-editor-popup');
+    if (containerStyle.height) {
+      var diff = "calc(".concat(containerStyle.height, " - ").concat(popup.style.height, ")");
+      popup.style.setProperty('top', "calc(".concat(popup.style.top, " - ").concat(diff, ")"));
+      popup.style.setProperty('height', containerStyle.height);
+    }
+    if (containerStyle.width) {
+      var _diff = "calc(".concat(containerStyle.width, " - ").concat(popup.style.width, ")");
+      popup.style.setProperty('left', "calc(".concat(popup.style.left, " - ").concat(_diff, ")"));
+      popup.style.setProperty('width', containerStyle.width);
+    }
+  }
+}
+postMessage.api.addHandler('requestPopupChanges', handler);

package/dist/cjs/api/handleRequestResourceBundle.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var postMessage = require('./postMessage.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+var _excluded = ["lng", "ns"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function handler(payload) {
+  var lng = payload.lng,
+    ns = payload.ns,
+    rest = _objectWithoutProperties__default["default"](payload, _excluded);
+  postMessage.api.i18n.getResourceBundle(lng, ns, function (resources) {
+    postMessage.api.confirmResourceBundle(_objectSpread({
+      resources: resources,
+      lng: lng,
+      ns: ns
+    }, rest));
+  });
+}
+postMessage.api.addHandler('requestResourceBundle', handler);

package/dist/cjs/api/handleSelectedKeys.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var postMessage = require('./postMessage.js');
+var store = require('../store.js');
+var highlightNode = require('../ui/highlightNode.js');
+
+var previousMatches = [];
+function handler(payload) {
+  var keys = payload.keys;
+  var matchingItems = [];
+  Object.values(store.store.data).forEach(function (item) {
+    var matches = Object.values(item.keys).filter(function (k) {
+      return keys.includes(k.qualifiedKey);
+    });
+    if (matches.length) {
+      matchingItems.push(item);
+    }
+  });
+  previousMatches.forEach(function (item) {
+    highlightNode.resetHighlight(item, item.node, item.keys, false);
+  });
+  matchingItems.forEach(function (item) {
+    highlightNode.selectedHighlight(item, item.node, item.keys);
+  });
+  previousMatches = matchingItems;
+}
+postMessage.api.addHandler('selectedKeys', handler);

package/dist/cjs/api/handleTurnOff.js

@@ -0,0 +1,8 @@
+'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

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

package/dist/cjs/api/postMessage.js

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var vars = require('../vars.js');
+var store = require('../store.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function addLocizeSavedHandler(handler) {
+  api.locizeSavedHandler = handler;
+}
+function turnOn() {
+  api.scriptTurnedOff = false;
+  api.turnOn();
+  return api.scriptTurnedOff;
+}
+function turnOff() {
+  api.turnOff();
+  api.scriptTurnedOff = true;
+  return api.scriptTurnedOff;
+}
+function setEditorLng(lng) {
+  api.sendCurrentTargetLanguage(lng);
+}
+var pendingMsgs = [];
+function sendMessage(action, payload) {
+  if (!api.source) {
+    var _document$getElementB;
+    api.source = (_document$getElementB = document.getElementById('i18next-editor-iframe')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
+  }
+  if (!api.origin) api.origin = vars.getIframeUrl();
+  if (!api.source || !api.source.postMessage) {
+    pendingMsgs.push({
+      action: action,
+      payload: payload
+    });
+    return;
+  }
+  if (api.legacy) {
+    api.source.postMessage(_objectSpread({
+      message: action
+    }, payload), api.origin);
+  } else {
+    api.source.postMessage({
+      sender: 'i18next-editor',
+      senderAPIVersion: 'v1',
+      action: action,
+      message: action,
+      payload: payload
+    }, api.origin);
+  }
+  var todo = pendingMsgs;
+  pendingMsgs = [];
+  todo.forEach(function (_ref) {
+    var action = _ref.action,
+      payload = _ref.payload;
+    sendMessage(action, payload);
+  });
+}
+var handlers = {};
+var repeat = 5;
+var api = {
+  init: function init(implementation, clickHandler) {
+    api.i18n = implementation;
+    api.clickHandler = clickHandler;
+  },
+  requestInitialize: function requestInitialize(payload) {
+    sendMessage('requestInitialize', payload);
+    api.initInterval = setInterval(function () {
+      repeat = repeat - 1;
+      api.requestInitialize(payload);
+      if (repeat < 0 && api.initInterval) clearInterval(api.initInterval);
+    }, 1000);
+  },
+  selectKey: function selectKey(meta) {
+    sendMessage('selectKey', meta);
+  },
+  confirmResourceBundle: function confirmResourceBundle(payload) {
+    sendMessage('confirmResourceBundle', payload);
+  },
+  sendCurrentParsedContent: function sendCurrentParsedContent() {
+    sendMessage('sendCurrentParsedContent', {
+      content: Object.values(store.store.data).map(function (item) {
+        return {
+          id: item.id,
+          keys: item.keys
+        };
+      })
+    });
+  },
+  sendCurrentTargetLanguage: function sendCurrentTargetLanguage(lng) {
+    sendMessage('sendCurrentTargetLanguage', {
+      targetLng: lng || api.i18n.getLng()
+    });
+  },
+  addHandler: function addHandler(action, fc) {
+    if (!handlers[action]) handlers[action] = [];
+    handlers[action].push(fc);
+  },
+  sendLocizeIsEnabled: function sendLocizeIsEnabled() {
+    sendMessage('locizeIsEnabled', {
+      enabled: true
+    });
+  },
+  turnOn: function turnOn() {
+    if (api.scriptTurnedOff) return sendMessage('forcedOff');
+    if (!api.clickInterceptionEnabled) {
+      window.document.body.addEventListener('click', api.clickHandler, true);
+    }
+    api.clickInterceptionEnabled = true;
+    sendMessage('turnedOn');
+  },
+  turnOff: function turnOff() {
+    if (api.scriptTurnedOff) return sendMessage('forcedOff');
+    if (api.clickInterceptionEnabled) {
+      window.document.body.removeEventListener('click', api.clickHandler, true);
+    }
+    api.clickInterceptionEnabled = false;
+    sendMessage('turnedOff');
+  },
+  onAddedKey: function onAddedKey(lng, ns, key, value) {
+    var msg = {
+      lng: lng,
+      ns: ns,
+      key: key,
+      value: value
+    };
+    sendMessage('added', msg);
+  }
+};
+if (typeof window !== 'undefined') {
+  window.addEventListener('message', function (e) {
+    var _e$data = e.data,
+      sender = _e$data.sender,
+      action = _e$data.action,
+      message = _e$data.message,
+      payload = _e$data.payload;
+    if (message && handlers[message]) {
+      handlers[message].forEach(function (fc) {
+        fc(payload, e);
+      });
+    } else if (sender === 'i18next-editor-frame' && handlers[action]) {
+      handlers[action].forEach(function (fc) {
+        fc(payload);
+      });
+    }
+  });
+}
+
+exports.addLocizeSavedHandler = addLocizeSavedHandler;
+exports.api = api;
+exports.sendMessage = sendMessage;
+exports.setEditorLng = setEditorLng;
+exports.turnOff = turnOff;
+exports.turnOn = turnOn;

package/dist/cjs/clickHandler.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('./utils.js');
+
+function createClickHandler(cb) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var handler = function handler(e) {
+    var el = utils.getClickedElement(e);
+    if (!el) return {};
+    e.preventDefault();
+    e.stopPropagation();
+    var text = utils.getElementText(el);
+    var key = utils.getElementI18nKey(el);
+    var rectEl = el.getBoundingClientRect ? el : el.parentElement;
+    var _rectEl$getBoundingCl = rectEl.getBoundingClientRect(),
+      top = _rectEl$getBoundingCl.top,
+      left = _rectEl$getBoundingCl.left,
+      width = _rectEl$getBoundingCl.width,
+      height = _rectEl$getBoundingCl.height;
+    var style = window.getComputedStyle(rectEl, null);
+    var pT = parseFloat(style.getPropertyValue('padding-top'));
+    var pB = parseFloat(style.getPropertyValue('padding-bottom'));
+    var pR = parseFloat(style.getPropertyValue('padding-right'));
+    var pL = parseFloat(style.getPropertyValue('padding-left'));
+    var sizing = style.getPropertyValue('box-sizing');
+    function getFallbackNS() {
+      if (options.isLocizify) return options.defaultNS;
+    }
+    cb({
+      tagName: rectEl.tagName,
+      text: text,
+      key: key,
+      ns: utils.getElementNamespace(el) || getFallbackNS(),
+      box: {
+        top: top,
+        left: left,
+        width: sizing === 'border-box' ? width : width - pR - pL,
+        height: sizing === 'border-box' ? height : height - pT - pB
+      },
+      style: style.cssText
+    });
+  };
+  return handler;
+}
+
+exports.createClickHandler = createClickHandler;

package/dist/cjs/index.d.ts

@@ -0,0 +1,15 @@
+export * from 'i18next-subliminal'
+
+export interface LocizePlugin {
+  type: '3rdParty';
+  init(i18next: any): () => void;
+}
+
+export const locizePlugin: LocizePlugin
+
+export function turnOn(): void;
+export function turnOff(): void;
+export function setEditorLng(lng: string): void;
+export function addLocizeSavedHandler(fn: (data: any) => void): void;
+
+export function startStandalone(): void;

package/dist/cjs/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var locizePlugin = require('./locizePlugin.js');
+var startStandalone = require('./startStandalone.js');
+require('./api/handleEditKey.js');
+require('./api/handleCommitKey.js');
+require('./api/handleCommitKeys.js');
+require('./api/handleConfirmInitialized.js');
+require('./api/handleRequestPopupChanges.js');
+require('./api/handleRequestResourceBundle.js');
+require('./api/handleSelectedKeys.js');
+require('./api/handleIsLocizeEnabled.js');
+require('./api/handleTurnOn.js');
+require('./api/handleTurnOff.js');
+var postMessage = require('./api/postMessage.js');
+var i18nextSubliminal = require('i18next-subliminal');
+
+var index = {
+  wrap: i18nextSubliminal.wrap,
+  unwrap: i18nextSubliminal.unwrap,
+  containsHiddenMeta: i18nextSubliminal.containsHiddenMeta,
+  PostProcessor: i18nextSubliminal.PostProcessor,
+  addLocizeSavedHandler: postMessage.addLocizeSavedHandler,
+  locizePlugin: locizePlugin.locizePlugin,
+  turnOn: postMessage.turnOn,
+  turnOff: postMessage.turnOff,
+  setEditorLng: postMessage.setEditorLng,
+  startStandalone: startStandalone.startStandalone
+};
+
+exports.locizePlugin = locizePlugin.locizePlugin;
+exports.startStandalone = startStandalone.startStandalone;
+exports.addLocizeSavedHandler = postMessage.addLocizeSavedHandler;
+exports.setEditorLng = postMessage.setEditorLng;
+exports.turnOff = postMessage.turnOff;
+exports.turnOn = postMessage.turnOn;
+Object.defineProperty(exports, 'PostProcessor', {
+  enumerable: true,
+  get: function () { return i18nextSubliminal.PostProcessor; }
+});
+Object.defineProperty(exports, 'containsHiddenMeta', {
+  enumerable: true,
+  get: function () { return i18nextSubliminal.containsHiddenMeta; }
+});
+Object.defineProperty(exports, 'unwrap', {
+  enumerable: true,
+  get: function () { return i18nextSubliminal.unwrap; }
+});
+Object.defineProperty(exports, 'wrap', {
+  enumerable: true,
+  get: function () { return i18nextSubliminal.wrap; }
+});
+exports["default"] = index;