@tolgee/core 4.4.0 → 4.6.0-rc.6a7caf3.0

package/dist/tolgee.cjs.js

@@ -699,7 +699,7 @@ var TranslationService = /** @class */ (function () {
         return TranslationService.translationByValue(message, defaultValue);
     };
     TranslationService.prototype.isFetchNeeded = function (lang) {
-        var isDevMode = this.properties.config.mode === 'development';
+        var isDevMode = this.properties.mode === 'development';
         var dataPresent = this.translationsCache.get(lang) !== undefined;
         var devFetched = Boolean(this.fetchedDev[lang]);
         return (isDevMode && !devFetched) || !dataPresent;
@@ -710,7 +710,7 @@ var TranslationService = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        isDevMode = this.properties.config.mode === 'development';
+                        isDevMode = this.properties.mode === 'development';
                         if (!isDevMode) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.fetchTranslationsDevelopment(lang)];
                     case 1: return [2 /*return*/, _a.sent()];
@@ -913,42 +913,35 @@ exports.ModifierKey = void 0;
     ModifierKey[ModifierKey["Meta"] = 3] = "Meta";
 })(exports.ModifierKey || (exports.ModifierKey = {}));
 
+var eCapture = {
+    capture: true,
+};
 var MouseEventHandler = /** @class */ (function () {
-    function MouseEventHandler(properties) {
+    function MouseEventHandler(dependencies) {
         var _this = this;
-        this.properties = properties;
+        this.dependencies = dependencies;
         this.keysDown = new Set();
-        this.mouseOn = new Set();
         this.mouseOnChanged = new EventEmitterImpl();
         this.keysChanged = new EventEmitterImpl();
-        this.onConditionsChanged = function () {
-            _this.unhighlight();
-            if (_this.areKeysDown() && _this.getMouseOn()) {
-                _this.highlight();
+        this.highlight = function (el) {
+            if (_this.highlighted !== el) {
+                _this.unhighlight();
+                if (el) {
+                    el._tolgee.preventClean = true;
+                    el._tolgee.highlight();
+                    _this.highlighted = el;
+                    _this.mouseOnChanged.emit(el);
+                }
             }
         };
-        this.highlight = function () {
-            _this.getMouseOn()._tolgee.highlight();
-            _this.highlighted = _this.getMouseOn();
-        };
         this.unhighlight = function () {
             if (_this.highlighted) {
+                _this.highlighted._tolgee.preventClean = false;
                 _this.highlighted._tolgee.unhighlight();
-                _this.highlighted = null;
+                _this.highlighted = undefined;
+                _this.mouseOnChanged.emit(_this.highlighted);
             }
         };
-        this.onMouseOut = function (element) {
-            element._tolgee.preventClean = false;
-            _this.mouseOn.delete(element);
-            _this.mouseOnChanged.emit(_this.getMouseOn());
-        };
-        this.onMouseOver = function (element) {
-            _this.filterMouseOn();
-            element._tolgee.preventClean = true;
-            _this.mouseOn.delete(element); //to get in to last place
-            _this.mouseOn.add(element);
-            _this.mouseOnChanged.emit(_this.getMouseOn());
-        };
     }
     MouseEventHandler.prototype.run = function () {
         if (typeof window !== 'undefined') {
@@ -956,88 +949,81 @@ var MouseEventHandler = /** @class */ (function () {
             return;
         }
     };
-    MouseEventHandler.prototype.handle = function (element, onclick) {
-        var _this = this;
-        if (element._tolgee.listeningForHighlighting) {
-            // eslint-disable-next-line no-console
-            console.error('Element is already listening mouse events! This is probably bug in tolgee');
-            return;
+    MouseEventHandler.prototype.updateHighlight = function () {
+        var position = this.cursorPosition;
+        var newHighlighted;
+        if (position && this.areKeysDown()) {
+            newHighlighted = this.getClosestTolgeeElement(document.elementFromPoint(position.x, position.y));
         }
-        element._tolgee.listeningForHighlighting = true;
-        this.initEventListeners(element, onclick);
-        this.mouseOnChanged.subscribe(function () {
-            if (_this.highlighted !== _this.getMouseOn()) {
-                _this.onConditionsChanged();
-            }
-        });
-        this.keysChanged.subscribe(function () {
-            _this.onConditionsChanged();
-        });
+        this.highlight(newHighlighted);
+    };
+    MouseEventHandler.prototype.updateCursorPosition = function (position) {
+        this.cursorPosition = position;
+        this.updateHighlight();
     };
-    MouseEventHandler.prototype.initEventListeners = function (element, onclick) {
+    MouseEventHandler.prototype.initKeyListener = function () {
         var _this = this;
-        var onMouseOver = function () { return _this.onMouseOver(element); };
-        var onMouseOut = function () { return _this.onMouseOut(element); };
-        var onClick = function (e) {
-            if (_this.areKeysDown() && _this.highlighted === e.currentTarget) {
-                e.stopPropagation();
-                e.preventDefault();
-                onclick(e);
-            }
-        };
-        element.addEventListener('mouseover', onMouseOver);
-        element.addEventListener('click', onClick, { capture: true });
-        var onMouseDownOrUp = function (e) {
+        var defaultEventBlock = function (e) {
             if (_this.areKeysDown()) {
                 e.stopPropagation();
                 e.preventDefault();
             }
         };
-        element.addEventListener('mousedown', onMouseDownOrUp);
-        element.addEventListener('mouseup', onMouseDownOrUp);
-        element.addEventListener('mouseout', onMouseOut);
-        element._tolgee.removeAllEventListeners = function () {
-            element.removeEventListener('mousedown', onMouseDownOrUp);
-            element.removeEventListener('mouseup', onMouseDownOrUp);
-            element.removeEventListener('mouseover', onMouseOver);
-            element.removeEventListener('click', onClick, { capture: true });
-            element.removeEventListener('mouseout', onMouseOut);
-        };
-    };
-    MouseEventHandler.prototype.getMouseOn = function () {
-        var mouseOnArray = Array.from(this.mouseOn);
-        return mouseOnArray.length ? mouseOnArray[0] : undefined;
-    };
-    MouseEventHandler.prototype.initKeyListener = function () {
-        var _this = this;
-        window.addEventListener('blur', function () {
+        document.addEventListener('blur', function () {
             _this.keysDown = new Set();
             _this.keysChanged.emit(_this.areKeysDown());
-        });
-        window.addEventListener('keydown', function (e) {
+            _this.updateHighlight();
+        }, eCapture);
+        document.addEventListener('keydown', function (e) {
             var modifierKey = exports.ModifierKey[e.key];
             if (modifierKey !== undefined) {
                 _this.keysDown.add(modifierKey);
                 _this.keysChanged.emit(_this.areKeysDown());
             }
-        });
-        window.addEventListener('keyup', function (e) {
+            _this.updateHighlight();
+        }, eCapture);
+        document.addEventListener('keyup', function (e) {
             _this.keysDown.delete(exports.ModifierKey[e.key]);
             _this.keysChanged.emit(_this.areKeysDown());
-        });
-    };
-    MouseEventHandler.prototype.filterMouseOn = function () {
-        var _this = this;
-        this.mouseOn.forEach(function (el) {
-            if (!document.contains(el)) {
-                _this.mouseOn.delete(el);
+            _this.updateHighlight();
+        }, eCapture);
+        document.addEventListener('mousemove', function (e) {
+            _this.updateCursorPosition({ x: e.clientX, y: e.clientY });
+        }, { passive: true, capture: true });
+        document.addEventListener('mouseenter', defaultEventBlock, eCapture);
+        document.addEventListener('mouseover', defaultEventBlock, eCapture);
+        document.addEventListener('mouseout', defaultEventBlock, eCapture);
+        document.addEventListener('mouseleave', defaultEventBlock, eCapture);
+        document.addEventListener('mousedown', defaultEventBlock, eCapture);
+        document.addEventListener('mouseup', defaultEventBlock, eCapture);
+        document.addEventListener('scroll', function () {
+            var _a;
+            (_a = _this.highlighted) === null || _a === void 0 ? void 0 : _a._tolgee.highlight();
+        }, { capture: true, passive: true });
+        document.addEventListener('click', function (e) {
+            defaultEventBlock(e);
+            if (_this.areKeysDown()) {
+                var element = _this.getClosestTolgeeElement(e.target);
+                if (element && element === _this.highlighted) {
+                    _this.dependencies.translationHighlighter.translationEdit(e, element);
+                    _this.unhighlight();
+                }
             }
-        });
+        }, eCapture);
+    };
+    MouseEventHandler.prototype.getClosestTolgeeElement = function (element) {
+        if (element === null || element === void 0 ? void 0 : element._tolgee) {
+            return element;
+        }
+        if (element === null || element === void 0 ? void 0 : element.parentElement) {
+            return this.getClosestTolgeeElement(element.parentElement);
+        }
+        return undefined;
     };
     MouseEventHandler.prototype.areKeysDown = function () {
         var e_1, _a;
         try {
-            for (var _b = __values(this.properties.config.highlightKeys), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.dependencies.properties.config.highlightKeys), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var key = _c.value;
                 if (!this.keysDown.has(key)) {
                     return false;
@@ -1089,14 +1075,11 @@ var TranslationHighlighter = /** @class */ (function () {
         }); })), false); }, []);
     };
     TranslationHighlighter.prototype.listen = function (element) {
-        var _this = this;
         this.dependencies.highlightFunctionInitializer.initFunctions(element);
-        this.dependencies.mouseEventHandler.handle(element, function (e) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, this.translationEdit(e, element)];
-                case 1: return [2 /*return*/, _a.sent()];
-            }
-        }); }); });
+        // this.dependencies.mouseEventHandler.handle(
+        //   element,
+        //   async (e) => await this.translationEdit(e, element)
+        // );
     };
     TranslationHighlighter.prototype.getRenderer = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -1309,7 +1292,7 @@ var ElementRegistrar = /** @class */ (function () {
             !element._tolgee.wrappedWithElementOnlyKey) {
             return;
         }
-        if (this.properties.config.mode === 'development' &&
+        if (this.properties.mode === 'development' &&
             !this.registeredElements.has(element)) {
             this.translationHighlighter.listen(element);
         }
@@ -1600,7 +1583,7 @@ var CoreService = /** @class */ (function () {
                         console.error(e_1);
                         // eslint-disable-next-line no-console
                         console.error('Error getting scopes. Trying to switch to production mode!');
-                        this.properties.config.mode = 'production';
+                        this.properties.mode = 'production';
                         return [3 /*break*/, 3];
                     case 3: return [2 /*return*/];
                 }
@@ -1670,7 +1653,7 @@ var TolgeeConfig = /** @class */ (function () {
         this.highlightKeys = [exports.ModifierKey.Alt];
         this.passToParent = ['option', 'optgroup'];
         this.restrictedElements = ['script', 'style'];
-        this.highlightColor = 'rgb(224 240 255)';
+        this.highlightColor = 'rgb(255, 0, 0)';
         this.wrapperMode = 'text';
         /**
          * When true, fallback language will be preloaded on Tolgee.run
@@ -1707,10 +1690,9 @@ var TolgeeConfig = /** @class */ (function () {
         if (this._targetElement === undefined) {
             this._targetElement = DEFAULT_TARGET_ELEMENT_SUPPLIER();
         }
-        this.mode = this.mode || (this.apiKey ? 'development' : 'production');
         this.fallbackLanguage = this.fallbackLanguage || this.defaultLanguage;
         if (this.watch === undefined) {
-            this.watch = this.mode === 'development';
+            this.watch = Boolean(this.apiKey && this.apiUrl);
         }
         if (this.availableLanguages === undefined && this.staticData) {
             this.availableLanguages = Object.keys(this.staticData);
@@ -1772,7 +1754,7 @@ var PluginManager = /** @class */ (function () {
         this.handshake = function () {
             var sharedConfiguration = __assign(__assign({}, _this.properties), { config: __assign(__assign({}, _this.properties.config), { 
                     //remove properties, which cannot be sent by window.postMessage
-                    staticData: undefined, targetElement: undefined, _targetElement: undefined, ui: undefined }), uiPresent: Boolean(_this.properties.config.ui), uiVersion: "4.4.0" });
+                    staticData: undefined, targetElement: undefined, _targetElement: undefined, ui: undefined }), uiPresent: Boolean(_this.properties.config.ui), uiVersion: "4.6.0-rc.6a7caf3.0" });
             var timer = null;
             var ping = function () {
                 _this.messages.send('TOLGEE_READY', sharedConfiguration);
@@ -1872,6 +1854,7 @@ var Messages = /** @class */ (function () {
     return Messages;
 }());
 
+var BORDER_WIDTH = 5;
 var HighlightFunctionsInitializer = /** @class */ (function () {
     function HighlightFunctionsInitializer(properties) {
         this.properties = properties;
@@ -1883,13 +1866,34 @@ var HighlightFunctionsInitializer = /** @class */ (function () {
     HighlightFunctionsInitializer.prototype.initHighlightFunction = function (element) {
         var _this = this;
         element._tolgee.highlight = function () {
-            element._tolgee.initialBackgroundColor = element.style.backgroundColor;
-            element.style.backgroundColor = _this.properties.config.highlightColor;
+            if (!element.isConnected) {
+                return;
+            }
+            var highlightEl = element._tolgee.highlightEl;
+            if (!highlightEl) {
+                highlightEl = document.createElement('div');
+                highlightEl.style.pointerEvents = 'none';
+                highlightEl.style.border = "".concat(BORDER_WIDTH, "px solid ").concat(_this.properties.config.highlightColor);
+                highlightEl.style.position = 'fixed';
+                highlightEl.style.boxSizing = 'border-box';
+                highlightEl.style.zIndex = String(Number.MAX_SAFE_INTEGER);
+                highlightEl.style.contain = 'layout';
+                element._tolgee.highlightEl = highlightEl;
+                document.body.appendChild(highlightEl);
+            }
+            var shape = element.getBoundingClientRect();
+            highlightEl.style.top = shape.top - BORDER_WIDTH + 'px';
+            highlightEl.style.left = shape.left - BORDER_WIDTH + 'px';
+            highlightEl.style.width = shape.width + 2 * BORDER_WIDTH + 'px';
+            highlightEl.style.height = shape.height + 2 * BORDER_WIDTH + 'px';
+            highlightEl.style.display = 'block';
         };
     };
     HighlightFunctionsInitializer.prototype.initUnhighlightFunction = function (element) {
         element._tolgee.unhighlight = function () {
-            element.style.backgroundColor = element._tolgee.initialBackgroundColor;
+            var _a;
+            (_a = element._tolgee.highlightEl) === null || _a === void 0 ? void 0 : _a.remove();
+            element._tolgee.highlightEl = null;
         };
     };
     return HighlightFunctionsInitializer;
@@ -2913,7 +2917,7 @@ var DependencyService = /** @class */ (function () {
         this.properties = new Properties();
         this.eventService = new EventService();
         this.apiHttpService = new ApiHttpService(this.properties);
-        this.mouseEventHandler = new MouseEventHandler(this.properties);
+        this.mouseEventHandler = new MouseEventHandler(this);
         this.moduleService = new ModuleService();
         this.coreService = new CoreService(this.properties, this.apiHttpService);
         this.screenshotService = new ScreenshotService(this.coreService, this.apiHttpService);
@@ -3085,6 +3089,9 @@ var Tolgee = /** @class */ (function () {
     };
     Tolgee.prototype.init = function (config) {
         this.dependencyService.init(config);
+        var _a = this.dependencyService.properties.config, apiKey = _a.apiKey, apiUrl = _a.apiUrl;
+        this.dependencyService.properties.mode =
+            apiKey && apiUrl ? 'development' : 'production';
         return this;
     };
     Tolgee.prototype.run = function () {
@@ -3094,7 +3101,7 @@ var Tolgee = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         this.dependencyService.run();
-                        if (!(this.properties.config.mode === 'development')) return [3 /*break*/, 4];
+                        if (!(this.properties.mode === 'development')) return [3 /*break*/, 4];
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
@@ -3105,10 +3112,10 @@ var Tolgee = /** @class */ (function () {
                     case 3:
                         e_1 = _a.sent();
                         // eslint-disable-next-line no-console
-                        console.error("Couldn't connect to tolgee");
+                        console.error("Couldn't connect to Tolgee");
                         // eslint-disable-next-line no-console
                         console.error(e_1);
-                        this.properties.config.mode = 'production';
+                        this.properties.mode = 'production';
                         return [3 /*break*/, 4];
                     case 4: return [4 /*yield*/, this.dependencyService.translationService.loadTranslations()];
                     case 5:
@@ -3163,7 +3170,7 @@ var Tolgee = /** @class */ (function () {
                         return [4 /*yield*/, this.dependencyService.textService.translate(key, params, undefined, orEmpty, defaultValue)];
                     case 1:
                         translation = _a.sent();
-                        if (!(this.properties.config.mode === 'development' && !noWrap)) return [3 /*break*/, 3];
+                        if (!(this.properties.mode === 'development' && !noWrap)) return [3 /*break*/, 3];
                         return [4 /*yield*/, this.coreService.loadApiKeyDetails()];
                     case 2:
                         _a.sent();
@@ -3174,7 +3181,7 @@ var Tolgee = /** @class */ (function () {
         });
     };
     Tolgee.prototype.wrap = function (key, params, defaultValue, translation) {
-        if (this.properties.config.mode === 'development') {
+        if (this.properties.mode === 'development') {
             return this.dependencyService.wrapper.wrap(key, params, defaultValue, translation);
         }
         else {
@@ -3196,7 +3203,7 @@ var Tolgee = /** @class */ (function () {
             orEmpty = props.orEmpty !== undefined ? props.orEmpty : orEmpty;
         }
         var translation = this.dependencyService.textService.instant(key, params, undefined, orEmpty, defaultValue);
-        if (this.properties.config.mode === 'development' && !noWrap) {
+        if (this.properties.mode === 'development' && !noWrap) {
             return this.dependencyService.wrapper.wrap(key, params, defaultValue, translation);
         }
         return translation;