-
-
Notifications
You must be signed in to change notification settings - Fork 148
New carousel component #179
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
Closed
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
138 changes: 138 additions & 0 deletions
138
examples/official-site/sqlpage/migrations/33_carousel_component.sql
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,138 @@ | ||
| 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', | ||
| 'An unique string to identify the caroussel component in the HTML page.', | ||
| 'TEXT', | ||
| TRUE, | ||
| FALSE | ||
| ), | ||
| ( | ||
| 'carousel', | ||
| 'title', | ||
| 'A name to display at the top of the carousel.', | ||
| 'TEXT', | ||
| TRUE, | ||
| TRUE | ||
| ), | ||
| ( | ||
| 'carousel', | ||
| 'indicators', | ||
| 'Style of image indicators (square or 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', | ||
| 'description', | ||
| 'A short paragraph.', | ||
| 'TEXT', | ||
| FALSE, | ||
| TRUE | ||
| ), | ||
| ( | ||
| 'carousel', | ||
| 'description_md', | ||
| 'A short paragraph formatted using markdown.', | ||
| 'TEXT', | ||
| FALSE, | ||
| TRUE | ||
| ); | ||
|
|
||
| -- 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","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"} | ||
| ]' | ||
| ) | ||
| ); | ||
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 description_md}}<p>{{{markdown description_md}}}</p>{{else}}{{#if description}}<p>{{description}}</p>{{/if}}{{/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