aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--module/output/html.scm6
-rw-r--r--static/script.js182
2 files changed, 113 insertions, 75 deletions
diff --git a/module/output/html.scm b/module/output/html.scm
index 78fd2b9e..df8909e9 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -833,7 +833,11 @@
(caddar ; strip <a> tag
(make-block (car (children cal))
`((class " generated ")
- (style "width:calc(100%*var(--editmode));")))))))))))
+ ;; TODO currently without this the event is always
+ ;; full width. Adding this however completely breaks
+ ;; creation of long events.
+ ;; (style "width:calc(100%*var(--editmode));")
+ ))))))))))
diff --git a/static/script.js b/static/script.js
index 45d3e54b..d9f85aa6 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,3 +1,5 @@
+'use strict';
+
function makeElement (name, attr={}) {
let element = document.createElement(name);
for (let [key, value] of Object.entries(attr)) {
@@ -31,88 +33,115 @@ function decimal_time_to_date (time, date) {
}
}
-let gensym_counter = 0;
-function gensym (prefix) {
- gensym_counter++;
- return prefix + gensym_counter;
-}
+/* if only there was such a thing as a let to wrap around my lambda... */
+let gensym = (function(counter) {
+ return function gensym (prefix="gensym") {
+ return prefix + ++counter;
+ }
+})(0);
/* start and end time for calendar page */
let start_time = new Date();
let end_time = new Date();
-/* dynamicly created event when dragging */
-let event;
+class EventCreator {
-let event_start = { x: NaN, y: NaN };
+ /* dynamicly created event when dragging */
+ constructor() {
+ this.event = false;
+ this.event_start = { x: NaN, y: NaN };
+ this.down_on_event = false;
+ }
-let down_on_event = false;
+ create_event_down () {
+ let that = this;
+ return function (e) {
+ /* Only trigger event creation stuff on actuall events background,
+ NOT on its children */
+ that.down_on_event = false;
+ if (! e.target.classList.contains("events")) return;
+ // if (! e.target.classList.contains("longevents")) return;
+ that.down_on_event = true;
+
+ that.event_start.x = e.clientX;
+ that.event_start.y = e.clientY;
+ }
+ }
-function create_event_down (e) {
- /* Only trigger event creation stuff on actuall events background,
- NOT on its children */
- down_on_event = false;
- if (! e.target.classList.contains("longevents")) return;
- down_on_event = true;
+ create_event_move() {
+ let that = this;
+ return function (e) {
+ if (e.buttons != 1 || ! that.down_on_event) return;
- event_start.x = e.clientX;
- event_start.y = e.clientY;
-}
+ /* Create event when we start moving the mouse. */
+ if (! that.event) {
+ /* Small deadzone so tiny click and drags aren't registered */
+ if (Math.abs(that.event_start.x - e.clientX) < 10
+ && Math.abs(that.event_start.y - e.clientY) < 5)
+ { return; }
-function create_event_move (e) {
+ /* only allow start of dragging on background */
+ if (e.target != this) return;
- if (e.buttons != 1 || ! down_on_event) return;
+ /* only on left click */
+ if (e.buttons != 1) return;
- /* Create event when we start moving the mouse. */
- if (! event) {
- /* Small deadzone so tiny click and drags aren't registered */
- if (Math.abs(event_start.x - e.clientX) < 10
- && Math.abs(event_start.y - e.clientY) < 5)
- { return; }
- /* only allow start of dragging on background */
- if (e.target != this) return;
+ let event
+ = that.event
+ = document.getElementById("event-template")
+ .firstChild.cloneNode(true);
+ bind_properties(event);
- /* only on left click */
- if (e.buttons != 1) return;
+ /* [0, 1) -- where are we in the container */
+ /* Ronud to force steps of quarters */
+ let time = round_time(24 * (e.offsetY / this.clientHeight),
+ .25);
+ /*
+ time = round_time((e.offsetX / this.clientWidth),
+ 1/(7*(24/8)));
+ */
- /* [0, 1) -- where are we in the container */
- /* Ronud to force steps of quarters */
- // time = round_time(24 * (e.offsetX / this.clientWidth),
- // .25)
- time = round_time((e.offsetX / this.clientWidth),
- 1/(7*(24/8)));
+ event.style.top = time * 100/24 + "%";
+ event.dataset.time1 = time;
+ event.dataset.time2 = time;
+ event.style.pointerEvents = "none";
- event = document.getElementById("event-template").firstChild.cloneNode(true);
- bind_properties(event, true);
+ /* ---------------------------------------- */
- // event.style.left = time * 100/24 + "%";
- event.style.left = (time * 100) + "%";
- event.dataset.time1 = time;
- event.dataset.time2 = time;
+ place_in_edit_mode(event);
- event.style.pointerEvents = "none";
+ /* ---------------------------------------- */
- /* ---------------------------------------- */
- place_in_edit_mode(event);
+ event.dataset.date = this.id;
- /* ---------------------------------------- */
+ /* Makes all current events transparent when dragging over them.
+ Without this weird stuff happens when moving over them
+ */
+ for (let e of this.children) {
+ e.style.pointerEvents = "none";
+ }
+ this.appendChild(event);
+ }
- event.dataset.date = this.id;
+ let time2 = that.event.dataset.time2 =
+ round_time(24 * (e.offsetY / that.event.parentElement.clientHeight),
+ .25);
+ let time1 = that.event.dataset.time1;
- /* Makes all current events transparent when dragging over them.
- Without this weird stuff happens when moving over them
- */
- for (let e of this.children) {
- e.style.pointerEvents = "none";
- }
+ let date = new Date(that.event.dataset.date)
+ that.event.properties.dtstart =
+ decimal_time_to_date(Math.min(Number(time1), Number(time2)),
+ date);
+ that.event.properties.dtend =
+ decimal_time_to_date(Math.max(Number(time1), Number(time2)),
+ date);
- this.appendChild(event);
- }
+ /*
time2 = event.dataset.time2 =
round_time((e.offsetX / event.parentElement.clientWidth),
1/(7*(24/8)));
@@ -129,25 +158,29 @@ function create_event_move (e) {
event.properties.dtend = d2;
// decimal_time_to_date(Math.max(Number(time1), Number(time2)),
// date);
-}
-
-function create_event_finisher (callback) {
- down_on_event = false; // reset
- return function create_event_up (e) {
- if (! event) return;
-
- /* Restore pointer events for all existing events.
- Allow pointer events on our new event
*/
- for (let e of event.parentElement.children) {
- e.style.pointerEvents = "";
}
+ }
+
+ create_event_finisher (callback) {
+ this.down_on_event = false; // reset
+ let that = this;
+ return function create_event_up (e) {
+ if (! that.event) return;
+
+ /* Restore pointer events for all existing events.
+ Allow pointer events on our new event
+ */
+ for (let e of that.event.parentElement.children) {
+ e.style.pointerEvents = "";
+ }
- let localevent = event;
- event = null;
+ let localevent = that.event;
+ that.event = null;
- callback (localevent);
+ callback (localevent);
+ }
}
}
@@ -316,10 +349,11 @@ window.onload = function () {
/* Is event creation active? */
if (true) {
- for (let c of document.getElementsByClassName("longevents")) {
- c.onmousedown = create_event_down;
- c.onmousemove = create_event_move;
- c.onmouseup = create_event_finisher(
+ let eventCreator = new EventCreator;
+ for (let c of document.getElementsByClassName("events")) {
+ c.onmousedown = eventCreator.create_event_down();
+ c.onmousemove = eventCreator.create_event_move();
+ c.onmouseup = eventCreator.create_event_finisher(
function (event) {
let popupElement = event.querySelector(".popup-container");
open_popup(popupElement);
@@ -468,7 +502,7 @@ function bind_properties (el, wide_event=true) {
let field = child.tagName;
- lst = el.properties["_slot_" + field] = []
+ let lst = el.properties["_slot_" + field] = []
for (let s of el.getElementsByClassName(field)) {
let f = ((s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt));
lst.push([s, f]);
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-03 07:38:37 +0200