feat: modals have their own URL

- Allow opening modals with a simple link, enabling triggering from
other components. - Persist modal state across page refreshes using URL
hash.

Author: lovasoa

CHANGELOG.md

@@ -6,6 +6,10 @@
   - Additionally, `base64` can be specified to decode binary data as base64 (compatible with [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs))
   - By default, the old behavior of the `fetch_with_meta` function is preserved: the response body is decoded as `utf-8` if possible, otherwise the response is encoded in `base64`.
  - Added a specific warning when a URL parameter and a form field have the same name. The previous general warning about referencing form fields with the `$var` syntax was confusing in that case.
+ - [modal](https://sql-page.com/component.sql?component=modal) component: allow opening modals with a simple link.
+   - This allows you to trigger modals from any other component, including tables, maps, forms, lists and more.
+   - Since modals have their own url inside the page, you can now link to a modal from another page, and if you refresh a page while the modal is open, the modal will stay open.
+   - modals now have an `open` parameter to open the modal automatically when the page is loaded.
 
 ## v0.36.1
  - Fix regression introduced in v0.36.0: PostgreSQL money values showed as 0.0

examples/official-site/sqlpage/migrations/63_modal.sql

@@ -1,5 +1,9 @@
 INSERT INTO component(name, icon, description, introduced_in_version) VALUES
-    ('modal', 'app-window', 'Defines the content of a modal box. Useful for displaying additional information or help.', '0.36.0');
+    ('modal', 'app-window', '
+Defines the a temporary popup box displayed on top of a webpage’s content.
+Useful for displaying additional information, help, or collect data from users.
+
+Modals are closed by default, and can be opened by clicking on a button or link targeting their ID.', '0.36.0');
 
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'modal', * FROM (VALUES
     ('title','Description of the modal box.','TEXT',TRUE,FALSE),
@@ -26,7 +30,7 @@ INSERT INTO example(component, description, properties) VALUES
         {"component": "modal","id": "my_modal","title": "A modal box","close": "Close"},
         {"contents":"I''m a modal window, and I allow you to display additional information or help for the user."},
         {"component": "button"},
-        {"title":"Open a simple modal","modal":"my_modal"}
+        {"title":"Open a simple modal","link":"#my_modal"}
         ]')
     ),
     ('modal',
@@ -40,11 +44,11 @@ INSERT INTO example(component, description, properties) VALUES
             "embed":"/examples/form.sql?_sqlpage_embed"
         },
         {"component": "button"},
-        {"title":"Open a modal with a form","modal":"my_embed_form_modal"}
+        {"title":"Open a modal with a form","link":"#my_embed_form_modal"}
         ]')
     ),
     ('modal',
-    'Example of modal chart content',
+    'A popup modal that contains a chart generated by a separate SQL file. The modal is triggered by links inside a datagrid.',
     json('[
         {
             "component":"modal",
@@ -53,8 +57,9 @@ INSERT INTO example(component, description, properties) VALUES
             "close":"Close",
             "embed":"/examples/chart.sql?_sqlpage_embed"
         },
-        {"component": "button"},
-        {"title":"Open a modal with a chart","modal":"my_embed_chart_modal"}
+        {"component": "datagrid"},
+        {"title":"Chart", "color":"blue", "description":"Revenue", "link":"#my_embed_chart_modal"},
+        {"title":"Form", "color":"green", "description":"Fill info", "link":"#my_embed_form_modal"},
         ]')
     ),
     ('modal',
@@ -70,11 +75,10 @@ INSERT INTO example(component, description, properties) VALUES
             "embed_mode":"iframe",
             "height":"350"
         },
-        {"component": "button"},
-        {"title":"Open a modal with a video","modal":"my_embed_video_modal"}
+        {"component": "text", "contents_md": "Open a [modal with a video](#my_embed_video_modal)"}
         ]')
     );
 
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'button', * FROM (VALUES
     ('modal','Display the modal window corresponding to the specified ID.','TEXT',FALSE,TRUE)
-) x;
+) x;

sqlpage/sqlpage.js

@@ -332,21 +332,37 @@ add_init_fn(sqlpage_form);
 add_init_fn(load_scripts);
 
 function init_bootstrap_components(event) {
-  if (window.bootstrap) {
-    const fragment = event.target;
-    for (const el of fragment.querySelectorAll('[data-bs-toggle="tooltip"]')) {
-      new bootstrap.Tooltip(el);
-    }
-    for (const el of fragment.querySelectorAll('[data-bs-toggle="popover"]')) {
-      new bootstrap.Popover(el);
-    }
-    for (const el of fragment.querySelectorAll('[data-bs-toggle="dropdown"]')) {
-      new bootstrap.Dropdown(el);
-    }
-    for (const el of fragment.querySelectorAll('[data-bs-ride="carousel"]')) {
-      new bootstrap.Carousel(el);
-    }
+  const bootstrap = window.bootstrap || window.tabler.bootstrap;
+  const fragment = event.target;
+  for (const el of fragment.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+    new bootstrap.Tooltip(el);
+  }
+  for (const el of fragment.querySelectorAll('[data-bs-toggle="popover"]')) {
+    new bootstrap.Popover(el);
+  }
+  for (const el of fragment.querySelectorAll('[data-bs-toggle="dropdown"]')) {
+    new bootstrap.Dropdown(el);
+  }
+  for (const el of fragment.querySelectorAll('[data-bs-ride="carousel"]')) {
+    new bootstrap.Carousel(el);
   }
 }
 
 document.addEventListener("fragment-loaded", init_bootstrap_components);
+
+function open_modal_for_hash() {
+  const hash = window.location.hash.substring(1);
+  if (!hash) return;
+  const modal = document.getElementById(hash);
+  const classes = modal.classList;
+  if (!modal || !classes.contains("modal")) return;
+  const bootstrap_modal =
+    window.tabler.bootstrap.Modal.getOrCreateInstance(modal);
+  bootstrap_modal.show();
+  modal.addEventListener("hidden.bs.modal", () => {
+    window.history.replaceState(null, "", "#");
+  });
+}
+
+window.addEventListener("hashchange", open_modal_for_hash);
+window.addEventListener("DOMContentLoaded", open_modal_for_hash);

sqlpage/templates/modal.handlebars

@@ -1,4 +1,8 @@
-<div class="modal{{~#if class}} {{class}}{{/if~}}" id="{{id}}" tabindex="-1" aria-hidden="false" aria-labelledby="{{title}}">
+<div class="modal {{~#if class}} {{class}}{{/if~}}"
+    id="{{id}}"
+    tabindex="-1"
+    aria-hidden="false"
+    aria-labelledby="{{title}}">
     <div role="document" class="modal-dialog {{#if small}} modal-sm{{/if}}{{#if large}} modal-lg{{/if}}{{#if scrollable}} modal-dialog-scrollable{{/if}}">
         <div class="modal-content">
             <div class="modal-header">
@@ -47,4 +51,3 @@
         </div>
     </div>
 </div>
-