download buttons

fixes #388

Author: lovasoa

CHANGELOG.md

@@ -11,7 +11,8 @@
  - [Updated SQL parser](https://github.com/sqlparser-rs/sqlparser-rs/blob/main/CHANGELOG.md#0470-2024-06-01). Fixes support for `AT TIME ZONE` in postgres. Fixes `GROUP_CONCAT()` in MySQL.
  - Add a new warning message in the logs when trying to use `SET $x = ` when there is already a form field named `x`.
  - **Empty Uploaded files**: when a form contains an optional file upload field, and the user does not upload a file, the field used to still be accessible to SQLPage file-related functions such as `sqlpage.uploaded_file_path` and `sqlpage.uploaded_file_mime_type`. This is now fixed, and these functions will return `NULL` when the user does not upload a file. `sqlpage.persist_uploaded_file` will not create an empty file in the target directory when the user does not upload a file, instead it will do nothing and return `NULL`.
- - In the [map](https://sql.ophir.dev/documentation.sql?component=map#component) component, when top-level latitude and longitude attributes are omitted, the map will now center on its markers. This makes it easier to create zoomed maps with a single marker.
+ - In the [map](https://sql.ophir.dev/documentation.sql?component=map#component) component, when top-level latitude and longitude properties are omitted, the map will now center on its markers. This makes it easier to create zoomed maps with a single marker.
+ - In the [button](https://sql.ophir.dev/documentation.sql?component=button#component) component, add a `download` property to make the button download a file when clicked, a `target` property to open the link in a new tab, and a `rel` property to prevent search engines from following the link.
 
 ## 0.22.0 (2024-05-29)
  -  **Important Security Fix:** The behavior of `SET $x` has been modified to match `SELECT $x`.

examples/official-site/sqlpage/migrations/18_button.sql

@@ -21,6 +21,9 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('icon_after', 'Name of an icon to display after the text in the button', 'ICON', FALSE, TRUE),
     ('icon', 'Name of an icon to be displayed on the left side of the button.', 'ICON', FALSE, TRUE),
     ('form', 'Identifier (id) of the form to which the button should submit.', 'TEXT', FALSE, TRUE),
+    ('rel', '"nofollow" when the contents of the target link are not endorsed, "noopener" when the target is not trusted, and "noreferrer" to hide where the user came from when they open the link.', 'TEXT', FALSE, TRUE),
+    ('target', '"_blank" to open the link in a new tab, "_self" to open it in the same tab, "_parent" to open it in the parent frame, or "_top" to open it in the full body of the window.', 'TEXT', FALSE, TRUE),
+    ('download', 'If defined, the link will download the target instead of navigating to it. Set the value to the desired name of the downloaded file.', 'TEXT', FALSE, TRUE),
     ('id', 'HTML Identifier to add to the button element.', 'TEXT', FALSE, TRUE)
 ) x;
 
@@ -77,4 +80,15 @@ In the target page, we could then use the GET variable `$action` to determine wh
         {"component":"button"}, 
         {"link":"?action=save", "form":"poem", "color":"primary", "title":"Save" },
         {"link":"?action=preview", "form":"poem", "outline":"yellow", "title":"Preview" }]')
+    );
+
+INSERT INTO example(component, description, properties) VALUES
+    ('button', 'A button that downloads a file when clicked, and prevents search engines from following the link.',
+    json('[{"component":"button"}, 
+        {"link":"/sqlpage_introduction_video.webm",
+            "title":"Download Video",
+            "icon":"download",
+            "download":"Introduction Video.webm",
+            "rel":"nofollow"
+        }]')
     );

sqlpage/templates/button.handlebars

@@ -12,6 +12,9 @@
         {{~#if ../shape}} btn-{{../shape}}{{/if}}
         {{~#if space_after}} me-auto{{/if}}"
         {{~#if id}} id="{{id}}"{{/if}}
+        {{~#if target}} target="{{target}}"{{/if}}
+        {{~#if download}} download="{{download}}"{{/if}}
+        {{~#if rel}} rel="{{rel}}"{{/if}}
         {{~#if tooltip}} data-bs-toggle="tooltip" data-bs-placement="top" title="{{tooltip}}"{{/if}}
         role="button">
         {{~#if icon~}}