vibe-editor 0.0.0

package/src/scripts/js/handlers/WindowHandler.js

@@ -0,0 +1,257 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cq = require("../utils/convenienceQueries");
+const meiConverter = require("../utils/MEIConverter");
+class WindowHandler {
+    constructor() {
+        /**
+         * Update all elements that are affected by a window size change
+         */
+        this.scrollingTimer = new Array();
+        this.updateFunction = this.update.bind(this);
+        /**
+         * Reload svg when registered events ended
+         */
+        this.reloadTimer = new Array();
+        this.reloadSVGFunction = this.reloadSVG.bind(this);
+        this.toggleCTRLFunction = this.toggleCTRL.bind(this);
+        this.deltaTemp = 1;
+        this.zoomTimer = new Array();
+        this.wheelZoomFunction = this.wheelZoom.bind(this);
+        this.clickZoomFunction = this.clickZoom.bind(this);
+        this.cacheContainerAttrFunction = this.cacheContainerAttr.bind(this);
+        this.loadContainerAttrFunction = this.loadContainerAttr.bind(this);
+        this.ctrlPressed = false;
+        this.w = window;
+        while (this.w !== this.w.parent) {
+            this.w = this.w.parent;
+        }
+    }
+    setListeners() {
+        this.eventContainer = this.container;
+        window.addEventListener("scroll", this.updateFunction);
+        //window.addEventListener("resize", this.update)
+        this.w.addEventListener("resize", this.reloadSVGFunction);
+        this.w.addEventListener("deviceorientation", this.updateFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.updateFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("transitionend", this.reloadSVGFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.updateFunction);
+        this.eventContainer.querySelector("#sidebarContainer").addEventListener("resizemove", this.reloadSVGFunction);
+        this.vrvSVG.addEventListener("scroll", this.updateFunction);
+        //this.vrvSVG.addEventListener("resize", this.update)
+        this.vrvSVG.addEventListener("deviceorientation", this.updateFunction);
+        document.addEventListener("fullscreenchange", this.updateFunction);
+        this.eventContainer.addEventListener("wheel", this.wheelZoomFunction);
+        this.eventContainer.querySelectorAll("#zoomGroup > button").forEach(b => b.addEventListener("click", this.clickZoomFunction));
+        document.addEventListener("keydown", this.toggleCTRLFunction);
+        document.addEventListener("keyup", this.toggleCTRLFunction);
+        this.eventContainer.addEventListener("loadingStart", this.cacheContainerAttrFunction);
+        this.eventContainer.addEventListener("loadingEnd", this.loadContainerAttrFunction);
+        return this;
+    }
+    removeListeners() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        window.removeEventListener("scroll", this.updateFunction);
+        this.w.removeEventListener("resize", this.updateFunction);
+        this.w.removeEventListener("resize", this.reloadSVGFunction);
+        this.w.removeEventListener("deviceorientation", this.updateFunction);
+        (_a = this.eventContainer) === null || _a === void 0 ? void 0 : _a.querySelector("#sidebarContainer").removeEventListener("transitionend", this.updateFunction);
+        (_b = this.eventContainer) === null || _b === void 0 ? void 0 : _b.querySelector("#sidebarContainer").removeEventListener("transitionend", this.reloadSVGFunction);
+        (_c = this.eventContainer) === null || _c === void 0 ? void 0 : _c.querySelector("#sidebarContainer").removeEventListener("resizemove", this.updateFunction);
+        (_d = this.eventContainer) === null || _d === void 0 ? void 0 : _d.querySelector("#sidebarContainer").removeEventListener("resizemove", this.reloadSVGFunction);
+        this.vrvSVG.removeEventListener("scroll", this.updateFunction);
+        //this.vrvSVG.removeEventListener("resize", this.update)
+        this.vrvSVG.removeEventListener("deviceorientation", this.updateFunction);
+        document.removeEventListener("fullscreenchange", this.updateFunction);
+        (_e = this.eventContainer) === null || _e === void 0 ? void 0 : _e.removeEventListener("wheel", this.wheelZoomFunction);
+        (_f = this.eventContainer) === null || _f === void 0 ? void 0 : _f.querySelectorAll("#zoomGroup > button").forEach(b => b.removeEventListener("click", this.clickZoomFunction));
+        document.removeEventListener("keydown", this.toggleCTRLFunction);
+        document.removeEventListener("keyup", this.toggleCTRLFunction);
+        (_g = this.eventContainer) === null || _g === void 0 ? void 0 : _g.removeEventListener("loadingStart", this.cacheContainerAttrFunction);
+        (_h = this.eventContainer) === null || _h === void 0 ? void 0 : _h.removeEventListener("loadingEnd", this.loadContainerAttrFunction);
+        return this;
+    }
+    update(e) {
+        var _a;
+        // special rule for transition events since so much with different propertynames are fired
+        if (e instanceof TransitionEvent) {
+            if (!e.propertyName.includes("width"))
+                return;
+        }
+        var that = this;
+        (_a = this.scrollingTimer) === null || _a === void 0 ? void 0 : _a.forEach(s => clearTimeout(s));
+        this.scrollingTimer.push(setTimeout(function () {
+            var _a, _b, _c, _d;
+            that.updateXY();
+            (_a = that.m2s) === null || _a === void 0 ? void 0 : _a.update();
+            (_b = that.annotations) === null || _b === void 0 ? void 0 : _b.updateCanvas();
+            (_d = (_c = that.insertModeHandler) === null || _c === void 0 ? void 0 : _c.getPhantomNoteHandler()) === null || _d === void 0 ? void 0 : _d.resetCanvas();
+            that.scrollingTimer = new Array();
+        }, 500));
+    }
+    reloadSVG(e) {
+        var _a;
+        var t = e.target;
+        var that = this;
+        (_a = this.reloadTimer) === null || _a === void 0 ? void 0 : _a.forEach(r => clearTimeout(r));
+        if (t.id === "sidebarContainer" && !(e.propertyName.includes("width"))) {
+            // Timeout is needed to ensure, that transition has been completed and in eventphase 0
+            // Must be a slighty longer than transitiontime
+            this.reloadTimer.push(setTimeout(function () {
+                that.updateXY();
+                var mei = meiConverter.restoreXmlIdTags(that.currentMEI);
+                that.loadDataCallback("", mei, false);
+                that.reloadTimer = new Array();
+            }, e.elapsedTime * 1000 + 10));
+        }
+        else if (e.type === "resize" || e.type === "resizemove") {
+            this.reloadTimer.push(setTimeout(function () {
+                that.updateXY();
+                var mei = meiConverter.restoreXmlIdTags(that.currentMEI);
+                that.loadDataCallback("", mei, false);
+                that.reloadTimer = new Array();
+            }, 500));
+        }
+    }
+    /**
+     * Toggle ctrl or meta button. Is used to activte zoom function
+     * @param e
+     */
+    toggleCTRL(e) {
+        if (e.key === "Meta" || e.key === "Control") {
+            if (e.type === "keydown") {
+                this.ctrlPressed = true;
+            }
+            else {
+                this.ctrlPressed = false;
+            }
+        }
+    }
+    /**
+     * Zoom according to movement of mouse wheel (also applies to two finger scroll gesture on trackpad).
+     * Can only be executed when container is active Element and when ctrl/meta is pressed.
+     * The scale is accumulated with every call of this method.
+     * @param e
+     * @returns
+     */
+    wheelZoom(e) {
+        this.updateXY();
+        if (!cq.hasActiveElement(this.containerId))
+            return;
+        if (!this.ctrlPressed)
+            return;
+        e.preventDefault();
+        this.deltaTemp = this.deltaTemp + e.deltaY / 1000;
+        this.zoomSVG(this.deltaTemp);
+    }
+    /**
+     * Zoom when Zoombuttons are clicked (In div #zoomGroup).
+     *
+     * @param e
+     */
+    clickZoom(e) {
+        var t = e.target;
+        if (t.id === "zoomInBtn") {
+            this.deltaTemp = this.deltaTemp + 100 / 1000;
+        }
+        else if (t.id === "zoomOutBtn") {
+            this.deltaTemp = this.deltaTemp - 100 / 1000;
+        }
+        this.zoomSVG(this.deltaTemp);
+    }
+    /**
+     * General zoom logic for all top level svgs (interactionOverlay + vrvSVG (= rendered score by verovio))
+     * @param delta
+     */
+    zoomSVG(delta) {
+        var _a;
+        var that = this;
+        // ensure that with every call of all obsolete timeouts are deleted so that only one is left to be executed
+        (_a = this.zoomTimer) === null || _a === void 0 ? void 0 : _a.forEach(zt => clearTimeout(zt));
+        this.zoomTimer.push(setTimeout(function () {
+            var svgContainer = cq.getContainer(that.containerId).querySelector("#svgContainer");
+            svgContainer.style.width = (100 * delta).toString() + "%";
+        }, 10));
+    }
+    /**
+     * Cache container attributes that need to be loaded after the score is loaded.
+     * - Scorllpositions of the containers
+     *
+     * Listens to "loadStart" Event in Core class
+     * @param e Event
+     */
+    cacheContainerAttr(e) {
+        this.divScrolls = new Map();
+        var container = document.getElementById(this.containerId);
+        container.querySelectorAll(":scope div").forEach(d => {
+            this.divScrolls.set(d.id, { sl: d.scrollLeft, st: d.scrollTop });
+        });
+    }
+    /**
+     * Load all container attributes saved in @function cacheContainerAttr after score is loaded.
+     * Listens to "loadEnd" Event in Core class
+     * @param e Event
+     * @returns
+     */
+    loadContainerAttr(e) {
+        var _a;
+        if (this.divScrolls == undefined)
+            return;
+        for (const [key, value] of this.divScrolls.entries()) {
+            (_a = document.getElementById(key)) === null || _a === void 0 ? void 0 : _a.scrollTo(value.sl, value.st);
+        }
+    }
+    /**
+     * Set X and Y coordinates of the current boundingbox of the of the VerovioScore (#vrvSVG)
+     */
+    updateXY() {
+        var _a;
+        var bb = (_a = document.getElementById(this.containerId)) === null || _a === void 0 ? void 0 : _a.querySelector("#vrvSVG").getBoundingClientRect();
+        this.x = bb.x;
+        this.y = bb.y;
+    }
+    resetListeners() {
+        this
+            .removeListeners()
+            .setListeners();
+        return this;
+    }
+    setm2s(m2s) {
+        this.m2s = m2s;
+        return this;
+    }
+    setAnnotations(annotations) {
+        this.annotations = annotations;
+        return this;
+    }
+    setCurrentMEI(mei) {
+        this.currentMEI = mei;
+        return this;
+    }
+    setContainerId(containerId) {
+        this.containerId = containerId;
+        this.container = document.getElementById(this.containerId);
+        this.interactionOverlay = cq.getInteractOverlay(this.containerId);
+        this.vrvSVG = cq.getVrvSVG(this.containerId);
+        return this;
+    }
+    setInsertModeHandler(imh) {
+        this.insertModeHandler = imh;
+        return this;
+    }
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
+        return this;
+    }
+    setSVGReloadCallback(svgReloadCallback) {
+        this.svgReloadCallback = svgReloadCallback;
+        return this;
+    }
+    getX() {
+        return this.x;
+    }
+    getY() {
+        return this.y;
+    }
+}
+exports.default = WindowHandler;

package/src/scripts/js/utils/DOMCreator.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeNewAudioSlider = exports.makeNewToggle = exports.makeNewSelect = exports.makeNewDatalist = exports.makeNewInput = exports.makeNewAccordionItem = exports.makeNewDiv = exports.makeNewDivH5P = exports.makeNewAElement = exports.makeNewButton = exports.makeNewButtonH5P = void 0;
+class Toolbar {
+}
+function makeNewButtonH5P(text, id, className) {
+    return "<button type=\"button\" id=\"" + id + "\" class=\"" + className + "\">" + text + "</button>";
+}
+exports.makeNewButtonH5P = makeNewButtonH5P;
+function makeNewButton(text, id, className, toggle = "", textInnerHTML = false) {
+    var b = document.createElement("button");
+    b.setAttribute("id", id);
+    //b.setAttribute("type", "button")
+    var classList = className.split(" ");
+    classList.forEach(c => b.classList.add(c));
+    if (toggle === "dropdown") {
+        b.setAttribute("data-bs-toggle", toggle);
+        b.classList.add("dropdown-toggle");
+        //b.classList.add("dd")
+        //b.setAttribute("aria-haspopup", "true")
+        //b.setAttribute("aria-expanded", "false")
+    }
+    if (toggle === "button") {
+        b.setAttribute("data-toggle", toggle);
+        b.setAttribute("autocomplete", "off");
+    }
+    if (text.indexOf("&nbsp;") > -1 || textInnerHTML === true) {
+        b.innerHTML = text;
+    }
+    else {
+        b.textContent = text;
+    }
+    return b;
+}
+exports.makeNewButton = makeNewButton;
+function makeNewAElement(text, id, className, href, textInnerHTML = false) {
+    var a = document.createElement("a");
+    var classList = className.split(" ");
+    classList.forEach(c => a.classList.add(c));
+    a.setAttribute("href", href);
+    if (id.length > 0)
+        a.setAttribute("id", id);
+    if (textInnerHTML === true) {
+        a.innerHTML = text;
+    }
+    else {
+        a.textContent = text;
+    }
+    return a;
+}
+exports.makeNewAElement = makeNewAElement;
+function makeNewDivH5P(id, className, role = "") {
+    if (role !== "") {
+        role = "role=\"" + role + "\"";
+    }
+    return "<div id=\"" + id + "\" class=\"" + className + "\"" + role + "></div>";
+}
+exports.makeNewDivH5P = makeNewDivH5P;
+function makeNewDiv(id, className, attributes = null) {
+    var div = document.createElement("div");
+    div.setAttribute("id", id);
+    if (["", " "].indexOf(className) === -1) {
+        var classList = className.split(" ");
+        classList.forEach(c => div.classList.add(c));
+    }
+    if (div.classList.contains("dropdown-menu")) {
+        div.setAttribute("aria-labelledby", "insertMode");
+    }
+    if (attributes !== null) {
+        for (const [key, value] of Object.entries(attributes)) {
+            div.setAttribute(key, value);
+        }
+    }
+    return div;
+}
+exports.makeNewDiv = makeNewDiv;
+function makeNewAccordionItem(parentId, itemId, headerId, btnId, btnText, btnStyle = null, targetDivId) {
+    var item = makeNewDiv(itemId, "accordion-item");
+    var header = document.createElement("div");
+    header.classList.add("accordion-header");
+    header.setAttribute("id", headerId);
+    var btn = makeNewButton(btnText, btnId, "container-fluid accordion-button collapsed " + btnStyle);
+    btn.setAttribute("data-bs-toggle", "collapse");
+    btn.setAttribute("data-bs-target", "#" + targetDivId);
+    btn.setAttribute("aria-expanded", "false");
+    btn.setAttribute("aria-controls", targetDivId);
+    header.appendChild(btn);
+    var div = makeNewDiv(targetDivId, "accordion-collapse collapse");
+    div.setAttribute("aria-labelledby", headerId);
+    div.setAttribute("data-bs-parent", "#" + parentId);
+    item.appendChild(header);
+    item.appendChild(div);
+    return item;
+}
+exports.makeNewAccordionItem = makeNewAccordionItem;
+function makeNewInput(id, type, className, value = null, listname = null, readonly = false) {
+    var input = document.createElement("input");
+    input.setAttribute("id", id);
+    input.setAttribute("type", type);
+    if (value !== null) {
+        input.setAttribute("value", value);
+    }
+    if (className.length > 0) {
+        var classList = className.split(" ");
+        classList.forEach(c => input.classList.add(c));
+    }
+    if (listname !== null) {
+        input.setAttribute("list", listname);
+    }
+    input.readOnly = readonly;
+    return input;
+}
+exports.makeNewInput = makeNewInput;
+function makeNewDatalist(id, optionValues) {
+    var dataList = document.createElement("datalist");
+    dataList.setAttribute("id", id);
+    optionValues.forEach(value => {
+        var option = document.createElement("option");
+        option.setAttribute("value", value);
+        dataList.append(option);
+    });
+    return dataList;
+}
+exports.makeNewDatalist = makeNewDatalist;
+function makeNewSelect(id, optionValues, placeHolder = null) {
+    var dataList = document.createElement("select");
+    dataList.setAttribute("id", id);
+    if (placeHolder !== null) {
+        var option = document.createElement("option");
+        option.setAttribute("value", " ");
+        option.textContent = placeHolder;
+        option.setAttribute("disabled", "");
+        option.setAttribute("selected", "");
+        dataList.append(option);
+    }
+    optionValues.forEach(value => {
+        var option = document.createElement("option");
+        option.setAttribute("value", value);
+        option.textContent = value;
+        dataList.append(option);
+    });
+    return dataList;
+}
+exports.makeNewSelect = makeNewSelect;
+function makeNewToggle(id, classNames, labelText, divId) {
+    var input = makeNewInput(id, "checkBox", "btn-check");
+    input.checked = true;
+    var label = document.createElement("label");
+    if ((classNames === null || classNames === void 0 ? void 0 : classNames.length) > 0) {
+        var classList = classNames.split(" ");
+        classList.forEach(c => label.classList.add(c));
+    }
+    label.setAttribute("for", id);
+    label.textContent = labelText;
+    var div = makeNewDiv(divId, "toggleDiv");
+    div.append(input);
+    div.append(label);
+    return div;
+}
+exports.makeNewToggle = makeNewToggle;
+function makeNewAudioSlider(id, classNames, audioFile) {
+    var audioCtrl = document.createElement("audio");
+    audioCtrl.setAttribute("id", id);
+    audioCtrl.setAttribute("controls", "");
+    if ((classNames === null || classNames === void 0 ? void 0 : classNames.length) > 0) {
+        var classList = classNames.split(" ");
+        classList.forEach(c => audioCtrl.classList.add(c));
+    }
+    var source = document.createElement("source");
+    source.setAttribute("src", audioFile);
+    audioCtrl.append(source);
+    return audioCtrl;
+}
+exports.makeNewAudioSlider = makeNewAudioSlider;

package/src/scripts/js/utils/MEIConverter.js

@@ -0,0 +1,64 @@
+"use strict";
+//@ts-ignore
+//const $ = H5P.jQuery
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.restoreXmlIdTags = exports.standardizeAccid = exports.docToMei = exports.meiToDoc = exports.reformatMEI = void 0;
+/**
+* clean mei to make it parsable as document
+* @param mei the mei to be cleaned
+* @returns cleaned mei
+*/
+function cleanMEI(mei) {
+    mei = mei.replace(/\xml:id/gi, "id");
+    mei = mei.replace(/\n/g, ""); // delete all unnecessary newline
+    mei = mei.replace(/\s{2,}/g, ""); // delete all unnecessary whitespaces
+    return mei;
+}
+function reformatMEI(mei) {
+    mei = mei.replace(/\n/g, ""); // delete all unnecessary newline
+    mei = mei.replace(/\s{2,}/g, ""); // delete all unnecessary whitespaces
+    mei = mei.replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, "\"");
+    return mei;
+}
+exports.reformatMEI = reformatMEI;
+/**
+ * Converts MEI-String to DOM-conform objec
+ * @param mei
+ * @returns MEI as Document
+ */
+function meiToDoc(mei) {
+    var meiCopy = (" " + mei).slice(1); //deep copy
+    meiCopy = cleanMEI(meiCopy);
+    var parser = new DOMParser();
+    return parser.parseFromString(meiCopy, "text/xml");
+}
+exports.meiToDoc = meiToDoc;
+function docToMei(meiDoc) {
+    return new XMLSerializer().serializeToString(restoreXmlIdTags(meiDoc));
+}
+exports.docToMei = docToMei;
+/**
+ * Copys all accid attributes into the note Element, if it has accid Element
+ * @param xmlDoc
+ * @returns xmlDoc
+ */
+function standardizeAccid(xmlDoc) {
+    xmlDoc.querySelectorAll("accid").forEach(a => {
+        var note = a.closest("note");
+        var aAccid = a.getAttribute("accid");
+        if (aAccid !== null)
+            note.setAttribute("accid", aAccid);
+        var aAccidGes = a.getAttribute("accid.ges");
+        if (aAccidGes !== null)
+            note.setAttribute("accid.ges", aAccidGes);
+        a.remove();
+    });
+    return xmlDoc;
+}
+exports.standardizeAccid = standardizeAccid;
+function restoreXmlIdTags(xmlDoc) {
+    var parser = new DOMParser();
+    var mei = new XMLSerializer().serializeToString(xmlDoc).replace(/\ id/gi, " xml:id");
+    return parser.parseFromString(mei, "text/xml");
+}
+exports.restoreXmlIdTags = restoreXmlIdTags;