Skip to content

Commit 5fa50f3

Browse files
lovasoalovasoa
authored
carousel component (#214)
* Initial carousel component implementation * change carousel example * make the carousel text description more readable by adding a background * update cat example * carousel automatic cycling is now optional * remove requirement for unique name attribute in carousel see #179 (comment) * fix carousel buttons * uodate deps * fix official site docs * lint * update changelog --------- Co-authored-by: Olivier Auverlot <@olivierauverlot>
1 parent c359574 commit 5fa50f3

File tree

7 files changed

+240
-25
lines changed

7 files changed

+240
-25
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
- MySQL's [`JSON_TABLE`](https://dev.mysql.com/doc/refman/8.0/en/json-table-functions.html) table-valued function, that allows easily iterating over json structures
88
- MySQL's [`CALL`](https://dev.mysql.com/doc/refman/8.0/en/call.html) statements, to call stored procedures.
99
- PostgreSQL `^@` starts-with operator
10+
- New [carousel](https://sql.ophir.dev/documentation.sql?component=carousel#component) component to display a carousel of images.
11+
- For those who write [custom components](https://sql.ophir.dev/custom_components.sql), a new `@component_index` variable is available in templates to get the index of the current component in the page. This makes it easy to generate unique ids for components.
1012

1113
## 0.18.2 (2024-01-29)
1214

‎Cargo.lock

Lines changed: 17 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/official-site/custom_components.sql

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ and SQLPage adds a few more:
111111
- `each_row`: iterates over the rows of a query result
112112
- `typeof`: returns the type of a value (`string`, `number`, `boolean`, `object`, `array`, `null`)
113113
114+
### Attributes
115+
116+
In addition to the parameters you pass to your components in your SQL queries,
117+
SQLPage adds the following attributes to the context of your components:
118+
119+
- `@component_index` : the index of the current component in the page. Useful to generate unique ids or classes.
120+
- `@row_index` : the index of the current row in the current component. Useful to implement special behavior on the first row, for instance.
121+
114122
## Overwriting the default components
115123
116124
You can overwrite the default components, including the `shell` component,

‎examples/official-site/sqlpage/migrations/34_carousel.sql

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
INSERT INTO component (name, description, icon, introduced_in_version)
2+
VALUES (
3+
'carousel',
4+
'A carousel is used to display multiple pieces of visual content without taking up too much space.',
5+
'carousel-horizontal',
6+
'0.18.3'
7+
);
8+
INSERT INTO parameter (
9+
component,
10+
name,
11+
description,
12+
type,
13+
top_level,
14+
optional
15+
)
16+
VALUES
17+
(
18+
'carousel',
19+
'title',
20+
'A name to display at the top of the carousel.',
21+
'TEXT',
22+
TRUE,
23+
TRUE
24+
),
25+
(
26+
'carousel',
27+
'indicators',
28+
'Style of image indicators (square or dot).',
29+
'TEXT',
30+
TRUE,
31+
TRUE
32+
),
33+
(
34+
'carousel',
35+
'vertical',
36+
'Whether to use the vertical image indicators.',
37+
'BOOLEAN',
38+
TRUE,
39+
TRUE
40+
),
41+
(
42+
'carousel',
43+
'controls',
44+
'Whether to show the control links to go previous or next item.',
45+
'BOOLEAN',
46+
TRUE,
47+
TRUE
48+
),
49+
(
50+
'carousel',
51+
'width',
52+
'Width of the component, between 1 and 12. Default is 12.',
53+
'NUMBER',
54+
TRUE,
55+
TRUE
56+
),
57+
(
58+
'carousel',
59+
'auto',
60+
'Whether to automatically cycle through the carousel items. Default is false.',
61+
'BOOLEAN',
62+
TRUE,
63+
TRUE
64+
),
65+
(
66+
'carousel',
67+
'center',
68+
'Whether to center the carousel.',
69+
'BOOLEAN',
70+
TRUE,
71+
TRUE
72+
),
73+
(
74+
'carousel',
75+
'fade',
76+
'Whether to apply the fading effect.',
77+
'BOOLEAN',
78+
TRUE,
79+
TRUE
80+
),
81+
(
82+
'carousel',
83+
'image',
84+
'The URL (absolute or relative) of an image to display in the carousel.',
85+
'URL',
86+
FALSE,
87+
FALSE
88+
),
89+
(
90+
'carousel',
91+
'title',
92+
'Add caption to the slide.',
93+
'TEXT',
94+
FALSE,
95+
TRUE
96+
),
97+
(
98+
'carousel',
99+
'description',
100+
'A short paragraph.',
101+
'TEXT',
102+
FALSE,
103+
TRUE
104+
),
105+
(
106+
'carousel',
107+
'description_md',
108+
'A short paragraph formatted using markdown.',
109+
'TEXT',
110+
FALSE,
111+
TRUE
112+
);
113+
-- Insert example(s) for the component
114+
INSERT INTO example(component, description, properties)
115+
VALUES (
116+
'carousel',
117+
'A basic example of carousel',
118+
JSON(
119+
'[
120+
{"component":"carousel","name":"cats1","title":"Famous Database Animals"},
121+
{"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Elefantes_africanos_de_sabana_%28Loxodonta_africana%29%2C_Elephant_Sands%2C_Botsuana%2C_2018-07-28%2C_DD_114-117_PAN.jpg/2560px-Elefantes_africanos_de_sabana_%28Loxodonta_africana%29%2C_Elephant_Sands%2C_Botsuana%2C_2018-07-28%2C_DD_114-117_PAN.jpg"},
122+
{"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Penguin_Island_panorama_with_ferry_and_dolphins_in_foreground%2C_March_2023_06.jpg/1280px-Penguin_Island_panorama_with_ferry_and_dolphins_in_foreground%2C_March_2023_06.jpg"}
123+
]'
124+
)
125+
),
126+
(
127+
'carousel',
128+
'An advanced example of carousel with controls',
129+
JSON(
130+
'[
131+
{"component":"carousel","name":"cats2","title":"Cats","width":6,"center":true,"controls":true,"auto":true},
132+
{"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Cat_Sphynx._Kittens._img_11.jpg/1024px-Cat_Sphynx._Kittens._img_11.jpg","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."},
133+
{"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Cat_close-up_2004_b.jpg/1280px-Cat_close-up_2004_b.jpg","title":"Another cat"}
134+
]'
135+
)
136+
);

‎examples/official-site/sqlpage/migrations/32_shared_id_class_attributes.sql renamed to ‎examples/official-site/sqlpage/migrations/99_shared_id_class_attributes.sql

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ FROM (VALUES
1717
('timeline', FALSE),
1818
-- ('title', TRUE),
1919
('tracking', TRUE),
20-
('text', TRUE)
20+
('text', TRUE),
21+
('carousel', TRUE)
2122
);
2223

2324
INSERT INTO parameter(component, top_level, name, description, type, optional)
@@ -47,6 +48,7 @@ FROM (VALUES
4748
('timeline', TRUE),
4849
('timeline', FALSE),
4950
-- ('title', TRUE),
50-
('tracking', TRUE)
51+
('tracking', TRUE),
52+
('carousel', TRUE)
5153
);
5254

‎sqlpage/templates/carousel.handlebars

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}} {{class}}" {{#if id}}id="{{id}}"{{/if}}>
2+
<div class="card-body">
3+
{{#if title}}
4+
<div class="d-flex align-items-center">
5+
<div class="subheader">{{title}}</div>
6+
</div>
7+
{{/if}}
8+
<div id="_sqlpage_carousel_{{@component_index}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" {{#if auto}}data-bs-ride="carousel"{{/if}}>
9+
<div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}">
10+
{{#each_row}}
11+
<button type="button" data-bs-target="#_sqlpage_carousel_{{@../component_index}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button>
12+
{{#delay}}
13+
{{flush_delayed}}
14+
<div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}">
15+
<img class="d-block w-100" alt="{{image}}" src="{{image}}" />
16+
{{#if title}}
17+
<div class="carousel-caption-background d-none d-md-block"></div>
18+
<div class="carousel-caption d-none d-md-block">
19+
<h5>{{title}}</h5>
20+
{{#if description_md}}<p>{{{markdown description_md}}}</p>{{else}}{{#if description}}<p>{{description}}</p>{{/if}}{{/if}}
21+
</div>
22+
{{/if}}
23+
</div>
24+
{{/delay}}
25+
{{/each_row}}
26+
</div>
27+
<div class="carousel-inner">{{flush_delayed}}</div>
28+
</div>
29+
</div>
30+
{{#if controls}}
31+
<a class="carousel-control-prev" data-bs-target="#_sqlpage_carousel_{{@component_index}}" role="button" data-bs-slide="prev">
32+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
33+
<span class="visually-hidden">Previous</span>
34+
</a>
35+
<a class="carousel-control-next" data-bs-target="#_sqlpage_carousel_{{@component_index}}" role="button" data-bs-slide="next">
36+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
37+
<span class="visually-hidden">Next</span>
38+
</a>
39+
{{/if}}
40+
</div>

0 commit comments

Comments
 (0)