Skip to content

Commit 0fde9ea

Browse files
olivierauverlotolivierauverlot
committed
Support for embed content in modal box
1 parent e06f9a5 commit 0fde9ea

File tree

3 files changed

+100
-18
lines changed

3 files changed

+100
-18
lines changed

‎examples/official-site/examples/form.sql‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
select
2+
'form' as component,
3+
'Save' as validate;
4+
select
5+
'username' as name;
6+
select
7+
'password' as name,
8+
'password' as type;

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

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,20 @@ INSERT INTO component(name, icon, description, introduced_in_version) VALUES
33

44
INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'modal', * FROM (VALUES
55
('title','Description of the modal box.','TEXT',TRUE,FALSE),
6-
('close','The text to display in the Close button.','TEXT',TRUE,FALSE),
6+
('close','The text to display in the Close button.','TEXT',TRUE,TRUE),
77
('contents','A paragraph of text to display, without any formatting, without having to make additional queries.','TEXT',FALSE,TRUE),
88
('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),
9-
('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),
109
('scrollable','Create a scrollable modal that allows scroll the modal body.','BOOLEAN',TRUE,TRUE),
1110
('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),
12-
('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)
11+
('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),
12+
('large','Indicates that the modal box has an increased width.','BOOLEAN',TRUE,TRUE),
13+
('small','Indicates that the modal box has a reduced width.','BOOLEAN',TRUE,TRUE),
14+
('embed','Embed remote content in an iframe.','TEXT',TRUE,TRUE),
15+
('embed_mode','Use "iframe" to display embedded content within an iframe.','TEXT',TRUE,TRUE),
16+
('height','Height of the embedded content.','INTEGER',TRUE,TRUE),
17+
('allow','For embedded content, this attribute specifies the features or permissions that can be used.','TEXT',TRUE,TRUE),
18+
('sandbox','For embedded content, this attribute specifies the security restrictions on the loaded content.','TEXT',TRUE,TRUE),
19+
('style','Applies CSS styles to the embedded content.','TEXT',TRUE,TRUE)
1320
) x;
1421

1522
INSERT INTO example(component, description, properties) VALUES
@@ -21,6 +28,51 @@ INSERT INTO example(component, description, properties) VALUES
2128
{"component": "button"},
2229
{"title":"Open","modal":"my_modal"}
2330
]')
31+
),
32+
('modal',
33+
'Example of modal form content',
34+
json('[
35+
{
36+
"component":"modal",
37+
"id":"my_embed_form_modal",
38+
"title":"Embeded form content",
39+
"large":true,
40+
"embed":"/examples/form.sql?_sqlpage_embed"
41+
},
42+
{"component": "button"},
43+
{"title":"Open","modal":"my_embed_form_modal"}
44+
]')
45+
),
46+
('modal',
47+
'Example of modal chart content',
48+
json('[
49+
{
50+
"component":"modal",
51+
"id":"my_embed_chart_modal",
52+
"title":"Embeded chart content",
53+
"close":"Close",
54+
"embed":"/examples/chart.sql?_sqlpage_embed"
55+
},
56+
{"component": "button"},
57+
{"title":"Open","modal":"my_embed_chart_modal"}
58+
]')
59+
),
60+
('modal',
61+
'Example of modal video content',
62+
json('[
63+
{
64+
"component":"modal",
65+
"id":"my_embed_video_modal",
66+
"title":"Embeded video content",
67+
"close":"Close",
68+
"embed":"https://www.youtube.com/embed/mXdgmSdaXkg",
69+
"allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
70+
"embed_mode":"iframe",
71+
"height":"350"
72+
},
73+
{"component": "button"},
74+
{"title":"Open","modal":"my_embed_video_modal"}
75+
]')
2476
);
2577

2678
INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'button', * FROM (VALUES

‎sqlpage/templates/modal.handlebars‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,50 @@
11
<div class="modal{{~#if class}} {{class}}{{/if~}}" id="{{id}}" tabindex="-1" aria-hidden="false" aria-labelledby="{{title}}">
2-
<div class="modal-dialog{{#if scrollable}} modal-dialog-scrollable"{{/if}} role="document">
2+
<div role="document" class="modal-dialog {{#if small}} modal-sm{{/if}}{{#if large}} modal-lg{{/if}}{{#if scrollable}} modal-dialog-scrollable{{/if}}">
33
<div class="modal-content">
44
<div class="modal-header">
55
<h5 class="modal-title">{{title}}</h5>
6-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{close}}"></button>
6+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{default close "close"}}"></button>
77
</div>
88
<div class="modal-body">
9-
{{~#each_row~}}
10-
<p>
11-
{{~#if contents_md~}}
12-
{{{markdown contents_md}}}
13-
{{else}}
14-
{{~#if unsafe_contents_md~}}
15-
{{{markdown unsafe_contents_md 'allow_unsafe'}}}
16-
{{else}}
17-
{{~contents~}}
18-
{{~/if~}}
9+
<div class="card bg-transparent border-0"
10+
{{~#if (and embed (ne embed_mode "iframe"))}} data-pre-init="card" data-embed="{{embed}}"{{/if ~}}
11+
>
12+
<div class="card-body p-0">
13+
<div class="card-content remove-bottom-margin"></div>
14+
{{~#if embed ~}}
15+
{{~#if (eq embed_mode "iframe")}}
16+
<iframe src="{{embed}}"
17+
width="100%"
18+
{{~#if height}} height="{{height}}"{{/if~}}
19+
{{~#if allow}} allow="{{allow}}"{{/if~}}
20+
{{~#if sandbox}} sandbox="{{sandbox}}"{{/if~}}
21+
{{~#if style}} style="{{style}}"{{/if~}}
22+
>
23+
</iframe>
24+
{{~else~}}
25+
<div class="d-flex justify-content-center h-100 align-items-center card-loading-placeholder">
26+
<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
27+
<span class="visually-hidden">Loading...</span>
28+
</div>
29+
</div>
30+
{{~/if~}}
1931
{{~/if~}}
20-
</p>
21-
{{~/each_row~}}
32+
{{~#each_row~}}
33+
<p>
34+
{{~#if contents_md~}}
35+
{{{markdown contents_md}}}
36+
{{else}}
37+
{{~contents~}}
38+
{{~/if~}}
39+
</p>
40+
{{~/each_row~}}
41+
</div>
42+
</div>
2243
</div>
2344
<div class="modal-footer">
24-
<button type="button" class="btn me-primary" data-bs-dismiss="modal">{{close}}</button>
45+
{{#if close}}<button type="button" class="btn me-primary" data-bs-dismiss="modal">{{close}}</button>{{/if}}
2546
</div>
2647
</div>
2748
</div>
2849
</div>
50+

0 commit comments

Comments
 (0)