diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/binders.js | 34 | ||||
| -rw-r--r-- | static/date_time.js | 54 | ||||
| -rw-r--r-- | static/script.js | 26 | ||||
| -rw-r--r-- | static/style.scss | 28 | ||||
| -rw-r--r-- | static/vcal.js | 39 |
5 files changed, 85 insertions, 96 deletions
diff --git a/static/binders.js b/static/binders.js index f6c306bd..72550191 100644 --- a/static/binders.js +++ b/static/binders.js @@ -110,3 +110,37 @@ function bind_wholeday(el, e) { } }); } + + +/* used for dtstart and dtend input boxes + init_date_time MUST be called beforehand +*/ +function bind_date_time(el, e) { + e.addEventListener('input', function () { + let dt = el.properties[e.name].value; + if (e.value == '') return; + let y, m, d, h, s; + switch (this.type) { + case 'date': + [y,m,d] = this.value.split('-') + dt.setYear(Number(y)/* - 1900 */); + dt.setMonth(Number(m) - 1); + dt.setDate(d); + break; + case 'time': + [h,m,s] = this.value.split(':') + dt.setHours(Number(h)); + dt.setMinutes(Number(m)); + dt.setSeconds(0); + break; + default: + console.log("How did you get here??? ", e); + } + + el.properties[e.name] = dt; + }); + + el.properties.get_callback_list(e.name).push( + [e, (s, v) => s.value = v.format("~Y-~m-~dT~H:~M")]); + +} diff --git a/static/date_time.js b/static/date_time.js index 274d476f..8b7249dd 100644 --- a/static/date_time.js +++ b/static/date_time.js @@ -1,30 +1,36 @@ -function init_date_time() { - for (let dt of document.getElementsByClassName("date-time")) { - dt.time = dt.querySelector('[type=time]'); - dt.date = dt.querySelector('[type=date]'); +function init_date_time_single(dt) { + dt.time = dt.querySelector('[type=time]'); + dt.date = dt.querySelector('[type=date]'); - Object.defineProperty(dt, 'value', { - get: () => (dt.date.value && dt.time.value) - // TODO wrapping <date-time/> tag - ? dt.date.value + "T" + dt.time.value - : "", - set: (v) => [dt.date.value, dt.time.value] = v.split("T"), - }); + Object.defineProperty(dt, 'value', { + get: () => (dt.date.value && dt.time.value) + // TODO wrapping <date-time/> tag + ? dt.date.value + "T" + dt.time.value + : "", + set: (v) => [dt.date.value, dt.time.value] = v.split("T"), + }); - Object.defineProperty(dt, 'name', { - get: () => dt.attributes.name.value - }); + Object.defineProperty(dt, 'name', { + get: () => dt.attributes.name.value + }); - dt._addEventListener = dt.addEventListener; - dt.addEventListener = function (field, proc) { - switch (field) { - case 'input': - dt.time.addEventListener(field, proc); - dt.date.addEventListener(field, proc); - break; - default: - dt._addEventListener(field, proc); - } + dt._addEventListener = dt.addEventListener; + dt.addEventListener = function (field, proc) { + /* input events are propagated to children + other events target ourselves */ + switch (field) { + case 'input': + dt.time.addEventListener(field, proc); + dt.date.addEventListener(field, proc); + break; + default: + dt._addEventListener(field, proc); } } } + +function init_date_time() { + for (let dt of document.getElementsByClassName("date-time")) { + init_date_time_single(dt); + } +} diff --git a/static/script.js b/static/script.js index 6a561757..8042c341 100644 --- a/static/script.js +++ b/static/script.js @@ -14,18 +14,30 @@ class EventCreator { } 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); - /* TODO shouldn't this use transferListeners (or similar)? + /* -------------------- */ + /* 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? @@ -43,8 +55,12 @@ class EventCreator { let nav = popup.getElementsByClassName("popup-control")[0]; bind_popup_control(nav); + /* -------------------- */ + // TODO download links + /* -------------------- */ + event.id = id; popup.id = "popup" + id; @@ -261,6 +277,8 @@ window.onload = function () { sch.update(d); }, 1000 * 60); + init_date_time(); + /* Is event creation active? */ if (EDIT_MODE) { let eventCreator = new EventCreator; @@ -294,7 +312,7 @@ window.onload = function () { let popupElement = document.getElementById("popup" + event.id); open_popup(popupElement); - popupElement.querySelector("input[name='summary']").focus(); + popupElement.querySelector("input[name='summary']").focus(); }); } @@ -311,7 +329,6 @@ window.onload = function () { */ el.parentElement.removeAttribute("href"); - /* TODO this doesn't yet apply to newly created events */ let popup = document.getElementById("popup" + el.id); popup.getElementsByClassName("edit-form")[0].onsubmit = function () { create_event(el); @@ -322,7 +339,7 @@ window.onload = function () { if (el.closest(".longevents")) { new VComponent(el, true); } else { - new VComponent(el, true); + new VComponent(el, false); } } @@ -379,7 +396,6 @@ window.onload = function () { // init_arbitary_kv(); - init_date_time(); init_input_list(); } diff --git a/static/style.scss b/static/style.scss index 202e3a34..052c9a93 100644 --- a/static/style.scss +++ b/static/style.scss @@ -881,34 +881,6 @@ along with their colors. } .timeinput { - - display: grid; - grid-template-columns: 1fr [lbl-start] 1ch 1fr 1ch [lbl-end]; - grid-template-rows: [lbl-start] 0.7fr 1fr 1fr 0.3fr [lbl-end]; - - label { - background-color: rgba(10,20,30,0.7); - color: white; - border-radius: 1em; - - grid-column: lbl-start / lbl-end; - grid-row: lbl-start / lbl-end; - - text-align: center; - - user-select: none; - - z-index: 1; - - } - - input { - z-index: 2; - } - - input:checked ~ input { - z-index: 0; - } } } diff --git a/static/vcal.js b/static/vcal.js index 366b879a..13c489b8 100644 --- a/static/vcal.js +++ b/static/vcal.js @@ -80,45 +80,6 @@ class VComponent { /* checkbox for whole day */ - for (let field of ['dtstart', 'dtend']) { - - this.get_callback_list(`--${field}-time`).push( - [el, (el, v) => { let date = this[field]; - if (v == '') return; - let [h,m,s] = v.split(':') - date.setHours(Number(h)); - date.setMinutes(Number(m)); - date.setSeconds(0); - this[field] = date; }]) - this.get_callback_list(`--${field}-date`).push( - [el, (el, v) => { let date = this[field]; - if (v == '') return; - let [y,m,d] = v.split('-') - date.setYear(Number(y)/* - 1900*/); - date.setMonth(Number(m) - 1); - date.setDate(d); - this[field] = date; }]) - - - /* Manual fetch of the fields instead of the general method, - to avoid an infinite loop of dtstart setting --dtstart-time, - and vice versa. - NOTE if many more fields require special treatment then a - general solution is required. - */ - let l = this.get_callback_list(field); - console.log(l); - l.push( - [el, (el, v) => { popup - .querySelector(`.edit-tab input[name='${field}-time']`) - .value = v.format("~H:~M"); - popup - .querySelector(`.edit-tab input[name='${field}-date']`) - .value = v.format("~Y-~m-~d"); - }]); - console.log(l); - } - /* Popuplate default types, see types.js for property_names */ for (let property of property_names) { this.ical_properties.add(property) |