@internetarchive/collection-browser 4.1.1 → 4.1.2-alpha-webdev8332.0

package/src/tiles/hover/hover-pane-controller.ts

@@ -227,7 +227,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
 
   /** @inheritdoc */
   toggleHoverPane(options: ToggleHoverPaneOptions): void {
-    if (this.hoverPaneState === 'shown') {
+    if (this.hoverPaneState !== 'hidden') {
       this.fadeOutHoverPane();
       this.forceTouchBackdrop = false;
     } else {
@@ -546,6 +546,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
     if (this.hoverPaneState !== 'hidden') {
       this.fadeOutHoverPane();
     }
+    e.preventDefault();
     e.stopPropagation();
   };
 

package/src/tiles/tile-dispatcher.ts

@@ -218,6 +218,15 @@ export class TileDispatcher
     return window.matchMedia('(hover: hover)').matches;
   }
 
+  /**
+   * Whether the info button should be shown on this tile.
+   * Only shown on touch/non-hover devices where a hover pane is available,
+   * so the button always has something to toggle.
+   */
+  private get shouldShowInfoButton(): boolean {
+    return !this.isHoverEnabled && this.shouldPrepareHoverPane;
+  }
+
   /** @inheritdoc */
   getHoverPane(): TileHoverPane | undefined {
     return this.hoverPane;
@@ -326,7 +335,7 @@ export class TileDispatcher
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               .layoutType=${this.layoutType}
-              ?showInfoButton=${!this.isHoverEnabled}
+              ?showInfoButton=${this.shouldShowInfoButton}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </collection-tile>`;
@@ -340,7 +349,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
-              ?showInfoButton=${!this.isHoverEnabled}
+              ?showInfoButton=${this.shouldShowInfoButton}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </account-tile>`;
@@ -373,7 +382,7 @@ export class TileDispatcher
               .isManageView=${this.isManageView}
               .layoutType=${this.layoutType}
               ?showTvClips=${this.showTvClips}
-              ?showInfoButton=${!this.isHoverEnabled}
+              ?showInfoButton=${this.shouldShowInfoButton}
               ?useLocalTime=${this.useLocalTime}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >

package/test/tiles/tile-dispatcher.test.ts

@@ -213,6 +213,23 @@ describe('Tile Dispatcher', () => {
       await el.updateComplete;
       expect(el.getHoverPane()).not.to.exist;
     });
+
+    it('should not show info button when hover pane is not enabled', async () => {
+      const el = await fixture<TileDispatcher>(html`
+        <tile-dispatcher
+          .tileDisplayMode=${'grid'}
+          .model=${{ mediatype: 'texts' }}
+          .enableHoverPane=${false}
+        >
+        </tile-dispatcher>
+      `);
+
+      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;
+      expect(itemTile).to.exist;
+
+      const infoButton = itemTile.shadowRoot?.querySelector('.info-button');
+      expect(infoButton).to.not.exist;
+    });
   });
 
   describe('Accessibility', () => {