New carousel component #179
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
lovasoa marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| '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"} | ||
| ]' | ||
| ) | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <div class="card my-2 col-md-{{default width 12}}{{#if center}} mx-auto{{/if}}"> | ||
| <div class="card-body"> | ||
| {{#if title}} | ||
| <div class="d-flex align-items-center"> | ||
| <div class="subheader">{{title}}</div> | ||
| </div> | ||
| {{/if}} | ||
| <div id="{{name}}" class="carousel slide{{#if fade}} carousel-fade{{/if}}" data-bs-ride="carousel"> | ||
| <div class="carousel-indicators{{#if indicators}} carousel-indicators-{{indicators}}{{/if}}{{#if vertical}} carousel-indicators-vertical{{/if}}"> | ||
| {{#each_row}} | ||
| <button type="button" data-bs-target="#{{../name}}" data-bs-slide-to="{{@row_index}}" {{#if (eq @row_index 0)}}class="active"{{/if}}></button> | ||
| {{#delay}} | ||
| {{flush_delayed}} | ||
| <div class="carousel-item {{#if (eq @row_index 0)}}active{{/if}}"> | ||
| <img class="d-block w-100" alt="{{image}}" src="{{image}}" /> | ||
| {{#if title}} | ||
| <div class="carousel-caption d-none d-md-block"> | ||
| <h5>{{title}}</h5> | ||
| {{#if contents}}<p>{{contents}}</p>{{/if}} | ||
|
||
| </div> | ||
| {{/if}} | ||
| </div> | ||
| {{/delay}} | ||
| {{/each_row}} | ||
| </div> | ||
| <div class="carousel-inner">{{flush_delayed}}</div> | ||
| </div> | ||
| </div> | ||
| {{#if controls}} | ||
| <a class="carousel-control-prev" data-bs-target="#{{name}}" role="button" data-bs-slide="prev"> | ||
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Previous</span> | ||
| </a> | ||
| <a class="carousel-control-next" data-bs-target="#{{name}}" role="button" data-bs-slide="next"> | ||
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
| <span class="visually-hidden">Next</span> | ||
| </a> | ||
| {{/if}} | ||
| </div> | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We try to avoid having such requirements in sqlpage. We can do with it if there is no other choice, but it looks like this is an internal implementation technicality. Wouldn't it be better if the user didn't have to specify an id and make sure it is unique ? It is very easy to end up with duplicate identifiers and errors that are completely impossible to debug if you don't already understand html, javascript and the DOM. And the entire idea of sqlpage is to get rid of such prerequisites.
Couldn't we auto-generate an id like
carousel_{{query_number}}where query_number comes from https://github.com/lovasoa/SQLpage/blob/main/src/render.rs ?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it's possible to use an id like carousel_{{query_number}} but it seems to me not accessible in the template. If I understand the Rust code, the value of query_number is only initialized where an error is occured and only in development mode.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes render.rs needs to be updated to add query_number to the handlebars context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can look at how
row_indexis added to the context.query_numberneeds to be passed all the way down to theSplitTemplateRenderer