Verified Commit 22a5179f authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Make links clickable + all nodes draggable

parent 1bd0df53
......@@ -54,20 +54,37 @@ h1 span {
background-color: #de6a73;
}
button:focus {
outline: none;
}
.input-file-url {
background-color: #222;
border: 5px solid #444;
border-radius: 10px;
border: 5px solid #444;
color: #f2cf66;
font-size: 16px;
padding: 10px;
width: 350px;
}
.input-file-url:focus {
outline: none;
}
.clickable-url {
cursor: pointer;
text-decoration: underline;
}
.select-file-type {
background-color: #112233;
}
.select-file-type:focus {
outline: none;
}
.select-file-type option:checked {
background-color: #051525;
}
......
......@@ -4,6 +4,10 @@
const $ = q => document.querySelector(q);
const $$ = q => document.querySelectorAll(q);
const filesList = $(".files");
let ctrlKeyPressed = false;
let mouseOveredFileUrlInput = null;
let dragSrcEl = null;
const setDataStoreKey = function(key, value, cb) {
cb = cb || function() {};
const val = {};
......@@ -44,10 +48,63 @@
alert(msg);
};
const onDropCallback = function(evt) {
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = evt.dataTransfer.getData("text/html");
addEventsToListItem(dragSrcEl);
addEventsToListItem(this);
}
};
const onDragOverCallback = (evt) => {
if (evt.preventDefault) {
evt.preventDefault();
}
evt.dataTransfer.dropEffect = "move";
return false;
};
const onDragStartCallback = function(evt) {
dragSrcEl = this;
evt.dataTransfer.effectAllowed = "move";
evt.dataTransfer.setData("text/html", this.innerHTML);
};
const addEventsToListItem = (node) => {
const input = node.querySelector("input");
const select = node.querySelector("select");
const btnAdd = node.querySelector(".btn-file-add");
const btnRemove = node.querySelector(".btn-file-remove");
input.addEventListener(
"click",
function(evt) {
if (
evt &&
evt.preventDefault &&
ctrlKeyPressed
) {
evt.preventDefault();
window.open(this.value);
}
},
{ passive: false }
);
input.addEventListener(
"mouseover",
function() {
mouseOveredFileUrlInput = this;
},
{ passive: true }
);
input.addEventListener(
"mouseout",
function() {
this.classList.remove("clickable-url");
mouseOveredFileUrlInput = null;
},
{ passive: true }
);
select.addEventListener(
"change",
function() {
......@@ -84,6 +141,16 @@
},
{ passive: true }
);
node.addEventListener("dragstart", onDragStartCallback, {
passive: false
});
node.addEventListener("dragover", onDragOverCallback, {
passive: false
});
node.addEventListener("drop", onDropCallback, {
passive: false
});
};
const createFileItem = (file, refNode) => {
......@@ -138,60 +205,46 @@
}
};
let dragSrcEl = null;
// load files from store and populate the list
getDataStoreKey("files", [], (files) => {
if (files.length === 0) {
return;
}
files.forEach(file => createFileItem(file));
filesList.querySelectorAll("li").forEach((listEl) => {
listEl.addEventListener(
"dragstart",
function(evt) {
dragSrcEl = this;
evt.dataTransfer.effectAllowed = "move";
evt.dataTransfer.setData(
"text/html",
this.innerHTML
);
},
{ passive: false }
);
listEl.addEventListener(
"dragover",
(evt) => {
if (evt.preventDefault) {
evt.preventDefault();
}
evt.dataTransfer.dropEffect = "move";
return false;
},
{ passive: false }
);
listEl.addEventListener(
"drop",
function(evt) {
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = evt.dataTransfer.getData("text/html");
addEventsToListItem(dragSrcEl);
addEventsToListItem(this);
}
},
{ passive: false }
);
});
});
let onCtrlSCallback = function(evt) {
if (evt.ctrlKey === true && evt.key === "s") {
evt.preventDefault();
save("Configuration saved.");
return false;
let onKeyDownCallback = function(evt) {
if (evt.ctrlKey === true) {
ctrlKeyPressed = true;
if (mouseOveredFileUrlInput) {
mouseOveredFileUrlInput.classList.add("clickable-url");
}
if (evt.key === "s") {
evt.preventDefault();
save("Configuration saved.");
return false;
}
}
};
window.addEventListener("keydown", onCtrlSCallback, { passive: false });
let onKeyUpCallback = function(evt) {
if (evt.ctrlKey === true) {
ctrlKeyPressed = true;
} else {
ctrlKeyPressed = false;
}
if (mouseOveredFileUrlInput) {
if (ctrlKeyPressed) {
mouseOveredFileUrlInput.classList.add("clickable-url");
} else {
mouseOveredFileUrlInput.classList.remove("clickable-url");
}
}
};
window.addEventListener("keydown", onKeyDownCallback, {
passive: false
});
window.addEventListener("keyup", onKeyUpCallback, { passive: false });
})();
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment