diff --git a/content/examples/shortcodes/search/en.md b/content/examples/shortcodes/search/en.md index 3a728db6b7..adefad9ae6 100644 --- a/content/examples/shortcodes/search/en.md +++ b/content/examples/shortcodes/search/en.md @@ -8,10 +8,10 @@ With this shortcode you can embed a search results widget on the page. ## Example ``` -{{}} +{{}} ``` -{{< search contentType="How-to Guides" showContentTypes=false >}} +{{< search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" >}} ## Attributes @@ -21,3 +21,6 @@ contentType showContentTypes : optional - If set to false the content type dropdown won't show + +tags +: optional - Adds preselected tags diff --git a/hugo/assets/ts/helpers/search.ts b/hugo/assets/ts/helpers/search.ts index a1e514facd..b0b44a889b 100644 --- a/hugo/assets/ts/helpers/search.ts +++ b/hugo/assets/ts/helpers/search.ts @@ -89,7 +89,7 @@ export const parseQuery = (query: string): ParsedQuery => { const regExp = new RegExp(`${ facetInput }:([^"]\\S+)`, 'g'); const regExpWithQuotes = new RegExp(`${ facetInput }:"([^"]+)"|(\\+)`, 'g'); - const matches = [ ...query.matchAll(regExp), ...query.matchAll(regExpWithQuotes) ]; + const matches = [...query.matchAll(regExp), ...query.matchAll(regExpWithQuotes)]; for (const match of matches) { if (match) { diff --git a/hugo/assets/ts/widgets/search-filter.ts b/hugo/assets/ts/widgets/search-filter.ts index 18ec0d5b57..a1237664bb 100644 --- a/hugo/assets/ts/widgets/search-filter.ts +++ b/hugo/assets/ts/widgets/search-filter.ts @@ -1,8 +1,8 @@ // eslint-disable-next-line import Fuse from 'fuse.js'; -import { BaseWidget } from './base-widget'; -import { FilterEvent, FilterItem, ParsedQuery, SearchEvents } from '../interfaces/search'; import { parseQuery, queryToUrlParams } from '../helpers/search'; +import { FilterEvent, FilterItem, ParsedQuery, SearchEvents } from '../interfaces/search'; +import { BaseWidget } from './base-widget'; export class SearchFilter extends BaseWidget { public static readonly NAME = 'filter'; @@ -14,6 +14,7 @@ export class SearchFilter extends BaseWidget { private readonly items: FilterItem[]; private filteredItems: FilterItem[]; private selectedItems: string[]; + private preselectedItems: string[]; private parsedQuery: ParsedQuery; private fuse: Fuse; @@ -51,7 +52,7 @@ export class SearchFilter extends BaseWidget { }; this.fuse = new Fuse(this.items, options); - this.getParamsFromUrl(); + this.getParams(); this.searchList(); this.initListeners(); this.element.classList.remove('is-loading'); @@ -139,21 +140,40 @@ export class SearchFilter extends BaseWidget { this.updateUrl(); } - private updateUrl() { - window.location.href = `${ window.location.href.split('?')[0] }?${ queryToUrlParams(this.parsedQuery) }`; + private updateUrl(refresh = true) { + const url = `${ window.location.href.split('?')[0] }?${ queryToUrlParams(this.parsedQuery) }`; + if (!refresh) { + window.history.pushState(null, '', url); + } else { + window.location.href = url; + } } - private getParamsFromUrl(): void { + private getParams(): void { + // Get url params const url = new URL(window.location.href); const searchParams = new URLSearchParams(url.search); const query = searchParams.get('q'); this.parsedQuery = parseQuery(query); - if (!query) { - this.selectedItems = []; - } else { - this.selectedItems = this.parsedQuery.facets[this.filterName] ?? []; + let urlParamsChanged = false; + let selectedItems = this.parsedQuery.facets[this.filterName] ?? []; + + // Get preselected items if no items set in url (if set in urL: url wins from preselected) + if (selectedItems.length === 0 && this.element.dataset.preselectedItems && this.element.dataset.preselectedItems !== '') { + this.preselectedItems = this.element.dataset.preselectedItems.split(',').map(val => val.trim()); + // Update selected items + selectedItems = Array.from(new Set([...selectedItems, ...this.preselectedItems])); + urlParamsChanged = true; + } + + // Update parsed query & save selected items + this.parsedQuery.facets[this.filterName] = selectedItems; + this.selectedItems = selectedItems; + + if (urlParamsChanged) { + this.updateUrl(false); } } } diff --git a/hugo/content/en/examples/shortcodes/search/index.md b/hugo/content/en/examples/shortcodes/search/index.md index 3a728db6b7..adefad9ae6 100644 --- a/hugo/content/en/examples/shortcodes/search/index.md +++ b/hugo/content/en/examples/shortcodes/search/index.md @@ -8,10 +8,10 @@ With this shortcode you can embed a search results widget on the page. ## Example ``` -{{}} +{{}} ``` -{{< search contentType="How-to Guides" showContentTypes=false >}} +{{< search contentType="How-to Guides" showContentTypes=false tags="encodings,commented cue" >}} ## Attributes @@ -21,3 +21,6 @@ contentType showContentTypes : optional - If set to false the content type dropdown won't show + +tags +: optional - Adds preselected tags diff --git a/hugo/layouts/partials/filter.html b/hugo/layouts/partials/filter.html index 56489707e8..51f24f7427 100644 --- a/hugo/layouts/partials/filter.html +++ b/hugo/layouts/partials/filter.html @@ -7,10 +7,12 @@ {{ $heading := printf "search_%s_heading" $translationKey }} {{ $inputLabel := printf "search_%s_input" $translationKey }} {{ $noResults := printf "search_%s_no-results" $translationKey }} +{{ $preselectedItems := .preselectedItems }}
diff --git a/hugo/layouts/partials/search.html b/hugo/layouts/partials/search.html index 031e23ce08..ff5b6d4c05 100644 --- a/hugo/layouts/partials/search.html +++ b/hugo/layouts/partials/search.html @@ -2,6 +2,7 @@ {{ $showContentTypes := .showContentTypes | default true }} {{ $contentTypes := slice }} {{ $contentType := .contentType | default "" }} +{{ $preselectedTags := .preselectedTags | default "" }} {{ $type := .type | default "full" }} {{ $placeholder := (T "search_placeholder" ) }} @@ -46,6 +47,7 @@ "translationKey" "tags" "name" "tags" "filters" .Site.Params.tags + "preselectedItems" $preselectedTags ) -}} {{ if $showContentTypes }} diff --git a/hugo/layouts/shortcodes/search.html b/hugo/layouts/shortcodes/search.html index 2240fa2f0b..0ef75d188b 100644 --- a/hugo/layouts/shortcodes/search.html +++ b/hugo/layouts/shortcodes/search.html @@ -1,9 +1,11 @@ {{- $contentType := .Get "contentType" | default "" -}} {{- $showContentTypes := .Get "showContentTypes" | default true -}} +{{- $preselectedTags := .Get "tags" | default "" -}} {{- partial "search" (dict "type" "widget" "contentType" $contentType "showContentTypes" $showContentTypes + "preselectedTags" $preselectedTags "context" . ) -}}