client, content: sidebar-search: show where you started preview

1 files changed, 74 insertions, 0 deletions

diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js
index b4356a0f..d63b9708 100644
--- a/src/static/js/client/sidebar-search.js
+++ b/src/static/js/client/sidebar-search.js
@@ -39,6 +39,9 @@ export const info = {
   failedRule: null,
   failedContainer: null,
 
+  contextContainer: null,
+  contextBackLink: null,
+
   filterContainer: null,
   albumFilterLink: null,
   artistFilterLink: null,
@@ -66,6 +69,8 @@ export const info = {
   currentResultString: null,
   endSearchString: null,
 
+  backString: null,
+
   albumResultKindString: null,
   artistResultKindString: null,
   groupResultKindString: null,
@@ -109,6 +114,10 @@ export const info = {
       type: 'string',
     },
 
+    activeQueryContextPageName: {type: 'string'},
+    activeQueryContextPagePathname: {type: 'string'},
+    activeQueryContextPageColor: {type: 'string'},
+
     activeQueryResults: {
       type: 'json',
       maxLength: settings => settings.maxActiveResultsStorage,
@@ -180,6 +189,9 @@ export function getPageReferences() {
   info.noResultsString =
     findString('no-results');
 
+  info.backString =
+    findString('back');
+
   info.currentResultString =
     findString('current-result');
 
@@ -313,6 +325,25 @@ export function mutatePageContent() {
   info.searchBox.appendChild(info.failedRule);
   info.searchBox.appendChild(info.failedContainer);
 
+  // Context section
+
+  info.contextContainer =
+    document.createElement('div');
+
+  info.contextContainer.classList.add('wiki-search-context-container');
+
+  info.contextBackLink =
+    document.createElement('a');
+
+  info.contextContainer.appendChild(
+    templateContent(info.backString, {
+      page: info.contextBackLink,
+    }));
+
+  cssProp(info.contextContainer, 'display', 'none');
+
+  info.searchBox.appendChild(info.contextContainer);
+
   // Filter section
 
   info.filterContainer =
@@ -652,6 +683,17 @@ async function activateSidebarSearch(query) {
   state.searchStage = 'complete';
   updateSidebarSearchStatus();
 
+  session.activeQueryContextPageName =
+    document.querySelector('title').dataset.withoutWikiName ??
+    document.title;
+
+  session.activeQueryContextPagePathname =
+    location.pathname;
+
+  session.activeQueryContextPageColor =
+    document.querySelector('.color-style')?.dataset.color ??
+    null;
+
   session.activeQuery = query;
   session.activeQueryResults = results;
   session.resultsScrollOffset = 0;
@@ -804,6 +846,8 @@ function showSidebarSearchResults(results) {
   }
 
   if (shownAnyResults) {
+    showContextControls();
+
     cssProp(info.endSearchRule, 'display', 'block');
     cssProp(info.endSearchLine, 'display', 'block');
 
@@ -901,6 +945,35 @@ function showFilterElements(results) {
   }
 }
 
+function showContextControls() {
+  const {session} = info;
+
+  const shouldShow =
+    session.activeQueryContextPagePathname &&
+    location.pathname !== session.activeQueryContextPagePathname;
+
+  if (shouldShow) {
+    info.contextBackLink.href =
+      session.activeQueryContextPagePathname;
+
+    cssProp(info.contextBackLink,
+      '--primary-color',
+      session.activeQueryContextPageColor);
+
+    while (info.contextBackLink.firstChild) {
+      info.contextBackLink.firstChild.remove();
+    }
+
+    info.contextBackLink.appendChild(
+      document.createTextNode(
+        session.activeQueryContextPageName));
+
+    cssProp(info.contextContainer, 'display', 'block');
+  } else {
+    cssProp(info.contextContainer, 'display', 'none');
+  }
+}
+
 function generateSidebarSearchResult(result, results) {
   const preparedSlots = {
     color:
@@ -1126,6 +1199,7 @@ function generateSidebarSearchResultTemplate(slots) {
 }
 
 function hideSidebarSearchResults() {
+  cssProp(info.contextContainer, 'display', 'none');
   cssProp(info.filterContainer, 'display', 'none');
 
   cssProp(info.resultsRule, 'display', 'none');