bundle tomselect with sqlpage

Author: lovasoa

build.rs

@@ -17,6 +17,7 @@ async fn main() {
         spawn(download_deps("sqlpage.css")),
         spawn(download_deps("tabler-icons.svg")),
         spawn(download_deps("apexcharts.js")),
+        spawn(download_deps("tomselect.js")),
     ] {
         h.await.unwrap();
     }

sqlpage/apexcharts.js

@@ -190,4 +190,4 @@ function bubbleTooltip({ series, seriesIndex, dataPointIndex, w }) {
     return tooltip.outerHTML;
 }
 
-sqlpage_chart();
+add_init_function(sqlpage_chart);

sqlpage/sqlpage.js

@@ -1,16 +1,6 @@
 /* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js */
 /* !include https://cdn.jsdelivr.net/npm/[email protected]/dist/list.min.js */
 
-function sqlpage_chart() {
-  let first_chart = document.querySelector("[data-pre-init=chart]");
-  if (first_chart) {
-    // Add the apexcharts js to the page
-    const apexcharts_js = document.createElement("script");
-    apexcharts_js.src = first_chart.dataset.js;
-    document.head.appendChild(apexcharts_js);
-  }
-}
-
 function sqlpage_card() {
     for (const c of document.querySelectorAll("[data-pre-init=card]")) {
         const source = c.dataset.embed;
@@ -151,14 +141,24 @@ function get_tabler_color(name) {
     return getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + name);
 }
 
-function init_components() {
-    sqlpage_table();
-    sqlpage_chart();
-    sqlpage_map();
-    sqlpage_card();
-    sqlpage_select_dropdown();
+function load_scripts() {
+  let addjs = document.querySelectorAll("[data-sqlpage-js]");
+  for (const js of new Set([...addjs].map(({dataset}) => dataset.sqlpageJs))) {
+    const script = document.createElement("script");
+    script.src = js;
+    document.head.appendChild(script);
+  }
 }
 
-document.addEventListener('DOMContentLoaded', init_components);
+function add_init_function(f) {
+  document.addEventListener('DOMContentLoaded', f);
+  document.addEventListener('fragment-loaded', f);
+  if (document.readyState !== "loading") f();
+}
 
-document.addEventListener('fragment-loaded', init_components);
+add_init_function(function init_components() {
+  sqlpage_table();
+  sqlpage_map();
+  sqlpage_card();
+  load_scripts();
+});

sqlpage/templates/chart.handlebars

@@ -2,7 +2,7 @@
     {{#if id}}id="{{id}}"{{/if}}
     class="card my-2 {{class}}" 
     data-pre-init="chart" 
-    data-js="/{{static_path 'apexcharts.js'}}"
+    data-sqlpage-js="/{{static_path 'apexcharts.js'}}"
 >
     <div class="card-body">
         <div class="d-flex">

sqlpage/templates/form.handlebars

@@ -63,7 +63,10 @@
                         {{~#if required}} required="required" {{/if~}}
                         {{~#if autofocus}} autofocus {{/if~}}
                         {{~#if multiple}} multiple {{/if~}}
-                        {{~#if dropdown}} data-pre-init="select-dropdown" {{/if~}}
+                        {{~#if dropdown}} 
+                            data-pre-init="select-dropdown"
+                            data-sqlpage-js="/{{static_path 'tomselect.js'}}"
+                        {{/if~}}
                         {{~#if placeholder}} placeholder="{{placeholder}}" {{/if~}}
                         {{~#if create_new}} data-create_new={{create_new}} {{/if~}}
                         >

sqlpage/tomselect.js

@@ -0,0 +1,11 @@
+/* !include https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.popular.min.js */
+
+function sqlpage_select_dropdown() {
+    for (const s of document.querySelectorAll("[data-pre-init=select-dropdown]")) {
+        new TomSelect(s, {
+          create: s.dataset.create_new
+        });
+    }
+}
+
+add_init_function(sqlpage_select_dropdown);

src/template_helpers.rs

@@ -136,6 +136,7 @@ fn static_path_helper(v: &JsonValue) -> anyhow::Result<JsonValue> {
         "sqlpage.js" => Ok(static_filename!("sqlpage.js").into()),
         "sqlpage.css" => Ok(static_filename!("sqlpage.css").into()),
         "apexcharts.js" => Ok(static_filename!("apexcharts.js").into()),
+        "tomselect.js" => Ok(static_filename!("tomselect.js").into()),
         other => Err(anyhow::anyhow!("unknown static file: {other:?}")),
     }
 }

src/webserver/http.rs

@@ -483,6 +483,7 @@ pub fn create_app(
     App::new()
         .service(static_content::js())
         .service(static_content::apexcharts_js())
+        .service(static_content::tomselect_js())
         .service(static_content::css())
         .service(static_content::icons())
         .default_service(fn_service(main_handler))

src/webserver/static_content.rs

@@ -38,6 +38,10 @@ pub fn apexcharts_js() -> Resource {
     static_file_endpoint!("apexcharts", "js", "application/javascript")
 }
 
+pub fn tomselect_js() -> Resource {
+    static_file_endpoint!("tomselect", "js", "application/javascript")
+}
+
 pub fn css() -> Resource {
     static_file_endpoint!("sqlpage", "css", "text/css")
 }