Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: add lazy component #615

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

Draft
mtt-artis wants to merge 5 commits into sqlpage:main
base: main
Choose a base branch
Loading
from mtt-artis:lazy
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Some comments aren't visible on the classic Files Changed page.

10 changes: 10 additions & 0 deletions examples/cards-with-remote-content/lazy.sql
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
select 'lazy' as component;

select
'/chart-example.sql?_sqlpage_embed' as embed,
'card my-2' as class,
'height:340px' as style;

select '/map-example.sql' as embed;

select '/table-example.sql?_sqlpage_embed' as embed;
54 changes: 32 additions & 22 deletions sqlpage/sqlpage.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,29 @@

const nonce = document.currentScript.nonce;

function sqlpage_card() {
for (const c of document.querySelectorAll("[data-pre-init=card]")) {
const source = c.dataset.embed;
fetch(c.dataset.embed)
.then(res => res.text())
.then(html => {
const body = c.querySelector(".card-content");
body.innerHTML = html;
c.removeAttribute("data-pre-init");
const spinner = c.querySelector(".card-loading-placeholder");
if (spinner) {
spinner.parentNode.removeChild(spinner);
}
const fragLoadedEvt = new CustomEvent("fragment-loaded", {
bubbles: true
});
c.dispatchEvent(fragLoadedEvt);
})
function sqlpage_embed() {
for (const c of document.querySelectorAll("[data-embed]:not([aria-busy=true])")) {
c.ariaBusy = true;
let url;
try {
url = new URL(c.dataset.embed, window.location.href)
} catch {
console.error(`'${c.dataset.embed}' is not a valid url`)
continue;
}
url.searchParams.set("_sqlpage_embed", "");

fetch(url)
.then(res => res.text())
.then(html => {
c.innerHTML = html;
c.ariaBusy = false;
delete c.dataset.embed;
c.dispatchEvent(new CustomEvent("fragment-loaded", {
bubbles: true
}));
})
.catch(err => console.error("Fetch error: ", err));
}
}

Expand Down Expand Up @@ -176,9 +181,14 @@ function sqlpage_form() {
}
}

function get_tabler_color(name) {
return getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + name);
function create_tabler_color() {
const style = getComputedStyle(document.documentElement);
return function get_tabler_color(name) {
return style.getPropertyValue('--tblr-' + name);
}
}

const get_tabler_color = create_tabler_color();

function load_scripts() {
let addjs = document.querySelectorAll("[data-sqlpage-js]");
Expand All @@ -198,6 +208,6 @@ function add_init_fn(f) {

add_init_fn(sqlpage_table);
add_init_fn(sqlpage_map);
add_init_fn(sqlpage_card);
add_init_fn(sqlpage_embed);
add_init_fn(sqlpage_form);
add_init_fn(load_scripts);
add_init_fn(load_scripts);
24 changes: 12 additions & 12 deletions sqlpage/templates/card.handlebars
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@
<div class="card h-100
{{~#if active}} card-active{{/if~}}
{{~#if background_color}} bg-{{background_color}} text-{{background_color}}-fg{{/if~}}
"
{{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
">
{{#if link}}
<a href="{{link}}" style="text-decoration: inherit; color: inherit">
{{/if}}
Expand All @@ -39,13 +38,19 @@
{{/if}}
<div class="card-body">
{{#if title}}<h2 class="card-title fs-3 me-3">{{title}}</h2>{{/if}}
<div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}">
<div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}"
{{#if (and embed (ne embed_mode "iframe"))}} data-embed="{{embed}}"{{/if}}
>
{{~description~}}
{{~#if description_md~}}
{{{markdown description_md}}}
{{~/if~}}
{{#if (and embed (ne embed_mode "iframe"))}}
<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
{{~/if~}}
</div>
{{~#if embed ~}}
{{~#if (eq embed_mode "iframe")}}
<iframe src="{{embed}}"
width="{{#if width}}{{width}}{{else}}100%{{/if}}"
Expand All @@ -55,23 +60,18 @@
{{~#if style}} style="{{style}}"{{/if~}}
>
</iframe>
{{~else~}}
<div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
{{~/if~}}
{{~/if~}}
</div>
{{#if link}}
</a>
{{/if}}
{{#if footer}}
<div class="card-footer text-muted py-2">
{{#if footer_link}}
{{#if footer_link}}
<a href="{{footer_link}}">{{footer}}</a>
{{else}}
{{else}}
{{footer}}
{{/if}}
{{/if}}
</div>
{{/if}}
{{#if footer_md}}
Expand Down
13 changes: 13 additions & 0 deletions sqlpage/templates/lazy.handlebars
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="{{default class "my-2"}}"{{~#if style}} style="{{style}}" {{/if~}}>
{{#each_row}}
<div data-embed="{{embed}}">
<div class="{{default class "card my-2"}}" {{~#if style}} style="{{style}}" {{/if~}}>
<div class="h-full w-full p-2 d-flex align-items-center justify-content-center">
<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
{{/each_row}}
</div>

AltStyle によって変換されたページ (->オリジナル) /