init

front/js/main.js

@@ -0,0 +1,63 @@
+import "./bootstrap";
+import "../sass/app.scss";
+import Account from "./svelte/Account.svelte";
+import Channel from "./svelte/Channel.svelte";
+import * as bootstrap from "bootstrap";
+import Mustache from "mustache";
+
+Mustache.escape = function (value) {
+    return value;
+};
+
+function enableTooltipsAnywhere() {
+    // Enable tooltips everywhere
+    var tooltipTriggerList = [].slice.call(
+        document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    );
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
+// Define all components
+const entryComponents = {
+    account: Account,
+    channel: Channel,
+};
+
+let loadedComponents = [];
+
+let loadSvelte = function () {
+    loadedComponents.map((comp) => comp.$destroy());
+    loadedComponents = [];
+
+    const elements = document.body.querySelectorAll(".lucent-component");
+    if (elements.length === 0) {
+        return;
+    }
+    const loadElement = function (element) {
+        const componentId = element.attributes["data-layout"].value;
+        const [_, component] = Object.entries(entryComponents).find(
+            ([key, _]) => componentId == key
+        );
+        if (!component) {
+            return [];
+        }
+
+        const jsonData = document.getElementById(
+            "json-" + componentId
+        ).innerHTML;
+        const props = JSON.parse(jsonData);
+        const compOptions = {
+            target: element,
+            props: props,
+        };
+
+        loadedComponents = [...loadedComponents, new component(compOptions)];
+    };
+    Array.from(elements).map(loadElement);
+};
+
+// document.addEventListener("turbo:load", loadSvelte);
+document.addEventListener("DOMContentLoaded", loadSvelte);
+document.addEventListener("DOMContentLoaded", enableTooltipsAnywhere);