JSUI-3374 Ensure FacetsMobileMode is present in the interface & resol…

…ves default options (#1866) https://coveord.atlassian.net/browse/JSUI-3374
coveo · Mar 30, 2022 · b5c6850 · b5c6850
1 parent 6cf538a
commit b5c6850
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 15 deletions.
diff --git a/src/ui/FacetsMobileMode/FacetsMobileMode.ts b/src/ui/FacetsMobileMode/FacetsMobileMode.ts
@@ -5,6 +5,10 @@ import { exportGlobally } from '../../GlobalExports';
 import { Utils } from '../../Core';
 import { Initialization } from '../Base/Initialization';
 
+export interface IFacetsMobileModeConstructor {
+  new (element: HTMLElement, options: IFacetsMobileModeOptions, bindings: IComponentBindings): FacetsMobileMode;
+}
+
 export interface IFacetsMobileModeOptions {
   breakpoint?: number;
   isModal?: boolean;

diff --git a/src/ui/ResponsiveComponents/ResponsiveFacetColumn.ts b/src/ui/ResponsiveComponents/ResponsiveFacetColumn.ts
@@ -17,11 +17,11 @@ import { ComponentsTypes } from '../../utils/ComponentsTypes';
 import { ResponsiveDropdownModalContent } from './ResponsiveDropdown/ResponsiveDropdownModalContent';
 import { FacetsMobileMode, IFacetsMobileModeOptions } from '../FacetsMobileMode/FacetsMobileMode';
 import { FacetsMobileModeEvents } from '../../events/FacetsMobileModeEvents';
-import { ComponentOptions } from '../Base/ComponentOptions';
 
 export class ResponsiveFacetColumn implements IResponsiveComponent {
   public static DEBOUNCE_SCROLL_WAIT = 250;
 
+  private static logger = new Logger('ResponsiveFacets');
   private static DROPDOWN_MIN_WIDTH: number = 280;
   private static DROPDOWN_WIDTH_RATIO: number = 0.35; // Used to set the width relative to the coveo root.
   private static DROPDOWN_HEADER_LABEL_DEFAULT_VALUE = 'Filters';
@@ -46,8 +46,7 @@ export class ResponsiveFacetColumn implements IResponsiveComponent {
   private static findColumn(root: HTMLElement) {
     const column = $$(root).find('.coveo-facet-column');
     if (!column) {
-      const logger = new Logger('ResponsiveFacets');
-      logger.info('No element with class coveo-facet-column. Responsive facets cannot be enabled');
+      this.logger.info('No element with class coveo-facet-column. Responsive facets cannot be enabled');
     }
     return column;
   }
@@ -70,13 +69,14 @@ export class ResponsiveFacetColumn implements IResponsiveComponent {
   private get facetsMobileModeOptions(): IFacetsMobileModeOptions {
     const facetsMobileModeComponent = this.facetsMobileModeComponent;
     if (!facetsMobileModeComponent) {
+      ResponsiveFacetColumn.logger.warn('The "FacetsMobileMode" component did not load properly, disabling the ResponsiveFacets modal.');
       return {
-        isModal: true,
-        preventScrolling: true,
-        displayOverlayWhileOpen: false,
-        scrollContainer: this.searchInterface ? ComponentOptions.findParentScrollLockable(this.searchInterface.element) : undefined
+        isModal: false,
+        preventScrolling: false,
+        displayOverlayWhileOpen: true
       };
     }
+
     return facetsMobileModeComponent.options;
   }
 

diff --git a/src/ui/SearchInterface/SearchInterface.ts b/src/ui/SearchInterface/SearchInterface.ts
@@ -51,6 +51,7 @@ import {
 import { FacetColumnAutoLayoutAdjustment } from './FacetColumnAutoLayoutAdjustment';
 import { FacetValueStateHandler } from './FacetValueStateHandler';
 import RelevanceInspectorModule = require('../RelevanceInspector/RelevanceInspector');
+import FacetsMobileModeModule = require('../FacetsMobileMode/FacetsMobileMode');
 import { ComponentsTypes } from '../../utils/ComponentsTypes';
 import { ScrollRestorer } from './ScrollRestorer';
 
@@ -784,6 +785,27 @@ export class SearchInterface extends RootComponent implements IComponentBindings
     this.responsiveComponents.setMediumScreenWidth(this.options.responsiveMediumBreakpoint);
     this.responsiveComponents.setSmallScreenWidth(this.options.responsiveSmallBreakpoint);
     this.responsiveComponents.setResponsiveMode(this.options.responsiveMode);
+    this.ensureFacetsMobileMode();
+  }
+
+  private ensureFacetsMobileMode() {
+    if (this.root.querySelector('.CoveoFacetsMobileMode')) {
+      return;
+    }
+
+    require.ensure(
+      ['../FacetsMobileMode/FacetsMobileMode'],
+      () => {
+        const loadedModule = require('../FacetsMobileMode/FacetsMobileMode.ts');
+        const facetsMobileModeCtor = loadedModule.FacetsMobileMode as FacetsMobileModeModule.IFacetsMobileModeConstructor;
+        const facetsMobileModeEl = $$('div');
+        $$(this.element).prepend(facetsMobileModeEl.el);
+        const options = this.options.originalOptionsObject['FacetsMobileMode'] || {};
+        new facetsMobileModeCtor(facetsMobileModeEl.el, options, this.getBindings());
+      },
+      null,
+      'FacetsMobileMode'
+    );
   }
 
   private handleDebugModeChange(args: IAttributeChangedEventArg) {

diff --git a/unitTests/ui/ResponsiveFacetColumnTest.ts b/unitTests/ui/ResponsiveFacetColumnTest.ts
@@ -63,23 +63,28 @@ export function ResponsiveFacetColumnTest() {
     createResponsiveFacetColumn();
   }
 
-  function prepareTest() {
+  function prepareTestWithoutMobileMode() {
+    spyOn(ResponsiveFacetColumn['logger'], 'warn');
     mockSearchInterface();
     createResponsiveFacetColumn();
   }
 
   describe('ResponsiveFacetColumn', () => {
     describe('without a FacetsMobileMode component', () => {
       beforeEach(() => {
-        prepareTest();
+        prepareTestWithoutMobileMode();
       });
 
-      it('should instantiate a modal dropdown', () => {
-        expect(dropdown.dropdownContent instanceof ResponsiveDropdownModalContent).toBeTruthy();
+      it('should log a warning', () => {
+        expect(ResponsiveFacetColumn['logger'].warn).toHaveBeenCalled();
       });
 
-      it("shouldn't show the background", () => {
-        expect(dropdown['popupBackgroundIsEnabled']).toBeFalsy();
+      it('should instantiate a normal dropdown', () => {
+        expect(dropdown.dropdownContent instanceof ResponsiveDropdownContent).toBeTruthy();
+      });
+
+      it('should show the background', () => {
+        expect(dropdown['popupBackgroundIsEnabled']).toBeTruthy();
       });
 
       describe('when opened', () => {
@@ -88,8 +93,8 @@ export function ResponsiveFacetColumnTest() {
           dropdown.open();
         });
 
-        it("shouldn't allow scrolling on the body", () => {
-          expect(root.el.style.overflow).toEqual('hidden');
+        it('should allow scrolling on the body', () => {
+          expect(root.el.style.overflow).toBeFalsy();
         });
       });
     });