From 0354c6d6697d20fffd78cc9bbf251e62f5274659 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Sun, 8 Jun 2025 12:05:56 +0200 Subject: [PATCH 1/4] New modal component and upgrade of the button component to allow the opening of a modal box --- sqlpage/templates/button.handlebars | 1 + 1 file changed, 1 insertion(+) diff --git a/sqlpage/templates/button.handlebars b/sqlpage/templates/button.handlebars index 19ac66ec..5a5ddfe5 100644 --- a/sqlpage/templates/button.handlebars +++ b/sqlpage/templates/button.handlebars @@ -17,6 +17,7 @@ {{~#if download}} download="{{download}}"{{/if}} {{~#if rel}} rel="{{rel}}"{{/if}} {{~#if tooltip}} data-bs-toggle="tooltip" data-bs-placement="top" title="{{tooltip}}"{{/if}} + {{~#if modal}} data-bs-toggle="modal" data-bs-target="#{{modal}}"{{/if}} role="button"> {{~#if image~}} From 49ee73b7a88aca8118340e046f84df1b69f171d3 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Sun, 8 Jun 2025 12:13:48 +0200 Subject: [PATCH 2/4] Modal component --- .../sqlpage/migrations/63_modal.sql | 28 +++++++++++++++++++ sqlpage/templates/modal.handlebars | 28 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 examples/official-site/sqlpage/migrations/63_modal.sql create mode 100644 sqlpage/templates/modal.handlebars diff --git a/examples/official-site/sqlpage/migrations/63_modal.sql b/examples/official-site/sqlpage/migrations/63_modal.sql new file mode 100644 index 00000000..c253102b --- /dev/null +++ b/examples/official-site/sqlpage/migrations/63_modal.sql @@ -0,0 +1,28 @@ +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'); + +INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'modal', * FROM (VALUES + ('title','Description of the modal box.','TEXT',TRUE,FALSE), + ('close','The text to display in the Close button.','TEXT',TRUE,FALSE), + ('contents','A paragraph of text to display, without any formatting, without having to make additional queries.','TEXT',FALSE,TRUE), + ('contents_md','Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).','TEXT',FALSE,TRUE), + ('unsafe_contents_md','Markdown format with html blocks. Use this only with trusted content. See the html-blocks section of the Commonmark spec for additional info.','TEXT',FALSE,TRUE), + ('scrollable','Dreate a scrollable modal that allows scroll the modal body.','BOOLEAN',TRUE,TRUE), + ('class','Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css.','TEXT',TRUE,TRUE), + ('id','ID attribute added to the container in HTML. It can be used to target this item through css or for displaying this item.','TEXT',TRUE,FALSE) +) x; + +INSERT INTO example(component, description, properties) VALUES + ('modal', + 'This example shows how to create a modal box that displays a paragraph of text. The modal window is opened with the help of a button.', + json('[ + {"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","modal":"my_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; \ No newline at end of file diff --git a/sqlpage/templates/modal.handlebars b/sqlpage/templates/modal.handlebars new file mode 100644 index 00000000..cf6494ab --- /dev/null +++ b/sqlpage/templates/modal.handlebars @@ -0,0 +1,28 @@ +
+
+
+
+
{{title}}
+ +
+
+ {{~#each_row~}} +

+ {{~#if contents_md~}} + {{{markdown contents_md}}} + {{else}} + {{~#if unsafe_contents_md~}} + {{{markdown unsafe_contents_md 'allow_unsafe'}}} + {{else}} + {{~contents~}} + {{~/if~}} + {{~/if~}} +

+ {{~/each_row~}} +
+
+ +
+
+
+
From e06f9a57d04fecc9ead7b05948b71098733aeccd Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Mon, 9 Jun 2025 07:48:04 +0200 Subject: [PATCH 3/4] Update examples/official-site/sqlpage/migrations/63_modal.sql --- examples/official-site/sqlpage/migrations/63_modal.sql | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/63_modal.sql b/examples/official-site/sqlpage/migrations/63_modal.sql index c253102b..ab964935 100644 --- a/examples/official-site/sqlpage/migrations/63_modal.sql +++ b/examples/official-site/sqlpage/migrations/63_modal.sql @@ -7,7 +7,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S ('contents','A paragraph of text to display, without any formatting, without having to make additional queries.','TEXT',FALSE,TRUE), ('contents_md','Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).','TEXT',FALSE,TRUE), ('unsafe_contents_md','Markdown format with html blocks. Use this only with trusted content. See the html-blocks section of the Commonmark spec for additional info.','TEXT',FALSE,TRUE), - ('scrollable','Dreate a scrollable modal that allows scroll the modal body.','BOOLEAN',TRUE,TRUE), + ('scrollable','Create a scrollable modal that allows scroll the modal body.','BOOLEAN',TRUE,TRUE), ('class','Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css.','TEXT',TRUE,TRUE), ('id','ID attribute added to the container in HTML. It can be used to target this item through css or for displaying this item.','TEXT',TRUE,FALSE) ) x; From 0fde9eae4cbc71b7a38444b4bf7f63e846df77e6 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Mon, 9 Jun 2025 12:38:08 +0200 Subject: [PATCH 4/4] Support for embed content in modal box --- examples/official-site/examples/form.sql | 8 +++ .../sqlpage/migrations/63_modal.sql | 58 ++++++++++++++++++- sqlpage/templates/modal.handlebars | 52 ++++++++++++----- 3 files changed, 100 insertions(+), 18 deletions(-) create mode 100644 examples/official-site/examples/form.sql diff --git a/examples/official-site/examples/form.sql b/examples/official-site/examples/form.sql new file mode 100644 index 00000000..aef25559 --- /dev/null +++ b/examples/official-site/examples/form.sql @@ -0,0 +1,8 @@ +select + 'form' as component, + 'Save' as validate; +select + 'username' as name; +select + 'password' as name, + 'password' as type; \ No newline at end of file diff --git a/examples/official-site/sqlpage/migrations/63_modal.sql b/examples/official-site/sqlpage/migrations/63_modal.sql index ab964935..803bcff5 100644 --- a/examples/official-site/sqlpage/migrations/63_modal.sql +++ b/examples/official-site/sqlpage/migrations/63_modal.sql @@ -3,13 +3,20 @@ INSERT INTO component(name, icon, description, introduced_in_version) VALUES INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'modal', * FROM (VALUES ('title','Description of the modal box.','TEXT',TRUE,FALSE), - ('close','The text to display in the Close button.','TEXT',TRUE,FALSE), + ('close','The text to display in the Close button.','TEXT',TRUE,TRUE), ('contents','A paragraph of text to display, without any formatting, without having to make additional queries.','TEXT',FALSE,TRUE), ('contents_md','Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com).','TEXT',FALSE,TRUE), - ('unsafe_contents_md','Markdown format with html blocks. Use this only with trusted content. See the html-blocks section of the Commonmark spec for additional info.','TEXT',FALSE,TRUE), ('scrollable','Create a scrollable modal that allows scroll the modal body.','BOOLEAN',TRUE,TRUE), ('class','Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css.','TEXT',TRUE,TRUE), - ('id','ID attribute added to the container in HTML. It can be used to target this item through css or for displaying this item.','TEXT',TRUE,FALSE) + ('id','ID attribute added to the container in HTML. It can be used to target this item through css or for displaying this item.','TEXT',TRUE,FALSE), + ('large','Indicates that the modal box has an increased width.','BOOLEAN',TRUE,TRUE), + ('small','Indicates that the modal box has a reduced width.','BOOLEAN',TRUE,TRUE), + ('embed','Embed remote content in an iframe.','TEXT',TRUE,TRUE), + ('embed_mode','Use "iframe" to display embedded content within an iframe.','TEXT',TRUE,TRUE), + ('height','Height of the embedded content.','INTEGER',TRUE,TRUE), + ('allow','For embedded content, this attribute specifies the features or permissions that can be used.','TEXT',TRUE,TRUE), + ('sandbox','For embedded content, this attribute specifies the security restrictions on the loaded content.','TEXT',TRUE,TRUE), + ('style','Applies CSS styles to the embedded content.','TEXT',TRUE,TRUE) ) x; INSERT INTO example(component, description, properties) VALUES @@ -21,6 +28,51 @@ INSERT INTO example(component, description, properties) VALUES {"component": "button"}, {"title":"Open","modal":"my_modal"} ]') + ), + ('modal', + 'Example of modal form content', + json('[ + { + "component":"modal", + "id":"my_embed_form_modal", + "title":"Embeded form content", + "large":true, + "embed":"/examples/form.sql?_sqlpage_embed" + }, + {"component": "button"}, + {"title":"Open","modal":"my_embed_form_modal"} + ]') + ), + ('modal', + 'Example of modal chart content', + json('[ + { + "component":"modal", + "id":"my_embed_chart_modal", + "title":"Embeded chart content", + "close":"Close", + "embed":"/examples/chart.sql?_sqlpage_embed" + }, + {"component": "button"}, + {"title":"Open","modal":"my_embed_chart_modal"} + ]') + ), + ('modal', + 'Example of modal video content', + json('[ + { + "component":"modal", + "id":"my_embed_video_modal", + "title":"Embeded video content", + "close":"Close", + "embed":"https://www.youtube.com/embed/mXdgmSdaXkg", + "allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", + "embed_mode":"iframe", + "height":"350" + }, + {"component": "button"}, + {"title":"Open","modal":"my_embed_video_modal"} + ]') ); INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'button', * FROM (VALUES diff --git a/sqlpage/templates/modal.handlebars b/sqlpage/templates/modal.handlebars index cf6494ab..80e37389 100644 --- a/sqlpage/templates/modal.handlebars +++ b/sqlpage/templates/modal.handlebars @@ -1,28 +1,50 @@
-
+
{{title}}
- +
- {{~#each_row~}} -

- {{~#if contents_md~}} - {{{markdown contents_md}}} - {{else}} - {{~#if unsafe_contents_md~}} - {{{markdown unsafe_contents_md 'allow_unsafe'}}} - {{else}} - {{~contents~}} - {{~/if~}} +

+
+
+ {{~#if embed ~}} + {{~#if (eq embed_mode "iframe")}} + + {{~else~}} +
+ +
+ {{~/if~}} {{~/if~}} -

- {{~/each_row~}} + {{~#each_row~}} +

+ {{~#if contents_md~}} + {{{markdown contents_md}}} + {{else}} + {{~contents~}} + {{~/if~}} +

+ {{~/each_row~}} +
+
- + {{#if close}}{{/if}}
+