From 1484155c211fe8452344ffdc501e858706ecbc51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 29 Sep 2021 23:36:21 +0200 Subject: Start rework on js setup. --- static/script.js | 437 +++++++++++++++++++++++++++---------------------------- 1 file changed, 218 insertions(+), 219 deletions(-) (limited to 'static/script.js') diff --git a/static/script.js b/static/script.js index a0d58c27..05ae61c5 100644 --- a/static/script.js +++ b/static/script.js @@ -4,211 +4,211 @@ calp specific stuff */ -class EventCreator { - - /* dynamicly created event when dragging */ - constructor() { - this.event = false; - this.event_start = { x: NaN, y: NaN }; - this.down_on_event = false; - } - - create_empty_event () { - /* TODO this doesn't clone JS attributes */ - - let event = document.getElementById("event-template") - .firstChild.cloneNode(true); - let popup = document.getElementById("popup-template") - .firstChild.cloneNode(true); - - /* -------------------- */ - /* Manually transfer or recreate attributes which we still need */ - /* TODO shouldn't these use transferListeners (or similar)? - See input_list.js:transferListeners */ - - for (let dt of popup.getElementsByClassName("date-time")) { - init_date_time_single(dt); - } - - popup.getElementsByClassName("edit-form")[0].onsubmit = function () { - create_event(event); - return false; /* stop default */ - } - - /* -------------------- */ - /* Fix tabs for newly created popup */ - - let id = gensym ("__js_event"); - - // TODO remove button? - // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))` - - let tabgroup_id = gensym(); - for (let tab of popup.querySelectorAll(".tabgroup .tab")) { - let new_id = gensym(); - let input = tab.querySelector("input"); - input.id = new_id; - input.name = tabgroup_id; - tab.querySelector("label").setAttribute('for', new_id); - } - - let nav = popup.getElementsByClassName("popup-control")[0]; - bind_popup_control(nav); - - /* -------------------- */ - - // TODO download links - - /* -------------------- */ - - event.id = id; - popup.id = "popup" + id; - - return [popup, event]; - } - - create_event_down (intended_target) { - 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 != intended_target) return; - that.down_on_event = true; - - that.event_start.x = e.clientX; - that.event_start.y = e.clientY; - } - } - - /* - round_to: what start and end times should round to when dragging, in fractions - of the width of the containing container. - - TODO limit this to only continue when on the intended event_container. - - (event → [0, 1)), 𝐑, bool → event → () - */ - create_event_move(pos_in, round_to=1, wide_element=false) { - let that = this; - return function (e) { - if (e.buttons != 1 || ! that.down_on_event) return; - - /* 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; } - - /* only allow start of dragging on background */ - if (e.target != this) return; - - /* only on left click */ - if (e.buttons != 1) return; - - let [popup, event] = that.create_empty_event(); - that.event = event; - - /* TODO better solution to add popup to DOM */ - document.getElementsByTagName("main")[0].append(popup); - - /* [0, 1) -- where are we in the container */ - /* Ronud to force steps of quarters */ - /* NOTE for in-day events a floor here work better, while for - all day events I want a round, but which has the tip over point - around 0.7 instead of 0.5. - It might also be an idea to subtract a tiny bit from the short events - mouse position, since I feel I always get to late starts. - */ - let time = round_time(pos_in(this, e), round_to); - - event.dataset.time1 = time; - event.dataset.time2 = time; - - /* ---------------------------------------- */ - - this.appendChild(event); - - /* requires that event is child of an '.event-container'. */ - new VComponent( - event, - wide_element=wide_element); - // bind_properties(event, wide_element); - - /* requires that dtstart and dtend properties are initialized */ - - /* ---------------------------------------- */ - - /* Makes all current events transparent when dragging over them. - Without this weird stuff happens when moving over them - - This includes ourselves. - */ - for (let e of this.children) { - e.style.pointerEvents = "none"; - } - - } - - let time1 = Number(that.event.dataset.time1); - let time2 = that.event.dataset.time2 = - round_time(pos_in(that.event.parentElement, e), - round_to); - - /* ---------------------------------------- */ - - let event_container = that.event.closest(".event-container"); - - /* These two are in UTC */ - let container_start = parseDate(event_container.dataset.start); - let container_end = parseDate(event_container.dataset.end); - - /* ---------------------------------------- */ - - /* ms */ - let duration = container_end - container_start; - - let start_in_duration = duration * Math.min(time1,time2); - let end_in_duration = duration * Math.max(time1,time2); - - /* Notice that these are converted to UTC, since the intervals are given - in utc, and I only really care about local time (which a specific local - timezone doesn't give me) - */ - /* TODO Should these inherit UTC from container_*? */ - let d1 = new Date(container_start.getTime() + start_in_duration) - let d2 = new Date(container_start.getTime() + end_in_duration) - - // console.log(that.event); - console.log(d1, d2); - that.event.properties.dtstart = d1; - that.event.properties.dtend = d2; - } - } - - create_event_finisher (callback) { - 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 = ""; - } - - place_in_edit_mode(that.event); - - let localevent = that.event; - that.event = null; - - callback (localevent); - - } - } -} +// class EventCreator { +// +// /* dynamicly created event when dragging */ +// constructor() { +// this.event = false; +// this.event_start = { x: NaN, y: NaN }; +// this.down_on_event = false; +// } +// +// create_empty_event () { +// /* TODO this doesn't clone JS attributes */ +// +// let event = document.getElementById("event-template") +// .firstChild.cloneNode(true); +// let popup = document.getElementById("popup-template") +// .firstChild.cloneNode(true); +// +// /* -------------------- */ +// /* Manually transfer or recreate attributes which we still need */ +// /* TODO shouldn't these use transferListeners (or similar)? +// See input_list.js:transferListeners */ +// +// for (let dt of popup.getElementsByClassName("date-time")) { +// init_date_time_single(dt); +// } +// +// popup.getElementsByClassName("edit-form")[0].onsubmit = function () { +// create_event(event); +// return false; /* stop default */ +// } +// +// /* -------------------- */ +// /* Fix tabs for newly created popup */ +// +// let id = gensym ("__js_event"); +// +// // TODO remove button? +// // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))` +// +// let tabgroup_id = gensym(); +// for (let tab of popup.querySelectorAll(".tabgroup .tab")) { +// let new_id = gensym(); +// let input = tab.querySelector("input"); +// input.id = new_id; +// input.name = tabgroup_id; +// tab.querySelector("label").setAttribute('for', new_id); +// } +// +// let nav = popup.getElementsByClassName("popup-control")[0]; +// bind_popup_control(nav); +// +// /* -------------------- */ +// +// // TODO download links +// +// /* -------------------- */ +// +// event.id = id; +// popup.id = "popup" + id; +// +// return [popup, event]; +// } +// +// create_event_down (intended_target) { +// 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 != intended_target) return; +// that.down_on_event = true; +// +// that.event_start.x = e.clientX; +// that.event_start.y = e.clientY; +// } +// } +// +// /* +// round_to: what start and end times should round to when dragging, in fractions +// of the width of the containing container. +// +// TODO limit this to only continue when on the intended event_container. +// +// (event → [0, 1)), 𝐑, bool → event → () +// */ +// create_event_move(pos_in, round_to=1, wide_element=false) { +// let that = this; +// return function (e) { +// if (e.buttons != 1 || ! that.down_on_event) return; +// +// /* 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; } +// +// /* only allow start of dragging on background */ +// if (e.target != this) return; +// +// /* only on left click */ +// if (e.buttons != 1) return; +// +// let [popup, event] = that.create_empty_event(); +// that.event = event; +// +// /* TODO better solution to add popup to DOM */ +// document.getElementsByTagName("main")[0].append(popup); +// +// /* [0, 1) -- where are we in the container */ +// /* Ronud to force steps of quarters */ +// /* NOTE for in-day events a floor here work better, while for +// all day events I want a round, but which has the tip over point +// around 0.7 instead of 0.5. +// It might also be an idea to subtract a tiny bit from the short events +// mouse position, since I feel I always get to late starts. +// */ +// let time = round_time(pos_in(this, e), round_to); +// +// event.dataset.time1 = time; +// event.dataset.time2 = time; +// +// /* ---------------------------------------- */ +// +// this.appendChild(event); +// +// /* requires that event is child of an '.event-container'. */ +// new VComponent( +// event, +// wide_element=wide_element); +// // bind_properties(event, wide_element); +// +// /* requires that dtstart and dtend properties are initialized */ +// +// /* ---------------------------------------- */ +// +// /* Makes all current events transparent when dragging over them. +// Without this weird stuff happens when moving over them +// +// This includes ourselves. +// */ +// for (let e of this.children) { +// e.style.pointerEvents = "none"; +// } +// +// } +// +// let time1 = Number(that.event.dataset.time1); +// let time2 = that.event.dataset.time2 = +// round_time(pos_in(that.event.parentElement, e), +// round_to); +// +// /* ---------------------------------------- */ +// +// let event_container = that.event.closest(".event-container"); +// +// /* These two are in UTC */ +// let container_start = parseDate(event_container.dataset.start); +// let container_end = parseDate(event_container.dataset.end); +// +// /* ---------------------------------------- */ +// +// /* ms */ +// let duration = container_end - container_start; +// +// let start_in_duration = duration * Math.min(time1,time2); +// let end_in_duration = duration * Math.max(time1,time2); +// +// /* Notice that these are converted to UTC, since the intervals are given +// in utc, and I only really care about local time (which a specific local +// timezone doesn't give me) +// */ +// /* TODO Should these inherit UTC from container_*? */ +// let d1 = new Date(container_start.getTime() + start_in_duration) +// let d2 = new Date(container_start.getTime() + end_in_duration) +// +// // console.log(that.event); +// console.log(d1, d2); +// that.event.properties.dtstart = d1; +// that.event.properties.dtend = d2; +// } +// } +// +// create_event_finisher (callback) { +// 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 = ""; +// } +// +// place_in_edit_mode(that.event); +// +// let localevent = that.event; +// that.event = null; +// +// callback (localevent); +// +// } +// } +// } @@ -254,7 +254,7 @@ function place_in_edit_mode (event) { -window.onload = function () { +window.addEventListener('load', function () { // let start_time = document.querySelector("meta[name='start-time']").content; // let end_time = document.querySelector("meta[name='end-time']").content; @@ -280,7 +280,7 @@ window.onload = function () { init_date_time(); /* Is event creation active? */ - if (EDIT_MODE) { + if (false && EDIT_MODE) { let eventCreator = new EventCreator; for (let c of document.getElementsByClassName("events")) { c.onmousedown = eventCreator.create_event_down(c); @@ -336,17 +336,17 @@ window.onload = function () { el.parentElement.removeAttribute("href"); let popup = document.getElementById("popup" + el.id); - popup.getElementsByClassName("edit-form")[0].onsubmit = function () { - create_event(el); - return false; /* stop default */ - } + // popup.getElementsByClassName("edit-form")[0].onsubmit = function () { + // create_event(el); + // return false; /* stop default */ + // } /* Bind all vcomponent properties into javascript. */ - if (el.closest(".longevents")) { - new VComponent(el, true); - } else { - new VComponent(el, false); - } + // if (el.closest(".longevents")) { + // new VComponent(el, true); + // } else { + // new VComponent(el, false); + // } } @@ -402,7 +402,7 @@ window.onload = function () { // init_arbitary_kv(); - init_input_list(); + // init_input_list(); document.addEventListener('keydown', function (event) { @@ -413,5 +413,4 @@ window.onload = function () { event.preventDefault(); } }); -} - +}) -- cgit v1.2.3 From e28b54810bb42b21a069a1257cf5e59e06c735a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Thu, 30 Sep 2021 01:47:38 +0200 Subject: Replace today-button with web component. --- static/script.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) (limited to 'static/script.js') diff --git a/static/script.js b/static/script.js index 05ae61c5..580ee520 100644 --- a/static/script.js +++ b/static/script.js @@ -82,7 +82,7 @@ // } // // /* -// round_to: what start and end times should round to when dragging, in fractions +// round_to: what start and end times should round to when dragging, in fractionsb // of the width of the containing container. // // TODO limit this to only continue when on the intended event_container. @@ -258,11 +258,6 @@ window.addEventListener('load', function () { // let start_time = document.querySelector("meta[name='start-time']").content; // let end_time = document.querySelector("meta[name='end-time']").content; - const button_updater = new ButtonUpdater( - document.getElementById("today-button"), - (e, d) => e.href = d.format('~Y-~m-~d') + ".html" - ); - const sch = new SmallcalCellHighlight( document.querySelector('.small-calendar')) @@ -273,7 +268,6 @@ window.addEventListener('load', function () { window.setInterval(() => { let d = new Date; timebar.update(d); - button_updater.update(d); sch.update(d); }, 1000 * 60); @@ -372,7 +366,6 @@ window.addEventListener('load', function () { href: target_href, innerHTML: gotodatebtn.innerHTML, }); - document.getElementById("today-button").href = target_href; gotodatebtn.replaceWith(golink); document.querySelector("#jump-to input[name='date']").onchange = function () { -- cgit v1.2.3 From 81adf54a8a36beba9622c1929937c871a751b2d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 1 Oct 2021 03:37:31 +0200 Subject: Remove old date_time system. --- static/script.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'static/script.js') diff --git a/static/script.js b/static/script.js index 580ee520..b4fb7bda 100644 --- a/static/script.js +++ b/static/script.js @@ -271,8 +271,6 @@ window.addEventListener('load', function () { sch.update(d); }, 1000 * 60); - init_date_time(); - /* Is event creation active? */ if (false && EDIT_MODE) { let eventCreator = new EventCreator; -- cgit v1.2.3 From a64c2a665af1abe0b91f1c5eb1f97df91ed8a4de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 3 Oct 2021 17:48:13 +0200 Subject: Further work, rework popup. --- static/script.js | 421 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 213 insertions(+), 208 deletions(-) (limited to 'static/script.js') diff --git a/static/script.js b/static/script.js index b4fb7bda..5ef498f3 100644 --- a/static/script.js +++ b/static/script.js @@ -4,211 +4,216 @@ calp specific stuff */ -// class EventCreator { -// -// /* dynamicly created event when dragging */ -// constructor() { -// this.event = false; -// this.event_start = { x: NaN, y: NaN }; -// this.down_on_event = false; -// } -// -// create_empty_event () { -// /* TODO this doesn't clone JS attributes */ -// -// let event = document.getElementById("event-template") -// .firstChild.cloneNode(true); -// let popup = document.getElementById("popup-template") -// .firstChild.cloneNode(true); -// -// /* -------------------- */ -// /* Manually transfer or recreate attributes which we still need */ -// /* TODO shouldn't these use transferListeners (or similar)? -// See input_list.js:transferListeners */ -// -// for (let dt of popup.getElementsByClassName("date-time")) { -// init_date_time_single(dt); -// } -// -// popup.getElementsByClassName("edit-form")[0].onsubmit = function () { -// create_event(event); -// return false; /* stop default */ -// } -// -// /* -------------------- */ -// /* Fix tabs for newly created popup */ -// -// let id = gensym ("__js_event"); -// -// // TODO remove button? -// // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))` -// -// let tabgroup_id = gensym(); -// for (let tab of popup.querySelectorAll(".tabgroup .tab")) { -// let new_id = gensym(); -// let input = tab.querySelector("input"); -// input.id = new_id; -// input.name = tabgroup_id; -// tab.querySelector("label").setAttribute('for', new_id); -// } -// -// let nav = popup.getElementsByClassName("popup-control")[0]; -// bind_popup_control(nav); -// -// /* -------------------- */ -// -// // TODO download links -// -// /* -------------------- */ -// -// event.id = id; -// popup.id = "popup" + id; -// -// return [popup, event]; -// } -// -// create_event_down (intended_target) { -// 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 != intended_target) return; -// that.down_on_event = true; -// -// that.event_start.x = e.clientX; -// that.event_start.y = e.clientY; -// } -// } -// -// /* -// round_to: what start and end times should round to when dragging, in fractionsb -// of the width of the containing container. -// -// TODO limit this to only continue when on the intended event_container. -// -// (event → [0, 1)), 𝐑, bool → event → () -// */ -// create_event_move(pos_in, round_to=1, wide_element=false) { -// let that = this; -// return function (e) { -// if (e.buttons != 1 || ! that.down_on_event) return; -// -// /* 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; } -// -// /* only allow start of dragging on background */ -// if (e.target != this) return; -// -// /* only on left click */ -// if (e.buttons != 1) return; -// -// let [popup, event] = that.create_empty_event(); -// that.event = event; -// -// /* TODO better solution to add popup to DOM */ -// document.getElementsByTagName("main")[0].append(popup); -// -// /* [0, 1) -- where are we in the container */ -// /* Ronud to force steps of quarters */ -// /* NOTE for in-day events a floor here work better, while for -// all day events I want a round, but which has the tip over point -// around 0.7 instead of 0.5. -// It might also be an idea to subtract a tiny bit from the short events -// mouse position, since I feel I always get to late starts. -// */ -// let time = round_time(pos_in(this, e), round_to); -// -// event.dataset.time1 = time; -// event.dataset.time2 = time; -// -// /* ---------------------------------------- */ -// -// this.appendChild(event); -// -// /* requires that event is child of an '.event-container'. */ -// new VComponent( -// event, -// wide_element=wide_element); -// // bind_properties(event, wide_element); -// -// /* requires that dtstart and dtend properties are initialized */ -// -// /* ---------------------------------------- */ -// -// /* Makes all current events transparent when dragging over them. -// Without this weird stuff happens when moving over them -// -// This includes ourselves. -// */ -// for (let e of this.children) { -// e.style.pointerEvents = "none"; -// } -// -// } -// -// let time1 = Number(that.event.dataset.time1); -// let time2 = that.event.dataset.time2 = -// round_time(pos_in(that.event.parentElement, e), -// round_to); -// -// /* ---------------------------------------- */ -// -// let event_container = that.event.closest(".event-container"); -// -// /* These two are in UTC */ -// let container_start = parseDate(event_container.dataset.start); -// let container_end = parseDate(event_container.dataset.end); -// -// /* ---------------------------------------- */ -// -// /* ms */ -// let duration = container_end - container_start; -// -// let start_in_duration = duration * Math.min(time1,time2); -// let end_in_duration = duration * Math.max(time1,time2); -// -// /* Notice that these are converted to UTC, since the intervals are given -// in utc, and I only really care about local time (which a specific local -// timezone doesn't give me) -// */ -// /* TODO Should these inherit UTC from container_*? */ -// let d1 = new Date(container_start.getTime() + start_in_duration) -// let d2 = new Date(container_start.getTime() + end_in_duration) -// -// // console.log(that.event); -// console.log(d1, d2); -// that.event.properties.dtstart = d1; -// that.event.properties.dtend = d2; -// } -// } -// -// create_event_finisher (callback) { -// 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 = ""; -// } -// -// place_in_edit_mode(that.event); -// -// let localevent = that.event; -// that.event = null; -// -// callback (localevent); -// -// } -// } -// } +class EventCreator { + + /* dynamicly created event when dragging */ + constructor() { + this.event = false; + this.event_start = { x: NaN, y: NaN }; + this.down_on_event = false; + } + + create_empty_event () { + /* TODO this doesn't clone JS attributes */ + + // let event = document.getElementById("event-template") + // .firstChild.cloneNode(true); + // let popup = document.getElementById("popup-template") + // .firstChild.cloneNode(true); + + // document.createElement('vevent-block'); + + /* -------------------- */ + /* Manually transfer or recreate attributes which we still need */ + /* TODO shouldn't these use transferListeners (or similar)? + See input_list.js:transferListeners */ + + for (let dt of popup.getElementsByClassName("date-time")) { + init_date_time_single(dt); + } + + popup.getElementsByClassName("edit-form")[0].onsubmit = function () { + create_event(event); + return false; /* stop default */ + } + + /* -------------------- */ + /* Fix tabs for newly created popup */ + + let id = gensym ("__js_event"); + + // TODO remove button? + // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))` + + /* + let tabgroup_id = gensym(); + for (let tab of popup.querySelectorAll(".tabgroup .tab")) { + let new_id = gensym(); + let input = tab.querySelector("input"); + input.id = new_id; + input.name = tabgroup_id; + tab.querySelector("label").setAttribute('for', new_id); + } + + let nav = popup.getElementsByClassName("popup-control")[0]; + bind_popup_control(nav); + */ + + /* -------------------- */ + + // TODO download links + + /* -------------------- */ + + event.id = id; + popup.id = "popup" + id; + + return [popup, event]; + } + + create_event_down (intended_target) { + 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 != intended_target) return; + that.down_on_event = true; + + that.event_start.x = e.clientX; + that.event_start.y = e.clientY; + } + } + + /* + round_to: what start and end times should round to when dragging, in fractionsb + of the width of the containing container. + + TODO limit this to only continue when on the intended event_container. + + (event → [0, 1)), 𝐑, bool → event → () + */ + create_event_move(pos_in, round_to=1, wide_element=false) { + let that = this; + return function (e) { + if (e.buttons != 1 || ! that.down_on_event) return; + + /* 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; } + + /* only allow start of dragging on background */ + if (e.target != this) return; + + /* only on left click */ + if (e.buttons != 1) return; + + // let [popup, event] = that.create_empty_event(); + // that.event = event; + that.event = document.createElement('vevent-block'); + + /* TODO better solution to add popup to DOM */ + // document.getElementsByTagName("main")[0].append(popup); + + /* [0, 1) -- where are we in the container */ + /* Ronud to force steps of quarters */ + /* NOTE for in-day events a floor here work better, while for + all day events I want a round, but which has the tip over point + around 0.7 instead of 0.5. + It might also be an idea to subtract a tiny bit from the short events + mouse position, since I feel I always get to late starts. + */ + let time = round_time(pos_in(this, e), round_to); + + event.dataset.time1 = time; + event.dataset.time2 = time; + + /* ---------------------------------------- */ + + this.appendChild(event); + + /* requires that event is child of an '.event-container'. */ + // new VComponent( + // event, + // wide_element=wide_element); + // bind_properties(event, wide_element); + + /* requires that dtstart and dtend properties are initialized */ + + /* ---------------------------------------- */ + + /* Makes all current events transparent when dragging over them. + Without this weird stuff happens when moving over them + + This includes ourselves. + */ + for (let e of this.children) { + e.style.pointerEvents = "none"; + } + + } + + let time1 = Number(that.event.dataset.time1); + let time2 = that.event.dataset.time2 = + round_time(pos_in(that.event.parentElement, e), + round_to); + + /* ---------------------------------------- */ + + let event_container = that.event.closest(".event-container"); + + /* These two are in UTC */ + let container_start = parseDate(event_container.dataset.start); + let container_end = parseDate(event_container.dataset.end); + + /* ---------------------------------------- */ + + /* ms */ + let duration = container_end - container_start; + + let start_in_duration = duration * Math.min(time1,time2); + let end_in_duration = duration * Math.max(time1,time2); + + /* Notice that these are converted to UTC, since the intervals are given + in utc, and I only really care about local time (which a specific local + timezone doesn't give me) + */ + /* TODO Should these inherit UTC from container_*? */ + let d1 = new Date(container_start.getTime() + start_in_duration) + let d2 = new Date(container_start.getTime() + end_in_duration) + + // console.log(that.event); + console.log(d1, d2); + that.event.properties.dtstart = d1; + that.event.properties.dtend = d2; + } + } + + create_event_finisher (callback) { + 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 = ""; + } + + place_in_edit_mode(that.event); + + let localevent = that.event; + that.event = null; + + callback (localevent); + + } + } +} @@ -316,9 +321,9 @@ window.addEventListener('load', function () { } } - for (let nav of document.getElementsByClassName("popup-control")) { - bind_popup_control(nav); - } + // for (let nav of document.getElementsByClassName("popup-control")) { + // bind_popup_control(nav); + // } for (let el of document.getElementsByClassName("event")) { /* Popup script replaces need for anchors to events. -- cgit v1.2.3 From 4cf9587a5188e5853bbcf97b71109e7cb9331d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 3 Oct 2021 21:54:30 +0200 Subject: work --- static/script.js | 100 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 51 insertions(+), 49 deletions(-) (limited to 'static/script.js') diff --git a/static/script.js b/static/script.js index 5ef498f3..16ff7bbd 100644 --- a/static/script.js +++ b/static/script.js @@ -28,14 +28,14 @@ class EventCreator { /* TODO shouldn't these use transferListeners (or similar)? See input_list.js:transferListeners */ - for (let dt of popup.getElementsByClassName("date-time")) { - init_date_time_single(dt); - } + // for (let dt of popup.getElementsByClassName("date-time")) { + // init_date_time_single(dt); + // } - popup.getElementsByClassName("edit-form")[0].onsubmit = function () { - create_event(event); - return false; /* stop default */ - } + // popup.getElementsByClassName("edit-form")[0].onsubmit = function () { + // create_event(event); + // return false; /* stop default */ + // } /* -------------------- */ /* Fix tabs for newly created popup */ @@ -128,12 +128,12 @@ class EventCreator { */ let time = round_time(pos_in(this, e), round_to); - event.dataset.time1 = time; - event.dataset.time2 = time; + that.event.dataset.time1 = time; + that.event.dataset.time2 = time; /* ---------------------------------------- */ - this.appendChild(event); + this.appendChild(that.event); /* requires that event is child of an '.event-container'. */ // new VComponent( @@ -186,9 +186,11 @@ class EventCreator { let d2 = new Date(container_start.getTime() + end_in_duration) // console.log(that.event); - console.log(d1, d2); - that.event.properties.dtstart = d1; - that.event.properties.dtend = d2; + console.log(d1.format("~L~H:~M"), d2.format("~L~H:~M")); + that.event.redraw({ getProperty: (name) => + ({ dtstart: d1, dtend: d2 })[name]}); + // that.event.properties.dtstart = d1; + // that.event.properties.dtend = d2; } } @@ -204,7 +206,7 @@ class EventCreator { e.style.pointerEvents = ""; } - place_in_edit_mode(that.event); + // place_in_edit_mode(that.event); let localevent = that.event; that.event = null; @@ -222,40 +224,40 @@ class EventCreator { TODO stop requiring a weird button press to change calendar. */ -function place_in_edit_mode (event) { - let popup = document.getElementById("popup" + event.id) - let container = popup.getElementsByClassName('dropdown-goes-here')[0] - let calendar_dropdown = document.getElementById('calendar-dropdown-template').firstChild.cloneNode(true); - - let [_, calclass] = popup.classList.find(/^CAL_/); - label: { - for (let [i, option] of calendar_dropdown.childNodes.entries()) { - if (option.value === calclass.substr(4)) { - calendar_dropdown.selectedIndex = i; - break label; - } - } - /* no match, try find default calendar */ - let t; - if ((t = calendar_dropdown.querySelector("[selected]"))) { - event.properties.calendar = t.value; - } - } - - - /* Instant change while user is stepping through would be - * preferable. But I believe that