diff options
-rw-r--r-- | module/html/vcomponent.scm | 9 | ||||
-rw-r--r-- | module/html/view/calendar.scm | 1 | ||||
-rw-r--r-- | static/script.js | 38 | ||||
-rw-r--r-- | static/style.css | 4 |
4 files changed, 49 insertions, 3 deletions
diff --git a/module/html/vcomponent.scm b/module/html/vcomponent.scm index 5123af09..3fac17bb 100644 --- a/module/html/vcomponent.scm +++ b/module/html/vcomponent.scm @@ -168,10 +168,13 @@ (define-public (popup ev id) - `(div (@ (class "popup-container") (id ,id) + `(div (@ (id ,id) (class "popup-container CAL_" + ,(html-attr (or (prop (parent ev) 'NAME) + "unknown"))) (onclick "event.stopPropagation()")) - (div (@ (class "popup CAL_" ,(html-attr (or (prop (parent ev) 'NAME) - "unknown"))) ) + ;; TODO all (?) code uses .popup-container as the popup, while .popup sits and does nothing. + ;; Do something about this? + (div (@ (class "popup")) (nav (@ (class "popup-control")) ,(btn "×" title: "Stäng" diff --git a/module/html/view/calendar.scm b/module/html/view/calendar.scm index 3c239bc6..72fcccbd 100644 --- a/module/html/view/calendar.scm +++ b/module/html/view/calendar.scm @@ -290,6 +290,7 @@ calendars)) (div (@ (id "calendar-dropdown-template") (class "template")) (select + (option "- Choose a Calendar -") ,@(map (lambda (calendar) `(option (@ (value ,(html-attr (prop calendar 'NAME)))) ,(prop calendar 'NAME))) diff --git a/static/script.js b/static/script.js index 0385ac5a..ed133a2d 100644 --- a/static/script.js +++ b/static/script.js @@ -122,6 +122,21 @@ function bind_popup_control (nav) { }); } +/* + * Finds the first element of the DOMTokenList whichs value matches + * the supplied regexp. Returns a pair of the index and the value. + */ +DOMTokenList.prototype.find = function (regexp) { + console.log(this); + let entries = this.entries(); + let entry; + while (! (entry = entries.next()).done) { + if (entry.value[1].match(regexp)) { + return entry.value; + } + } +} + class EventCreator { /* dynamicly created event when dragging */ @@ -505,6 +520,29 @@ function place_in_edit_mode (event) { let evtext = popup.getElementsByClassName('eventtext')[0] let calendar_dropdown = document.getElementById('calendar-dropdown-template').firstChild.cloneNode(true); + + let [_, calclass] = popup.classList.find(/^CAL_/); + for (let [i, option] of calendar_dropdown.childNodes.entries()) { + if (option.value === calclass.substr(4)) { + calendar_dropdown.selectedIndex = i; + break; + } + } + + /* Instant change while user is stepping through would be + * preferable. But I believe that <option> first gives us the + * input once selected */ + calendar_dropdown.onchange = function () { + let popup = this.closest('.popup-container') + let event = document.getElementById(popup.id.substr(5)) + + let [_, calclass] = popup.classList.find(/^CAL_/); + + popup.classList.replace(calclass, "CAL_" + this.value) + event.classList.replace(calclass, "CAL_" + this.value) + + + } evtext.prepend(calendar_dropdown); /* ---------------------------------------- */ diff --git a/static/style.css b/static/style.css index 719cca1c..21543388 100644 --- a/static/style.css +++ b/static/style.css @@ -742,6 +742,10 @@ along with their colors. cursor: grab; background-color: var(--color); + /* Transition for background color + * Matches that of '.event'. + * TODO break out to common place */ + transition: 0.3s; } .popup-control .btn { |