@tolgee/core 4.5.0 → 4.6.0-rc.30a9509.0

package/dist/tolgee.umd.js

@@ -915,131 +915,158 @@
         ModifierKey[ModifierKey["Meta"] = 3] = "Meta";
     })(exports.ModifierKey || (exports.ModifierKey = {}));
 
+    var RESTRICTED_ASCENDANT_ATTRIBUTE = 'data-tolgee-restricted';
+    var TOLGEE_ATTRIBUTE_NAME = '_tolgee';
+    var TOLGEE_TARGET_ATTRIBUTE = '_tolgee-target';
+    var TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = 'data-tolgee-key-only';
+    var TOLGEE_HIGHLIGHTER_CLASS = '_tolgee-highlighter';
+    // needs to be same as in @tolgee/ui package
+    var DEVTOOLS_ID = '__tolgee_dev_tools';
+
+    var eCapture = {
+        capture: true,
+    };
+    var ePassive = {
+        capture: true,
+        passive: 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.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') {
-                this.initKeyListener();
-                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;
-            }
-            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();
-            });
-        };
-        MouseEventHandler.prototype.initEventListeners = function (element, onclick) {
-            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);
+                    _this.highlighted = undefined;
+                    _this.mouseOnChanged.emit(_this.highlighted);
                 }
             };
-            element.addEventListener('mouseover', onMouseOver);
-            element.addEventListener('click', onClick, { capture: true });
-            var onMouseDownOrUp = function (e) {
-                if (_this.areKeysDown()) {
+            this.blockEvents = function (e) {
+                if (_this.areKeysDown() && !_this.isInUiDialog(e.target)) {
                     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);
+            this.onMouseMove = function (e) {
+                _this.updateCursorPosition({ x: e.clientX, y: e.clientY });
             };
-        };
-        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 () {
+            this.onBlur = function () {
                 _this.keysDown = new Set();
                 _this.keysChanged.emit(_this.areKeysDown());
-            });
-            window.addEventListener('keydown', function (e) {
+                _this.updateHighlight();
+            };
+            this.onKeyDown = 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();
+            };
+            this.onKeyUp = 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();
+            };
+            this.onScroll = function () {
+                var _a;
+                (_a = _this.highlighted) === null || _a === void 0 ? void 0 : _a._tolgee.highlight();
+            };
+            this.onClick = function (e) {
+                _this.blockEvents(e);
+                if (_this.areKeysDown()) {
+                    var element = _this.getClosestTolgeeElement(e.target);
+                    if (element && element === _this.highlighted) {
+                        _this.dependencies.translationHighlighter.translationEdit(e, element);
+                        _this.unhighlight();
+                    }
                 }
-            });
+            };
+        }
+        MouseEventHandler.prototype.run = function () {
+            if (typeof window !== 'undefined') {
+                this.initEventListeners();
+            }
+        };
+        MouseEventHandler.prototype.stop = function () {
+            if (typeof window !== 'undefined') {
+                this.removeEventListeners();
+            }
+        };
+        MouseEventHandler.prototype.updateHighlight = function () {
+            var position = this.cursorPosition;
+            var newHighlighted;
+            if (position && this.areKeysDown()) {
+                newHighlighted = this.getClosestTolgeeElement(document.elementFromPoint(position.x, position.y));
+            }
+            this.highlight(newHighlighted);
+        };
+        MouseEventHandler.prototype.updateCursorPosition = function (position) {
+            this.cursorPosition = position;
+            this.updateHighlight();
+        };
+        MouseEventHandler.prototype.initEventListeners = function () {
+            window.addEventListener('blur', this.onBlur, eCapture);
+            window.addEventListener('keydown', this.onKeyDown, eCapture);
+            window.addEventListener('keyup', this.onKeyUp, eCapture);
+            window.addEventListener('mousemove', this.onMouseMove, ePassive);
+            window.addEventListener('scroll', this.onScroll, ePassive);
+            window.addEventListener('click', this.onClick, eCapture);
+            window.addEventListener('mouseenter', this.blockEvents, eCapture);
+            window.addEventListener('mouseover', this.blockEvents, eCapture);
+            window.addEventListener('mouseout', this.blockEvents, eCapture);
+            window.addEventListener('mouseleave', this.blockEvents, eCapture);
+            window.addEventListener('mousedown', this.blockEvents, eCapture);
+            window.addEventListener('mouseup', this.blockEvents, eCapture);
+        };
+        MouseEventHandler.prototype.removeEventListeners = function () {
+            window.removeEventListener('blur', this.onBlur, eCapture);
+            window.removeEventListener('keydown', this.onKeyDown, eCapture);
+            window.removeEventListener('keyup', this.onKeyUp, eCapture);
+            window.removeEventListener('mousemove', this.onMouseMove, ePassive);
+            window.removeEventListener('scroll', this.onScroll, ePassive);
+            window.removeEventListener('click', this.onClick, eCapture);
+            window.removeEventListener('mouseenter', this.blockEvents, eCapture);
+            window.removeEventListener('mouseover', this.blockEvents, eCapture);
+            window.removeEventListener('mouseout', this.blockEvents, eCapture);
+            window.removeEventListener('mouseleave', this.blockEvents, eCapture);
+            window.removeEventListener('mousedown', this.blockEvents, eCapture);
+            window.removeEventListener('mouseup', this.blockEvents, eCapture);
+        };
+        MouseEventHandler.prototype.isInUiDialog = function (element) {
+            return Boolean(this.findAncestor(element, function (el) { return el.id === DEVTOOLS_ID; }));
+        };
+        MouseEventHandler.prototype.getClosestTolgeeElement = function (element) {
+            return this.findAncestor(element, function (el) { return el === null || el === void 0 ? void 0 : el._tolgee; });
+        };
+        MouseEventHandler.prototype.findAncestor = function (element, func) {
+            if (func(element)) {
+                return element;
+            }
+            if (element === null || element === void 0 ? void 0 : element.parentElement) {
+                return this.findAncestor(element.parentElement, func);
+            }
+            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 +1118,7 @@
             }); })), 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()];
-                }
-            }); }); });
         };
         TranslationHighlighter.prototype.getRenderer = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -1207,11 +1227,6 @@
         return TranslationHighlighter;
     }());
 
-    var RESTRICTED_ASCENDANT_ATTRIBUTE = 'data-tolgee-restricted';
-    var TOLGEE_ATTRIBUTE_NAME = '_tolgee';
-    var TOLGEE_TARGET_ATTRIBUTE = '_tolgee-target';
-    var TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = 'data-tolgee-key-only';
-
     var NodeHelper = /** @class */ (function () {
         function NodeHelper() {
         }
@@ -1401,8 +1416,8 @@
         };
         ElementRegistrar.prototype.cleanElement = function (element) {
             if (!element._tolgee.preventClean) {
-                if (typeof element._tolgee.removeAllEventListeners === 'function') {
-                    element._tolgee.removeAllEventListeners();
+                if (element._tolgee.highlightEl) {
+                    element._tolgee.unhighlight();
                 }
                 element.removeAttribute(TOLGEE_ATTRIBUTE_NAME);
                 delete element._tolgee;
@@ -1672,7 +1687,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 +1788,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.30a9509.0" });
                 var timer = null;
                 var ping = function () {
                     _this.messages.send('TOLGEE_READY', sharedConfiguration);
@@ -1873,6 +1888,18 @@
         return Messages;
     }());
 
+    var BORDER_WIDTH = 5;
+    var HIGHLIGHTER_BASE_STYLE = {
+        pointerEvents: 'none',
+        position: 'fixed',
+        boxSizing: 'content-box',
+        zIndex: String(Number.MAX_SAFE_INTEGER),
+        contain: 'layout',
+        display: 'block',
+        borderWidth: BORDER_WIDTH + 'px',
+        borderStyle: 'solid',
+        borderRadius: '4px',
+    };
     var HighlightFunctionsInitializer = /** @class */ (function () {
         function HighlightFunctionsInitializer(properties) {
             this.properties = properties;
@@ -1884,13 +1911,33 @@
         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.classList.add(TOLGEE_HIGHLIGHTER_CLASS);
+                    Object.entries(HIGHLIGHTER_BASE_STYLE).forEach(function (_a) {
+                        var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                        highlightEl.style[key] = value;
+                    });
+                    highlightEl.style.borderColor = _this.properties.config.highlightColor;
+                    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 + 'px';
+                highlightEl.style.height = shape.height + 'px';
             };
         };
         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 +2961,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);
@@ -2931,6 +2978,7 @@
             this.stop = function () {
                 _this.observer.stopObserving();
                 _this.elementRegistrar.cleanAll();
+                _this.mouseEventHandler.stop();
                 NodeHelper.unmarkElementAsTargetElement(_this.properties.config.targetElement);
             };
             this.translationHighlighter.pluginManager = this.pluginManager;
@@ -5636,10 +5684,12 @@
         _a.type = 'formatter',
         _a);
 
+    exports.DEVTOOLS_ID = DEVTOOLS_ID;
     exports.IcuFormatter = IcuFormatter;
     exports.NodeHelper = NodeHelper;
     exports.RESTRICTED_ASCENDANT_ATTRIBUTE = RESTRICTED_ASCENDANT_ATTRIBUTE;
     exports.TOLGEE_ATTRIBUTE_NAME = TOLGEE_ATTRIBUTE_NAME;
+    exports.TOLGEE_HIGHLIGHTER_CLASS = TOLGEE_HIGHLIGHTER_CLASS;
     exports.TOLGEE_TARGET_ATTRIBUTE = TOLGEE_TARGET_ATTRIBUTE;
     exports.TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE;
     exports.TextHelper = TextHelper;