1// javascript/chives-sorting.js
2// chives version: 52
3
4// ChivesSorting manages the sorting of a collection of items.
5//
6// It requires a list of sort options. A sort option is an object with
7// three fields:
8//
9//    - key: the query parameter key in the URL (for example, 'titleAtoZ')
10//    - label: the human-readable description (for example, 'title (A to Z)')
11//    - compareFn: a predicate function that determines the order of the items
12//
13// For example:
14//
15//    const bookmarkSortOptions = [
16//      {
17//        key: "titleAtoZ",
18//        label: "title (A to Z)",
19//        filterFn: (a, b) => a.title > b.title ? 1 : -1,
20//      }
21//    ];
22//
23class ChivesSorting {
24  #sortOptions;
25  #searchParams;
26
27  #defaultSortOrder;
28
29  // All my sites use "sortOrder" as the URL parameter for the currently
30  // selected sort order.
31  #paramKey = "sortOrder";
32
33  constructor(sortOptions, searchParams) {
34    this.#sortOptions = sortOptions;
35    this.#searchParams = searchParams;
36  }
37
38  // Set the default sort key that will be used if the user has not
39  // specified a sort key in the URL query parameters.
40  set defaultSortOrder(sortKey) {
41    if (!sortKey) return;
42    this.#defaultSortOrder = sortKey;
43  }
44
45  // getActiveSortOrder returns the currently active sort order.
46  getActiveSortOrder() {
47    let sortOrderKey = this.#searchParams.get(this.#paramKey);
48
49    if (sortOrderKey === null && typeof this.#defaultSortOrder === 'string') {
50      sortOrderKey = this.#defaultSortOrder;
51    }
52
53    if (sortOrderKey !== null) {
54      const matchingSort = this.#sortOptions.find(s => s.key === sortOrderKey);
55      if (matchingSort) return matchingSort;
56    }
57
58    return this.#sortOptions[0];
59  }
60
61  // Sort the collection of items using the currently selected sort order.
62  apply(items, defaultSortKey) {
63    const activeSortOrder = this.getActiveSortOrder();
64
65    console.debug(`Active sort order: ${activeSortOrder.key}`);
66
67    return items.sort(activeSortOrder.compareFn);
68  }
69
70  // Returns the state of the sorting.
71  getState() {
72    return {
73      activeSortOrderKey: this.getActiveSortOrder().key,
74      sortOptions: this.#sortOptions,
75      paramKey: this.#paramKey,
76    }
77  }
78}
79
80// ChivesSortOptions provides a <chives-sort-options> component that
81// renders navigation controls for sort order.
82//
83// It uses the state provided by ChivesSorting.
84class ChivesSortOptions extends HTMLElement {
85  #state;
86  #searchParams;
87
88  set state(state) {
89    if (!state) return;
90    this.#state = state;
91    this.#render();
92  }
93
94  set searchParams(params) {
95    if (!params) return;
96    this.#searchParams = params;
97    this.#render();
98  }
99
100  #render() {
101    if (!this.#state || !this.#searchParams) {
102      return null;
103    }
104
105    const wrapper = document.createElement("nav");
106    wrapper.classList.add("chives_sort_options");
107
108    const label = document.createElement("label");
109    label.setAttribute("for", "sortOrder");
110    label.innerHTML = "sort by:"
111    wrapper.appendChild(label);
112
113    const select = document.createElement("select");
114    select.id = label.getAttribute("for");
115    this.#state.sortOptions.forEach(so => {
116      const option = document.createElement("option");
117      option.value = so.key;
118      option.innerText = so.label;
119      if (so.key === this.#state.activeSortOrderKey) {
120        option.setAttribute("selected", "");
121      } else {
122        option.removeAttribute("selected");
123      }
124      select.appendChild(option);
125    })
126
127    // When the user uses the dropdown to select a new sort order,
128    // reload the page with the new sort order applied.
129    select.addEventListener("change", () => {
130      const newSortOrderKey = select.value;
131
132      console.log(`newSortOrderKey = ${newSortOrderKey}`);
133
134      if (newSortOrderKey === this.#state.activeSortOrderKey) {
135        return;
136      }
137
138      const params = new URLSearchParams(this.#searchParams);
139      params.set(this.#state.paramKey, newSortOrderKey);
140      params.delete("page");
141      window.location.search = params.toString();
142    })
143
144    wrapper.appendChild(select);
145
146    this.replaceChildren(wrapper);
147  }
148}
149
150// Register global styles for the <chives-sorting-options> element.
151if (typeof document !== "undefined" &&
152    !document.getElementById("chives-sorting-styles")) {
153  const style = document.createElement("style");
154  style.id = "chives-sorting-styles";
155  style.textContent = `
156    .chives_sort_options {
157      label::after {
158        content: " ";
159      }
160    }
161  `;
162  document.head.appendChild(style);
163}
164
165// Register the custom HTML tag <chives-sort-options>
166if (!customElements.get("chives-sort-options")) {
167  customElements.define("chives-sort-options", ChivesSortOptions);
168}
169
170// renderSortingControls renders the sorting controls as
171// a child of `querySelector`.
172function renderSortingControls({ querySelector, sorting, searchParams }) {
173  const elem = document.createElement("chives-sort-options");
174  elem.state = sorting.getState();
175  elem.searchParams = searchParams;
176  document.querySelector(querySelector).appendChild(elem);
177}