@tolgee/core 4.5.0 → 4.6.0-rc.2e9d3c7.0

package/dist/tolgee.umd.js

@@ -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,82 @@
                 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) {
+                defaultEventBlock(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 +1078,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 () {
@@ -1672,7 +1656,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
@@ -1773,7 +1757,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.5.0" });
+                        staticData: undefined, targetElement: undefined, _targetElement: undefined, ui: undefined }), uiPresent: Boolean(_this.properties.config.ui), uiVersion: "4.6.0-rc.2e9d3c7.0" });
                 var timer = null;
                 var ping = function () {
                     _this.messages.send('TOLGEE_READY', sharedConfiguration);
@@ -1873,6 +1857,7 @@
         return Messages;
     }());
 
+    var BORDER_WIDTH = 5;
     var HighlightFunctionsInitializer = /** @class */ (function () {
         function HighlightFunctionsInitializer(properties) {
             this.properties = properties;
@@ -1884,13 +1869,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;
@@ -2914,7 +2920,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);