Add fancy editing of tag list.

3 files changed, 76 insertions, 7 deletions

diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index 89020bd8..67634492 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -131,7 +131,7 @@
                            (name "summary") (required)
                            (value ,(prop ev 'SUMMARY)))))
 
-             ,@(with-label "Heldag" `(input (@ (name "wholeday") (type "checkbox"))))
+             ,@(with-label "Heldag?" `(input (@ (name "wholeday") (type "checkbox"))))
 
              ,@(let ((start (prop ev 'DTSTART)))
                  (with-label "Start"
@@ -170,13 +170,19 @@
 
              ,@(with-label
                 "Kategorier"
-                (awhen (prop ev 'CATEGORIES)
-                       (map (lambda (c) `(button (@ (class "category")) ,c))
-                            it))
+                `(div (@ (class "inline-edit"))
+                      ,@(awhen (prop ev 'CATEGORIES)
+                               (map (lambda (c)
+                                      `(input (@ (size 2)
+                                                 (value ,c))))
+                                    it))
 
-                `(input (@ (class "category")
-                           (type "text")
-                           (placeholder "category"))))
+                      (input (@ (class "final")
+                                (size 2)
+                                (type "text")
+                                ))))
+
+             (input (@ (type "submit")))
              )))
 
 
diff --git a/static/script.js b/static/script.js
index ce57e5e1..069d9a2e 100644
--- a/static/script.js
+++ b/static/script.js
@@ -623,6 +623,11 @@ window.onload = function () {
     serializer.serializeToString(xml);
     */
 
+
+    for (let el of document.querySelectorAll(".inline-edit input")) {
+        el.oninput = update_inline_list;
+    }
+
 }
 
 function close_popup(popup) {
@@ -716,6 +721,25 @@ function get_property(el, field, default_value, bind_to_ical=true) {
 }
 
 
+
+/*
+class display_tab {
+}
+
+class edit_tab {
+}
+
+class vcomponent {
+    set_value(field, value) {
+        if (value === '') {
+            remove_property(field);
+        }
+    }
+}
+
+
+*/
+
 /*
   Properties are icalendar properties.
 
@@ -804,4 +828,34 @@ function bind_properties (el, wide_event=false) {
     calprop.push([el, rplcs]);
     calprop.push([el, (s, v) => s.dataset.calendar = v]);
 
+
+
+    /* ---------- Calendar ------------------------------ */
+
+
+}
+
+
+function advance_final(li) {
+    li.classList.remove("final");
+    let new_li = makeElement ('input', {
+        className: 'final',
+        size: 2,
+        oninput: li.oninput,
+    });
+    li.closest(".inline-edit").appendChild(new_li);
+}
+
+function update_inline_list () {
+    if (this.classList.contains("final")) {
+        if (this.value !== '') {
+            advance_final(this);
+        }
+    } else {
+        if (this.value === '') {
+            let sibling = this.previousElementSibling || this.nextElementSibling;
+            this.remove();
+            sibling.focus();
+        }
+    }
 }
diff --git a/static/style.scss b/static/style.scss
index 24f88f48..736f170a 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -844,6 +844,7 @@ along with their colors.
             display: block;
         }
 
+        /* REG */
         input[type='text'], textarea {
             width: 100%;
         }
@@ -852,6 +853,14 @@ along with their colors.
 
 }
 
+.inline-edit {
+    input {
+        /* important since regular spec is much stronger...*/
+        /* [REG] */
+        width: initial !important;
+    }
+}
+
 /* Other
 ----------------------------------------
 */