Support iframe embed mode (#188)

Author: lorefnon

examples/official-site/documentation.sql

@@ -74,6 +74,7 @@ select 'card' as component, 3 AS columns where $component IS NOT NULL;
 select
     name as title,
     (CASE WHEN optional THEN '' ELSE 'REQUIRED. ' END) || description as description,
+    (CASE WHEN optional THEN '' ELSE 'REQUIRED. ' END) || description_md as description_md,
     type as footer,
     CASE type 
         WHEN 'COLOR' THEN 'https://tabler.io/docs/base/colors'
@@ -90,6 +91,7 @@ select 'card' as component, 3 AS columns where $component IS NOT NULL;
 select
     name as title,
     (CASE WHEN optional THEN '' ELSE 'REQUIRED. ' END) || description as description,
+    (CASE WHEN optional THEN '' ELSE 'REQUIRED. ' END) || description_md as description_md,
     type as footer,
     CASE type 
         WHEN 'COLOR' THEN 'https://tabler.io/docs/base/colors'
@@ -163,4 +165,4 @@ from example where component = $component AND properties IS NOT NULL;
 SELECT 'title' AS component, 3 AS level, 'Examples' AS contents
 WHERE EXISTS (SELECT 1 FROM example WHERE component = $component AND properties IS NULL);
 SELECT 'text' AS component, description AS contents_md
-FROM example WHERE component = $component AND properties IS NULL;
+FROM example WHERE component = $component AND properties IS NULL;

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -9,7 +9,8 @@ CREATE TABLE parameter(
     top_level BOOLEAN DEFAULT FALSE,
     name TEXT,
     component TEXT REFERENCES component(name) ON DELETE CASCADE,
-    description TEXT NOT NULL,
+    description TEXT,
+    description_md TEXT,
     type TEXT,
     optional BOOLEAN DEFAULT FALSE,
     PRIMARY KEY (component, top_level, name)

examples/official-site/sqlpage/migrations/31_card_docs_update.sql

@@ -24,11 +24,18 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('footer_link', 'An URL to which the user should be taken when they click on the footer.', 'URL', FALSE, TRUE),
     ('icon', 'Name of an icon to display on the left side of the card.', 'ICON', FALSE, TRUE),
     ('color', 'The name of a color, to be displayed on the left of the card to highlight it.', 'COLOR', FALSE, TRUE),
-    ('active', 'Whether this item in the grid is considered "active". Active items are displayed more prominently.', 'BOOLEAN', FALSE, TRUE),
+    ('active', 'Whether this item in the grid is considered "active". Active items are displayed more prominently.', 'BOOLEAN', FALSE, TRUE)
+) x;
+INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'card', * FROM (VALUES
     ('embed', 'A url whose contents will be fetched and injected into the body of this card.
         This can be used to inject arbitrary html content, but is especially useful for injecting
         the output of other sql files rendered by SQLPage. For the latter case you can pass the
-        `?_sqlpage_embed` query parameter, which will skip the shell layout', 'TEXT', FALSE, TRUE)
+        `?_sqlpage_embed` query parameter, which will skip the shell layout', 'TEXT', FALSE, TRUE),
+    ('embed_mode', 'Set to ''iframe'' to embed the target (specified through embed property) in an iframe.
+        Unless this is explicitly set, the embed target is fetched and injected within the parent page. If embed_mode is set to iframe,
+        You can also set height and width parameters to configure the appearance and the sandbox and allow parameters to configure
+        security aspects of the iframe. Refer to the [MDN page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
+        for an explanation of these parameters.', 'TEXT', FALSE, TRUE)
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES
@@ -52,6 +59,6 @@ INSERT INTO example(component, description, properties) VALUES
     ('card', 'Cards with remote content',
         json('[
             {"component":"card", "title":"Card with embedded remote content", "columns": 2},
-            {"title": "Embedded Chart", "embed": "/examples/chart.sql?_sqlpage_embed" },
-            {"title": "Description", "description_md": "You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)" }
-        ]'));
+            {"title": "Embedded Chart", "embed": "/examples/chart.sql?_sqlpage_embed", "footer_md": "You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)"  },
+            {"title": "Embedded Video", "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" }
+        ]'));

sqlpage/templates/card.handlebars

@@ -23,7 +23,7 @@
     mt-1 mb-3 {{class}}">
     {{#each_row}}
         <div class="col {{class}}" {{#if id}}id="{{id}}"{{/if}}>
-            <div class="card h-100 {{#if active}}card-active{{/if}}" {{#if embed }}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
+            <div class="card h-100 {{#if active}}card-active{{/if}}" {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
                 {{#if link}}
                     <a href="{{link}}" style="text-decoration: inherit; color: inherit">
                 {{/if}}
@@ -41,10 +41,20 @@
                             {{{markdown description_md}}}
                         {{~/if~}}
                     </div>
-                    {{~#if embed~}}
-                    <div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
+                    {{~#if embed ~}}
+                    {{~#if (eq embed_mode "iframe")}}
+                        <iframe src="{{embed}}" 
+                            width="{{#if width}}{{width}}{{else}}100%{{/if}}"
+                            {{~#if height}} height="{{height}}"{{/if~}}
+                            {{~#if allow}} allow="{{allow}}"{{/if~}}
+                            {{~#if sandbox}} sandbox="{{sandbox}}"{{/if~}}
+                        >
+                        </iframe>
+                    {{~else~}}
+                        <div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                    {{~/if~}}
                     {{~/if~}}
                 </div>
                 {{#if link}}