From 2aaddd02d19685fc981ac1f8c4ab9eff0e854456 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Sun, 7 Jan 2024 18:58:04 +0100 Subject: [PATCH 1/3] New carousel component --- .../migrations/33_carousel_component.sql | 150 ++++++++++++++++++ sqlpage/templates/carousel.handlebars | 40 +++++ 2 files changed, 190 insertions(+) create mode 100644 examples/official-site/sqlpage/migrations/33_carousel_component.sql create mode 100644 sqlpage/templates/carousel.handlebars diff --git a/examples/official-site/sqlpage/migrations/33_carousel_component.sql b/examples/official-site/sqlpage/migrations/33_carousel_component.sql new file mode 100644 index 00000000..461a1aaf --- /dev/null +++ b/examples/official-site/sqlpage/migrations/33_carousel_component.sql @@ -0,0 +1,150 @@ +INSERT INTO component (name, description, icon, introduced_in_version) +VALUES ( + 'carousel', + 'A carousel is used to display multiple pieces of visual content without taking up too much space.', + 'carousel-horizontal', + '0.18.0' + ); + +INSERT INTO parameter ( + component, + name, + description, + type, + top_level, + optional + ) +VALUES ( + 'carousel', + 'name', + 'Name of the carousel.', + 'TEXT', + TRUE, + FALSE + ), + ( + 'carousel', + 'title', + 'Title of the carousel.', + 'TEXT', + TRUE, + TRUE + ), + ( + 'carousel', + 'indicators', + 'Style of image indicators (e.g. square, dot).', + 'TEXT', + TRUE, + TRUE + ), + ( + 'carousel', + 'vertical', + 'Whether to use the vertical image indicators.', + 'BOOLEAN', + TRUE, + TRUE + ), + ( + 'carousel', + 'controls', + 'Whether to show the control links to go previous or next item.', + 'BOOLEAN', + TRUE, + TRUE + ), + ( + 'carousel', + 'width', + 'Width of the component, between 1 and 12.', + 'NUMBER', + TRUE, + FALSE + ), + ( + 'carousel', + 'center', + 'Whether to center the carousel.', + 'BOOLEAN', + TRUE, + TRUE + ), + ( + 'carousel', + 'fade', + 'Whether to apply the fading effect.', + 'BOOLEAN', + TRUE, + TRUE + ), + ( + 'carousel', + 'image', + 'The URL (absolute or relative) of an image to display in the carousel.', + 'URL', + FALSE, + FALSE + ), + ( + 'carousel', + 'title', + 'Add caption to the slide.', + 'TEXT', + FALSE, + TRUE + ), + ( + 'carousel', + 'contents', + 'Add paragraph to the slide.', + 'TEXT', + FALSE, + TRUE + ); + + +select + 'carousel' as component, + 'somecats' as name, + 'Some cats' as title, + 'square' as indicators, --square or dot + FALSE as vertical, + TRUE as controls, + 6 as width, + TRUE as center, + FALSE as fade; + +select + "https://placekitten.com/408/285" as image, + 'Second cat' as title, + 'Some representative placeholder content for the second slide.' as contents; +select + "https://placekitten.com/408/286" as image, + 'Third cat' as title; + +-- Insert example(s) for the component +INSERT INTO example(component, description, properties) +VALUES + ( + 'carousel', + 'A basic example of carousel', + JSON( + '[ + {"component":"carousel","name":"cats1","title":"Cats","width":6}, + {"image":"https://placekitten.com/408/285"}, + {"image":"https://placekitten.com/408/286"} + ]' + ) + ), + ( + 'carousel', + 'An advanced example of carousel with controls', + JSON( + '[ + {"component":"carousel","name":"cats2","title":"Cats","width":6,"center":"TRUE","controls":"TRUE"}, + {"image":"https://placekitten.com/408/285","title":"A first cat","contents":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."}, + {"image":"https://placekitten.com/408/286","title":"Another cat"} + ]' + ) + ); \ No newline at end of file diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars new file mode 100644 index 00000000..e7de2fa6 --- /dev/null +++ b/sqlpage/templates/carousel.handlebars @@ -0,0 +1,40 @@ +
+
+ {{#if title}} +
+
{{title}}
+
+ {{/if}} + +
+ {{#if controls}} + + + + + + + + + {{/if}} +
+ From 1debbce72633cc656669783d58f1dc55c6dd22e0 Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Mon, 8 Jan 2024 21:32:57 +0100 Subject: [PATCH 2/3] Use description column instead of contents. The column description_md is a short paragraph formatted using markdown. --- sqlpage/templates/carousel.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sqlpage/templates/carousel.handlebars b/sqlpage/templates/carousel.handlebars index e7de2fa6..af3b092d 100644 --- a/sqlpage/templates/carousel.handlebars +++ b/sqlpage/templates/carousel.handlebars @@ -16,7 +16,7 @@ {{#if title}}
{{title}}
- {{#if contents}}

{{contents}}

{{/if}} + {{#if description_md}}

{{{markdown description_md}}}

{{else}}{{#if description}}

{{description}}

{{/if}}{{/if}}
{{/if}} From 88b2ccc3dd370cae65453e45dc078ed2b432c1bd Mon Sep 17 00:00:00 2001 From: Olivier Auverlot Date: Mon, 8 Jan 2024 21:33:20 +0100 Subject: [PATCH 3/3] Corrections in the documentation --- .../migrations/33_carousel_component.sql | 40 +++++++------------ 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/examples/official-site/sqlpage/migrations/33_carousel_component.sql b/examples/official-site/sqlpage/migrations/33_carousel_component.sql index 461a1aaf..2ee7c68c 100644 --- a/examples/official-site/sqlpage/migrations/33_carousel_component.sql +++ b/examples/official-site/sqlpage/migrations/33_carousel_component.sql @@ -17,7 +17,7 @@ INSERT INTO parameter ( VALUES ( 'carousel', 'name', - 'Name of the carousel.', + 'An unique string to identify the caroussel component in the HTML page.', 'TEXT', TRUE, FALSE @@ -25,7 +25,7 @@ VALUES ( ( 'carousel', 'title', - 'Title of the carousel.', + 'A name to display at the top of the carousel.', 'TEXT', TRUE, TRUE @@ -33,7 +33,7 @@ VALUES ( ( 'carousel', 'indicators', - 'Style of image indicators (e.g. square, dot).', + 'Style of image indicators (square or dot).', 'TEXT', TRUE, TRUE @@ -96,33 +96,21 @@ VALUES ( ), ( 'carousel', - 'contents', - 'Add paragraph to the slide.', + 'description', + 'A short paragraph.', + 'TEXT', + FALSE, + TRUE + ), + ( + 'carousel', + 'description_md', + 'A short paragraph formatted using markdown.', 'TEXT', FALSE, TRUE ); - -select - 'carousel' as component, - 'somecats' as name, - 'Some cats' as title, - 'square' as indicators, --square or dot - FALSE as vertical, - TRUE as controls, - 6 as width, - TRUE as center, - FALSE as fade; - -select - "https://placekitten.com/408/285" as image, - 'Second cat' as title, - 'Some representative placeholder content for the second slide.' as contents; -select - "https://placekitten.com/408/286" as image, - 'Third cat' as title; - -- Insert example(s) for the component INSERT INTO example(component, description, properties) VALUES @@ -143,7 +131,7 @@ VALUES JSON( '[ {"component":"carousel","name":"cats2","title":"Cats","width":6,"center":"TRUE","controls":"TRUE"}, - {"image":"https://placekitten.com/408/285","title":"A first cat","contents":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."}, + {"image":"https://placekitten.com/408/285","title":"A first cat","description":"The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae."}, {"image":"https://placekitten.com/408/286","title":"Another cat"} ]' )