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

package/dist/tolgee.umd.js

@@ -701,7 +701,7 @@
             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;
@@ -712,7 +712,7 @@
                 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()];
@@ -915,42 +915,35 @@
         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') {
@@ -958,88 +951,81 @@
                 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;
@@ -1091,14 +1077,11 @@
             }); })), 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 () {
@@ -1311,7 +1294,7 @@
                 !element._tolgee.wrappedWithElementOnlyKey) {
                 return;
             }
-            if (this.properties.config.mode === 'development' &&
+            if (this.properties.mode === 'development' &&
                 !this.registeredElements.has(element)) {
                 this.translationHighlighter.listen(element);
             }
@@ -1602,7 +1585,7 @@
                             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*/];
                     }
@@ -1672,7 +1655,7 @@
             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
@@ -1709,10 +1692,9 @@
             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);
@@ -1774,7 +1756,7 @@
             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);
@@ -1874,6 +1856,7 @@
         return Messages;
     }());
 
+    var BORDER_WIDTH = 5;
     var HighlightFunctionsInitializer = /** @class */ (function () {
         function HighlightFunctionsInitializer(properties) {
             this.properties = properties;
@@ -1885,13 +1868,34 @@
         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;
@@ -2915,7 +2919,7 @@
             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);
@@ -3087,6 +3091,9 @@
         };
         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 () {
@@ -3096,7 +3103,7 @@
                     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]);
@@ -3107,10 +3114,10 @@
                         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:
@@ -3165,7 +3172,7 @@
                             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();
@@ -3176,7 +3183,7 @@
             });
         };
         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 {
@@ -3198,7 +3205,7 @@
                 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;