diff --git a/CHANGELOG.md b/CHANGELOG.md index b0a416c..c061518 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +### 2.2.2 + +- z-index correction on the toggle UI + ### 2.2.1 - fix hasNamespacePrefixed diff --git a/locize-editor.js b/locize-editor.js index 36f3956..c10ce6a 100644 --- a/locize-editor.js +++ b/locize-editor.js @@ -208,7 +208,7 @@ var baseBtn = 'font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; color: #fff; border: none; font-weight: 300; height: 30px; line-height: 30px; padding: 0; text-align: center; min-width: 90px; text-decoration: none; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; outline: none; cursor: pointer;'; function initUI(on, off, options) { var cont = document.createElement("div"); - cont.setAttribute('style', 'z-index: 2001; font-family: "Helvetica", "Arial", sans-serif; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; border: solid 1px #1976d2; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);'); + cont.setAttribute('style', 'z-index: 2147483647; font-family: "Helvetica", "Arial", sans-serif; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; border: solid 1px #1976d2; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);'); cont.setAttribute('ignorelocizeeditor', ''); cont.setAttribute('translated', ''); var title = document.createElement("h4"); @@ -268,7 +268,7 @@ autoOpen: true, onEditorSaved: function onEditorSaved(lng, ns) {}, mode: getQueryVariable('locizeMode') || 'iframe', - iframeContainerStyle: 'z-index: 2147483647; position: fixed; top: 0; right: 0; bottom: 0; width: 600px; box-shadow: -3px 0 5px 0 rgba(0,0,0,0.5);', + iframeContainerStyle: 'z-index: 2147480000; position: fixed; top: 0; right: 0; bottom: 0; width: 600px; box-shadow: -3px 0 5px 0 rgba(0,0,0,0.5);', iframeStyle: 'height: 100%; width: 600px; border: none;', bodyStyle: 'margin-right: 605px;' }; diff --git a/locize-editor.min.js b/locize-editor.min.js index de324f8..82a3c37 100644 --- a/locize-editor.min.js +++ b/locize-editor.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).locizeEditor=e()}(this,function(){"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t){return(n="function"==typeof Symbol&&"symbol"===e(Symbol.iterator)?function(t){return e(t)}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":e(t)})(t)}function i(t){var e,i,o={top:0,left:0,right:0,bottom:0},r=t&&t.ownerDocument;if(!(e=r&&r.documentElement))return o;"undefined"!==n(t.getBoundingClientRect)&&(o=t.getBoundingClientRect()),i=function(t){return null!=(e=t)&&e===e.window?t:9===t.nodeType&&t.defaultView;var e}(r);var s=o.top+i.pageYOffset-e.clientTop,a=o.left+i.pageXOffset-e.clientLeft;return{top:s,left:a,right:a+(o.right-o.left),bottom:s+(o.bottom-o.top)}}function o(t,e){var n=t,i=void 0!==e.options.nsSeparator?e.options.nsSeparator:":";if(t.indexOf(i)>-1){var o=t.split(i);o.shift(),n=o.join(i)}return n}function r(t,e,n){var i=n.options.defaultNS,o=n.options.nsSeparator||":";if(t.indexOf(o)>-1)i=t.split(o)[0];else{var r;!function t(e){var n=e.getAttribute&&e.getAttribute("i18next-options");if(n||(n=e.getAttribute&&e.getAttribute("data-i18next-options")),n||(n=e.getAttribute&&e.getAttribute("i18n-options")),n||(n=e.getAttribute&&e.getAttribute("data-i18n-options")),n){var i={};try{i=JSON.parse(n)}catch(t){}i.ns&&(r=i.ns)}r||(r=e.getAttribute&&e.getAttribute("i18next-ns")),r||(r=e.getAttribute&&e.getAttribute("data-i18next-ns")),r||(r=e.getAttribute&&e.getAttribute("i18n-ns")),r||(r=e.getAttribute&&e.getAttribute("data-i18n-ns")),!r&&e.parentElement&&t(e.parentElement)}(e),r&&(i=r)}return i}function s(t){for(var e=window.location.search.substring(1).split("&"),n=0;ns&&(o=l)}a+1>n.childNodes.length&&(a=n.childNodes.length-1),o||(o=n.childNodes.length);for(var p=a;pr)break;u&&8!==u.nodeType&&(e=u)}}return e}(t);if(n){t.preventDefault(),t.stopPropagation();var a=n.textContent||n.text&&n.text.innerText||n.placeholder;if("string"==typeof a){var l=a.replace(/\n +/g,"").trim(),d=function(){var t={message:"searchForKey",projectId:e.i18next.options.backend.projectId,version:e.i18next.options.backend.version||"latest",lng:s(e.options.lngOverrideQS)||e.options.lngOverride||e.i18next.languages[0],ns:r(l,n,e.i18next),token:e.options.hasNamespacePrefixed?o(l,e.i18next):l};if(t.lng&&"cimode"!==t.lng.toLowerCase()||(t.lng=e.i18next.options.backend.referenceLng),e.options.handler)return e.options.handler(t);e.locizeInstance.postMessage(t,e.options.url),e.locizeInstance.focus()};this.options.autoOpen&&("iframe"!==this.options.mode&&!this.locizeInstance||this.locizeInstance.closed)?(this.open(),setTimeout(function(){d()},3e3)):d()}}},handleSavedMissing:function(t,e){if(this.locizeInstance&&!this.locizeInstance.closed){var n={message:"savedMissings",projectId:this.i18next.options.backend.projectId,version:this.i18next.options.backend.version||"latest",lng:t,ns:e};this.locizeInstance.postMessage(n,this.options.url)}},open:function(){var t=this.options.url;this.options.openDashboard||(t="".concat(t,"/pid/").concat(this.options.projectId||this.i18next.options.backend.projectId,"/v/").concat(this.i18next.options.backend.version||"latest")),"iframe"===this.options.mode?this.locizeInstance=function(t,e){var n=document.createElement("div");n.setAttribute("style",e.iframeContainerStyle),n.setAttribute("ignorelocizeeditor",""),n.setAttribute("translated","");var i=document.createElement("iframe");i.setAttribute("style",e.iframeStyle),i.setAttribute("ignorelocizeeditor",""),i.setAttribute("translated",""),i.setAttribute("src",t),n.appendChild(i),document.body.appendChild(n);var o=document.body.getAttribute("style");return document.body.setAttribute("style","".concat(o,"; ").concat(e.bodyStyle)),i.contentWindow}(t,this.options):this.locizeInstance=window.open(t),this.toggleUI=function(t,e,n){var i=document.createElement("div");i.setAttribute("style",'z-index: 2001; font-family: "Helvetica", "Arial", sans-serif; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; border: solid 1px #1976d2; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);'),i.setAttribute("ignorelocizeeditor",""),i.setAttribute("translated","");var o=document.createElement("h4");o.id="locize-title",o.innerHTML="locize editor",o.setAttribute("style",'font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; margin: 0 0 5px 0; color: #1976d2; font-weight: 300;'),o.setAttribute("ignorelocizeeditor",""),i.appendChild(o);var r=document.createElement("button");r.innerHTML="On",r.setAttribute("style","".concat(a," display: none; background-color: #54A229;")),r.onclick=e,r.setAttribute("ignorelocizeeditor",""),i.appendChild(r);var s=document.createElement("button");return s.innerHTML="Off",s.setAttribute("style","".concat(a," display: none; background-color: #D50000;")),s.onclick=t,s.setAttribute("ignorelocizeeditor",""),i.appendChild(s),document.body.appendChild(i),function(t){r.style.display=t?"block":"none",s.style.display=t?"none":"block"}}(this.on.bind(this),this.off.bind(this),this.options),this.on()},on:function(){document.body.addEventListener("click",this.handler,!0),this.toggleUI(!0),this.enabled=!0},off:function(){document.body.removeEventListener("click",this.handler,!0),this.toggleUI(!1),this.enabled=!1}}}); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).locizeEditor=e()}(this,function(){"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t){return(n="function"==typeof Symbol&&"symbol"===e(Symbol.iterator)?function(t){return e(t)}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":e(t)})(t)}function i(t){var e,i,o={top:0,left:0,right:0,bottom:0},r=t&&t.ownerDocument;if(!(e=r&&r.documentElement))return o;"undefined"!==n(t.getBoundingClientRect)&&(o=t.getBoundingClientRect()),i=function(t){return null!=(e=t)&&e===e.window?t:9===t.nodeType&&t.defaultView;var e}(r);var s=o.top+i.pageYOffset-e.clientTop,a=o.left+i.pageXOffset-e.clientLeft;return{top:s,left:a,right:a+(o.right-o.left),bottom:s+(o.bottom-o.top)}}function o(t,e){var n=t,i=void 0!==e.options.nsSeparator?e.options.nsSeparator:":";if(t.indexOf(i)>-1){var o=t.split(i);o.shift(),n=o.join(i)}return n}function r(t,e,n){var i=n.options.defaultNS,o=n.options.nsSeparator||":";if(t.indexOf(o)>-1)i=t.split(o)[0];else{var r;!function t(e){var n=e.getAttribute&&e.getAttribute("i18next-options");if(n||(n=e.getAttribute&&e.getAttribute("data-i18next-options")),n||(n=e.getAttribute&&e.getAttribute("i18n-options")),n||(n=e.getAttribute&&e.getAttribute("data-i18n-options")),n){var i={};try{i=JSON.parse(n)}catch(t){}i.ns&&(r=i.ns)}r||(r=e.getAttribute&&e.getAttribute("i18next-ns")),r||(r=e.getAttribute&&e.getAttribute("data-i18next-ns")),r||(r=e.getAttribute&&e.getAttribute("i18n-ns")),r||(r=e.getAttribute&&e.getAttribute("data-i18n-ns")),!r&&e.parentElement&&t(e.parentElement)}(e),r&&(i=r)}return i}function s(t){for(var e=window.location.search.substring(1).split("&"),n=0;ns&&(o=l)}a+1>n.childNodes.length&&(a=n.childNodes.length-1),o||(o=n.childNodes.length);for(var p=a;pr)break;u&&8!==u.nodeType&&(e=u)}}return e}(t);if(n){t.preventDefault(),t.stopPropagation();var a=n.textContent||n.text&&n.text.innerText||n.placeholder;if("string"==typeof a){var l=a.replace(/\n +/g,"").trim(),d=function(){var t={message:"searchForKey",projectId:e.i18next.options.backend.projectId,version:e.i18next.options.backend.version||"latest",lng:s(e.options.lngOverrideQS)||e.options.lngOverride||e.i18next.languages[0],ns:r(l,n,e.i18next),token:e.options.hasNamespacePrefixed?o(l,e.i18next):l};if(t.lng&&"cimode"!==t.lng.toLowerCase()||(t.lng=e.i18next.options.backend.referenceLng),e.options.handler)return e.options.handler(t);e.locizeInstance.postMessage(t,e.options.url),e.locizeInstance.focus()};this.options.autoOpen&&("iframe"!==this.options.mode&&!this.locizeInstance||this.locizeInstance.closed)?(this.open(),setTimeout(function(){d()},3e3)):d()}}},handleSavedMissing:function(t,e){if(this.locizeInstance&&!this.locizeInstance.closed){var n={message:"savedMissings",projectId:this.i18next.options.backend.projectId,version:this.i18next.options.backend.version||"latest",lng:t,ns:e};this.locizeInstance.postMessage(n,this.options.url)}},open:function(){var t=this.options.url;this.options.openDashboard||(t="".concat(t,"/pid/").concat(this.options.projectId||this.i18next.options.backend.projectId,"/v/").concat(this.i18next.options.backend.version||"latest")),"iframe"===this.options.mode?this.locizeInstance=function(t,e){var n=document.createElement("div");n.setAttribute("style",e.iframeContainerStyle),n.setAttribute("ignorelocizeeditor",""),n.setAttribute("translated","");var i=document.createElement("iframe");i.setAttribute("style",e.iframeStyle),i.setAttribute("ignorelocizeeditor",""),i.setAttribute("translated",""),i.setAttribute("src",t),n.appendChild(i),document.body.appendChild(n);var o=document.body.getAttribute("style");return document.body.setAttribute("style","".concat(o,"; ").concat(e.bodyStyle)),i.contentWindow}(t,this.options):this.locizeInstance=window.open(t),this.toggleUI=function(t,e,n){var i=document.createElement("div");i.setAttribute("style",'z-index: 2147483647; font-family: "Helvetica", "Arial", sans-serif; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; border: solid 1px #1976d2; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);'),i.setAttribute("ignorelocizeeditor",""),i.setAttribute("translated","");var o=document.createElement("h4");o.id="locize-title",o.innerHTML="locize editor",o.setAttribute("style",'font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; margin: 0 0 5px 0; color: #1976d2; font-weight: 300;'),o.setAttribute("ignorelocizeeditor",""),i.appendChild(o);var r=document.createElement("button");r.innerHTML="On",r.setAttribute("style","".concat(a," display: none; background-color: #54A229;")),r.onclick=e,r.setAttribute("ignorelocizeeditor",""),i.appendChild(r);var s=document.createElement("button");return s.innerHTML="Off",s.setAttribute("style","".concat(a," display: none; background-color: #D50000;")),s.onclick=t,s.setAttribute("ignorelocizeeditor",""),i.appendChild(s),document.body.appendChild(i),function(t){r.style.display=t?"block":"none",s.style.display=t?"none":"block"}}(this.on.bind(this),this.off.bind(this),this.options),this.on()},on:function(){document.body.addEventListener("click",this.handler,!0),this.toggleUI(!0),this.enabled=!0},off:function(){document.body.removeEventListener("click",this.handler,!0),this.toggleUI(!1),this.enabled=!1}}}); diff --git a/package.json b/package.json index 1814e47..f290415 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "locize-editor", - "version": "2.2.1", + "version": "2.2.2", "description": "editor plugin", "main": "./dist/cjs/locize-editor.js", "module": "./dist/esm/locize-editor.js", diff --git a/src/index.js b/src/index.js index 613e2b4..27ff09c 100644 --- a/src/index.js +++ b/src/index.js @@ -20,7 +20,7 @@ const defaultOptions = { onEditorSaved: (lng, ns) => {}, mode: getQueryVariable('locizeMode') || 'iframe', iframeContainerStyle: - 'z-index: 2147483647; position: fixed; top: 0; right: 0; bottom: 0; width: 600px; box-shadow: -3px 0 5px 0 rgba(0,0,0,0.5);', + 'z-index: 2147480000; position: fixed; top: 0; right: 0; bottom: 0; width: 600px; box-shadow: -3px 0 5px 0 rgba(0,0,0,0.5);', iframeStyle: 'height: 100%; width: 600px; border: none;', bodyStyle: 'margin-right: 605px;' }; @@ -112,7 +112,9 @@ const editor = { this.options.lngOverride || this.i18next.languages[0], ns: getElementNamespace(res, el, this.i18next), - token: this.options.hasNamespacePrefixed ? removeNamespace(res, this.i18next) : res + token: this.options.hasNamespacePrefixed + ? removeNamespace(res, this.i18next) + : res }; if (!payload.lng || payload.lng.toLowerCase() === 'cimode') payload.lng = this.i18next.options.backend.referenceLng; diff --git a/src/ui.js b/src/ui.js index dc5d402..9ae6e1e 100644 --- a/src/ui.js +++ b/src/ui.js @@ -2,7 +2,7 @@ const baseBtn = 'font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; export function initUI(on, off, options) { const cont = document.createElement("div"); - cont.setAttribute('style', 'z-index: 2001; font-family: "Helvetica", "Arial", sans-serif; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; border: solid 1px #1976d2; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);'); + cont.setAttribute('style', 'z-index: 2147483647; font-family: "Helvetica", "Arial", sans-serif; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; border: solid 1px #1976d2; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);'); cont.setAttribute('ignorelocizeeditor', ''); cont.setAttribute('translated', '');