102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
(function (W) {
|
|
let lock, pressed;
|
|
const D = ["mon", "tue", "wed", "thu", "fri"];
|
|
const log = document.querySelector("[data-log]");
|
|
|
|
const cursor = document.createElement("i");
|
|
cursor.hidden = 1;
|
|
log.appendChild(cursor);
|
|
|
|
const { width, height, y, x } = log.getClientRects()[0];
|
|
|
|
const drag = (elm) => {
|
|
// copy node
|
|
// on mouse down:
|
|
// move node by grid
|
|
// on mouse up:
|
|
// re-render grid
|
|
};
|
|
|
|
const resize = (elm) => {
|
|
// copy node
|
|
// on mouse down:
|
|
// move node by grid
|
|
// on mouse up:
|
|
// re-render grid
|
|
};
|
|
|
|
const create = () => {
|
|
cursor.hidden = 1;
|
|
const a = document.createElement("article");
|
|
const f = document.createElement("form");
|
|
f.style.position = "absolute";
|
|
f.method = "post";
|
|
f.action = "";
|
|
const i = document.createElement("input");
|
|
i.addEventListener("keydown", ({ key: k }) => {
|
|
if (k == "Escape") {
|
|
i.blur();
|
|
a.parentNode.removeChild(a);
|
|
}
|
|
});
|
|
f.addEventListener("submit", (evt) => {
|
|
evt.preventDefault();
|
|
a.dataset.draggable = 1;
|
|
a.dataset.resizeable = 1;
|
|
a.insertAdjacentHTML("afterbegin", i.value);
|
|
i.blur();
|
|
f.parentNode.removeChild(f);
|
|
});
|
|
a.dataset.day = cursor.dataset.day;
|
|
a.dataset.start = cursor.dataset.start;
|
|
a.dataset.end = cursor.dataset.end;
|
|
f.appendChild(i);
|
|
a.appendChild(f);
|
|
log.appendChild(a);
|
|
i.focus();
|
|
return;
|
|
};
|
|
|
|
const updateCursorPos = ({ pageY, pageX }) => {
|
|
clearTimeout(lock);
|
|
lock = setTimeout(() => {
|
|
const r = Math.floor(((pageY - y) / height) * 52);
|
|
const c = Math.floor(((pageX - x) / width) * 5);
|
|
const p = ((r - (r % 4)) / 4 + 6) * 100 + (r % 4) * 15;
|
|
if (!pressed) {
|
|
cursor.dataset.day = D[c];
|
|
cursor.dataset.start = ("0000" + p).slice(-4);
|
|
}
|
|
cursor.dataset.end = (
|
|
"0000" + ((p % 100) % 45 == 0 ? p + 55 : p + 15)
|
|
).slice(-4);
|
|
}, 1);
|
|
};
|
|
|
|
log.onmousedown = (evt) => {
|
|
if (evt.target == cursor) {
|
|
evt.preventDefault();
|
|
cursor.classList.add("pressed");
|
|
pressed = true;
|
|
}
|
|
};
|
|
|
|
log.onmouseup = (evt) => {
|
|
if (evt.target == cursor) {
|
|
evt.preventDefault();
|
|
cursor.classList.remove("pressed");
|
|
pressed = false;
|
|
create();
|
|
}
|
|
};
|
|
|
|
log.onmouseover = ({ target: elm }) => {
|
|
if (elm == log) {
|
|
log.onmousemove = updateCursorPos;
|
|
cursor.hidden = 0;
|
|
} else if (elm != cursor) {
|
|
cursor.hidden = 1;
|
|
cursor.onmousemove = "";
|
|
}
|
|
};
|
|
})(this);
|