@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/store/SearchStore.d.ts

@@ -0,0 +1,81 @@
+import type RootStore from './RootStore.js';
+import type { InterfaceAction } from './types';
+export type SearchBoxMode = 'search' | 'details' | 'interface';
+export default class SearchStore {
+    private readonly rootStore;
+    private searchCameraTimer;
+    searchText: string;
+    isFocused: boolean;
+    isClearMode: boolean;
+    skipInputFocus: boolean;
+    constructor(rootStore: RootStore);
+    private get uiState();
+    get searchBoxConfig(): {
+        mode: string;
+        title?: string;
+        subtitle?: string;
+        badge?: string | number;
+        icon?: string;
+    };
+    get searchBoxMode(): SearchBoxMode;
+    get searchBoxTitle(): string;
+    get searchBoxSubtitle(): string | undefined;
+    get searchBoxBadge(): string | number | undefined;
+    get searchBoxIcon(): string | undefined;
+    get searchBoxActions(): InterfaceAction[];
+    get shouldShowSearchInput(): boolean;
+    get shouldShowCloseButton(): boolean;
+    get closeButtonAction(): "clear" | "close";
+    get shouldShowShadow(): boolean;
+    get placeholder(): string;
+    get searchBoxClass(): {
+        'is-details': boolean;
+        'is-interface': boolean;
+        'has-shadow': boolean;
+        'has-subtitle': boolean;
+        'has-badge': boolean;
+        'has-icon': boolean;
+        'is-overlay-full': boolean;
+        'is-featured-exhibitor': boolean;
+        'is-route': boolean;
+        'is-guided-tours': boolean;
+        'is-overlay-scrolled': boolean;
+        'overlay-pulse': boolean;
+    };
+    get ariaLabel(): string;
+    selectSearch(text?: string): void;
+    selectSearchAndFocus(text?: string): void;
+    setSearchText(text: string): void;
+    /**
+     * Frames what the search found once typing pauses. A newer keystroke, an opened result or a
+     * switch to another list makes it stale, so it is re-checked after the venue entry lands too.
+     */
+    private followSearchResults;
+    setFocused(focused: boolean): void;
+    handleBackAction(): void;
+    closeSearch(): void;
+    private clearActiveFilters;
+    private resetSearchButtonState;
+    handleSearchAction(): void;
+    openOverlayWithoutInputFocus(): void;
+    closeSessions(): void;
+    closeExhibitors(): void;
+    resetSearchBox(): void;
+    syncWithUIState(): void;
+    get actionButtonIcon(): "icon-close" | "icon-search";
+    clearAndSelectSearch(): void;
+    get backMode(): "back" | "menu";
+    get isMobileDetailsMode(): boolean;
+    get shouldShowTitle(): boolean;
+    get searchState(): {
+        text: string;
+        isFocused: boolean;
+        isClearMode: boolean;
+        mode: SearchBoxMode;
+        title: string | undefined;
+        subtitle: string | undefined;
+        badge: string | number | undefined;
+        icon: string | undefined;
+    };
+}
+//# sourceMappingURL=SearchStore.d.ts.map

package/dist/esm/store/SearchStore.js

@@ -0,0 +1,612 @@
+import { __decorate } from "tslib";
+import { action, computed, observable } from 'mobx';
+import { LANGUAGE_TYPE, MOBILE_BREAKPOINT } from '../constants';
+import data from '../data';
+import { goBack } from '../services/url-sync';
+import settings from '../tools/settings';
+import { t } from '../utils/i18n';
+import { sanitizeSearch } from '../utils/sanitizeText';
+import { BoothBase } from './BoothStore.js';
+import { Exhibitor } from './ExhibitorStore.js';
+import { Route } from './RouteStore';
+import { focusVenueForBooths, pickSearchCameraBooths } from './venue-selection.js';
+class SearchStateCommands {
+    static closeDetails(uiState) {
+        if (!uiState.details)
+            return false;
+        uiState.details = null;
+        return true;
+    }
+    static closeMultiPointTour(uiState) {
+        uiState.rootStore.fp.hidePathways();
+        return true;
+    }
+    static clearSearchAndFocus(store) {
+        if (!store.searchText)
+            return false;
+        store.setSearchText('');
+        store.setFocused(true);
+        return true;
+    }
+    static returnToSearch(uiState, focused = false) {
+        uiState.list = { type: 'search', text: '', focused };
+    }
+    static returnToSessions(uiState, focused = false) {
+        uiState.list = { type: 'sessions', text: '', focused };
+    }
+    static returnToTours(uiState, focused = false) {
+        uiState.list = { type: 'tours', text: '', focused };
+    }
+    static openMenu(uiState) {
+        uiState.menu = true;
+    }
+    static closeMenu(uiState) {
+        uiState.menu = false;
+    }
+    static clearListScroll(uiState, listType) {
+        uiState.clearListScroll(listType);
+    }
+    static resetActiveListIndex(uiState) {
+        uiState.activeListIndex = -1;
+    }
+}
+/** Pause in typing before the camera follows the search (`searchCameraFollow`). */
+const SEARCH_CAMERA_DELAY_MS = 600;
+/** Lists that keep their own type while the search box filters them; any other turns into 'search'. */
+const SELF_FILTERING_LIST_TYPES = ['sessions', 'tours', 'speakers', 'exhibitors'];
+export default class SearchStore {
+    constructor(rootStore) {
+        this.searchText = '';
+        this.isFocused = false;
+        this.isClearMode = false;
+        this.skipInputFocus = false;
+        this.rootStore = rootStore;
+    }
+    get uiState() {
+        return this.rootStore.uiState;
+    }
+    get searchBoxConfig() {
+        return this.uiState.searchBoxConfig;
+    }
+    get searchBoxMode() {
+        return this.searchBoxConfig.mode;
+    }
+    get searchBoxTitle() {
+        return this.searchBoxConfig.title ?? '';
+    }
+    get searchBoxSubtitle() {
+        return this.searchBoxConfig.subtitle;
+    }
+    get searchBoxBadge() {
+        return this.searchBoxConfig.badge;
+    }
+    get searchBoxIcon() {
+        return this.searchBoxConfig.icon;
+    }
+    get searchBoxActions() {
+        return this.uiState.searchBoxActions;
+    }
+    get shouldShowSearchInput() {
+        return this.searchBoxMode === 'search';
+    }
+    get shouldShowCloseButton() {
+        const { menu, details, list } = this.uiState;
+        const isRebookingExhibitorsList = data.isRebooking && list.type === 'exhibitors';
+        if (!this.shouldShowSearchInput ||
+            list.type === 'sessions' ||
+            list.type === 'tours' ||
+            list.type === 'speakers' ||
+            (list.type === 'exhibitors' && !isRebookingExhibitorsList)) {
+            return true;
+        }
+        return menu || details !== null || !!this.searchText || this.isClearMode || this.isFocused;
+    }
+    get closeButtonAction() {
+        if (!this.shouldShowSearchInput ||
+            this.searchBoxMode === 'details' ||
+            this.uiState.list.type === 'sessions' ||
+            this.uiState.list.type === 'speakers' ||
+            (this.uiState.list.type === 'exhibitors' && !data.isRebooking)) {
+            return 'close';
+        }
+        return this.searchText ? 'clear' : 'close';
+    }
+    get shouldShowShadow() {
+        const { menu, details, list } = this.uiState;
+        const hasSearchText = list.type === 'search' && !!list.text;
+        return !(this.rootStore.fp.alwaysShowSidebar ||
+            menu ||
+            details !== null ||
+            list.type !== 'search' ||
+            hasSearchText ||
+            this.isFocused ||
+            this.uiState.heatmap);
+    }
+    get placeholder() {
+        const { list, heatmapYah } = this.uiState;
+        if (list.type === 'sessions')
+            return t('Search sessions');
+        if (list.type === 'tours')
+            return t('Search Guided Tours');
+        if (list.type === 'exhibitors')
+            return t('Search exhibitors');
+        if (list.type === 'speakers')
+            return t('Search speakers');
+        if (settings.EXPO.startsWith('lenzerheidemotorclassics'))
+            return 'SUCHE';
+        if (settings.EXPO.startsWith('jetlag'))
+            return 'Search location or artist';
+        if (heatmapYah)
+            return t('Find values greater than');
+        if (this.uiState.hasAppliedFilters) {
+            return t('Search');
+        }
+        return data.searchText || t('Search');
+    }
+    get searchBoxClass() {
+        return {
+            'is-details': this.searchBoxMode === 'details' && !(this.uiState.details instanceof Route),
+            'is-interface': this.searchBoxMode === 'interface',
+            'has-shadow': this.shouldShowShadow,
+            'has-subtitle': !!this.searchBoxConfig.subtitle,
+            'has-badge': !!this.searchBoxConfig.badge,
+            'has-icon': !!this.searchBoxConfig.icon,
+            'is-overlay-full': this.uiState.isOverlayOpen && this.uiState.overlaySize === 'full',
+            'is-featured-exhibitor': this.uiState.isFeaturedExhibitorActive,
+            'is-route': this.uiState.details instanceof Route,
+            'is-guided-tours': this.uiState.isGuidedToursActive,
+            'is-overlay-scrolled': this.uiState.isOverlayScrolled,
+            'overlay-pulse': this.uiState.kiosk && this.uiState.inIdle && !this.uiState.setKioskModeEnabled,
+        };
+    }
+    get ariaLabel() {
+        if (!this.shouldShowSearchInput || this.searchBoxMode === 'details') {
+            return t('Close');
+        }
+        return this.searchText ? t('Clear search') : t('Close');
+    }
+    selectSearch(text) {
+        if (window.__resett) {
+            window.__resett();
+        }
+        this.uiState.details = null;
+        const sanitized = sanitizeSearch(text || '', Object.keys(this.uiState.mapSettings).map((k) => `${k}=`));
+        this.setSearchText(sanitized);
+        this.uiState.activeListIndex = -1;
+    }
+    selectSearchAndFocus(text) {
+        this.selectSearch(text);
+        this.setFocused(true);
+    }
+    setSearchText(text) {
+        this.searchText = text;
+        clearTimeout(this.searchCameraTimer);
+        // Only the search list follows; text typed into sessions, speakers, tours or exhibitors keeps
+        // recentering as before.
+        const becomesSearchList = !SELF_FILTERING_LIST_TYPES.includes(this.uiState.list.type);
+        if (this.uiState.hasAppliedFilters) {
+            this.rootStore.moveToList();
+        }
+        else if (text && becomesSearchList && data.searchCameraFollow) {
+            this.searchCameraTimer = setTimeout(() => this.followSearchResults(text), SEARCH_CAMERA_DELAY_MS);
+        }
+        else {
+            this.uiState.centerMap = true;
+        }
+        this.uiState.activeListIndex = text ? 0 : -1;
+        if (this.uiState.list.type !== 'sessions' &&
+            this.uiState.list.type !== 'tours' &&
+            this.uiState.list.type !== 'speakers' &&
+            this.uiState.list.type !== 'exhibitors') {
+            this.uiState.list = { type: 'search', text, focused: this.isFocused };
+        }
+        else if (this.uiState.list.type === 'exhibitors') {
+            this.uiState.list = { type: 'exhibitors', text, focused: this.isFocused };
+        }
+        this.uiState.searchClearMode = this.isClearMode;
+    }
+    /**
+     * Frames what the search found once typing pauses. A newer keystroke, an opened result or a
+     * switch to another list makes it stale, so it is re-checked after the venue entry lands too.
+     */
+    followSearchResults(text) {
+        const isCurrent = () => this.searchText === text && this.uiState.list.type === 'search' && !this.uiState.details;
+        if (!isCurrent())
+            return;
+        const { venueStore } = this.rootStore;
+        const booths = this.uiState.listItems.flatMap((item) => {
+            if (item instanceof Exhibitor)
+                return item.booths;
+            if (item instanceof BoothBase)
+                return [item];
+            return [];
+        });
+        const targets = pickSearchCameraBooths(venueStore, booths);
+        if (!targets)
+            return;
+        const venueReady = targets.every((booth) => booth.visible)
+            ? undefined
+            : focusVenueForBooths(venueStore, targets);
+        if (!venueReady) {
+            this.rootStore.moveToList(targets);
+            return;
+        }
+        void venueReady.then(action(() => {
+            if (isCurrent())
+                this.rootStore.moveToList(targets, true);
+        }));
+    }
+    setFocused(focused) {
+        this.isFocused = focused;
+        this.isClearMode = false;
+        this.skipInputFocus = false;
+        this.uiState.searchFocused = focused;
+        this.uiState.searchClearMode = false;
+        this.uiState.desiredOverlaySize = 'full';
+    }
+    handleBackAction() {
+        const { uiState } = this;
+        const { list } = uiState;
+        uiState.desiredOverlaySize = 'full';
+        if (this.backMode === 'menu') {
+            this.resetSearchButtonState();
+            SearchStateCommands.openMenu(uiState);
+            return;
+        }
+        if (list.type === 'route-planner') {
+            this.rootStore.routePlannerStore.close();
+            this.rootStore.selectBookmarks();
+            goBack();
+            return;
+        }
+        if (list.type === 'multi-point-tour' && !uiState.details) {
+            SearchStateCommands.returnToTours(uiState, false);
+            this.rootStore.fp.hidePathways();
+            return;
+        }
+        if (uiState.details) {
+            uiState.details = null;
+            goBack();
+            return;
+        }
+        if (uiState.menu) {
+            if (list.type === 'sessions') {
+                uiState.list = { type: 'sessions', text: '', focused: true };
+            }
+            else if (list.type === 'exhibitors') {
+                uiState.list = { type: 'exhibitors', text: '', focused: true };
+            }
+            else {
+                uiState.list = { type: 'search', text: '', focused: true };
+            }
+            this.setFocused(true);
+            this.isClearMode = true;
+            SearchStateCommands.closeMenu(uiState);
+            return;
+        }
+        if (list.type === 'sessions' || list.type === 'tours' || list.type === 'exhibitors') {
+            if (SearchStateCommands.closeDetails(uiState))
+                return;
+            this.clearActiveFilters();
+            SearchStateCommands.returnToSearch(uiState, false);
+            this.selectSearchAndFocus();
+            return;
+        }
+        switch (list.type) {
+            case 'filter':
+                uiState.details = null;
+                return;
+            case 'multi-point-tour':
+                this.rootStore.fp.hidePathways();
+                if (SearchStateCommands.closeDetails(uiState)) {
+                    SearchStateCommands.returnToTours(uiState, false);
+                }
+                else {
+                    goBack();
+                }
+                return;
+            case 'category':
+                this.rootStore.selectCategory(list.category);
+                return;
+            case 'speakers':
+                if (SearchStateCommands.closeDetails(uiState))
+                    return;
+                SearchStateCommands.returnToSessions(uiState, false);
+                return;
+            case 'bookmarks':
+            case 'visited':
+                if (SearchStateCommands.closeDetails(uiState))
+                    return;
+                this.selectSearchAndFocus();
+                return;
+            case LANGUAGE_TYPE:
+                SearchStateCommands.returnToSearch(uiState, false);
+                SearchStateCommands.openMenu(uiState);
+                return;
+        }
+        if (SearchStateCommands.closeDetails(uiState))
+            return;
+        if (SearchStateCommands.clearSearchAndFocus(this))
+            return;
+        SearchStateCommands.openMenu(uiState);
+    }
+    closeSearch() {
+        const { uiState } = this;
+        const { list } = uiState;
+        if (list.type === 'route-planner') {
+            this.rootStore.routePlannerStore.close();
+            SearchStateCommands.returnToSearch(uiState, false);
+            this.resetSearchBox();
+            return;
+        }
+        SearchStateCommands.closeDetails(uiState);
+        SearchStateCommands.clearListScroll(uiState, list.type);
+        SearchStateCommands.closeMultiPointTour(uiState);
+        if (list.type === 'bookmarks') {
+            SearchStateCommands.returnToSearch(uiState, false);
+            this.resetSearchBox();
+            return;
+        }
+        if (uiState.selectedCategory) {
+            SearchStateCommands.returnToSearch(uiState, false);
+            this.resetSearchBox();
+            return;
+        }
+        if (list.type === 'sessions') {
+            this.closeSessions();
+            return;
+        }
+        if (list.type === 'exhibitors') {
+            if (data.isRebooking) {
+                if (this.searchBoxMode === 'search' && this.searchText) {
+                    this.setSearchText('');
+                    this.isClearMode = true;
+                    this.clearActiveFilters();
+                }
+                else {
+                    this.resetSearchBox();
+                }
+                return;
+            }
+            this.closeExhibitors();
+            return;
+        }
+        if (uiState.menu) {
+            SearchStateCommands.closeMenu(uiState);
+            this.resetSearchBox();
+            return;
+        }
+        if (this.searchBoxMode === 'search' && !uiState.details && this.searchText) {
+            this.setSearchText('');
+            this.isClearMode = true;
+            this.clearActiveFilters();
+            return;
+        }
+        SearchStateCommands.returnToSearch(uiState, false);
+        this.searchText = '';
+        this.resetSearchBox();
+        uiState.details = null;
+        this.clearActiveFilters();
+    }
+    clearActiveFilters() {
+        this.rootStore.searchButtonsStore.setPoiFilterId(null);
+        this.rootStore.uiState.selectedPoiTypeFilters = [];
+        this.rootStore.uiState.selectedCategoryFilters = [];
+        this.rootStore.categoryFilterStore.state.selectedItems = [];
+        this.rootStore.categoryFilterStore.state.pendingItems = [];
+        this.rootStore.searchButtonsStore.searchShortcutState.activeParentId = null;
+        this.rootStore.searchButtonsStore.searchShortcutState.activeChildren.clear();
+        this.rootStore.searchButtonsStore.searchShortcutState.isShortcutsVisible = false;
+        if (this.rootStore.urlFilterManager && this.rootStore.urlFilterManager.isInitialized) {
+            this.rootStore.urlFilterManager.clearAllFilters();
+        }
+    }
+    resetSearchButtonState() {
+        const { uiState } = this;
+        this.rootStore.searchButtonsStore.clearAllFilters();
+        this.rootStore.searchButtonsStore.setSubButtonId(null);
+        this.rootStore.searchButtonsStore.hideSubButtons();
+        uiState.selectedTrack = null;
+        this.searchText = '';
+        this.isClearMode = false;
+    }
+    handleSearchAction() {
+        if (!this.isFocused) {
+            this.setFocused(true);
+        }
+    }
+    openOverlayWithoutInputFocus() {
+        this.skipInputFocus = true;
+        this.isFocused = true;
+        this.isClearMode = false;
+        this.uiState.searchFocused = true;
+        this.uiState.searchClearMode = false;
+        this.uiState.desiredOverlaySize = 'full';
+    }
+    closeSessions() {
+        this.searchText = '';
+        SearchStateCommands.returnToSearch(this.uiState, false);
+        this.uiState.details = null;
+        SearchStateCommands.resetActiveListIndex(this.uiState);
+        this.uiState.selectedTrack = null;
+        this.rootStore.searchButtonsStore.setSubButtonId(null);
+        this.rootStore.searchButtonsStore.hideSubButtons();
+    }
+    closeExhibitors() {
+        this.searchText = '';
+        SearchStateCommands.returnToSearch(this.uiState, false);
+        this.uiState.details = null;
+        SearchStateCommands.resetActiveListIndex(this.uiState);
+    }
+    resetSearchBox() {
+        this.setFocused(false);
+        this.isClearMode = false;
+        this.syncWithUIState();
+    }
+    syncWithUIState() {
+        this.searchText =
+            this.uiState.list.type === 'search' || this.uiState.list.type === 'exhibitors'
+                ? this.uiState.list.text || ''
+                : '';
+        this.isFocused = this.uiState.searchFocused;
+        this.isClearMode = this.uiState.searchClearMode;
+    }
+    get actionButtonIcon() {
+        return this.shouldShowSearchInput
+            ? this.shouldShowCloseButton
+                ? 'icon-close'
+                : 'icon-search'
+            : 'icon-close';
+    }
+    clearAndSelectSearch() {
+        this.selectSearch('');
+        this.setFocused(false);
+    }
+    get backMode() {
+        const listType = this.uiState.list.type;
+        if ((listType === 'bookmarks' || listType === 'visited') &&
+            !this.uiState.details &&
+            !this.uiState.menu) {
+            return 'menu';
+        }
+        return this.shouldShowSearchInput && !this.searchText ? 'menu' : 'back';
+    }
+    get isMobileDetailsMode() {
+        return (window.innerWidth < MOBILE_BREAKPOINT &&
+            this.uiState.details !== null &&
+            this.uiState.overlaySize === 'full' &&
+            !(this.uiState.details instanceof Route));
+    }
+    get shouldShowTitle() {
+        return !this.shouldShowSearchInput;
+    }
+    get searchState() {
+        return {
+            text: this.searchText,
+            isFocused: this.isFocused,
+            isClearMode: this.isClearMode,
+            mode: this.searchBoxMode,
+            title: this.searchBoxConfig.title,
+            subtitle: this.searchBoxConfig.subtitle,
+            badge: this.searchBoxConfig.badge,
+            icon: this.searchBoxConfig.icon,
+        };
+    }
+}
+__decorate([
+    observable
+], SearchStore.prototype, "searchText", void 0);
+__decorate([
+    observable
+], SearchStore.prototype, "isFocused", void 0);
+__decorate([
+    observable
+], SearchStore.prototype, "isClearMode", void 0);
+__decorate([
+    observable
+], SearchStore.prototype, "skipInputFocus", void 0);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxConfig", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxMode", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxTitle", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxSubtitle", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxBadge", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxIcon", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxActions", null);
+__decorate([
+    computed
+], SearchStore.prototype, "shouldShowSearchInput", null);
+__decorate([
+    computed
+], SearchStore.prototype, "shouldShowCloseButton", null);
+__decorate([
+    computed
+], SearchStore.prototype, "closeButtonAction", null);
+__decorate([
+    computed
+], SearchStore.prototype, "shouldShowShadow", null);
+__decorate([
+    computed
+], SearchStore.prototype, "placeholder", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchBoxClass", null);
+__decorate([
+    computed
+], SearchStore.prototype, "ariaLabel", null);
+__decorate([
+    action
+], SearchStore.prototype, "selectSearch", null);
+__decorate([
+    action
+], SearchStore.prototype, "selectSearchAndFocus", null);
+__decorate([
+    action
+], SearchStore.prototype, "setSearchText", null);
+__decorate([
+    action
+], SearchStore.prototype, "followSearchResults", null);
+__decorate([
+    action
+], SearchStore.prototype, "setFocused", null);
+__decorate([
+    action
+], SearchStore.prototype, "handleBackAction", null);
+__decorate([
+    action
+], SearchStore.prototype, "closeSearch", null);
+__decorate([
+    action
+], SearchStore.prototype, "clearActiveFilters", null);
+__decorate([
+    action
+], SearchStore.prototype, "resetSearchButtonState", null);
+__decorate([
+    action
+], SearchStore.prototype, "handleSearchAction", null);
+__decorate([
+    action
+], SearchStore.prototype, "openOverlayWithoutInputFocus", null);
+__decorate([
+    action
+], SearchStore.prototype, "closeSessions", null);
+__decorate([
+    action
+], SearchStore.prototype, "closeExhibitors", null);
+__decorate([
+    action
+], SearchStore.prototype, "resetSearchBox", null);
+__decorate([
+    action
+], SearchStore.prototype, "syncWithUIState", null);
+__decorate([
+    computed
+], SearchStore.prototype, "actionButtonIcon", null);
+__decorate([
+    action
+], SearchStore.prototype, "clearAndSelectSearch", null);
+__decorate([
+    computed
+], SearchStore.prototype, "backMode", null);
+__decorate([
+    computed
+], SearchStore.prototype, "isMobileDetailsMode", null);
+__decorate([
+    computed
+], SearchStore.prototype, "shouldShowTitle", null);
+__decorate([
+    computed
+], SearchStore.prototype, "searchState", null);