FrederikBaerentsen/BrickTracker
4
6
Fork 6
Code Issues 13 Pull Requests 2 Actions Packages Projects 1 Releases 4 Wiki Activity

Remove sort-target attribute, handle it internally

Browse Source
This commit is contained in:
Gregoo 2025-01-30 22:07:09 +01:00
parent 1213e9e176
commit 4ca7a50492
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/scripts/grid.js
View File

@ -50,8 +50,9 @@ class BrickGridSortButton {
// Grid class // Grid class
class BrickGrid { class BrickGrid {
constructor(grid) { constructor(grid, target = "div#grid>div") {
this.id = grid.id; this.id = grid.id;
this.target = target;
// Grid elements (built based on the initial id) // Grid elements (built based on the initial id)
this.html_grid = document.getElementById(this.id); this.html_grid = document.getElementById(this.id);
@ -72,7 +73,7 @@ class BrickGrid {
this.html_clear = document.querySelector("button[data-sort-clear]") this.html_clear = document.querySelector("button[data-sort-clear]")
if (this.html_clear) { if (this.html_clear) {
this.html_clear.addEventListener("click", ((grid) => (e) => { this.html_clear.addEventListener("click", ((grid) => (e) => {
grid.clear(e.currentTarget) grid.clear();
})(this)) })(this))
} }
@ -117,7 +118,7 @@ class BrickGrid {
} }
// Clear // Clear
clear(current) { clear() {
// Cleanup all // Cleanup all
for (const [id, button] of Object.entries(this.html_sort_buttons)) { for (const [id, button] of Object.entries(this.html_sort_buttons)) {
button.toggle(); button.toggle();
@ -129,7 +130,7 @@ class BrickGrid {
document.cookie = `sort-order=""; Path=/; SameSite=strict`; document.cookie = `sort-order=""; Path=/; SameSite=strict`;
// Reset sorting // Reset sorting
tinysort(current.dataset.sortTarget, { tinysort(this.target, {
selector: "div", selector: "div",
attr: "data-index", attr: "data-index",
order: "asc", order: "asc",
@ -204,7 +205,6 @@ class BrickGrid {
// Sort // Sort
sort(current, no_flip=false) { sort(current, no_flip=false) {
const target = current.data.sortTarget;
const attribute = current.data.sortAttribute; const attribute = current.data.sortAttribute;
const natural = current.data.sortNatural; const natural = current.data.sortNatural;
@ -217,7 +217,7 @@ class BrickGrid {
} }
// Sort // Sort
if (target && attribute) { if (attribute) {
let order = current.data.sortOrder; let order = current.data.sortOrder;
// First ordering // First ordering
@ -242,7 +242,7 @@ class BrickGrid {
document.cookie = `sort-order="${encodeURIComponent(order)}"; Path=/; SameSite=strict`; document.cookie = `sort-order="${encodeURIComponent(order)}"; Path=/; SameSite=strict`;
// Do the sorting // Do the sorting
tinysort(target, { tinysort(this.target, {
selector: "div", selector: "div",
attr: "data-" + attribute, attr: "data-" + attribute,
natural: natural == "true", natural: natural == "true",

16
templates/sets.html
View File

@ -17,21 +17,21 @@
<div id="grid-sort" class="input-group"> <div id="grid-sort" class="input-group">
<span class="input-group-text"><i class="ri-sort-asc"></i><span class="ms-1 d-none d-xxl-inline"> Sort</span></span> <span class="input-group-text"><i class="ri-sort-asc"></i><span class="ms-1 d-none d-xxl-inline"> Sort</span></span>
<button id="sort-number" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-number" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="number" data-sort-natural="true"><i class="ri-hashtag"></i><span class="d-none d-xxl-inline"> Number</span></button> data-sort-attribute="number" data-sort-natural="true"><i class="ri-hashtag"></i><span class="d-none d-xxl-inline"> Set</span></button>
<button id="sort-name" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-name" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="name"><i class="ri-pencil-line"></i><span class="d-none d-xxl-inline"> Name</span></button> data-sort-attribute="name"><i class="ri-pencil-line"></i><span class="d-none d-xxl-inline"> Name</span></button>
<button id="sort-theme" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-theme" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="theme"><i class="ri-price-tag-3-line"></i><span class="d-none d-xxl-inline"> Theme</span></button> data-sort-attribute="theme"><i class="ri-price-tag-3-line"></i><span class="d-none d-xxl-inline"> Theme</span></button>
<button id="sort-year" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-year" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="year"><i class="ri-calendar-line"></i><span class="d-none d-xxl-inline"> Year</span></button> data-sort-attribute="year"><i class="ri-calendar-line"></i><span class="d-none d-xxl-inline"> Year</span></button>
<button id="sort-minifigure" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-minifigure" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="minifigures" data-sort-desc="true"><i class="ri-group-line"></i><span class="d-none d-xxl-inline"> Figures</span></button> data-sort-attribute="minifigures" data-sort-desc="true"><i class="ri-group-line"></i><span class="d-none d-xxl-inline"> Figures</span></button>
<button id="sort-parts" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-parts" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="parts" data-sort-desc="true"><i class="ri-shapes-line"></i><span class="d-none d-xxl-inline"> Parts</span></button> data-sort-attribute="parts" data-sort-desc="true"><i class="ri-shapes-line"></i><span class="d-none d-xxl-inline"> Parts</span></button>
<button id="sort-missing" type="button" class="btn btn-sm btn-outline-primary" <button id="sort-missing" type="button" class="btn btn-sm btn-outline-primary"
data-sort-target="div#grid>div" data-sort-attribute="missing" data-sort-desc="true"><i class="ri-error-warning-line"></i><span class="d-none d-xxl-inline"> Missing</span></button> data-sort-attribute="missing" data-sort-desc="true"><i class="ri-error-warning-line"></i><span class="d-none d-xxl-inline"> Missing</span></button>
<button id="sort-clear" type="button" class="btn btn-sm btn-outline-dark" <button id="sort-clear" type="button" class="btn btn-sm btn-outline-dark"
data-sort-target="div#grid>div" data-sort-clear="true"><i class="ri-filter-off-line"></i><span class="d-none d-xxl-inline"> Clear</span></button> data-sort-clear="true"><i class="ri-filter-off-line"></i><span class="d-none d-xxl-inline"> Clear</span></button>
</div> </div>
</div> </div>
</div> </div>