diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/script.js | 182 |
1 files changed, 108 insertions, 74 deletions
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]); |