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

package/dist/tolgee.cjs.js

@@ -913,131 +913,158 @@ exports.ModifierKey = void 0;
     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;
@@ -1089,14 +1116,7 @@ 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()];
-            }
-        }); }); });
     };
     TranslationHighlighter.prototype.getRenderer = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -1205,11 +1225,6 @@ var TranslationHighlighter = /** @class */ (function () {
     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() {
     }
@@ -1399,8 +1414,8 @@ var ElementRegistrar = /** @class */ (function () {
     };
     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;
@@ -1670,7 +1685,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
@@ -1771,7 +1786,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.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);
@@ -1871,6 +1886,18 @@ var Messages = /** @class */ (function () {
     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;
@@ -1882,13 +1909,33 @@ 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.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;
@@ -2912,7 +2959,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);
@@ -2929,6 +2976,7 @@ var DependencyService = /** @class */ (function () {
         this.stop = function () {
             _this.observer.stopObserving();
             _this.elementRegistrar.cleanAll();
+            _this.mouseEventHandler.stop();
             NodeHelper.unmarkElementAsTargetElement(_this.properties.config.targetElement);
         };
         this.translationHighlighter.pluginManager = this.pluginManager;
@@ -5634,10 +5682,12 @@ var IcuFormatter = (_a = /** @class */ (function () {
     _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;