locize 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,6 +1,14 @@
+### 3.2.0
+
+- using the locizePlugin export should only show the incontext editor if passing `?incontext=true`
+
+### 3.1.1
+
+- prevent to append popup multiple times
+
 ### 3.1.0
 
-- additional plugin interface that shows incontext only if passing `?incontext=true``
+- additional plugin interface that shows incontext only if passing `?incontext=true`
 
 ### 3.0.5
 

package/README.md

@@ -49,18 +49,18 @@ This plugin is already included in [locizify](https://github.com/locize/locizify
 
 ## with i18next
 
-### this will show the locize incontext editor as a popup in your website
+### this will show the locize incontext editor as a popup in your website only if the url contains the incontext=true query paramenter, i.e. http://localhost:8080?incontext=true
 ```js
-import { locizePlugin } from 'locize';
+import { locizePlugin } from 'locize'
 
-i18next.use(locizePlugin);
+i18next.use(locizePlugin)
 ```
 
-### this will show the locize incontext editor as a popup in your website only if the url contains the incontext=true query paramenter, i.e. http://localhost:8080?incontext=true
+### this will show the locize incontext editor as a popup in your website
 ```js
-import { locizeEditorPlugin } from 'locize';
+import { locizeEditorPlugin } from 'locize'
 
-i18next.use(locizeEditorPlugin());
+i18next.use(locizeEditorPlugin({ show: true }))
 ```
 
 Using react-i18next you might want to bind the editorSaved event to trigger a rerender:

package/dist/cjs/api/handleRequestPopupChanges.js

@@ -1,20 +1,21 @@
 'use strict';
 
 var postMessage = require('./postMessage.js');
+var popup = require('../ui/elements/popup.js');
 
 function handler(payload) {
   var containerStyle = payload.containerStyle;
   if (containerStyle) {
-    var popup = document.getElementById('i18next-editor-popup');
+    var popup$1 = document.getElementById(popup.popupId);
     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);
+      var diff = "calc(".concat(containerStyle.height, " - ").concat(popup$1.style.height, ")");
+      popup$1.style.setProperty('top', "calc(".concat(popup$1.style.top, " - ").concat(diff, ")"));
+      popup$1.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);
+      var _diff = "calc(".concat(containerStyle.width, " - ").concat(popup$1.style.width, ")");
+      popup$1.style.setProperty('left', "calc(".concat(popup$1.style.left, " - ").concat(_diff, ")"));
+      popup$1.style.setProperty('width', containerStyle.width);
     }
   }
 }

package/dist/cjs/index.d.ts

@@ -9,15 +9,15 @@ export interface LocizePlugin {
 }
 
 /**
- * Returns an i18next plugin that will show the incontext editor.
+ * Returns an i18next plugin that will show the incontext editor only if your url contains the query paramenter ?incontext=true.
  */
 export const locizePlugin: LocizePlugin
 
 /**
- * Returns an i18next plugin that will only show the incontext editor if the qsProp in your url is set to true.
- * @param opt defaults to: { qsProp: 'incontext' }
+ * Returns an i18next plugin that will only show the incontext editor if the qsProp in your url is set to true or if you pass { show: true }.
+ * @param opt defaults to: { qsProp: 'incontext', show: false }
  */
-export function locizeEditorPlugin(opt?: { qsProp?: string }): LocizePlugin
+export function locizeEditorPlugin(opt?: { qsProp?: string, show?: boolean }): LocizePlugin
 
 /**
  * Turn on programmatically.

package/dist/cjs/locizePlugin.js

@@ -99,20 +99,6 @@ function getImplementation(i18n) {
   return impl;
 }
 var i18next;
-var locizePlugin = {
-  type: '3rdParty',
-  init: function init(i18n) {
-    var options = i18n.options;
-    i18next = i18n;
-    if (!isInIframe) configurePostProcessor(i18next, options);
-    var impl = getImplementation(i18n);
-    if (!isInIframe) {
-      process.start(impl);
-    } else {
-      processLegacy.startLegacy(impl);
-    }
-  }
-};
 var locizeEditorPlugin = function locizeEditorPlugin() {
   var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   opt.qsProp = opt.qsProp || 'incontext';
@@ -121,7 +107,7 @@ var locizeEditorPlugin = function locizeEditorPlugin() {
     init: function init(i18n) {
       var options = i18n.options;
       i18next = i18n;
-      var showInContext = utils.getQsParameterByName(opt.qsProp) === 'true';
+      var showInContext = opt.show || utils.getQsParameterByName(opt.qsProp) === 'true';
       if (!isInIframe && showInContext) configurePostProcessor(i18next, options);
       var impl = getImplementation(i18n);
       if (!isInIframe && showInContext) {
@@ -132,6 +118,7 @@ var locizeEditorPlugin = function locizeEditorPlugin() {
     }
   };
 };
+var locizePlugin = locizeEditorPlugin();
 
 Object.defineProperty(exports, 'unwrap', {
   enumerable: true,

package/dist/cjs/process.js

@@ -54,11 +54,13 @@ function start() {
     });
     observer$1.start();
     mouseDistance.startMouseTracking(observer$1);
-    document.body.append(popup.Popup(vars.getIframeUrl(), function () {
-      postMessage.api.requestInitialize(config);
-    }));
-    popup$1.initDragElement();
-    popup$1.initResizeElement();
+    if (!document.getElementById(popup.popupId)) {
+      document.body.append(popup.Popup(vars.getIframeUrl(), function () {
+        postMessage.api.requestInitialize(config);
+      }));
+      popup$1.initDragElement();
+      popup$1.initResizeElement();
+    }
   }
   if (document.body) return continueToStart();
   window.addEventListener('load', function () {

package/dist/cjs/ui/elements/popup.js

@@ -41,9 +41,10 @@ function Minimize(popupEle, onMinimize) {
   };
   return image;
 }
+var popupId = 'i18next-editor-popup';
 function Popup(url, cb) {
   var popup = document.createElement('div');
-  popup.setAttribute('id', 'i18next-editor-popup');
+  popup.setAttribute('id', popupId);
   popup.classList.add('i18next-editor-popup');
   popup.style = "\n  z-index: 9;\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 600px;\n  max-width: 800px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  ";
   popup.setAttribute('data-i18next-editor-element', 'true');
@@ -78,3 +79,4 @@ function Popup(url, cb) {
 }
 
 exports.Popup = Popup;
+exports.popupId = popupId;

package/dist/esm/api/handleRequestPopupChanges.js

@@ -1,9 +1,10 @@
 import { api } from './postMessage.js';
+import { popupId } from '../ui/elements/popup.js';
 
 function handler(payload) {
   var containerStyle = payload.containerStyle;
   if (containerStyle) {
-    var popup = document.getElementById('i18next-editor-popup');
+    var popup = document.getElementById(popupId);
     if (containerStyle.height) {
       var diff = "calc(".concat(containerStyle.height, " - ").concat(popup.style.height, ")");
       popup.style.setProperty('top', "calc(".concat(popup.style.top, " - ").concat(diff, ")"));

package/dist/esm/index.d.ts

@@ -9,15 +9,15 @@ export interface LocizePlugin {
 }
 
 /**
- * Returns an i18next plugin that will show the incontext editor.
+ * Returns an i18next plugin that will show the incontext editor only if your url contains the query paramenter ?incontext=true.
  */
 export const locizePlugin: LocizePlugin
 
 /**
- * Returns an i18next plugin that will only show the incontext editor if the qsProp in your url is set to true.
- * @param opt defaults to: { qsProp: 'incontext' }
+ * Returns an i18next plugin that will only show the incontext editor if the qsProp in your url is set to true or if you pass { show: true }.
+ * @param opt defaults to: { qsProp: 'incontext', show: false }
  */
-export function locizeEditorPlugin(opt?: { qsProp?: string }): LocizePlugin
+export function locizeEditorPlugin(opt?: { qsProp?: string, show?: boolean }): LocizePlugin
 
 /**
  * Turn on programmatically.

package/dist/esm/locizePlugin.js

@@ -92,20 +92,6 @@ function getImplementation(i18n) {
   return impl;
 }
 var i18next;
-var locizePlugin = {
-  type: '3rdParty',
-  init: function init(i18n) {
-    var options = i18n.options;
-    i18next = i18n;
-    if (!isInIframe) configurePostProcessor(i18next, options);
-    var impl = getImplementation(i18n);
-    if (!isInIframe) {
-      start(impl);
-    } else {
-      startLegacy(impl);
-    }
-  }
-};
 var locizeEditorPlugin = function locizeEditorPlugin() {
   var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   opt.qsProp = opt.qsProp || 'incontext';
@@ -114,7 +100,7 @@ var locizeEditorPlugin = function locizeEditorPlugin() {
     init: function init(i18n) {
       var options = i18n.options;
       i18next = i18n;
-      var showInContext = getQsParameterByName(opt.qsProp) === 'true';
+      var showInContext = opt.show || getQsParameterByName(opt.qsProp) === 'true';
       if (!isInIframe && showInContext) configurePostProcessor(i18next, options);
       var impl = getImplementation(i18n);
       if (!isInIframe && showInContext) {
@@ -125,5 +111,6 @@ var locizeEditorPlugin = function locizeEditorPlugin() {
     }
   };
 };
+var locizePlugin = locizeEditorPlugin();
 
 export { locizeEditorPlugin, locizePlugin };

package/dist/esm/process.js

@@ -3,7 +3,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 { popupId, Popup } from './ui/elements/popup.js';
 import { getIframeUrl } from './vars.js';
 import './api/handleEditKey.js';
 import './api/handleCommitKey.js';
@@ -46,11 +46,13 @@ function start() {
     });
     observer.start();
     startMouseTracking(observer);
-    document.body.append(Popup(getIframeUrl(), function () {
-      api.requestInitialize(config);
-    }));
-    initDragElement();
-    initResizeElement();
+    if (!document.getElementById(popupId)) {
+      document.body.append(Popup(getIframeUrl(), function () {
+        api.requestInitialize(config);
+      }));
+      initDragElement();
+      initResizeElement();
+    }
   }
   if (document.body) return continueToStart();
   window.addEventListener('load', function () {

package/dist/esm/ui/elements/popup.js

@@ -37,9 +37,10 @@ function Minimize(popupEle, onMinimize) {
   };
   return image;
 }
+var popupId = 'i18next-editor-popup';
 function Popup(url, cb) {
   var popup = document.createElement('div');
-  popup.setAttribute('id', 'i18next-editor-popup');
+  popup.setAttribute('id', popupId);
   popup.classList.add('i18next-editor-popup');
   popup.style = "\n  z-index: 9;\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 600px;\n  max-width: 800px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  ";
   popup.setAttribute('data-i18next-editor-element', 'true');
@@ -73,4 +74,4 @@ function Popup(url, cb) {
   return popup;
 }
 
-export { Popup };
+export { Popup, popupId };