@@ -90,13 +101,25 @@
document.getElementById('lbl').textContent = wt('ui.reading', 'READING');
document.getElementById('card').setAttribute('aria-label', wt('widget.label', 'Books'));
const API='/api';
- const id=new URLSearchParams(location.search).get('id')||'';
+ const params=new URLSearchParams(location.search);
+ const id=params.get('id')||'';
+ const SIZES={small:{shelves:1,show:8},medium:{shelves:1,show:16},large:{shelves:3,show:16}};
+ const size=SIZES[params.get('size')]?params.get('size'):'small';
+ const {shelves:SHELVES,show:SHOW}=SIZES[size];
const POLL_MS=300000;
const PALETTE=['#8E8E93','#008575','#956D51','#48484A','#008198','#A16A00','#C55300'];
const SRC_LABEL={recently:'RECENTLY ADDED',unread:'ON DECK',list:'READING'};
- const card=document.getElementById('card'), shelf=document.getElementById('shelf'), lbl=document.getElementById('lbl');
- const list=document.getElementById('books');
+ const card=document.getElementById('card'), lbl=document.getElementById('lbl');
+ const host=document.getElementById('shelves');
+ const tpl=host.firstElementChild;
+ card.classList.add('size-'+size);
+ const bays=[];
+ for(let i=0;i
0){ w.querySelectorAll('[id]').forEach(n=>n.removeAttribute('id')); host.appendChild(w); }
+ bays.push({ shelf:w.querySelector('.shelf'), list:w.querySelector('.books'), lbl:w.querySelector('.shelf-lbl') });
+ }
const info=document.getElementById('info'), iT=document.getElementById('i-t'), iA=document.getElementById('i-a'), iP=document.getElementById('i-p'), sr=document.getElementById('sr');
let href='';
@@ -116,7 +139,7 @@
}
function hideInfo(){ info.classList.remove('show'); info.setAttribute('aria-hidden','true'); }
- function render(books){
+ function render(books,list,shelf){
list.innerHTML='';
shelf.querySelectorAll('.empty').forEach(n=>n.remove());
/* Removing the bullets drops the list semantics in one engine, so the role
@@ -169,7 +192,16 @@
card.addEventListener('click',e=>{ if(e.target===card||e.target.closest('.head')) go(); });
card.addEventListener('keydown',e=>{ if(e.key==='Enter'){ go(); } });
}
- poll({ interval:POLL_MS, render:d=>{ lbl.textContent=SRC_LABEL[d.source]||'READING'; render(decorate(Array.isArray(d.books)?d.books:[])); } });
+ poll({ interval:POLL_MS, render:d=>{
+ const shelves=Array.isArray(d.shelves)?d.shelves:[{source:d.source,books:d.books}];
+ lbl.textContent=SHELVES>1?wt('widget.label','Books'):(SRC_LABEL[shelves[0]&&shelves[0].source]||'READING');
+ bays.forEach((bay,i)=>{
+ const sh=shelves[i]||{books:[]};
+ bay.lbl.hidden=SHELVES<2;
+ bay.lbl.textContent=SRC_LABEL[sh.source]||'READING';
+ render(decorate((Array.isArray(sh.books)?sh.books:[]).slice(0,SHOW)),bay.list,bay.shelf);
+ });
+ } });
}
boot();
diff --git a/public/widgets/books/widget.json b/public/widgets/books/widget.json
index da4833e..bd9c922 100644
--- a/public/widgets/books/widget.json
+++ b/public/widgets/books/widget.json
@@ -3,7 +3,9 @@
"label": "widget.label",
"glyph": "shelf",
"sizes": [
- "small"
+ "small",
+ "medium",
+ "large"
],
"card": "dark",
"fields": [
@@ -88,37 +90,49 @@
}
},
{
- "key": "source",
- "type": "select",
- "variant": "pills",
- "label": "source.label",
- "options": [
- {
- "value": "recently",
- "label": "source.opt.recently"
- },
+ "key": "shelves",
+ "type": "group",
+ "label": "shelves.label",
+ "countBySize": {
+ "small": 1,
+ "medium": 1,
+ "large": 3
+ },
+ "fields": [
{
- "value": "unread",
- "label": "source.opt.unread"
+ "key": "source",
+ "type": "select",
+ "variant": "pills",
+ "label": "source.label",
+ "options": [
+ {
+ "value": "recently",
+ "label": "source.opt.recently"
+ },
+ {
+ "value": "unread",
+ "label": "source.opt.unread"
+ },
+ {
+ "value": "list",
+ "label": "source.opt.list"
+ }
+ ]
},
{
- "value": "list",
- "label": "source.opt.list"
+ "key": "listId",
+ "type": "select",
+ "label": "listId.label",
+ "optional": true,
+ "optionsFrom": "lists",
+ "hint": "listId.hint",
+ "showIf": {
+ "field": "source",
+ "equals": "list"
+ }
}
]
},
- {
- "key": "listId",
- "type": "select",
- "label": "listId.label",
- "optional": true,
- "optionsFrom": "lists",
- "hint": "listId.hint",
- "showIf": {
- "field": "source",
- "equals": "list"
- }
- },
{
"key": "href",
"type": "text",
diff --git a/src/content/docs/docs/widgets/books.mdx b/src/content/docs/docs/widgets/books.mdx
index f48e501..227c15a 100644
--- a/src/content/docs/docs/widgets/books.mdx
+++ b/src/content/docs/docs/widgets/books.mdx
@@ -7,7 +7,10 @@ import WidgetGroup from '../../../../components/WidgetGroup.astro';
Shows what you are reading and how far through you are.
-Sizes: Small.
+Sizes: Small, Medium, Large.
+
+Small and medium hold one shelf. Large holds three, and each shelf shows its
+own view of the same library.