wip content index

front/js/main.js

@@ -6,10 +6,14 @@ import Mustache from "mustache";
 import 'htmx.org';
 import {dropdown} from "./components/dropdown.js";
 import {colorPicker} from "./recordEditor/colorPicker.js";
+import {sortReferences} from "./recordEditor/sortReferences.js";
+import {recordDialog} from "./recordEditor/recordDialog.js";
 
 addEventListener("load", (event) => {
     dropdown()
     colorPicker()
+    sortReferences()
+    recordDialog()
 });
 
 Mustache.escape = function (value) {

front/js/recordEditor/recordDialog.js

@@ -0,0 +1,32 @@
+import axios from "axios";
+
+export function recordDialog() {
+
+    document.querySelectorAll("[data-open-modal]").forEach(el => {
+        const schema = el.dataset.openModal
+        el.addEventListener("click", e => {
+            load(schema)
+        })
+    })
+}
+
+
+function load(schema) {
+    axios
+        .get("/lucent/content/" + schema)
+        .then((response) => {
+
+            const dialogWrapperEl = document.createElement("div");
+            dialogWrapperEl.innerHTML = response.data;
+            document.body.appendChild(dialogWrapperEl);
+            const dialogEl = dialogWrapperEl.querySelector("dialog");
+            dialogEl.showModal();
+            dialogWrapperEl.querySelector(".close").addEventListener("click", e => dialogEl.close());
+
+            dialogEl.addEventListener("close", (event) => {
+                dialogWrapperEl.remove();
+            });
+        })
+        .catch((error) => console.log(error));
+}
+

front/js/recordEditor/sortReferences.js

@@ -0,0 +1,19 @@
+import Sortable from "sortablejs";
+export function sortReferences() {
+    document.querySelectorAll(".color-picker").forEach(el => {
+
+        let options = {
+            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
+            easing: "cubic-bezier(1, 0, 0, 1)",
+            direction: 'vertical',
+            onUpdate: function (/**Event*/ evt) {
+                // dispatch("update", {
+                //     source: evt.oldIndex,
+                //     target: evt.newIndex,
+                // });
+            }
+        };
+
+        Sortable.create(el, options);
+    })
+}

front/js/svelte/content/elements/Rich.svelte

@@ -11,7 +11,8 @@
         /* max-width: 128px; */
         max-height: 24px;
         text-overflow: ellipsis;
-        /* white-space: nowrap; */
         overflow: hidden;
+        /* white-space: nowrap; */
+
     }
 </style>