Create dedicated javascript object for Grid sort
This commit is contained in:
parent
3af89ad558
commit
fca69aca7c
@ -6,26 +6,12 @@ class BrickGrid {
|
||||
|
||||
// Grid elements (built based on the initial id)
|
||||
this.html_grid = document.getElementById(this.id);
|
||||
this.html_sort = document.getElementById(`${this.id}-sort`);
|
||||
this.html_search = document.getElementById(`${this.id}-search`);
|
||||
this.html_status = document.getElementById(`${this.id}-status`);
|
||||
this.html_theme = document.getElementById(`${this.id}-theme`);
|
||||
|
||||
// Sort buttons
|
||||
this.html_sort_buttons = {};
|
||||
if (this.html_sort) {
|
||||
this.html_sort.querySelectorAll("button[data-sort-attribute]").forEach(button => {
|
||||
this.html_sort_buttons[button.id] = new BrickGridSortButton(button, this);
|
||||
});
|
||||
}
|
||||
|
||||
// Clear button
|
||||
this.html_clear = document.querySelector("button[data-sort-clear]")
|
||||
if (this.html_clear) {
|
||||
this.html_clear.addEventListener("click", ((grid) => (e) => {
|
||||
grid.clear();
|
||||
})(this))
|
||||
}
|
||||
// Sort setup
|
||||
this.sort = new BrickGridSort(this);
|
||||
|
||||
// Filter setup
|
||||
if (this.html_search) {
|
||||
@ -46,46 +32,6 @@ class BrickGrid {
|
||||
})(this));
|
||||
}
|
||||
|
||||
// Cookie setup
|
||||
const cookies = document.cookie.split(";").reduce((acc, cookieString) => {
|
||||
const [key, value] = cookieString.split("=").map(s => s.trim().replace(/^"|"$/g, ""));
|
||||
if (key && value) {
|
||||
acc[key] = decodeURIComponent(value);
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Initial sort
|
||||
if ("sort-id" in cookies && cookies["sort-id"] in this.html_sort_buttons) {
|
||||
const current = this.html_sort_buttons[cookies["sort-id"]];
|
||||
|
||||
if("sort-order" in cookies) {
|
||||
current.button.setAttribute("data-sort-order", cookies["sort-order"]);
|
||||
}
|
||||
|
||||
this.sort(current, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear
|
||||
clear() {
|
||||
// Cleanup all
|
||||
for (const [id, button] of Object.entries(this.html_sort_buttons)) {
|
||||
button.toggle();
|
||||
button.inactive();
|
||||
}
|
||||
|
||||
// Clear cookies
|
||||
document.cookie = `sort-id=""; Path=/; SameSite=strict`;
|
||||
document.cookie = `sort-order=""; Path=/; SameSite=strict`;
|
||||
|
||||
// Reset sorting
|
||||
tinysort(this.target, {
|
||||
selector: "div",
|
||||
attr: "data-index",
|
||||
order: "asc",
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Filter
|
||||
@ -153,53 +99,6 @@ class BrickGrid {
|
||||
}
|
||||
}
|
||||
|
||||
// Sort
|
||||
sort(current, no_flip=false) {
|
||||
const attribute = current.data.sortAttribute;
|
||||
const natural = current.data.sortNatural;
|
||||
|
||||
// Cleanup all
|
||||
for (const [id, button] of Object.entries(this.html_sort_buttons)) {
|
||||
if (button != current) {
|
||||
button.toggle();
|
||||
button.inactive();
|
||||
}
|
||||
}
|
||||
|
||||
// Sort
|
||||
if (attribute) {
|
||||
let order = current.data.sortOrder;
|
||||
|
||||
// First ordering
|
||||
if (!no_flip) {
|
||||
if(!order) {
|
||||
if (current.data.sortDesc) {
|
||||
order = "desc"
|
||||
} else {
|
||||
order = "asc"
|
||||
}
|
||||
} else {
|
||||
// Flip the sorting order
|
||||
order = (order == "desc") ? "asc" : "desc";
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle the ordering
|
||||
current.toggle(order);
|
||||
|
||||
// Store cookies
|
||||
document.cookie = `sort-id="${encodeURIComponent(current.button.id)}"; Path=/; SameSite=strict`;
|
||||
document.cookie = `sort-order="${encodeURIComponent(order)}"; Path=/; SameSite=strict`;
|
||||
|
||||
// Do the sorting
|
||||
tinysort(this.target, {
|
||||
selector: "div",
|
||||
attr: "data-" + attribute,
|
||||
natural: natural == "true",
|
||||
order: order,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to setup the grids
|
||||
|
||||
@ -1,49 +1,118 @@
|
||||
// Sort button
|
||||
class BrickGridSortButton {
|
||||
constructor(button, grid) {
|
||||
this.button = button;
|
||||
// Grid sort
|
||||
class BrickGridSort {
|
||||
constructor(grid) {
|
||||
this.grid = grid;
|
||||
this.data = this.button.dataset;
|
||||
|
||||
// Setup
|
||||
button.addEventListener("click", ((grid, button) => (e) => {
|
||||
grid.sort(button);
|
||||
})(grid, this));
|
||||
// Grid sort elements (built based on the initial id)
|
||||
this.html_sort = document.getElementById(`${this.grid.id}-sort`);
|
||||
|
||||
if (this.html_sort) {
|
||||
// Cookie names
|
||||
this.cookie_id = `${this.grid.id}-sort-id`;
|
||||
this.cookie_order = `${this.grid.id}-sort-order`;
|
||||
|
||||
// Sort buttons
|
||||
this.html_sort_buttons = {};
|
||||
this.html_sort.querySelectorAll("button[data-sort-attribute]").forEach(button => {
|
||||
this.html_sort_buttons[button.id] = new BrickGridSortButton(button, this);
|
||||
});
|
||||
|
||||
// Clear button
|
||||
this.html_clear = this.html_sort.querySelector("button[data-sort-clear]")
|
||||
if (this.html_clear) {
|
||||
this.html_clear.addEventListener("click", ((grid) => () => {
|
||||
grid.clear();
|
||||
})(this))
|
||||
}
|
||||
|
||||
// Active
|
||||
active() {
|
||||
this.button.classList.remove("btn-outline-primary");
|
||||
this.button.classList.add("btn-primary");
|
||||
// Cookie setup
|
||||
const cookies = document.cookie.split(";").reduce((acc, cookieString) => {
|
||||
const [key, value] = cookieString.split("=").map(s => s.trim().replace(/^"|"$/g, ""));
|
||||
if (key && value) {
|
||||
acc[key] = decodeURIComponent(value);
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Initial sort
|
||||
if (this.cookie_id in cookies && cookies[this.cookie_id] in this.html_sort_buttons) {
|
||||
const current = this.html_sort_buttons[cookies[this.cookie_id]];
|
||||
|
||||
if(this.cookie_order in cookies) {
|
||||
current.button.setAttribute("data-sort-order", cookies[this.cookie_order]);
|
||||
}
|
||||
|
||||
// Inactive
|
||||
inactive() {
|
||||
delete this.button.dataset.sortOrder;
|
||||
this.button.classList.remove("btn-primary");
|
||||
this.button.classList.add("btn-outline-primary");
|
||||
this.sort(current, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle sorting
|
||||
toggle(order) {
|
||||
// Cleanup
|
||||
delete this.button.dataset.sortOrder;
|
||||
|
||||
let icon = this.button.querySelector("i.ri");
|
||||
if (icon) {
|
||||
this.button.removeChild(icon);
|
||||
// Clear sort
|
||||
clear() {
|
||||
// Cleanup all
|
||||
for (const [id, button] of Object.entries(this.html_sort_buttons)) {
|
||||
button.toggle();
|
||||
button.inactive();
|
||||
}
|
||||
|
||||
// Set order
|
||||
if (order) {
|
||||
this.active();
|
||||
// Clear cookies
|
||||
document.cookie = `${this.cookie_id}=""; Path=/; SameSite=strict`;
|
||||
document.cookie = `${this.cookie_order}=""; Path=/; SameSite=strict`;
|
||||
|
||||
this.button.dataset.sortOrder = order;
|
||||
// Reset sorting
|
||||
tinysort(this.grid.target, {
|
||||
selector: "div",
|
||||
attr: "data-index",
|
||||
order: "asc",
|
||||
});
|
||||
|
||||
icon = document.createElement("i");
|
||||
icon.classList.add("ri", "ms-1", `ri-sort-${order}`);
|
||||
}
|
||||
|
||||
this.button.append(icon);
|
||||
// Sort
|
||||
sort(current, no_flip=false) {
|
||||
const attribute = current.data.sortAttribute;
|
||||
const natural = current.data.sortNatural;
|
||||
|
||||
// Cleanup all
|
||||
for (const [id, button] of Object.entries(this.html_sort_buttons)) {
|
||||
if (button != current) {
|
||||
button.toggle();
|
||||
button.inactive();
|
||||
}
|
||||
}
|
||||
|
||||
// Sort
|
||||
if (attribute) {
|
||||
let order = current.data.sortOrder;
|
||||
|
||||
// First ordering
|
||||
if (!no_flip) {
|
||||
if(!order) {
|
||||
if (current.data.sortDesc) {
|
||||
order = "desc";
|
||||
} else {
|
||||
order = "asc";
|
||||
}
|
||||
} else {
|
||||
// Flip the sorting order
|
||||
order = (order == "desc") ? "asc" : "desc";
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle the ordering
|
||||
current.toggle(order);
|
||||
|
||||
// Store cookies
|
||||
document.cookie = `${this.cookie_id}="${encodeURIComponent(current.button.id)}"; Path=/; SameSite=strict`;
|
||||
document.cookie = `${this.cookie_order}="${encodeURIComponent(order)}"; Path=/; SameSite=strict`;
|
||||
|
||||
// Do the sorting
|
||||
tinysort(this.grid.target, {
|
||||
selector: "div",
|
||||
attr: "data-" + attribute,
|
||||
natural: natural == "true",
|
||||
order: order,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
49
static/scripts/grid/sort_button.js
Normal file
49
static/scripts/grid/sort_button.js
Normal file
@ -0,0 +1,49 @@
|
||||
// Grid sort button
|
||||
class BrickGridSortButton {
|
||||
constructor(button, grid) {
|
||||
this.button = button;
|
||||
this.grid = grid;
|
||||
this.data = this.button.dataset;
|
||||
|
||||
// Setup
|
||||
button.addEventListener("click", ((grid, button) => (e) => {
|
||||
grid.sort(button);
|
||||
})(grid, this));
|
||||
}
|
||||
|
||||
// Active
|
||||
active() {
|
||||
this.button.classList.remove("btn-outline-primary");
|
||||
this.button.classList.add("btn-primary");
|
||||
}
|
||||
|
||||
// Inactive
|
||||
inactive() {
|
||||
delete this.button.dataset.sortOrder;
|
||||
this.button.classList.remove("btn-primary");
|
||||
this.button.classList.add("btn-outline-primary");
|
||||
}
|
||||
|
||||
// Toggle sorting
|
||||
toggle(order) {
|
||||
// Cleanup
|
||||
delete this.button.dataset.sortOrder;
|
||||
|
||||
let icon = this.button.querySelector("i.ri");
|
||||
if (icon) {
|
||||
this.button.removeChild(icon);
|
||||
}
|
||||
|
||||
// Set order
|
||||
if (order) {
|
||||
this.active();
|
||||
|
||||
this.button.dataset.sortOrder = order;
|
||||
|
||||
icon = document.createElement("i");
|
||||
icon.classList.add("ri", "ms-1", `ri-sort-${order}`);
|
||||
|
||||
this.button.append(icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -82,6 +82,7 @@
|
||||
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scripts/grid/grid.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scripts/grid/sort.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scripts/grid/sort_button.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scripts/set.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scripts/socket/socket.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='scripts/socket/instructions.js') }}"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user