locize 3.0.4 → 3.1.0

package/locize.js

@@ -281,10 +281,14 @@
     },
     requestInitialize: function requestInitialize(payload) {
       sendMessage('requestInitialize', payload);
+      if (api.initInterval) return;
       api.initInterval = setInterval(function () {
         repeat = repeat - 1;
         api.requestInitialize(payload);
-        if (repeat < 0 && api.initInterval) clearInterval(api.initInterval);
+        if (repeat < 0 && api.initInterval) {
+          clearInterval(api.initInterval);
+          delete api.initInterval;
+        }
       }, 1000);
     },
     selectKey: function selectKey(meta) {
@@ -489,6 +493,7 @@
   function handler$6(payload) {
     api.initialized = true;
     clearInterval(api.initInterval);
+    delete api.initInterval;
     api.sendCurrentParsedContent();
     api.sendCurrentTargetLanguage();
   }
@@ -2394,8 +2399,29 @@
     find(el);
     return found;
   }
+  function getQsParameterByName(name, url) {
+    if (typeof window === 'undefined') return null;
+    if (!url) url = window.location.href.toLowerCase();
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+    var results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+  }
 
+  var mutationTriggeringElements = {};
   function ignoreMutation(ele) {
+    if (ele.uniqueID) {
+      var 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;
+      }
+    }
     var ret = ele.dataset && (ele.dataset.i18nextEditorElement === 'true' || ele.dataset.locizeEditorIgnore === 'true');
     if (!ret && ele.parentElement) return ignoreMutation(ele.parentElement);
     return ret;
@@ -2424,6 +2450,12 @@
         if (mutation.type === 'attributes' && !validAttributes.includes(mutation.attributeName)) {
           return;
         }
+        Object.keys(mutationTriggeringElements).forEach(function (k) {
+          var info = mutationTriggeringElements[k];
+          if (info.lastTriggerDate + 60000 < Date.now()) {
+            delete mutationTriggeringElements[k];
+          }
+        });
         if (mutation.type === 'childList') {
           var notOurs = 0;
           if (!ignoreMutation(mutation.target)) {
@@ -2439,8 +2471,18 @@
           if (notOurs === 0) return;
         }
         triggerMutation = true;
+        if (mutation.target && mutation.target.uniqueID) {
+          var info = mutationTriggeringElements[mutation.target.uniqueID] || {
+            triggered: 0
+          };
+          info.triggered = info.triggered + 1;
+          info.lastTriggerDate = Date.now();
+          mutationTriggeringElements[mutation.target.uniqueID] = info;
+        }
         var includedAlready = targetEles.reduce(function (mem, element) {
-          if (mem || element.contains(mutation.target) || !mutation.target.parentElement) return true;
+          if (mem || element.contains(mutation.target) || !mutation.target.parentElement) {
+            return true;
+          }
           return false;
         }, false);
         if (!includedAlready) {
@@ -2468,9 +2510,13 @@
     };
   }
 
-  function isInViewport(element) {
-    var rect = element.getBoundingClientRect();
-    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+  function isInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    var windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    var windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    var vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
+    var horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
+    return vertInView && horInView;
   }
   function mouseDistanceFromElement(mouseEvent, element) {
     var $n = element,
@@ -2481,9 +2527,9 @@
         y: mY
       },
       off = $n.getBoundingClientRect(),
-      ny1 = off.top + document.body.scrollTop,
+      ny1 = off.top + document.documentElement.scrollTop,
       ny2 = ny1 + $n.offsetHeight,
-      nx1 = off.left + document.body.scrollLeft,
+      nx1 = off.left + document.documentElement.scrollLeft,
       nx2 = nx1 + $n.offsetWidth,
       maxX1 = Math.max(mX, nx1),
       minX2 = Math.min(mX, nx2),
@@ -2854,89 +2900,94 @@
   try {
     isInIframe = self !== top;
   } catch (e) {}
+  function configurePostProcessor(i18next, options) {
+    i18next.use(SubliminalPostProcessor);
+    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) {
+    var impl = {
+      getResource: function getResource(lng, ns, key) {
+        return i18n.getResource(lng, ns, key);
+      },
+      setResource: function setResource(lng, ns, key, value) {
+        return i18n.addResource(lng, ns, key, value, {
+          silent: true
+        });
+      },
+      getResourceBundle: function getResourceBundle(lng, ns, cb) {
+        i18n.loadNamespaces(ns, function () {
+          cb(i18n.getResourceBundle(lng, ns));
+        });
+      },
+      getLng: function getLng() {
+        return i18n.languages[0];
+      },
+      getSourceLng: function getSourceLng() {
+        var 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') {
+          var res = fallback(i18n.resolvedLanguage);
+          if (typeof res === 'string') return res;
+          if (Array.isArray(res)) return res[res.length - 1];
+        }
+        return 'dev';
+      },
+      getLocizeDetails: function getLocizeDetails() {
+        var 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';
+        }
+        var opts = {
+          backendName: 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;
+        var pickFrom = i18n.options.backend || i18n.options.editor;
+        return _objectSpread(_objectSpread({}, opts), {}, {
+          projectId: pickFrom.projectId,
+          version: pickFrom.version
+        });
+      },
+      bindLanguageChange: function bindLanguageChange(cb) {
+        i18n.on('languageChanged', cb);
+      },
+      bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
+        i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
+          if (!isUpdate) cb(lng, ns, k, val);
+        };
+      },
+      triggerRerender: function triggerRerender() {
+        i18n.emit('editorSaved');
+      }
+    };
+    return impl;
+  }
   var i18next;
   var locizePlugin = {
     type: '3rdParty',
     init: function init(i18n) {
       var options = i18n.options;
       i18next = i18n;
-      if (!isInIframe) {
-        i18next.use(SubliminalPostProcessor);
-        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;
-      }
-      var impl = {
-        getResource: function getResource(lng, ns, key) {
-          return i18n.getResource(lng, ns, key);
-        },
-        setResource: function setResource(lng, ns, key, value) {
-          return i18n.addResource(lng, ns, key, value, {
-            silent: true
-          });
-        },
-        getResourceBundle: function getResourceBundle(lng, ns, cb) {
-          i18n.loadNamespaces(ns, function () {
-            cb(i18n.getResourceBundle(lng, ns));
-          });
-        },
-        getLng: function getLng() {
-          return i18n.languages[0];
-        },
-        getSourceLng: function getSourceLng() {
-          var 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') {
-            var res = fallback(i18n.resolvedLanguage);
-            if (typeof res === 'string') return res;
-            if (Array.isArray(res)) return res[res.length - 1];
-          }
-          return 'dev';
-        },
-        getLocizeDetails: function getLocizeDetails() {
-          var 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';
-          }
-          var opts = {
-            backendName: 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;
-          var pickFrom = i18n.options.backend || i18n.options.editor;
-          return _objectSpread(_objectSpread({}, opts), {}, {
-            projectId: pickFrom.projectId,
-            version: pickFrom.version
-          });
-        },
-        bindLanguageChange: function bindLanguageChange(cb) {
-          i18n.on('languageChanged', cb);
-        },
-        bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
-          i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
-            if (!isUpdate) cb(lng, ns, k, val);
-          };
-        },
-        triggerRerender: function triggerRerender() {
-          i18n.emit('editorSaved');
-        }
-      };
+      if (!isInIframe) configurePostProcessor(i18next, options);
+      var impl = getImplementation(i18n);
       if (!isInIframe) {
         start(impl);
       } else {
@@ -2944,6 +2995,25 @@
       }
     }
   };
+  var locizeEditorPlugin = function locizeEditorPlugin() {
+    var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    opt.qsProp = opt.qsProp || 'incontext';
+    return {
+      type: '3rdParty',
+      init: function init(i18n) {
+        var options = i18n.options;
+        i18next = i18n;
+        var showInContext = getQsParameterByName(opt.qsProp) === 'true';
+        if (!isInIframe && showInContext) configurePostProcessor(i18next, options);
+        var impl = getImplementation(i18n);
+        if (!isInIframe && showInContext) {
+          start(impl);
+        } else {
+          startLegacy(impl);
+        }
+      }
+    };
+  };
 
   function startStandalone() {
     startLegacy({
@@ -2969,6 +3039,7 @@
     PostProcessor: SubliminalPostProcessor,
     addLocizeSavedHandler: addLocizeSavedHandler,
     locizePlugin: locizePlugin,
+    locizeEditorPlugin: locizeEditorPlugin,
     turnOn: turnOn,
     turnOff: turnOff,
     setEditorLng: setEditorLng,
@@ -2979,6 +3050,7 @@
   exports.addLocizeSavedHandler = addLocizeSavedHandler;
   exports.containsHiddenMeta = containsHiddenMeta;
   exports["default"] = index;
+  exports.locizeEditorPlugin = locizeEditorPlugin;
   exports.locizePlugin = locizePlugin;
   exports.setEditorLng = setEditorLng;
   exports.startStandalone = startStandalone;