@bridgeline-digital/hawksearch-handlebars-ui 1.0.0-beta.0

package/src/components/pagination/pagination.component.ts

@@ -0,0 +1,85 @@
+import { Pagination } from '@models';
+import { searchService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './pagination.component.hbs';
+
+export class PaginationComponent extends BaseComponent<Pagination> {
+    protected bindEvent = 'hawksearch:bind-pagination';
+    protected customTemplatePropertyName = 'pagination';
+    protected defaultHtml = defaultHtml;
+
+    private defaultMaxPageLinks = 9;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data || this.data.totalResults == 0) {
+            return '';
+        }
+
+        const firstRecord = (this.data.page - 1) * this.data.pageSize + 1;
+        let lastRecord = firstRecord + this.data.pageSize - 1;
+
+        if (lastRecord > this.data.totalResults) {
+            lastRecord = this.data.totalResults;
+        }
+
+        const html = template({
+            page: this.data.page,
+            pages: this.getPages(),
+            firstPage: 1,
+            lastPage: this.data.totalPages,
+            firstRecord: firstRecord,
+            lastRecord: lastRecord,
+            totalRecords: this.data.totalResults ?? 0,
+            totalPages: this.data.totalPages ?? 1,
+            maxPageLinks: this.data.maxPageLinks ?? this.defaultMaxPageLinks,
+            displayFirstLink: this.data.displayFirstLink && this.data.page > 1,
+            displayPreviousLink: this.data.page > 1,
+            displayNextLink: this.data.page < this.data.totalPages,
+            displayLastLink: this.data.displayLastLink && this.data.page < this.data.totalPages,
+            summary: `Showing ${firstRecord}-${lastRecord} of ${this.data.totalResults}`
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-page]').forEach((e) => {
+            const value = e.getAttribute('hawksearch-page');
+
+            if (value) {
+                const page = parseInt(value);
+
+                e.addEventListener('click', () => this.setPage(page));
+            }
+        });
+    }
+
+    protected async setPage(page: number): Promise<void> {
+        await searchService.paginate(page);
+    }
+
+    private getPages(): Array<number> {
+        const pages: Array<number> = [];
+
+        if (this.data && this.data.totalPages > 1) {
+            const maxPages = this.data.maxPageLinks ?? this.defaultMaxPageLinks;
+            let firstPage = this.data.page - Math.floor(maxPages / 2);
+
+            if (firstPage < 1) {
+                firstPage = 1;
+            }
+
+            let lastPage = firstPage + maxPages - 1;
+
+            if (lastPage > this.data.totalPages) {
+                lastPage = this.data.totalPages;
+            }
+
+            for (let i = firstPage; i <= lastPage; i++) {
+                pages.push(i);
+            }
+        }
+
+        return pages;
+    }
+}

package/src/components/query-suggestions/query-suggestions.component.hbs

@@ -0,0 +1,3 @@
+<div class='query-suggestions'>
+    <p>Did you mean to search for {{query-suggestions querySuggestions}}?</p>
+</div>

package/src/components/query-suggestions/query-suggestions.component.ts

@@ -0,0 +1,66 @@
+import { SafeString } from 'handlebars';
+import { HawksearchGlobal, QuerySuggestionsData } from '@models';
+import { searchService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './query-suggestions.component.hbs';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export class QuerySuggestionsComponent extends BaseComponent<QuerySuggestionsData> {
+    protected bindEvent = 'hawksearch:bind-query-suggestions';
+    protected customTemplatePropertyName = 'querySuggestions';
+    protected defaultHtml = defaultHtml;
+
+    protected registerHelpers(): void {
+        super.registerHelpers();
+
+        this.handlebars.registerHelper('query-suggestions', function (querySuggestions: Array<string>): SafeString {
+            function linkFunction(query: string): string {
+                return `<a hawksearch-query="${encodeURIComponent(query)}">${query}</a>`;
+            }
+
+            if (querySuggestions.length <= 2) {
+                return new Hawksearch.handlebars.SafeString(querySuggestions.map(linkFunction).join(' or '));
+            }
+
+            const generalDelimeter = ', ';
+            const lastDelimeter = ', or ';
+
+            return new Hawksearch.handlebars.SafeString(
+                querySuggestions
+                    .slice(0, querySuggestions.length - 1)
+                    .map(linkFunction)
+                    .join(generalDelimeter) +
+                    lastDelimeter +
+                    linkFunction(querySuggestions[querySuggestions.length - 1])
+            );
+        });
+    }
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data || !this.data.display || !this.data.querySuggestions?.length) {
+            return '';
+        }
+
+        const html = template({
+            querySuggestions: this.data.querySuggestions
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-query]').forEach((e) => {
+            e.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLElement;
+                const query = element.getAttribute('hawksearch-query');
+
+                if (query) {
+                    searchService.query(query);
+                }
+            });
+        });
+    }
+}

package/src/components/range-slider/range-slider.component.hbs

@@ -0,0 +1,9 @@
+<div class='range-slider'>
+    <div class='range-slider__container'>
+        <div class='range-slider__bar'>
+            <div class='range-slider__bar__active' hawksearch-bar style='left: {{start}}%; right: {{subtract 100 end}}%;'></div>
+        </div>
+        <span class='range-slider__handle range-slider__handle--min' title='Minimum' hawksearch-handle='min' style='left: {{start}}%;'></span>
+        <span class='range-slider__handle range-slider__handle--max' title='Maximum' hawksearch-handle='max' style='left: {{end}}%;'></span>
+    </div>
+</div>

package/src/components/range-slider/range-slider.component.ts

@@ -0,0 +1,190 @@
+import { RangeSliderEventData } from '@models';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './range-slider.component.hbs';
+
+export class RangeSliderComponent extends BaseComponent<never> {
+    static get observedAttributes(): Array<string> {
+        return ['min', 'max'];
+    }
+
+    protected bindEvent = undefined;
+    protected customTemplatePropertyName = 'rangeSlider';
+    protected defaultHtml = defaultHtml;
+
+    private dragging = false;
+    private activeHandle?: HTMLElement;
+    private startX?: number;
+    private startOffsetPercentage?: number;
+    private mouseUpEventHandler!: (event: MouseEvent) => void;
+    private mouseMoveEventHandler!: (event: MouseEvent) => void;
+    private min = 0;
+    private max = 100;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+
+        this.mouseUpEventHandler = this.onMouseUp.bind(this);
+        this.mouseMoveEventHandler = this.onMouseMove.bind(this);
+
+        document.addEventListener('mouseup', this.mouseUpEventHandler);
+        document.addEventListener('mousemove', this.mouseMoveEventHandler);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+        switch (name) {
+            case 'min':
+                this.setMin(newValue);
+                break;
+            case 'max':
+                this.setMax(newValue);
+                break;
+        }
+
+        this.renderContent();
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+
+        document.removeEventListener('mouseup', this.mouseUpEventHandler);
+        document.removeEventListener('mousemove', this.mouseMoveEventHandler);
+    }
+
+    private setMin(value: string | null): void {
+        let min = parseInt(value ?? '');
+
+        if (isNaN(min) || min < 0) {
+            min = 0;
+        }
+
+        this.min = min;
+    }
+
+    private setMax(value: string | null): void {
+        let max = parseInt(value ?? '');
+
+        if (isNaN(max) || max > 100) {
+            max = 100;
+        }
+
+        this.max = max;
+    }
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const html = template({
+            start: this.min,
+            end: this.max
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-handle]').forEach((e) => {
+            e.addEventListener('mousedown', ((event: MouseEvent): void => {
+                const handle = e.getAttribute('hawksearch-handle');
+
+                if (!handle) {
+                    return;
+                }
+
+                event.preventDefault();
+
+                const element = event.currentTarget as HTMLElement;
+
+                this.activeHandle = element;
+                this.startOffsetPercentage = parseFloat(element.style.left ?? 0);
+                this.startX = event.clientX;
+                this.dragging = true;
+
+                // Ensure the clicked handle is always on top in stacking context
+                this.shadowRoot?.querySelectorAll('[hawksearch-handle]').forEach((h) => ((h as HTMLElement).style.zIndex = ''));
+
+                element.style.zIndex = '1';
+            }) as EventListener);
+        });
+    }
+
+    private onMouseUp(event: MouseEvent): void {
+        if (!this.dragging) {
+            return;
+        }
+
+        event.preventDefault();
+
+        this.dragging = false;
+
+        // Dispatch event
+        const data: RangeSliderEventData = {
+            min: this.min,
+            max: this.max
+        };
+
+        const newEvent = new CustomEvent('hawksearch:range-slider-changed', {
+            detail: data
+        });
+
+        this.dispatchEvent(newEvent);
+    }
+
+    private onMouseMove(event: MouseEvent): void {
+        if (!this.dragging || !this.activeHandle || this.startX === undefined) {
+            return;
+        }
+
+        const selectedHandle = this.activeHandle.getAttribute('hawksearch-handle');
+        const minHandle = this.shadowRoot?.querySelector('[hawksearch-handle="min"]') as HTMLElement;
+        const maxHandle = this.shadowRoot?.querySelector('[hawksearch-handle="max"]') as HTMLElement;
+        const bar = this.shadowRoot?.querySelector('[hawksearch-bar]') as HTMLElement;
+        const offset = event.clientX - this.startX;
+        const width = this.activeHandle.parentElement!.offsetWidth;
+
+        let offsetPercentage = Math.round((offset / width) * 100) + this.startOffsetPercentage!;
+        let min = 0;
+        let max = 100;
+
+        // Ensure that handles are never dragged beyond boundaries or having min > max
+        if (selectedHandle === 'min') {
+            max = parseFloat(maxHandle.style.left ?? 100);
+        } else if (selectedHandle === 'max') {
+            min = parseFloat(minHandle.style.left ?? 0);
+        }
+
+        if (offsetPercentage <= min) {
+            offsetPercentage = min;
+        } else if (offsetPercentage >= max) {
+            offsetPercentage = max;
+        }
+
+        // Update min and max to new values
+        if (selectedHandle === 'min') {
+            min = offsetPercentage;
+        } else if (selectedHandle === 'max') {
+            max = offsetPercentage;
+        }
+
+        // Set CSS properties
+        this.activeHandle.style.left = `${offsetPercentage}%`;
+        bar.style.left = `${min}%`;
+        bar.style.right = `${100 - max}%`;
+
+        // Update component properties
+        if (selectedHandle === 'min') {
+            this.min = offsetPercentage;
+        } else if (selectedHandle === 'max') {
+            this.max = offsetPercentage;
+        }
+
+        // Dispatch event
+        const data: RangeSliderEventData = {
+            min: this.min,
+            max: this.max
+        };
+
+        const newEvent = new CustomEvent('hawksearch:range-slider-dragging', {
+            detail: data
+        });
+
+        this.dispatchEvent(newEvent);
+    }
+}

package/src/components/search/search.component.hbs

@@ -0,0 +1,4 @@
+<div class='search'>
+    <input type='text' hawksearch-search-input value='{{query}}' placeholder='Enter keywords' />
+    <hawksearch-autocomplete></hawksearch-autocomplete>
+</div>

package/src/components/search/search.component.ts

@@ -0,0 +1,93 @@
+import { debounce } from 'lodash';
+import { SearchResponse } from '@models';
+import { autocompleteService, searchService } from '@services';
+import { AutocompleteComponent } from '../autocomplete/autocomplete.component';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './search.component.hbs';
+
+export class SearchComponent extends BaseComponent<SearchResponse> {
+    protected bindEvent = 'hawksearch:bind-search';
+    protected customTemplatePropertyName = 'search';
+    protected defaultHtml = defaultHtml;
+
+    private clickEventHandler!: (event: MouseEvent) => void;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+
+        this.clickEventHandler = (event: Event): void => {
+            const element = event.target as HTMLElement;
+            const searchElement = !!element.closest('hawksearch-search');
+
+            if (!searchElement) {
+                this.toggleAutocomplete(false);
+            }
+        };
+
+        this.shadowRoot?.ownerDocument.addEventListener('click', this.clickEventHandler);
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+
+        this.shadowRoot?.ownerDocument.removeEventListener('click', this.connectedCallback);
+    }
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const html = template({
+            ...this.data
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        const enterKeys = ['Enter', 'NumpadEnter'];
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-search-input]').forEach((e) => {
+            e.addEventListener('keyup', ((event: KeyboardEvent): void => {
+                if (!enterKeys.includes(event.code)) {
+                    return;
+                }
+
+                const element = event.currentTarget as HTMLInputElement;
+                const query = element.value.trim();
+
+                this.toggleAutocomplete(false);
+
+                searchService.query(query);
+            }) as EventListener);
+
+            const onKeyUp = (event: KeyboardEvent): void => {
+                if (enterKeys.includes(event.code)) {
+                    return;
+                }
+
+                const element = e as HTMLInputElement; // Not using event.currentTarget as that gets lost when using lodash debounce
+                const query = element.value.trim();
+
+                this.toggleAutocomplete(!!query);
+
+                if (query) {
+                    autocompleteService.query(query);
+                }
+            };
+
+            e.addEventListener('keyup', debounce(onKeyUp, 300) as unknown as EventListener);
+        });
+
+        this.shadowRoot?.querySelectorAll('hawksearch-autocomplete').forEach((e) => {
+            e.addEventListener('hawksearch:close-autocomplete', (event: Event) => {
+                this.toggleAutocomplete(false);
+            });
+        });
+    }
+
+    private toggleAutocomplete(visible: boolean): void {
+        this.shadowRoot?.querySelectorAll('hawksearch-autocomplete').forEach((e) => {
+            const component = e as AutocompleteComponent;
+
+            component.style.display = visible ? 'block' : 'none';
+        });
+    }
+}

package/src/components/search-results/search-results.component.hbs

@@ -0,0 +1,29 @@
+<hawksearch-modified-query></hawksearch-modified-query>
+<hawksearch-query-suggestions></hawksearch-query-suggestions>
+<div class='row'>
+    <div class='column column--12 column-md--4'>
+        <hawksearch-facets-list></hawksearch-facets-list>
+    </div>
+    <div class='column column--12 column-md--8'>
+        <hawksearch-tabs></hawksearch-tabs>
+        <div class='margin'>
+            <hawksearch-selected-facets></hawksearch-selected-facets>
+        </div>
+        <div class='row'>
+            <div class='column column--12 column-sm--6 flex-vertical-sm-center'>
+                <hawksearch-pagination></hawksearch-pagination>
+            </div>
+            <div class='column column--12 column-md--6'>
+                <div class='row row--tight'>
+                    <div class='column column--12 column-sm--6 flex-vertical-sm-center'>
+                        <hawksearch-page-size></hawksearch-page-size>
+                    </div>
+                    <div class='column column--12 column-sm--6 flex-vertical-sm-center'>
+                        <hawksearch-sorting></hawksearch-sorting>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hawksearch-results-list></hawksearch-results-list>
+    </div>
+</div>

package/src/components/search-results/search-results.component.ts

@@ -0,0 +1,17 @@
+import { SearchResponse } from '@models';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './search-results.component.hbs';
+
+export class SearchResultsComponent extends BaseComponent<SearchResponse> {
+    protected bindEvent = 'hawksearch:bind-search-results';
+    protected customTemplatePropertyName = 'searchResults';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const html = template({
+            data: this.data
+        });
+
+        return html;
+    }
+}

package/src/components/search-results-item/search-results-item.component.hbs

@@ -0,0 +1,23 @@
+<div class='search-results-item search-results-item--{{type}}'>
+    {{#if (lt salePrice price)}}
+        <span class='search-results-item__sale-indicator'>Sale</span>
+    {{/if}}
+    {{#if (eq type 'product')}}
+        <a hawksearch-link href='{{url}}' class='search-results-item__image'>
+            <img hawksearch-image src='{{imageUrl}}' alt='' />
+        </a>
+    {{/if}}
+    <div class='search-results-item__title'>
+        <a hawksearch-link href='{{url}}'>{{title}}</a>
+    </div>
+    {{#unless (eq salePrice undefined)}}
+        <div class='search-results-item__price'>
+            {{#if (lt salePrice price)}}
+                <span class='search-results-item__price__original'>{{currency price 0}}</span>
+                <span class='search-results-item__price__current'>{{currency salePrice 0}}</span>
+            {{else}}
+                <span class='search-results-item__price-__current'>{{currency salePrice 0}}</span>
+            {{/if}}
+        </div>
+    {{/unless}}
+</div>

package/src/components/search-results-item/search-results-item.component.ts

@@ -0,0 +1,99 @@
+import placeholderUrl from '@assets/images/placeholder.png';
+import { formatCurrency } from '@helpers';
+import { HawksearchGlobal, SearchResultsItem } from '@models';
+import { trackingService } from '@services';
+import { BaseComponent } from '../base.component';
+import defaultHtml from './search-results-item.component.hbs';
+
+declare let Hawksearch: HawksearchGlobal;
+
+export class SearchResultsItemComponent extends BaseComponent<SearchResultsItem> {
+    protected bindEvent = undefined;
+    protected customTemplatePropertyName = 'searchResultsItem';
+    protected defaultHtml = defaultHtml;
+
+    protected registerHelpers(): void {
+        super.registerHelpers();
+
+        this.handlebars.registerHelper('string', (values: string | Array<string> | undefined, defaultValue?: string): string | undefined => {
+            if (typeof values === 'string') {
+                values = [values];
+            }
+
+            return this.getString(values, defaultValue);
+        });
+
+        this.handlebars.registerHelper('number', (values: string | Array<string> | undefined, defaultValue?: number): number | undefined => {
+            if (typeof values === 'string') {
+                values = [values];
+            }
+
+            return this.getNumber(values, defaultValue);
+        });
+
+        this.handlebars.registerHelper('currency', (values: number | Array<string> | undefined, defaultValue?: number): string | undefined => {
+            if (typeof values === 'string') {
+                values = [values];
+            } else if (typeof values === 'number') {
+                values = [values.toString()];
+            }
+
+            return this.getCurrency(values, defaultValue);
+        });
+    }
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        if (!this.data) {
+            return '';
+        }
+
+        const html = template(this.data);
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll('[hawksearch-image]').forEach((e) => {
+            e.addEventListener('error', (event: Event): void => {
+                const element = event.currentTarget as HTMLImageElement;
+
+                element.src = Hawksearch.config.placeholderImageUrl || placeholderUrl;
+            });
+        });
+
+        this.shadowRoot?.querySelectorAll('[hawksearch-link]').forEach((e) => {
+            e.addEventListener('click', ((event: PointerEvent): void => {
+                if (!this.data) {
+                    return;
+                }
+
+                trackingService.trackSearchResultClick(this.data.id, this.data.url, event);
+            }) as EventListener);
+        });
+    }
+
+    private getString(values: Array<string> | undefined, defaultValue?: string): string | undefined {
+        return values?.[0] ?? defaultValue;
+    }
+
+    private getNumber(values: Array<string> | undefined, defaultValue?: number): number | undefined {
+        const string = this.getString(values);
+        let value = string ? parseFloat(string) : undefined;
+
+        if (value !== undefined && isNaN(value)) {
+            value = undefined;
+        }
+
+        return value ?? defaultValue;
+    }
+
+    private getCurrency(values: Array<string> | undefined, defaultValue?: number): string | undefined {
+        const value = this.getNumber(values) || defaultValue;
+
+        if (!value) {
+            return undefined;
+        }
+
+        return formatCurrency(value);
+    }
+}

package/src/components/search-results-list/search-results-list.component.hbs

@@ -0,0 +1,15 @@
+{{#if items.length}}
+    <div class='row'>
+        {{#each items}}
+            {{#if (eq type 'content')}}
+                <div class='column column--12'>
+                    <hawksearch-results-item></hawksearch-results-item>
+                </div>
+            {{else}}
+                <div class='column column--12 column-sm--6 column-lg--4'>
+                    <hawksearch-results-item></hawksearch-results-item>
+                </div>
+            {{/if}}
+        {{/each}}
+    </div>
+{{/if}}

package/src/components/search-results-list/search-results-list.component.ts

@@ -0,0 +1,24 @@
+import { SearchResultsItem } from '@models';
+import { BaseComponent } from '../base.component';
+import { SearchResultsItemComponent } from '../search-results-item/search-results-item.component';
+import defaultHtml from './search-results-list.component.hbs';
+
+export class SearchResultsListComponent extends BaseComponent<Array<SearchResultsItem>> {
+    protected bindEvent = 'hawksearch:bind-search-results-list';
+    protected customTemplatePropertyName = 'searchResultsList';
+    protected defaultHtml = defaultHtml;
+
+    protected getContentHtml(template: HandlebarsTemplateDelegate): string {
+        const html = template({
+            items: this.data ?? []
+        });
+
+        return html;
+    }
+
+    protected bindChildElements(): void {
+        this.shadowRoot?.querySelectorAll<SearchResultsItemComponent>('hawksearch-results-item').forEach((component, index) => {
+            component.data = this.data?.[index];
+        });
+    }
+}

package/src/components/selected-facets/selected-facets.component.hbs

@@ -0,0 +1,11 @@
+<div class='flex-gap flex-gap--xs'>
+    {{#each selections}}
+        <span class='selected-facet'>
+            <span class='selected-facet__field'>{{title}}</span>
+            <span class='selected-facet__value{{attribute ' selected-facet__value--excluded' excluded}}'>{{selectionTitle}}</span>
+            <a hawksearch-facet-field='{{field}}' hawksearch-facet-value='{{selectionValue}}' class='selected-facet__remove'>
+                <hawksearch-icon name='cross' size='0.9em'></hawksearch-icon>
+            </a>
+        </span>
+    {{/each}}
+</div>