NEW: Sort Priority (#130)

closes #130
dwhieb · Jul 17, 2024 · 4bb7beb · 4bb7beb
1 parent dc6d097
commit 4bb7beb
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 29 deletions.
diff --git a/pages/Search/Search.css b/pages/Search/Search.css
@@ -59,6 +59,26 @@ body {
 
 }
 
+.priority {
+  align-items:        center;
+  background-color:   var(--pink-swan);
+  block-size:         1em;
+  border-radius:      50%;
+  color:              black;
+  content:            attr(data-priority);
+  display:            flex;
+  font-size:          small;
+  inline-size:        1em;
+  inset-block-start:  0;
+  inset-inline-start: 0;
+  justify-content:    center;
+  padding:            0.75em;
+  position:           absolute;
+  text-align:         center;
+  transform:          translate(50%, -50%);
+  vertical-align:     middle;
+}
+
 /* NB: The .sticky class is applied conditionally in the footer Handlebars template. */
 .footer {
 
@@ -75,6 +95,10 @@ h2 {
   text-align: center;
 }
 
+.hint {
+  display: none;
+}
+
 .issue-link {
   inset-inline-end: 0;
   position:         sticky;
@@ -121,6 +145,7 @@ h2 {
 
   & th {
     font-weight: bold;
+    position:    relative;
   }
 
   & thead {
@@ -207,10 +232,6 @@ search {
   word-break:  keep-all;
 }
 
-#sort-hint {
-  display: none;
-}
-
 .sort-icon {
   --icon-size: 0.75em;
   block-size:  var(--icon-size);

diff --git a/pages/Search/Search.hbs b/pages/Search/Search.hbs
@@ -47,7 +47,8 @@
 
       <div aria-labelledby=results-caption class='results-wrapper scroll-shadow' role=region tabindex=0>
 
-        <span id=sort-hint>Click on a header column to sort.</span>
+        <span class=hint id=priority-hint>Priority</span>
+        <span class=hint id=sort-hint>Click on a header column to sort.</span>
 
         <table id=results>
           <caption class=visually-hidden id=results-caption><h2>Search Results</h2></caption>
@@ -66,47 +67,54 @@
 
               {{!-- Component Fields --}}
               {{#with sort }}
-              <th {{#if displayLanguage }} aria-sort='{{ displayLanguage }}' {{/if}} scope=col>
+              <th {{#if displayLanguage }} aria-sort='{{ displayLanguage.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=displayLanguage>
                   <span>Language</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is displayLanguage 'ascending') }}#ascending{{else if (is displayLanguage 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is displayLanguage.direction 'ascending') }}#ascending{{else if (is displayLanguage.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if displayLanguage }}<span aria-describedby=priority-hint class=priority>{{ displayLanguage.priority }}</span>{{/if}}
               </th>
-              <th {{#if form }} aria-sort='{{ form }}' {{/if}} scope=col>
+              <th {{#if form }} aria-sort='{{ form.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=form>
                   <span>Form</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is form 'ascending') }}#ascending{{else if (is form 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is form.direction 'ascending') }}#ascending{{else if (is form.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if form }}<span aria-describedby=priority-hint class=priority>{{ form.priority }}</span>{{/if}}
               </th>
-              <th {{#if UR }} aria-sort='{{ UR }}' {{/if}} scope=col>
+              <th {{#if UR }} aria-sort='{{ UR.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=UR>
                   <span>UR</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is UR 'ascending') }}#ascending{{else if (is UR 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is UR.direction 'ascending') }}#ascending{{else if (is UR.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if UR }}<span aria-describedby=priority-hint class=priority>{{ UR.priority }}</span>{{/if}}
               </th>
-              <th {{#if PA }} aria-sort='{{ PA }}' {{/if}} scope=col>
+              <th {{#if PA }} aria-sort='{{ PA.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=PA>
                   <span>Proto-Algonquian</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is PA 'ascending') }}#ascending{{else if (is PA 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is PA.direction 'ascending') }}#ascending{{else if (is PA.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if PA }}<span aria-describedby=priority-hint class=priority>{{ PA.priority }}</span>{{/if}}
               </th>
-              <th {{#if definition }} aria-sort='{{ definition }}' {{/if}} scope=col>
+              <th {{#if definition }} aria-sort='{{ definition.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=definition>
                   <span>Definition</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is definition 'ascending') }}#ascending{{else if (is definition 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is definition.direction 'ascending') }}#ascending{{else if (is definition.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if definition }}<span aria-describedby=priority-hint class=priority>{{ definition.priority }}</span>{{/if}}
               </th>
-              <th {{#if type }} aria-sort='{{ type }}' {{/if}} scope=col>
+              <th {{#if type }} aria-sort='{{ type.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=type>
                   <span>Type</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is type 'ascending') }}#ascending{{else if (is type 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is type.direction 'ascending') }}#ascending{{else if (is type.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if type }}<span aria-describedby=priority-hint class=priority>{{ type.priority }}</span>{{/if}}
               </th>
-              <th {{#if subcategory }} aria-sort='{{ subcategory }}' {{/if}} scope=col>
+              <th {{#if subcategory }} aria-sort='{{ subcategory.direction }}' {{/if}} scope=col>
                 <button aria-describedby=sort-hint class=sort-button data-field=subcategory>
                   <span>Subcategory</span>
-                  <svg aria-hidden class=sort-icon><use href='{{#if (is subcategory 'ascending') }}#ascending{{else if (is subcategory 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
+                  <svg aria-hidden class=sort-icon><use href='{{#if (is subcategory.direction 'ascending') }}#ascending{{else if (is subcategory.direction 'descending') }}#descending{{else}}#sort{{/if}}'></svg>
                 </button>
+                {{#if subcategory }}<span aria-describedby=priority-hint class=priority>{{ subcategory.priority }}</span>{{/if}}
               </th>
               {{/with}}
 

diff --git a/pages/Search/Search.js b/pages/Search/Search.js
@@ -52,7 +52,7 @@ export function Search(req, res) {
     allResults.sort((a, b) => {
 
       const comparisons = Array.from(sort.entries())
-      .map(([field, direction]) => {
+      .map(([field, { direction }]) => {
         const comparison = (a[field] || ``).localeCompare(b[field] || ``)
         return direction === `ascending` ? comparison : comparison * -1
       })

diff --git a/pages/Search/scripts/Table.js b/pages/Search/scripts/Table.js
@@ -27,8 +27,14 @@ export default class Table {
     const directive  = directivesOrder[directivesOrder.indexOf(direction) + 1]
 
     directives.add(field, directive)
-    sort = directives.serialize()
-    url.searchParams.set(`sort`, sort)
+
+    if (directives.size) {
+      sort = directives.serialize()
+      url.searchParams.set(`sort`, sort)
+    } else {
+      url.searchParams.delete(`sort`)
+    }
+
     window.location = url.href
 
   }

diff --git a/scripts/SortDirectives.js b/scripts/SortDirectives.js
@@ -8,12 +8,12 @@ export default class SortDirectives extends Map {
 
     directives.split(`,`)
     .filter(Boolean)
-    .forEach(directive => {
+    .forEach((directive, i) => {
 
       const field     = directive.replace(/^-/v, ``)
       const direction = directive.startsWith(`-`) ? `descending` : `ascending`
 
-      this.set(field, direction)
+      this.set(field, { direction, priority: i + 1 })
 
     })
 
@@ -31,20 +31,20 @@ export default class SortDirectives extends Map {
     const entries = Array.from(this.entries())
 
     if (direction) {
-      entries.unshift([field, direction])
+      entries.unshift([field, { direction, priority: 1 }])
     }
 
     this.clear()
 
-    for (const [f, d] of entries) {
-      this.set(f, d)
-    }
+    entries.forEach(([field, { direction }], i) => {
+      this.set(field, { direction, priority: i + 1 })
+    })
 
   }
 
   serialize() {
     return Array.from(this.entries())
-    .map(([field, direction]) => `${ direction === `descending` ? `-` : `` }${ field }`)
+    .map(([field, { direction }]) => `${ direction === `descending` ? `-` : `` }${ field }`)
     .join(`,`)
   }