@internetarchive/collection-browser 2.18.3-alpha-webdev5427.0 → 2.18.3-alpha-webdev7768.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +1 -1
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +1 -1
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/package.json +1 -1
- package/src/tiles/grid/styles/tile-grid-shared-styles.ts +1 -1
- package/src/tiles/tile-dispatcher.ts +1 -1
|
@@ -13,7 +13,7 @@ export const baseTileStyles = css `
|
|
|
13
13
|
background-color: ${tileBackgroundColor};
|
|
14
14
|
border: 1px #2c2c2c;
|
|
15
15
|
border-radius: ${tileCornerRadius};
|
|
16
|
-
box-shadow: 1px 1px 2px 0;
|
|
16
|
+
box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
height: 100%;
|
|
19
19
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GpC,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { srOnlyStyle } from '../../../styles/sr-only';\r\n\r\n/**\r\n * Base tile styles\r\n */\r\n\r\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\r\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\r\n\r\nexport const baseTileStyles = css`\r\n /* Include .sr-only styles for all tiles */\r\n ${srOnlyStyle}\r\n\r\n .container {\r\n background-color: ${tileBackgroundColor};\r\n border: 1px #2c2c2c;\r\n border-radius: ${tileCornerRadius};\r\n box-shadow: 1px 1px 2px 0;\r\n box-sizing: border-box;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n image-block {\r\n display: block;\r\n position: relative;\r\n text-align: center;\r\n }\r\n\r\n .tile-details {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n row-gap: 10px;\r\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\r\n }\r\n\r\n .item-info {\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 5px;\r\n flex-grow: 1;\r\n }\r\n\r\n #title {\r\n padding: 0 5px;\r\n }\r\n\r\n .created-by,\r\n .date-sorted-by,\r\n .volume-issue,\r\n .archivist-since {\r\n display: flex;\r\n justify-content: left;\r\n align-items: flex-start;\r\n padding: 0 5px;\r\n }\r\n\r\n .truncated {\r\n flex: 1;\r\n color: #2c2c2c;\r\n min-width: 0; /* Important for long words! */\r\n text-align: left;\r\n line-height: 15px;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n word-wrap: break-word;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n h4.truncated {\r\n display: -webkit-box;\r\n margin: 0px;\r\n line-height: 15px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n padding-bottom: 1px;\r\n }\r\n\r\n span {\r\n display: -webkit-box;\r\n font-size: 1.4rem;\r\n line-height: 15px;\r\n overflow: hidden;\r\n word-wrap: break-word;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n padding-bottom: 1px;\r\n }\r\n\r\n .container:hover > .tile-details > .item-info > #title > .truncated {\r\n text-decoration: underline;\r\n }\r\n\r\n /** this is a workaround for Safari 15 where the hover effects are not working */\r\n #title:hover > .truncated {\r\n text-decoration: underline;\r\n }\r\n\r\n .info-button {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: rgba(220, 220, 220, 0.5);\r\n color: white;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n line-height: 1;\r\n text-shadow: black 1px 1px 3px;\r\n overflow: visible;\r\n aspect-ratio: 1 / 1;\r\n z-index: 1;\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n`;\r\n"]}
|
|
1
|
+
{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GpC,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { srOnlyStyle } from '../../../styles/sr-only';\r\n\r\n/**\r\n * Base tile styles\r\n */\r\n\r\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\r\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\r\n\r\nexport const baseTileStyles = css`\r\n /* Include .sr-only styles for all tiles */\r\n ${srOnlyStyle}\r\n\r\n .container {\r\n background-color: ${tileBackgroundColor};\r\n border: 1px #2c2c2c;\r\n border-radius: ${tileCornerRadius};\r\n box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);\r\n box-sizing: border-box;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n image-block {\r\n display: block;\r\n position: relative;\r\n text-align: center;\r\n }\r\n\r\n .tile-details {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n row-gap: 10px;\r\n font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\r\n }\r\n\r\n .item-info {\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 5px;\r\n flex-grow: 1;\r\n }\r\n\r\n #title {\r\n padding: 0 5px;\r\n }\r\n\r\n .created-by,\r\n .date-sorted-by,\r\n .volume-issue,\r\n .archivist-since {\r\n display: flex;\r\n justify-content: left;\r\n align-items: flex-start;\r\n padding: 0 5px;\r\n }\r\n\r\n .truncated {\r\n flex: 1;\r\n color: #2c2c2c;\r\n min-width: 0; /* Important for long words! */\r\n text-align: left;\r\n line-height: 15px;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n word-wrap: break-word;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n }\r\n\r\n h4.truncated {\r\n display: -webkit-box;\r\n margin: 0px;\r\n line-height: 15px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n padding-bottom: 1px;\r\n }\r\n\r\n span {\r\n display: -webkit-box;\r\n font-size: 1.4rem;\r\n line-height: 15px;\r\n overflow: hidden;\r\n word-wrap: break-word;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n padding-bottom: 1px;\r\n }\r\n\r\n .container:hover > .tile-details > .item-info > #title > .truncated {\r\n text-decoration: underline;\r\n }\r\n\r\n /** this is a workaround for Safari 15 where the hover effects are not working */\r\n #title:hover > .truncated {\r\n text-decoration: underline;\r\n }\r\n\r\n .info-button {\r\n position: absolute;\r\n right: 10px;\r\n top: 10px;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: rgba(220, 220, 220, 0.5);\r\n color: white;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n line-height: 1;\r\n text-shadow: black 1px 1px 3px;\r\n overflow: visible;\r\n aspect-ratio: 1 / 1;\r\n z-index: 1;\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n`;\r\n"]}
|
|
@@ -346,7 +346,7 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
|
|
|
346
346
|
}
|
|
347
347
|
|
|
348
348
|
#container.hoverable:hover {
|
|
349
|
-
box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);
|
|
349
|
+
box-shadow: var(--tileHoverBoxShadow, 0 0 6px 2px rgba(8, 8, 32, 0.8));
|
|
350
350
|
transition: box-shadow 0.1s ease;
|
|
351
351
|
}
|
|
352
352
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { msg } from '@lit/localize';\r\nimport type {\r\n SharedResizeObserverInterface,\r\n SharedResizeObserverResizeHandlerInterface,\r\n} from '@internetarchive/shared-resize-observer';\r\nimport type { TileDisplayMode } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './grid/collection-tile';\r\nimport './grid/item-tile';\r\nimport './grid/account-tile';\r\nimport './grid/search-tile';\r\nimport './hover/tile-hover-pane';\r\nimport './list/tile-list';\r\nimport './list/tile-list-compact';\r\nimport './list/tile-list-compact-header';\r\nimport type { TileHoverPane } from './hover/tile-hover-pane';\r\nimport { BaseTileComponent } from './base-tile-component';\r\nimport { SimpleLayoutType } from './models';\r\nimport {\r\n HoverPaneController,\r\n HoverPaneControllerInterface,\r\n HoverPaneProperties,\r\n HoverPaneProviderInterface,\r\n} from './hover/hover-pane-controller';\r\n\r\n@customElement('tile-dispatcher')\r\nexport class TileDispatcher\r\n extends BaseTileComponent\r\n implements\r\n SharedResizeObserverResizeHandlerInterface,\r\n HoverPaneProviderInterface\r\n{\r\n /*\r\n * Reactive properties inherited from BaseTileComponent:\r\n * - model?: TileModel;\r\n * - currentWidth?: number;\r\n * - currentHeight?: number;\r\n * - baseNavigationUrl?: string;\r\n * - baseImageUrl?: string;\r\n * - collectionPagePath?: string;\r\n * - sortParam: SortParam | null = null;\r\n * - defaultSortParam: SortParam | null = null;\r\n * - creatorFilter?: string;\r\n * - mobileBreakpoint?: number;\r\n * - loggedIn = false;\r\n * - suppressTileBlurring = false;\r\n */\r\n\r\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\r\n\r\n @property({ type: Boolean }) isManageView = false;\r\n\r\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\r\n\r\n @property({ type: Object })\r\n collectionTitles?: CollectionTitles;\r\n\r\n @property({ type: Boolean }) showTvClips = false;\r\n\r\n /** What type of simple layout to use in grid mode, if any */\r\n @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\r\n @property({ type: Boolean }) enableHoverPane = false;\r\n\r\n @property({ type: String }) manageCheckTitle = msg(\r\n 'Remove this item from the list',\r\n );\r\n\r\n private hoverPaneController?: HoverPaneControllerInterface;\r\n\r\n @query('#container')\r\n private container!: HTMLDivElement;\r\n\r\n @query('tile-hover-pane')\r\n private hoverPane?: TileHoverPane;\r\n\r\n /** Maps each display mode to whether hover panes should appear in that mode */\r\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\r\n TileDisplayMode,\r\n boolean\r\n > = {\r\n grid: true,\r\n 'list-compact': true,\r\n 'list-detail': false,\r\n 'list-header': false,\r\n };\r\n\r\n render() {\r\n const isGridMode = this.tileDisplayMode === 'grid';\r\n const hoverPaneTemplate =\r\n this.hoverPaneController?.getTemplate() ?? nothing;\r\n return html`\r\n <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\r\n ${this.tileDisplayMode === 'list-header'\r\n ? this.headerTemplate\r\n : this.tileTemplate}\r\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\r\n </div>\r\n `;\r\n }\r\n\r\n protected firstUpdated(): void {\r\n if (this.shouldPrepareHoverPane) {\r\n this.hoverPaneController = new HoverPaneController(this, {\r\n mobileBreakpoint: this.mobileBreakpoint,\r\n enableLongPress: false,\r\n });\r\n }\r\n }\r\n\r\n private get headerTemplate() {\r\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\r\n this;\r\n return html`\r\n <tile-list-compact-header\r\n class=\"header\"\r\n .currentWidth=${currentWidth}\r\n .sortParam=${sortParam ?? defaultSortParam}\r\n .mobileBreakpoint=${mobileBreakpoint}\r\n >\r\n </tile-list-compact-header>\r\n `;\r\n }\r\n\r\n private get tileTemplate() {\r\n return html`\r\n ${this.tileDisplayMode === 'list-detail'\r\n ? this.tile\r\n : this.linkTileTemplate}\r\n `;\r\n }\r\n\r\n private get linkTileTemplate() {\r\n return html`\r\n <a\r\n href=${this.linkTileHref}\r\n aria-label=${this.model?.title ?? 'Untitled item'}\r\n title=${this.shouldPrepareHoverPane\r\n ? nothing // Don't show title tooltips when we have the tile info popups\r\n : ifDefined(this.model?.title)}\r\n @click=${this.handleLinkClicked}\r\n @contextmenu=${this.handleLinkContextMenu}\r\n >\r\n ${this.tile}\r\n </a>\r\n `;\r\n }\r\n\r\n private get linkTileHref(): string | typeof nothing {\r\n if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n return nothing;\r\n\r\n // Use the server-specified href if available.\r\n // Otherwise, construct a details page URL from the item identifier.\r\n if (this.model.href) {\r\n return `${this.baseNavigationUrl}${this.model.href}`;\r\n }\r\n\r\n return this.displayValueProvider.itemPageUrl(\r\n this.model.identifier,\r\n this.model.mediatype === 'collection',\r\n );\r\n }\r\n\r\n private get manageCheckTemplate() {\r\n if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\r\n\r\n return html`\r\n <div class=\"manage-check\">\r\n <input\r\n type=\"checkbox\"\r\n title=${this.manageCheckTitle}\r\n .checked=${this.model?.checked}\r\n @change=${this.handleLinkClicked}\r\n />\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Whether hover pane behavior should be prepared for this tile\r\n * (e.g., whether mouse listeners should be attached, etc.)\r\n */\r\n private get shouldPrepareHoverPane(): boolean {\r\n return (\r\n this.enableHoverPane &&\r\n !!this.tileDisplayMode &&\r\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\r\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\r\n !this.model?.captureDates // don't show hover panes on web archive tiles\r\n );\r\n }\r\n\r\n private get isHoverEnabled(): boolean {\r\n return window.matchMedia('(hover: hover)').matches;\r\n }\r\n\r\n /** @inheritdoc */\r\n getHoverPane(): TileHoverPane | undefined {\r\n return this.hoverPane;\r\n }\r\n\r\n /** @inheritdoc */\r\n getHoverPaneProps(): HoverPaneProperties {\r\n return this;\r\n }\r\n\r\n handleResize(entry: ResizeObserverEntry): void {\r\n this.currentWidth = entry.contentRect.width;\r\n this.currentHeight = entry.contentRect.height;\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.stopResizeObservation(this.resizeObserver);\r\n }\r\n\r\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\r\n observer?.removeObserver({\r\n handler: this,\r\n target: this.container,\r\n });\r\n }\r\n\r\n private startResizeObservation() {\r\n this.stopResizeObservation(this.resizeObserver);\r\n this.resizeObserver?.addObserver({\r\n handler: this,\r\n target: this.container,\r\n });\r\n }\r\n\r\n updated(props: PropertyValues) {\r\n if (props.has('resizeObserver')) {\r\n const previousObserver = props.get(\r\n 'resizeObserver',\r\n ) as SharedResizeObserverInterface;\r\n this.stopResizeObservation(previousObserver);\r\n this.startResizeObservation();\r\n }\r\n }\r\n\r\n /**\r\n * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\r\n * In manage view, it also checks/unchecks the tile.\r\n */\r\n private handleLinkClicked(e: Event): void {\r\n if (this.isManageView) {\r\n e.preventDefault();\r\n if (this.model) this.model.checked = !this.model.checked;\r\n }\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('resultSelected', { detail: this.model }),\r\n );\r\n }\r\n\r\n /**\r\n * Handler for when the tile link is right-clicked.\r\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\r\n */\r\n private handleLinkContextMenu(e: Event): void {\r\n if (this.isManageView && this.linkTileHref !== nothing) {\r\n e.preventDefault();\r\n window.open(this.linkTileHref, '_blank');\r\n }\r\n }\r\n\r\n private tileInfoButtonPressed(\r\n e: CustomEvent<{ x: number; y: number }>,\r\n ): void {\r\n this.hoverPaneController?.toggleHoverPane({\r\n coords: e.detail,\r\n enableTouchBackdrop: true,\r\n });\r\n }\r\n\r\n private get tile() {\r\n const {\r\n model,\r\n collectionPagePath,\r\n baseNavigationUrl,\r\n currentWidth,\r\n currentHeight,\r\n sortParam,\r\n creatorFilter,\r\n mobileBreakpoint,\r\n defaultSortParam,\r\n } = this;\r\n\r\n if (!model) return nothing;\r\n\r\n switch (this.tileDisplayMode) {\r\n case 'grid':\r\n switch (model.mediatype) {\r\n case 'collection':\r\n return html`<collection-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .creatorFilter=${creatorFilter}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n ?showInfoButton=${!this.isHoverEnabled}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </collection-tile>`;\r\n case 'account':\r\n return html`<account-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .creatorFilter=${creatorFilter}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n ?showInfoButton=${!this.isHoverEnabled}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </account-tile>`;\r\n case 'search':\r\n return html`<search-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .creatorFilter=${creatorFilter}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n ?showInfoButton=${false}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </search-tile>`;\r\n default:\r\n return html`<item-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .currentWidth=${this.currentWidth}\r\n .currentHeight=${this.currentHeight}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .sortParam=${sortParam}\r\n .defaultSortParam=${defaultSortParam}\r\n .creatorFilter=${creatorFilter}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n .simpleLayoutType=${this.simpleLayoutType}\r\n ?showTvClips=${this.showTvClips}\r\n ?showInfoButton=${!this.isHoverEnabled}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </item-tile>`;\r\n }\r\n case 'list-compact':\r\n return html`<tile-list-compact\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .baseNavigationUrl=${baseNavigationUrl}\r\n .sortParam=${sortParam}\r\n .defaultSortParam=${defaultSortParam}\r\n .creatorFilter=${creatorFilter}\r\n .mobileBreakpoint=${mobileBreakpoint}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n >\r\n </tile-list-compact>`;\r\n case 'list-detail':\r\n return html`<tile-list\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .collectionTitles=${this.collectionTitles}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .baseNavigationUrl=${baseNavigationUrl}\r\n .sortParam=${sortParam}\r\n .defaultSortParam=${defaultSortParam}\r\n .creatorFilter=${creatorFilter}\r\n .mobileBreakpoint=${mobileBreakpoint}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n >\r\n </tile-list>`;\r\n default:\r\n return nothing;\r\n }\r\n }\r\n\r\n static get styles() {\r\n return css`\r\n :host {\r\n display: block;\r\n height: 100%;\r\n }\r\n\r\n collection-tile {\r\n --tileBorderColor: #555555;\r\n --tileBackgroundColor: #666666;\r\n --imageBlockBackgroundColor: #666666;\r\n }\r\n\r\n account-tile {\r\n --tileBorderColor: #dddddd;\r\n --imageBlockBackgroundColor: #fcf5e6;\r\n }\r\n\r\n item-tile {\r\n --tileBorderColor: #dddddd;\r\n --imageBlockBackgroundColor: #f1f1f4;\r\n }\r\n\r\n search-tile {\r\n --tileBorderColor: #555555;\r\n --tileBackgroundColor: #666666;\r\n --imageBlockBackgroundColor: #666666;\r\n --iconFillColor: #2c2c2c;\r\n }\r\n\r\n #container {\r\n position: relative;\r\n height: 100%;\r\n border-radius: 4px;\r\n }\r\n\r\n #container.hoverable:hover {\r\n box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\r\n transition: box-shadow 0.1s ease;\r\n }\r\n\r\n a {\r\n display: block;\r\n height: 100%;\r\n color: unset;\r\n text-decoration: none;\r\n transition: transform 0.05s ease;\r\n }\r\n\r\n a :first-child {\r\n display: block;\r\n height: 100%;\r\n }\r\n\r\n .manage-check {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n border: 5px solid #2c2c2c;\r\n border-radius: 3px;\r\n background-color: #2c2c2c;\r\n z-index: 1;\r\n }\r\n\r\n .manage-check > input[type='checkbox'] {\r\n display: block;\r\n margin: 0;\r\n }\r\n\r\n #touch-backdrop {\r\n position: fixed;\r\n width: 100vw;\r\n height: 100vh;\r\n top: 0;\r\n left: 0;\r\n z-index: 2;\r\n background: transparent;\r\n }\r\n\r\n tile-hover-pane {\r\n position: absolute;\r\n top: 0;\r\n left: -9999px;\r\n z-index: 2;\r\n }\r\n `;\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { msg } from '@lit/localize';\r\nimport type {\r\n SharedResizeObserverInterface,\r\n SharedResizeObserverResizeHandlerInterface,\r\n} from '@internetarchive/shared-resize-observer';\r\nimport type { TileDisplayMode } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './grid/collection-tile';\r\nimport './grid/item-tile';\r\nimport './grid/account-tile';\r\nimport './grid/search-tile';\r\nimport './hover/tile-hover-pane';\r\nimport './list/tile-list';\r\nimport './list/tile-list-compact';\r\nimport './list/tile-list-compact-header';\r\nimport type { TileHoverPane } from './hover/tile-hover-pane';\r\nimport { BaseTileComponent } from './base-tile-component';\r\nimport { SimpleLayoutType } from './models';\r\nimport {\r\n HoverPaneController,\r\n HoverPaneControllerInterface,\r\n HoverPaneProperties,\r\n HoverPaneProviderInterface,\r\n} from './hover/hover-pane-controller';\r\n\r\n@customElement('tile-dispatcher')\r\nexport class TileDispatcher\r\n extends BaseTileComponent\r\n implements\r\n SharedResizeObserverResizeHandlerInterface,\r\n HoverPaneProviderInterface\r\n{\r\n /*\r\n * Reactive properties inherited from BaseTileComponent:\r\n * - model?: TileModel;\r\n * - currentWidth?: number;\r\n * - currentHeight?: number;\r\n * - baseNavigationUrl?: string;\r\n * - baseImageUrl?: string;\r\n * - collectionPagePath?: string;\r\n * - sortParam: SortParam | null = null;\r\n * - defaultSortParam: SortParam | null = null;\r\n * - creatorFilter?: string;\r\n * - mobileBreakpoint?: number;\r\n * - loggedIn = false;\r\n * - suppressTileBlurring = false;\r\n */\r\n\r\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\r\n\r\n @property({ type: Boolean }) isManageView = false;\r\n\r\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\r\n\r\n @property({ type: Object })\r\n collectionTitles?: CollectionTitles;\r\n\r\n @property({ type: Boolean }) showTvClips = false;\r\n\r\n /** What type of simple layout to use in grid mode, if any */\r\n @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';\r\n\r\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\r\n @property({ type: Boolean }) enableHoverPane = false;\r\n\r\n @property({ type: String }) manageCheckTitle = msg(\r\n 'Remove this item from the list',\r\n );\r\n\r\n private hoverPaneController?: HoverPaneControllerInterface;\r\n\r\n @query('#container')\r\n private container!: HTMLDivElement;\r\n\r\n @query('tile-hover-pane')\r\n private hoverPane?: TileHoverPane;\r\n\r\n /** Maps each display mode to whether hover panes should appear in that mode */\r\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\r\n TileDisplayMode,\r\n boolean\r\n > = {\r\n grid: true,\r\n 'list-compact': true,\r\n 'list-detail': false,\r\n 'list-header': false,\r\n };\r\n\r\n render() {\r\n const isGridMode = this.tileDisplayMode === 'grid';\r\n const hoverPaneTemplate =\r\n this.hoverPaneController?.getTemplate() ?? nothing;\r\n return html`\r\n <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\r\n ${this.tileDisplayMode === 'list-header'\r\n ? this.headerTemplate\r\n : this.tileTemplate}\r\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\r\n </div>\r\n `;\r\n }\r\n\r\n protected firstUpdated(): void {\r\n if (this.shouldPrepareHoverPane) {\r\n this.hoverPaneController = new HoverPaneController(this, {\r\n mobileBreakpoint: this.mobileBreakpoint,\r\n enableLongPress: false,\r\n });\r\n }\r\n }\r\n\r\n private get headerTemplate() {\r\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\r\n this;\r\n return html`\r\n <tile-list-compact-header\r\n class=\"header\"\r\n .currentWidth=${currentWidth}\r\n .sortParam=${sortParam ?? defaultSortParam}\r\n .mobileBreakpoint=${mobileBreakpoint}\r\n >\r\n </tile-list-compact-header>\r\n `;\r\n }\r\n\r\n private get tileTemplate() {\r\n return html`\r\n ${this.tileDisplayMode === 'list-detail'\r\n ? this.tile\r\n : this.linkTileTemplate}\r\n `;\r\n }\r\n\r\n private get linkTileTemplate() {\r\n return html`\r\n <a\r\n href=${this.linkTileHref}\r\n aria-label=${this.model?.title ?? 'Untitled item'}\r\n title=${this.shouldPrepareHoverPane\r\n ? nothing // Don't show title tooltips when we have the tile info popups\r\n : ifDefined(this.model?.title)}\r\n @click=${this.handleLinkClicked}\r\n @contextmenu=${this.handleLinkContextMenu}\r\n >\r\n ${this.tile}\r\n </a>\r\n `;\r\n }\r\n\r\n private get linkTileHref(): string | typeof nothing {\r\n if (!this.model?.identifier || this.baseNavigationUrl == null)\r\n return nothing;\r\n\r\n // Use the server-specified href if available.\r\n // Otherwise, construct a details page URL from the item identifier.\r\n if (this.model.href) {\r\n return `${this.baseNavigationUrl}${this.model.href}`;\r\n }\r\n\r\n return this.displayValueProvider.itemPageUrl(\r\n this.model.identifier,\r\n this.model.mediatype === 'collection',\r\n );\r\n }\r\n\r\n private get manageCheckTemplate() {\r\n if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\r\n\r\n return html`\r\n <div class=\"manage-check\">\r\n <input\r\n type=\"checkbox\"\r\n title=${this.manageCheckTitle}\r\n .checked=${this.model?.checked}\r\n @change=${this.handleLinkClicked}\r\n />\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Whether hover pane behavior should be prepared for this tile\r\n * (e.g., whether mouse listeners should be attached, etc.)\r\n */\r\n private get shouldPrepareHoverPane(): boolean {\r\n return (\r\n this.enableHoverPane &&\r\n !!this.tileDisplayMode &&\r\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\r\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\r\n !this.model?.captureDates // don't show hover panes on web archive tiles\r\n );\r\n }\r\n\r\n private get isHoverEnabled(): boolean {\r\n return window.matchMedia('(hover: hover)').matches;\r\n }\r\n\r\n /** @inheritdoc */\r\n getHoverPane(): TileHoverPane | undefined {\r\n return this.hoverPane;\r\n }\r\n\r\n /** @inheritdoc */\r\n getHoverPaneProps(): HoverPaneProperties {\r\n return this;\r\n }\r\n\r\n handleResize(entry: ResizeObserverEntry): void {\r\n this.currentWidth = entry.contentRect.width;\r\n this.currentHeight = entry.contentRect.height;\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.stopResizeObservation(this.resizeObserver);\r\n }\r\n\r\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\r\n observer?.removeObserver({\r\n handler: this,\r\n target: this.container,\r\n });\r\n }\r\n\r\n private startResizeObservation() {\r\n this.stopResizeObservation(this.resizeObserver);\r\n this.resizeObserver?.addObserver({\r\n handler: this,\r\n target: this.container,\r\n });\r\n }\r\n\r\n updated(props: PropertyValues) {\r\n if (props.has('resizeObserver')) {\r\n const previousObserver = props.get(\r\n 'resizeObserver',\r\n ) as SharedResizeObserverInterface;\r\n this.stopResizeObservation(previousObserver);\r\n this.startResizeObservation();\r\n }\r\n }\r\n\r\n /**\r\n * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\r\n * In manage view, it also checks/unchecks the tile.\r\n */\r\n private handleLinkClicked(e: Event): void {\r\n if (this.isManageView) {\r\n e.preventDefault();\r\n if (this.model) this.model.checked = !this.model.checked;\r\n }\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('resultSelected', { detail: this.model }),\r\n );\r\n }\r\n\r\n /**\r\n * Handler for when the tile link is right-clicked.\r\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\r\n */\r\n private handleLinkContextMenu(e: Event): void {\r\n if (this.isManageView && this.linkTileHref !== nothing) {\r\n e.preventDefault();\r\n window.open(this.linkTileHref, '_blank');\r\n }\r\n }\r\n\r\n private tileInfoButtonPressed(\r\n e: CustomEvent<{ x: number; y: number }>,\r\n ): void {\r\n this.hoverPaneController?.toggleHoverPane({\r\n coords: e.detail,\r\n enableTouchBackdrop: true,\r\n });\r\n }\r\n\r\n private get tile() {\r\n const {\r\n model,\r\n collectionPagePath,\r\n baseNavigationUrl,\r\n currentWidth,\r\n currentHeight,\r\n sortParam,\r\n creatorFilter,\r\n mobileBreakpoint,\r\n defaultSortParam,\r\n } = this;\r\n\r\n if (!model) return nothing;\r\n\r\n switch (this.tileDisplayMode) {\r\n case 'grid':\r\n switch (model.mediatype) {\r\n case 'collection':\r\n return html`<collection-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .creatorFilter=${creatorFilter}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n ?showInfoButton=${!this.isHoverEnabled}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </collection-tile>`;\r\n case 'account':\r\n return html`<account-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .creatorFilter=${creatorFilter}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n ?showInfoButton=${!this.isHoverEnabled}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </account-tile>`;\r\n case 'search':\r\n return html`<search-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .creatorFilter=${creatorFilter}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n ?showInfoButton=${false}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </search-tile>`;\r\n default:\r\n return html`<item-tile\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .currentWidth=${this.currentWidth}\r\n .currentHeight=${this.currentHeight}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .sortParam=${sortParam}\r\n .defaultSortParam=${defaultSortParam}\r\n .creatorFilter=${creatorFilter}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n .isManageView=${this.isManageView}\r\n .simpleLayoutType=${this.simpleLayoutType}\r\n ?showTvClips=${this.showTvClips}\r\n ?showInfoButton=${!this.isHoverEnabled}\r\n @infoButtonPressed=${this.tileInfoButtonPressed}\r\n >\r\n </item-tile>`;\r\n }\r\n case 'list-compact':\r\n return html`<tile-list-compact\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .baseNavigationUrl=${baseNavigationUrl}\r\n .sortParam=${sortParam}\r\n .defaultSortParam=${defaultSortParam}\r\n .creatorFilter=${creatorFilter}\r\n .mobileBreakpoint=${mobileBreakpoint}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n >\r\n </tile-list-compact>`;\r\n case 'list-detail':\r\n return html`<tile-list\r\n .model=${model}\r\n .collectionPagePath=${collectionPagePath}\r\n .collectionTitles=${this.collectionTitles}\r\n .currentWidth=${currentWidth}\r\n .currentHeight=${currentHeight}\r\n .baseNavigationUrl=${baseNavigationUrl}\r\n .sortParam=${sortParam}\r\n .defaultSortParam=${defaultSortParam}\r\n .creatorFilter=${creatorFilter}\r\n .mobileBreakpoint=${mobileBreakpoint}\r\n .baseImageUrl=${this.baseImageUrl}\r\n .loggedIn=${this.loggedIn}\r\n .suppressBlurring=${this.suppressBlurring}\r\n >\r\n </tile-list>`;\r\n default:\r\n return nothing;\r\n }\r\n }\r\n\r\n static get styles() {\r\n return css`\r\n :host {\r\n display: block;\r\n height: 100%;\r\n }\r\n\r\n collection-tile {\r\n --tileBorderColor: #555555;\r\n --tileBackgroundColor: #666666;\r\n --imageBlockBackgroundColor: #666666;\r\n }\r\n\r\n account-tile {\r\n --tileBorderColor: #dddddd;\r\n --imageBlockBackgroundColor: #fcf5e6;\r\n }\r\n\r\n item-tile {\r\n --tileBorderColor: #dddddd;\r\n --imageBlockBackgroundColor: #f1f1f4;\r\n }\r\n\r\n search-tile {\r\n --tileBorderColor: #555555;\r\n --tileBackgroundColor: #666666;\r\n --imageBlockBackgroundColor: #666666;\r\n --iconFillColor: #2c2c2c;\r\n }\r\n\r\n #container {\r\n position: relative;\r\n height: 100%;\r\n border-radius: 4px;\r\n }\r\n\r\n #container.hoverable:hover {\r\n box-shadow: var(--tileHoverBoxShadow, 0 0 6px 2px rgba(8, 8, 32, 0.8));\r\n transition: box-shadow 0.1s ease;\r\n }\r\n\r\n a {\r\n display: block;\r\n height: 100%;\r\n color: unset;\r\n text-decoration: none;\r\n transition: transform 0.05s ease;\r\n }\r\n\r\n a :first-child {\r\n display: block;\r\n height: 100%;\r\n }\r\n\r\n .manage-check {\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n border: 5px solid #2c2c2c;\r\n border-radius: 3px;\r\n background-color: #2c2c2c;\r\n z-index: 1;\r\n }\r\n\r\n .manage-check > input[type='checkbox'] {\r\n display: block;\r\n margin: 0;\r\n }\r\n\r\n #touch-backdrop {\r\n position: fixed;\r\n width: 100vw;\r\n height: 100vh;\r\n top: 0;\r\n left: 0;\r\n z-index: 2;\r\n background: transparent;\r\n }\r\n\r\n tile-hover-pane {\r\n position: absolute;\r\n top: 0;\r\n left: -9999px;\r\n z-index: 2;\r\n }\r\n `;\r\n }\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "The Internet Archive Collection Browser.",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"author": "Internet Archive",
|
|
6
|
-
"version": "2.18.3-alpha-
|
|
6
|
+
"version": "2.18.3-alpha-webdev7768.0",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -16,7 +16,7 @@ export const baseTileStyles = css`
|
|
|
16
16
|
background-color: ${tileBackgroundColor};
|
|
17
17
|
border: 1px #2c2c2c;
|
|
18
18
|
border-radius: ${tileCornerRadius};
|
|
19
|
-
box-shadow: 1px 1px 2px 0;
|
|
19
|
+
box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
|
|
20
20
|
box-sizing: border-box;
|
|
21
21
|
height: 100%;
|
|
22
22
|
display: flex;
|