Skip to content
Snippets Groups Projects
Commit c72aac7a authored by baletiballo's avatar baletiballo
Browse files

Fixed event handlers, and changed them to jQuery

parent b38dc251
No related branches found
No related tags found
No related merge requests found
"use strict";
/**
* @typedef point
* @type {object}
* @property {number} x
* @property {number} y
* @property {number} z
*/
/**
* @typedef {Object} fact
* @property {string} id Fact id
* @property {string} s_type Fact type
* @property {string} label used in unity
* @property {string | null} _CustomLabel Custom label
* @property {boolean} hasCustomLabel
* @property {number} labelId
*/
/**
* @property {Point} point
* @property {Point} normal
* @property {string} s_type
* @property {string} label
* @property {string|null} _CustomLabel
* @property {boolean} hasCustomLabel
* @property {number} labelId
*/
var assignment;
/** @param {DragEvent} event */
function dropHandler(event) {
// ignore
if (event.dataTransfer === null
|| event.target === null
|| !(event.target instanceof HTMLElement)) {
console.log("dropHandler", event);
if (event.originalEvent === undefined
|| event.originalEvent.dataTransfer === null
|| event.target === undefined
|| !(event.target instanceof HTMLElement
|| event.target instanceof MathMLElement)) {
console.log("Ignored illegal DragEvent");
return;
}
event.preventDefault();
console.log("dropHandler", event);
const data = event.dataTransfer.getData("application/json");
const data = event.originalEvent.dataTransfer;
//const data = event.dataTransfer.getData("text/plain")
console.log(`Dropped data: '${event.dataTransfer.types}'`, event.dataTransfer.types);
const fact = JSON.parse(data);
console.log(`Dropped data: '${data.types}'`, data.types);
const fact = JSON.parse(data.getData("application/json"));
console.warn(`Dropped Fact '${fact.label}':`, fact);
const target = event.target;
if (target.dataset.allowedTypes !== undefined) {
......@@ -65,26 +40,25 @@ function dropHandler(event) {
}
/** @param {MouseEvent} event */
function clickHandler(event) {
// ignore
if (event.target == null
|| !(event.target instanceof HTMLElement)) {
console.warn("Ignored illegal DragEvent");
// ignore. Cannot happen if the event is triggered normally
console.log("clickHandler", event);
if (!(event.target instanceof HTMLElement
|| event.target instanceof MathMLElement)) {
console.warn("Ignored illegal ClickEvent");
return;
}
event.preventDefault();
console.log("clickHandler");
console.log("clickHandler", event);
const target = event.target;
switch (event.button) {
case 0:
switch (event.which) {
case 1:
console.log("Left button clicked");
target.dataset.factId = undefined;
target.dispatchEvent(new Event("factUnassigned"));
break;
case 1:
case 2:
console.log("Middle button clicked");
break;
case 2:
case 3:
console.log("Right button clicked");
if (target.dataset.slotId) {
getHint(target.dataset.slotId);
......@@ -94,33 +68,30 @@ function clickHandler(event) {
console.log("Unknown button clicked");
}
}
/** register the drag event listener. Otherwise drop events don't work */
document.addEventListener("dragover", ev => ev.preventDefault());
/** select all dropzones and add drop event listeners */
function addDropZoneEventListeners() {
console.log("addDropZoneEventListeners");
$('[dropzone="copy"]')
.on({
drop: dropHandler,
mousedown: clickHandler,
contextmenu: event => event.preventDefault()
});
}
//#region Commented out Archive
/*
* register the drag event listeners
*/
//document.addEventListener("dragstart", ev => printHandler(ev, "DragStartEvent"))
//document.addEventListener("dragenter", ev => printHandler(ev, "DragEnterEvent"))
//document.addEventListener("drag", ev => printHandler(ev, "DragEvent"))
document.addEventListener("dragover", ev => ev.preventDefault());
//document.addEventListener("dragover", ev => ev.preventDefault())
//document.addEventListener("dragover", ev => printPreventDefaultHandler(ev, "DragOverEvent"))
//document.addEventListener("dragleave", ev => printHandler(ev, "DragLeaveEvent"))
//document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
// select all dropzones and add drop event listeners
//let dropZones = document.querySelectorAll('[dropzone="copy"]')
//dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
/** select all dropzones and add drop event listeners */
function addDropZoneEventListeners() {
console.log("addDropZoneEventListeners");
document.querySelectorAll('[dropzone="copy"]')
.forEach(dropZone => {
if (dropZone instanceof HTMLElement) {
dropZone.removeEventListener("drop", dropHandler);
dropZone.removeEventListener("click", clickHandler);
dropZone.removeEventListener("contextmenu", clickHandler);
//dropZone.addEventListener("dragover", ev => ev.preventDefault())
dropZone.addEventListener("drop", dropHandler);
dropZone.addEventListener("click", clickHandler);
dropZone.addEventListener("contextmenu", clickHandler);
}
});
}
//addDropZoneEventListeners()
//#endregion Commented out Archive
function dropHandler(event: JQuery.DropEvent) {
// ignore
if (event.dataTransfer === null
|| event.target === null
|| !(event.target instanceof HTMLElement)) {
console.log("dropHandler", event)
if (event.originalEvent === undefined
|| event.originalEvent.dataTransfer === null
|| event.target === undefined
|| !(event.target instanceof HTMLElement
|| event.target instanceof MathMLElement)
) {
console.log("Ignored illegal DragEvent")
return
}
event.preventDefault()
console.log("dropHandler", event)
const data = event.originalEvent.dataTransfer
const data = event.dataTransfer.getData("application/json")
//const data = event.dataTransfer.getData("text/plain")
console.log(`Dropped data: '${event.dataTransfer.types}'`, event.dataTransfer.types)
console.log(`Dropped data: '${data.types}'`, data.types)
const fact: Fact = JSON.parse(data)
const fact: Fact = JSON.parse(data.getData("application/json"))
console.warn(`Dropped Fact '${fact.label}':`, fact)
const target: HTMLElement = event.target
const target = event.target
if (target.dataset.allowedTypes !== undefined) {
//const allowedTypesStr = element.dataset["allowed-types"]
......@@ -44,27 +50,27 @@
}
/** @param {MouseEvent} event */
function clickHandler(event: MouseEvent) {
// ignore
if (event.target == null
|| !(event.target instanceof HTMLElement)) {
console.warn("Ignored illegal DragEvent")
function clickHandler(event: JQuery.MouseDownEvent) {
// ignore. Cannot happen if the event is triggered normally
console.debug("clickHandler", event)
if (!(event.target instanceof HTMLElement
|| event.target instanceof MathMLElement)
) {
console.warn("Ignored illegal ClickEvent")
return
}
event.preventDefault()
console.log("clickHandler")
console.log("clickHandler", event)
const target: HTMLElement = event.target
switch (event.button) {
case 0:
const target: MathMLElement = event.target
switch (event.which) {
case 1:
console.log("Left button clicked")
target.dataset.factId = undefined
target.dispatchEvent(new Event("factUnassigned"))
break
case 1:
case 2:
console.log("Middle button clicked")
break
case 2:
case 3:
console.log("Right button clicked")
if (target.dataset.slotId) {
getHint(target.dataset.slotId)
......@@ -75,13 +81,30 @@ function clickHandler(event: MouseEvent) {
}
}
/** register the drag event listener. Otherwise drop events don't work */
document.addEventListener("dragover", ev => ev.preventDefault())
/** select all dropzones and add drop event listeners */
function addDropZoneEventListeners() {
console.log("addDropZoneEventListeners")
$('[dropzone="copy"]')
.on({
drop: dropHandler,
mousedown: clickHandler,
contextmenu: event => event.preventDefault()
})
}
declare function getHint(slotId: string): void;
//#region Commented out Archive
/*
* register the drag event listeners
*/
//document.addEventListener("dragstart", ev => printHandler(ev, "DragStartEvent"))
//document.addEventListener("dragenter", ev => printHandler(ev, "DragEnterEvent"))
//document.addEventListener("drag", ev => printHandler(ev, "DragEvent"))
document.addEventListener("dragover", ev => ev.preventDefault())
//document.addEventListener("dragover", ev => ev.preventDefault())
//document.addEventListener("dragover", ev => printPreventDefaultHandler(ev, "DragOverEvent"))
//document.addEventListener("dragleave", ev => printHandler(ev, "DragLeaveEvent"))
//document.addEventListener("dragend", ev => printHandler(ev, "DragEndEvent"))
......@@ -89,24 +112,4 @@ document.addEventListener("dragover", ev => ev.preventDefault())
// select all dropzones and add drop event listeners
//let dropZones = document.querySelectorAll('[dropzone="copy"]')
//dropZones.forEach( dropZone => dropZone.addEventListener("drop", ev => dropHandler(ev, "DropEvent")) )
/** select all dropzones and add drop event listeners */
function addDropZoneEventListeners() {
console.log("addDropZoneEventListeners")
document.querySelectorAll('[dropzone="copy"]')
.forEach(dropZone => {
if (dropZone instanceof HTMLElement) {
dropZone.removeEventListener("drop", dropHandler)
dropZone.removeEventListener("click", clickHandler)
dropZone.removeEventListener("contextmenu", clickHandler)
//dropZone.addEventListener("dragover", ev => ev.preventDefault())
dropZone.addEventListener("drop", dropHandler)
dropZone.addEventListener("click", clickHandler)
dropZone.addEventListener("contextmenu", clickHandler)
}
})
}
declare function getHint(slotId: string): void;
//addDropZoneEventListeners()
//#endregion Commented out Archive
......@@ -52,7 +52,9 @@ function RenderScroll() {
.html(fact.label)
.attr("data-allowed-types", fact.type)
})
console.log('Scroll rendered', scroll.label.textContent)
addDropZoneEventListeners()
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment