vibe-editor 0.0.0

package/src/scripts/js/handlers/SideBarHandler.js

@@ -0,0 +1,499 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mappings_1 = require("../utils/mappings");
+const meiConverter = require("../utils/MEIConverter");
+const meiOperation = require("../utils/MEIOperations");
+const coordinates = require("../utils/coordinates");
+const cq = require("../utils/convenienceQueries");
+const mei_template_1 = require("../assets/mei_template");
+const interactjs_1 = require("interactjs");
+/**
+ * Handles all Events when interacting with the sidebar.
+ * There is only one instance necessary.
+ * Every change that results from a sidebar interaction is returned by a meiOperation
+ */
+class SidebarHandler {
+    constructor() {
+        this.changeTimeHandler = (function changeTimeHandler(e) {
+            e.preventDefault();
+            this.setTimeForSelectedElements(e);
+        }).bind(this);
+        this.keySigSelectHandler = (function keySigSelectHandler(e) {
+            e.preventDefault();
+            this.setKeyGlobal(e);
+        }).bind(this);
+        this.keyChangeHandler = (function keyChangeHandler(e) {
+            e.preventDefault();
+            this.setKeyLocal(e);
+        }).bind(this);
+        /**
+         * Handler for changing Time Signatures (+ Loading)
+         */
+        this.changeMeterHandler = (function changeMeter(e) {
+            var mei = meiOperation.changeMeter(this.currentMEI);
+            if (mei !== null) {
+                mei = meiConverter.restoreXmlIdTags(mei);
+                this.loadDataCallback("", mei, false);
+            }
+        }).bind(this);
+        this.clefChangeHandler = (function clefChangeHandler(e) {
+            e.preventDefault();
+            this.setClef(e);
+        }).bind(this);
+        this.resizeSidebarFunction = this.resizeSidebar.bind(this);
+        this.findDropTargetFunction = (function findBarline(e) {
+            e.target.removeEventListener("drag", this.findDropTargetFunction);
+            clearInterval(this.dropInterval);
+            this.dropInterval = setInterval(this.findDropTarget(e), 50);
+        }).bind(this);
+        this.dropOnTargetFunction = (function dropOnBarline(e) {
+            this.dropOnTarget(e);
+        }).bind(this);
+        //this.setListeners()
+        document.addEventListener("dragover", (e) => {
+            e.preventDefault();
+        });
+    }
+    setListeners() {
+        this.setSelectListeners();
+        //this.setChangeMeterListeners()
+        // Controll dpossible drag and drop zones on screen
+        var that = this;
+        var dragTarget = this.interactionOverlay.querySelector("#scoreRects"); //document.getElementById("vrvSVG")
+        this.interactionOverlay.addEventListener("dragleave", function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.target === dragTarget) {
+                that.removeSelectListeners();
+            }
+        }, false);
+        this.interactionOverlay.addEventListener("dragenter", function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (Array.from(dragTarget.querySelectorAll("*")).every(c => c !== event.target)) {
+                that.setSelectListeners();
+            }
+        }, false);
+        this.resizeListener = interactjs_1.default("#" + this.containerId + " #sidebarContainer")
+            .resizable({
+            edges: { left: false, right: true, bottom: false, top: false },
+            listeners: {
+                move: this.resizeSidebarFunction,
+                end(e) {
+                    var target = e.target;
+                    target.style.transition = "0.5s";
+                    target.parentElement.querySelectorAll(":scope > div:not(#sidebarContainer)").forEach(d => {
+                        var ds = d;
+                        ds.style.transition = "0.5s";
+                    });
+                }
+            }
+        });
+        return this;
+    }
+    removeListeners() {
+        this.removeSelectListeners();
+        //this.resizeListener?.unset()
+        return this;
+    }
+    removeSelectListeners() {
+        this.container.querySelectorAll("*[id*=keyList] > *").forEach(k => {
+            if (k.tagName === "A") {
+                k.removeEventListener("dblclick", this.keySigSelectHandler);
+                k.removeEventListener("click", this.keyChangeHandler);
+            }
+        });
+        this.container.querySelectorAll("*[id*=clefList] > *").forEach(k => {
+            if (k.tagName === "A") {
+                k.removeEventListener("click", this.clefChangeHandler);
+            }
+        });
+        document.removeEventListener("dragover", (e) => {
+            e.preventDefault();
+        });
+        this.container.querySelectorAll("#sidebarList a, #timeDiv").forEach(sa => {
+            sa.removeEventListener("drag", this.findDropTargetFunction);
+            sa.removeEventListener("dragend", this.dropOnTargetFunction);
+        });
+        this.container.querySelectorAll("#timeUnit, #timeCount").forEach(t => {
+            t.removeEventListener("change", this.changeTimeHandler);
+        });
+        return this;
+    }
+    resetListeners() {
+        this.removeListeners();
+        this.setListeners();
+    }
+    setSelectListeners() {
+        this.container.querySelectorAll("*[id*=keyList] > *").forEach(k => {
+            if (k.tagName === "A") {
+                k.addEventListener("dblclick", this.keySigSelectHandler);
+                k.addEventListener("click", this.keyChangeHandler);
+            }
+        });
+        this.container.querySelectorAll("*[id*=clefList] > *").forEach(k => {
+            if (k.tagName === "A") {
+                k.addEventListener("click", this.clefChangeHandler);
+            }
+        });
+        this.container.querySelectorAll("#sidebarList a, #timeDiv, #tempoDiv").forEach(sa => {
+            sa.addEventListener("drag", this.findDropTargetFunction);
+            sa.addEventListener("dragend", this.dropOnTargetFunction);
+        });
+        this.container.querySelectorAll("#timeUnit, #timeCount").forEach(t => {
+            t.addEventListener("change", this.changeTimeHandler);
+        });
+        return this;
+    }
+    /**
+     * Make Score Elements Clickable (and mark them), which are important for functions in the sidebar
+     * Has to be called externally, when new Score is Loaded
+     * @returns this
+     */
+    makeScoreElementsClickable() {
+        var that = this;
+        // Clefs are clickable and will be filled red (see css)
+        cq.getInteractOverlay(this.containerId).querySelectorAll(".clef, .keySig, .meterSig").forEach(c => {
+            //this.interactionOverlay.querySelectorAll(".clef, .keySig, .meterSig").forEach(c => {
+            //this.interactionOverlay.querySelectorAll("*").forEach(c => {
+            c.addEventListener("click", function (e) {
+                var _a, _b;
+                if (c.classList.contains("marked")) {
+                    c.classList.remove("marked");
+                    (_a = that.getElementInSVG(c.getAttribute("refId"))) === null || _a === void 0 ? void 0 : _a.classList.remove("marked");
+                }
+                else {
+                    c.classList.add("marked");
+                    (_b = that.getElementInSVG(c.getAttribute("refId"))) === null || _b === void 0 ? void 0 : _b.classList.add("marked");
+                    that.changeSelectedElementInSidebar(c);
+                }
+            });
+        });
+        return this;
+    }
+    /**
+     * Change Values in Sidebar to match the selected element in the score.
+     * Currently only for time
+     * @param element
+     */
+    changeSelectedElementInSidebar(element) {
+        if (!element.classList.contains("meterSig"))
+            return;
+        var baseEl = this.vrvSVG.querySelector("#" + element.getAttribute("refId"));
+        var tempY;
+        var count = "";
+        var unit = "";
+        baseEl.querySelectorAll("use").forEach(u => {
+            var num = mappings_1.unicodeToTimesig.get(u.getAttribute("href").slice(1, 5));
+            if (count === "") {
+                count = num;
+            }
+            else if (u.getAttribute("y") === tempY && count !== "") {
+                count += num;
+            }
+            else if (u.getAttribute("y") === tempY && unit !== "") {
+                unit += num;
+            }
+            else {
+                unit = num;
+            }
+            tempY = u.getAttribute("y");
+        });
+        this.container.querySelector("#timeCount").value = count;
+        this.container.querySelector("#timeUnit").value = unit;
+    }
+    setTimeForSelectedElements(e) {
+        var target = e.target;
+        var changeCount = false;
+        var changeUnit = false;
+        if (target.id.includes("Count")) {
+            changeCount = true;
+        }
+        if (target.id.includes("Unit")) {
+            changeUnit = true;
+        }
+        var count = this.container.querySelector("#timeCount").value;
+        var unit = this.container.querySelector("#timeUnit").value;
+        var markedTimes = Array.from(this.vrvSVG.querySelectorAll(".meterSig.marked"));
+        var reload = false;
+        markedTimes.forEach(mt => {
+            var _a;
+            var meiMt = this.currentMEI.getElementById(mt.id);
+            var isInStaffDef = this.currentMEI.querySelector("#" + mt.id) === null;
+            if (isInStaffDef) {
+                //var myRownum = parseInt(mt.closest(".staff").getAttribute("n")) - 1
+                //var rowNums = new Array()
+                this.currentMEI.querySelector("measure").querySelectorAll("staff").forEach(s => {
+                    var rowNum = parseInt(s.getAttribute("n")) - 1;
+                    var targetMeterSigDef = this.currentMEI.querySelectorAll("staffDef")[rowNum];
+                    if (targetMeterSigDef.getAttribute("meter.count") !== count && changeCount) {
+                        targetMeterSigDef.setAttribute("meter.count", count);
+                        reload = true;
+                    }
+                    if (targetMeterSigDef.getAttribute("meter.unit") !== unit && changeUnit) {
+                        targetMeterSigDef.setAttribute("meter.unit", unit);
+                        reload = true;
+                    }
+                });
+            }
+            else {
+                this.currentMEI.querySelector("#" + mt.id).setAttribute("count", count);
+                this.currentMEI.querySelector("#" + mt.id).setAttribute("unit", unit);
+                var siblingLayers = (_a = meiMt.closest("measure")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("layer");
+                var myLayer = meiMt.closest("layer");
+                siblingLayers.forEach(sl => {
+                    if (sl.id !== myLayer.id) {
+                        var ms = sl.querySelector("meterSig");
+                        if (ms === null) {
+                            ms = new mei_template_1.default().createMeterSig(count, unit);
+                            sl.firstElementChild.prepend(ms);
+                        }
+                        else {
+                            ms.setAttribute("count", count);
+                            ms.setAttribute("unit", unit);
+                        }
+                    }
+                });
+                reload = true;
+            }
+        });
+        if (reload) {
+            meiOperation.cleanUp(this.currentMEI);
+            this.loadDataCallback("", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }
+    }
+    // changeParameters by interacting with sidebar
+    setKeyGlobal(e) {
+        var target = e.target;
+        this.currentMEI.querySelectorAll("staffDef > keySig").forEach(s => {
+            s.setAttribute("sig", mappings_1.keyIdToSig.get(target.id));
+        });
+        var mei = meiOperation.adjustAccids(this.currentMEI);
+        meiOperation.cleanUp(mei);
+        mei = meiConverter.restoreXmlIdTags(mei);
+        this.loadDataCallback("", mei, false);
+        return this;
+    }
+    setKeyLocal(e) {
+        var target = e.target;
+        var markedClefs = Array.from(this.vrvSVG.querySelectorAll(".keySig.marked"));
+        var reload = false;
+        markedClefs.forEach(mc => {
+            var isInStaffDef = this.currentMEI.querySelector("#" + mc.id) === null;
+            if (isInStaffDef) {
+                var rowNum = parseInt(mc.closest(".staff").getAttribute("n")) - 1;
+                var targetKeySigDef = this.currentMEI.querySelectorAll("staffDef > keySig")[rowNum];
+                if (targetKeySigDef.getAttribute("sig") !== mappings_1.keyIdToSig.get(target.id)) {
+                    targetKeySigDef.setAttribute("sig", mappings_1.keyIdToSig.get(target.id));
+                    reload = true;
+                }
+            }
+            else {
+                this.currentMEI.querySelector("#" + mc.id).setAttribute("sig", mappings_1.keyIdToSig.get(target.id));
+                reload = true;
+            }
+        });
+        if (reload) {
+            meiOperation.cleanUp(this.currentMEI);
+            this.loadDataCallback("", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }
+    }
+    /**
+     * If Meter is already present in MEI, load it in input for time signature
+     * @returns
+     */
+    loadMeter() {
+        var staffDef = this.currentMEI.querySelector("staffDef");
+        if (staffDef !== null) {
+            var hasMeter = staffDef.getAttribute("meter.count") !== null && staffDef.getAttribute("meter.unit") !== null;
+            if (hasMeter) {
+                this.container.querySelector("#timeCount").setAttribute("value", staffDef.getAttribute("meter.count"));
+                this.container.querySelector("#timeUnit").setAttribute("value", staffDef.getAttribute("meter.unit"));
+            }
+        }
+        return this;
+    }
+    /**
+     * Listen on Change when input is changed for Time Signatures
+     */
+    setChangeMeterListeners() {
+        this.container.querySelector("#timeCount").addEventListener("change", this.changeMeterHandler);
+        this.container.querySelector("#timeUnit").addEventListener("change", this.changeMeterHandler);
+    }
+    /**
+     * Set Clefshape for all marked clefelements
+     * @param e MouseEvent
+     */
+    setClef(e) {
+        var target = e.target;
+        var markedClefs = Array.from(this.vrvSVG.querySelectorAll(".clef.marked"));
+        var reload = false;
+        markedClefs.forEach(mc => {
+            var isInStaffDef = this.currentMEI.querySelector("#" + mc.id) === null;
+            if (isInStaffDef) {
+                var rowNum = parseInt(mc.closest(".staff").getAttribute("n")) - 1;
+                var targetClefDef = this.currentMEI.querySelectorAll("staffDef > clef")[rowNum];
+                if (targetClefDef.getAttribute("shape") !== target.id.charAt(0)) {
+                    targetClefDef.setAttribute("shape", target.id.charAt(0));
+                    targetClefDef.setAttribute("line", mappings_1.clefToLine.get(target.id.charAt(0)));
+                    reload = true;
+                }
+            }
+            else {
+                this.currentMEI.querySelector("#" + mc.id).setAttribute("shape", target.id.charAt(0));
+                this.currentMEI.querySelector("#" + mc.id).setAttribute("line", mappings_1.clefToLine.get(target.id.charAt(0)));
+                reload = true;
+            }
+        });
+        if (reload) {
+            meiOperation.cleanUp(this.currentMEI);
+            this.loadDataCallback("", meiConverter.restoreXmlIdTags(this.currentMEI), false);
+        }
+    }
+    resizeSidebar(e) {
+        var that = this;
+        var target = e.target;
+        target.style.transition = "0s";
+        target.style.width = e.clientX.toString() + "px";
+        target.parentElement.querySelectorAll(":scope > div:not(#sidebarContainer)").forEach(d => {
+            var ds = d;
+            ds.style.transition = "0s";
+            ds.style.marginLeft = (target.getBoundingClientRect().right).toString() + "px";
+            ds.style.width = (that.container.getBoundingClientRect().right - target.getBoundingClientRect().right).toString() + "px";
+        });
+    }
+    findDropTarget(e) {
+        /** TODO: dropflags müssen auch in scoreRects eigegeben werden */
+        e.preventDefault();
+        var pt = coordinates.transformToDOMMatrixCoordinates(e.clientX, e.clientY, this.interactionOverlay);
+        var posx = pt.x;
+        var posy = pt.y;
+        var eventTarget = e.target;
+        var eventTargetParent = eventTarget.parentElement;
+        var eventTargetIsClef = eventTargetParent.id.toLowerCase().includes("clef");
+        var eventTargetIsKey = eventTargetParent.id.toLowerCase().includes("key");
+        var eventTargetIsTime = eventTarget.id.toLocaleLowerCase().includes("time");
+        var eventTargetIsTempo = eventTarget.id.toLocaleLowerCase().includes("tempo");
+        var dropTargets; //NodeListOf<Element>
+        var dropFlag;
+        if (eventTargetIsClef) {
+            dropTargets = Array.from(this.vrvSVG.querySelectorAll(".clef, .barLine > path"));
+            dropFlag = "dropClef";
+        }
+        else if (eventTargetIsKey) {
+            dropTargets = Array.from(this.vrvSVG.querySelectorAll(".keySig, .barLine > path, .clef"));
+            dropFlag = "dropKey";
+        }
+        else if (eventTargetIsTime) {
+            dropTargets = Array.from(this.vrvSVG.querySelectorAll(".meterSig, .barLine > path, .clef"));
+            dropFlag = "dropTime";
+        }
+        else if (eventTargetIsTempo) {
+            dropTargets = Array.from(this.vrvSVG.querySelectorAll(".note, .chord, .rest, .mRest"));
+            dropFlag = "dropTempo";
+        }
+        else {
+            return;
+        }
+        dropTargets.push(this.container.querySelector("#sidebarContainer"));
+        dropTargets.push(this.container.querySelector("#btnToolbar"));
+        dropTargets.push(this.container.querySelector("#customToolbar"));
+        var tempDist = Math.pow(10, 10);
+        dropTargets.forEach(dt => {
+            var _a;
+            var interacationElement = this.interactionOverlay.querySelector("[refId=" + dt.id + "]") || this.container.querySelector("#" + dt.id);
+            var blbbox = interacationElement.getBoundingClientRect();
+            var ptdt = coordinates.getDOMMatrixCoordinates(blbbox, this.interactionOverlay);
+            var bbx = ptdt.left;
+            var bby = ptdt.top;
+            var dist = Math.sqrt(Math.abs(bbx - posx) ** 2 + Math.abs(bby - posy) ** 2);
+            if (dist < tempDist) {
+                dropTargets.forEach(_dt => {
+                    var _a;
+                    _dt.classList.remove(dropFlag);
+                    (_a = this.getElementInInteractOverlay(_dt.id)) === null || _a === void 0 ? void 0 : _a.classList.remove(dropFlag);
+                });
+                tempDist = dist;
+                dt.classList.add(dropFlag);
+                (_a = this.getElementInInteractOverlay(dt.id)) === null || _a === void 0 ? void 0 : _a.classList.add(dropFlag);
+            }
+        });
+    }
+    /**
+     * Determine action on drop elemnt from sidebar on score
+     * @param e
+     */
+    dropOnTarget(e) {
+        var _a;
+        e.preventDefault();
+        var selectedElement = this.getElementInSVG((_a = this.interactionOverlay.querySelector(".dropClef, .dropKey, .dropTime, .dropTempo")) === null || _a === void 0 ? void 0 : _a.getAttribute("refId"));
+        var t = e.target;
+        var mei;
+        var isFirstClef = Array.from(this.vrvSVG.querySelectorAll(".measure[n=\"1\"] .clef")).some(mc => (mc === null || mc === void 0 ? void 0 : mc.id) === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id));
+        var isFirstKey = Array.from(this.vrvSVG.querySelectorAll(".measure[n=\"1\"] .keySig")).some(mc => (mc === null || mc === void 0 ? void 0 : mc.id) === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id));
+        var isFirstMeter = Array.from(this.vrvSVG.querySelectorAll(".measure[n=\"1\"] .meterSig")).some(mc => (mc === null || mc === void 0 ? void 0 : mc.id) === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id));
+        if (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.classList.contains("dropClef")) {
+            if (isFirstClef) {
+                mei = meiOperation.replaceClefinScoreDef(selectedElement, t.id, this.currentMEI);
+            }
+            else {
+                mei = meiOperation.insertClef(selectedElement, t.id, this.currentMEI);
+            }
+        }
+        else if (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.classList.contains("dropKey")) {
+            if (isFirstKey || isFirstClef) {
+                mei = meiOperation.replaceKeyInScoreDef(selectedElement, t.id, this.currentMEI);
+            }
+            else {
+                mei = meiOperation.insertKey(selectedElement, t.id, this.currentMEI);
+            }
+        }
+        else if (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.classList.contains("dropTime")) {
+            if (isFirstMeter || isFirstClef) {
+                mei = meiOperation.replaceMeterInScoreDef(selectedElement, this.currentMEI);
+            }
+            else {
+                mei = meiOperation.insertMeter(selectedElement, this.currentMEI);
+            }
+        }
+        else if (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.classList.contains("dropTempo")) {
+            mei = meiOperation.insertTempo(selectedElement, this.currentMEI);
+        }
+        else {
+            return;
+        }
+        this.loadDataCallback("", mei, false);
+    }
+    getElementInSVG(id) {
+        if (id === "")
+            return;
+        return this.vrvSVG.querySelector("#" + id);
+    }
+    getElementInInteractOverlay(id) {
+        if (id === "")
+            return;
+        return this.interactionOverlay.querySelector("*[refId=\"" + id + "\"]");
+    }
+    //////// GETTER / SETTER /////////////
+    setCurrentMei(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.container = document.getElementById(containerId);
+        this.sidebarContainer = this.container.querySelector("#sidebarContainer");
+        return this;
+    }
+}
+exports.default = SidebarHandler;

package/src/scripts/js/handlers/TooltipHandler.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+const core_1 = require("@popperjs/core");
+class TooltipHandler {
+    constructor() {
+        this.ttQuerySelector = "#btnToolbar button, #customToolbar button, #sidebarContainer a, #manipulatorCanvas svg";
+        /**
+         * Create a list of opened timeouts
+         */
+        this.enterHoverListener = (function enterHoverListener(e) {
+            this.createTooltip(e.target);
+            setTimeout(() => {
+                var _a;
+                var t = e.target;
+                var tt = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector("#" + t.getAttribute("aria-describedby"));
+                tt === null || tt === void 0 ? void 0 : tt.classList.remove("hide");
+                tt === null || tt === void 0 ? void 0 : tt.classList.add("show");
+            }, 1000);
+        }).bind(this);
+        /**
+         * Destroy tooltip on leaving element.
+         */
+        this.leaveHoverListener = (function leaveHoverListener(e) {
+            var _a;
+            var t = e.target;
+            var tt = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector("#" + t.getAttribute("aria-describedby"));
+            tt === null || tt === void 0 ? void 0 : tt.remove();
+        }).bind(this);
+        this.timeOuts = new Array();
+        this.removeListeners();
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.interactionOverlay = cq.getInteractOverlay(containerId);
+        this.vrvSVG = cq.getVrvSVG(containerId);
+        this.container = document.getElementById(containerId);
+        return this;
+    }
+    setListeners() {
+        this.setTTListeners();
+        this.resetTTListeners();
+        return this;
+    }
+    /**
+     * Create a tooltip for every button in queryselectot.
+     * Set Listeners to display TT for every element
+     */
+    setTTListeners() {
+        var _a;
+        var that = this;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.ttQuerySelector).forEach(btn => {
+            btn.addEventListener("mouseenter", that.enterHoverListener);
+            btn.addEventListener("mouseleave", that.leaveHoverListener);
+        });
+    }
+    /**
+     * Resetting TT listeners might be wanted when Elements are collapsable since position of the elements will change
+     */
+    resetTTListeners() {
+        var _a, _b;
+        var that = this;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".accordion-collapse").forEach(ac => {
+            ac.addEventListener("hidden.bs.collapse", function (e) {
+                that.removeListeners();
+                that.setTTListeners();
+            });
+            ac.addEventListener("shown.bs.collapse", function (e) {
+                that.removeListeners();
+                that.setTTListeners();
+            });
+        });
+        (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll(".manipulator").forEach(m => {
+            m.addEventListener("click", function (e) {
+                that.removeListeners();
+                that.setTTListeners();
+            });
+        });
+    }
+    /**
+     * create actual tooltip as element
+     */
+    createTooltip(el) {
+        var ttid = "tt-" + el.id + "-" + this.containerId;
+        el.setAttribute("aria-describedby", ttid);
+        var tt = document.createElement("div");
+        tt.setAttribute("role", "tooltip");
+        tt.setAttribute("id", ttid);
+        tt.textContent = el.id;
+        tt.classList.add("tooltip");
+        tt.classList.add("hide");
+        var arrow = document.createElement("div");
+        arrow.setAttribute("data-popper-arrow", "");
+        tt.append(arrow);
+        this.container.prepend(tt);
+        core_1.createPopper(el, tt, {
+            placement: 'top-start',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, -el.getBoundingClientRect().height],
+                    },
+                },
+                // {
+                //     name: 'arrow',
+                //     options: {
+                //         element: arrow,
+                //         padding: 2,
+                //     },
+                // },
+            ],
+        });
+    }
+    removeListeners() {
+        var _a, _b, _c;
+        var that = this;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.ttQuerySelector).forEach(btn => {
+            btn.removeEventListener("mouseenter", that.enterHoverListener);
+            btn.removeEventListener("mouseleave", that.leaveHoverListener);
+        });
+        (_b = this.timeOuts) === null || _b === void 0 ? void 0 : _b.forEach(to => {
+            clearTimeout(to);
+            that.timeOuts.pop();
+        });
+        (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".tooltip").forEach(tt => {
+            tt.remove();
+        });
+        return this;
+    }
+}
+exports.default = TooltipHandler;