@internetarchive/collection-browser 4.3.2-alpha-webdev7939.2 → 4.3.2-alpha-webdev7939.4
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/index.js.map +1 -1
- package/dist/src/collection-browser.d.ts +10 -0
- package/dist/src/collection-browser.js +35 -36
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/tiles/base-tile-component.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.js +138 -138
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact-header.js +45 -45
- package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact.js +99 -99
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.js +297 -297
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/models.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +216 -216
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/index.ts +28 -28
- package/package.json +2 -2
- package/src/collection-browser.ts +39 -49
- package/src/tiles/base-tile-component.ts +65 -65
- package/src/tiles/grid/item-tile.ts +346 -346
- package/src/tiles/list/tile-list-compact-header.ts +86 -86
- package/src/tiles/list/tile-list-compact.ts +239 -239
- package/src/tiles/list/tile-list.ts +700 -700
- package/src/tiles/models.ts +8 -8
- package/src/tiles/tile-dispatcher.ts +527 -527
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAOpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EACL,mBAAmB,GAIpB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGzC,IAAM,cAAc,GAApB,MAAM,cACX,SAAQ,iBAAiB;IADpB;QAML;;;;;;;;;;;;;;;WAeG;;QAI0B,iBAAY,GAAG,KAAK,CAAC;QAOrB,gBAAW,GAAG,KAAK,CAAC;QAEjD,iEAAiE;QACrC,eAAU,GAAe,SAAS,CAAC;QAE/D,uFAAuF;QAC1D,oBAAe,GAAG,KAAK,CAAC;QAEzB,qBAAgB,GAAG,GAAG,CAChD,gCAAgC,CACjC,CAAC;IAscJ,CAAC;;IAzbC,YAAY;QACV,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,CAAC;IAChC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IAED,+EAA+E;aACvD,6BAAwB,GAG5C;QACF,IAAI,EAAE,IAAI;QACV,cAAc,EAAE,IAAI;QACpB,aAAa,EAAE,KAAK;QACpB,aAAa,EAAE,KAAK;KACrB,AAR+C,CAQ9C;IAEF,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC;QACnD,MAAM,iBAAiB,GACrB,IAAI,CAAC,mBAAmB,EAAE,WAAW,EAAE,IAAI,OAAO,CAAC;QACrD,OAAO,IAAI,CAAA;kCACmB,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;UACrD,IAAI,CAAC,eAAe,KAAK,aAAa;YACtC,CAAC,CAAC,IAAI,CAAC,cAAc;YACrB,CAAC,CAAC,IAAI,CAAC,YAAY;UACnB,IAAI,CAAC,mBAAmB,IAAI,iBAAiB;;KAElD,CAAC;IACJ,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE;gBACvD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,eAAe,EAAE,KAAK;aACvB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GACnE,IAAI,CAAC;QACP,OAAO,IAAI,CAAA;;;wBAGS,YAAY;qBACf,SAAS,IAAI,gBAAgB;4BACtB,gBAAgB;;;KAGvC,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,KAAK,aAAa;YACtC,CAAC,CAAC,IAAI,CAAC,IAAI;YACX,CAAC,CAAC,IAAI,CAAC,gBAAgB;KAC1B,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,YAAY;qBACX,IAAI,CAAC,KAAK,EAAE,KAAK,IAAI,eAAe;;wBAEjC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;gBACxD,IAAI,CAAC,sBAAsB;YACjC,CAAC,CAAC,OAAO,CAAC,8DAA8D;YACxE,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;iBACvB,IAAI,CAAC,iBAAiB;uBAChB,IAAI,CAAC,qBAAqB;;;UAGvC,IAAI,CAAC,IAAI;;;UAGT,GAAG,CAAC,0CAA0C,CAAC;;KAEpD,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI;YAC3D,OAAO,OAAO,CAAC;QAEjB,8CAA8C;QAC9C,oEAAoE;QACpE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACpB,OAAO,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACvD,CAAC;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAC1C,IAAI,CAAC,KAAK,CAAC,UAAU,EACrB,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,YAAY,CACtC,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM;YAAE,OAAO,OAAO,CAAC;QAE1E,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,gBAAgB;qBAClB,IAAI,CAAC,KAAK,EAAE,OAAO;oBACpB,IAAI,CAAC,iBAAiB;;;KAGrC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,CACL,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAC,eAAe;YACtB,gBAAc,CAAC,wBAAwB,CAAC,IAAI,CAAC,eAAe,CAAC;YAC7D,IAAI,CAAC,KAAK,EAAE,SAAS,KAAK,QAAQ,IAAI,yCAAyC;YAC/E,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,8CAA8C;SACzE,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC;IACrD,CAAC;IAED;;;;OAIG;IACH,IAAY,oBAAoB;QAC9B,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,sBAAsB,CAAC;IAC7D,CAAC;IAED,kBAAkB;IAClB,YAAY;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,kBAAkB;IAClB,iBAAiB;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAClD,CAAC;IAEO,qBAAqB,CAAC,QAAwC;QACpE,QAAQ,EAAE,cAAc,CAAC;YACvB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAC;IACL,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;YAC/B,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAqB;QAC3B,IAAI,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAChC,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAChC,gBAAgB,CACgB,CAAC;YACnC,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;YAC7C,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,CAAQ;QAChC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QAC3D,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAC1D,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,qBAAqB,CAAC,CAAQ;QACpC,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE,CAAC;YACvD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAEO,qBAAqB,CAC3B,CAAwC;QAExC,IAAI,CAAC,mBAAmB,EAAE,eAAe,CAAC;YACxC,MAAM,EAAE,CAAC,CAAC,MAAM;YAChB,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC;IACL,CAAC;IAED,IAAY,IAAI;QACd,MAAM,EACJ,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAE3B,QAAQ,IAAI,CAAC,eAAe,EAAE,CAAC;YAC7B,KAAK,MAAM;gBACT,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;oBACxB,KAAK,YAAY;wBACf,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;+BACb,aAAa;kCACV,IAAI,CAAC,gBAAgB;8BACzB,IAAI,CAAC,YAAY;4BACnB,IAAI,CAAC,UAAU;gCACX,IAAI,CAAC,oBAAoB;mCACtB,IAAI,CAAC,qBAAqB;;+BAE9B,CAAC;oBACtB,KAAK,SAAS;wBACZ,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;+BACb,aAAa;kCACV,IAAI,CAAC,gBAAgB;8BACzB,IAAI,CAAC,YAAY;gCACf,IAAI,CAAC,oBAAoB;mCACtB,IAAI,CAAC,qBAAqB;;4BAEjC,CAAC;oBACnB,KAAK,QAAQ;wBACX,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;+BACb,aAAa;kCACV,IAAI,CAAC,gBAAgB;8BACzB,IAAI,CAAC,YAAY;gCACf,KAAK;mCACF,IAAI,CAAC,qBAAqB;;2BAElC,CAAC;oBAClB;wBACE,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;+BAChB,IAAI,CAAC,aAAa;8BACnB,IAAI,CAAC,YAAY;2BACpB,SAAS;kCACF,gBAAgB;+BACnB,aAAa;0BAClB,IAAI,CAAC,QAAQ;kCACL,IAAI,CAAC,gBAAgB;8BACzB,IAAI,CAAC,YAAY;4BACnB,IAAI,CAAC,UAAU;6BACd,IAAI,CAAC,WAAW;gCACb,IAAI,CAAC,oBAAoB;8BAC3B,IAAI,CAAC,YAAY;mCACZ,IAAI,CAAC,qBAAqB;;yBAEpC,CAAC;gBAClB,CAAC;YACH,KAAK,cAAc;gBACjB,OAAO,IAAI,CAAA;mBACA,KAAK;gCACQ,kBAAkB;0BACxB,YAAY;2BACX,aAAa;+BACT,iBAAiB;uBACzB,SAAS;8BACF,gBAAgB;2BACnB,aAAa;8BACV,gBAAgB;0BACpB,IAAI,CAAC,YAAY;sBACrB,IAAI,CAAC,QAAQ;8BACL,IAAI,CAAC,gBAAgB;0BACzB,IAAI,CAAC,YAAY;;6BAEd,CAAC;YACxB,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAA;mBACA,KAAK;gCACQ,kBAAkB;8BACpB,IAAI,CAAC,gBAAgB;0BACzB,YAAY;2BACX,aAAa;+BACT,iBAAiB;uBACzB,SAAS;8BACF,gBAAgB;2BACnB,aAAa;8BACV,gBAAgB;0BACpB,IAAI,CAAC,YAAY;sBACrB,IAAI,CAAC,QAAQ;8BACL,IAAI,CAAC,gBAAgB;0BACzB,IAAI,CAAC,YAAY;;qBAEtB,CAAC;YAChB;gBACE,OAAO,OAAO,CAAC;QACnB,CAAC;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0FF;SACF,CAAC;IACJ,CAAC;;AAxd2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAmC;AAEjC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAsB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAgD;AAG3E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAEP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAqB;AAGrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoC;AAGlC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAyB;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAEzB;AAKM;IADP,KAAK,CAAC,YAAY,CAAC;iDACe;AAG3B;IADP,KAAK,CAAC,iBAAiB,CAAC;iDACS;AAG1B;IADP,KAAK,CAAC,YAAY,CAAC;uDACwB;AArDjC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAgf1B","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 { LayoutType } from './models';\r\nimport {\r\n HoverPaneController,\r\n HoverPaneControllerInterface,\r\n HoverPaneProperties,\r\n HoverPaneProviderInterface,\r\n} from './hover/hover-pane-controller';\r\nimport { srOnlyStyle } from '../styles/sr-only';\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 * - useLocalTime = 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 simplified layout to use in grid mode, if any */\r\n @property({ type: String }) layoutType: LayoutType = 'default';\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 @query('.tile-link')\r\n private tileLinkElement?: HTMLAnchorElement;\r\n\r\n acquireFocus(): void {\r\n this.tileLinkElement?.focus();\r\n }\r\n\r\n releaseFocus(): void {\r\n this.tileLinkElement?.blur();\r\n }\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' : ''}>\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 aria-describedby=\"link-aria-description\"\r\n aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\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 class=\"tile-link\"\r\n >\r\n ${this.tile}\r\n </a>\r\n <div id=\"link-aria-description\" class=\"sr-only\">\r\n ${msg('Press Down Arrow to preview item details')}\r\n </div>\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 /**\r\n * Whether the info button should be shown on this tile.\r\n * Only shown on touch/non-hover devices where a hover pane is available,\r\n * so the button always has something to toggle.\r\n */\r\n private get shouldShowInfoButton(): boolean {\r\n return !this.isHoverEnabled && this.shouldPrepareHoverPane;\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 .layoutType=${this.layoutType}\r\n ?showInfoButton=${this.shouldShowInfoButton}\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.shouldShowInfoButton}\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 .layoutType=${this.layoutType}\r\n ?showTvClips=${this.showTvClips}\r\n ?showInfoButton=${this.shouldShowInfoButton}\r\n ?useLocalTime=${this.useLocalTime}\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 ?useLocalTime=${this.useLocalTime}\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 ?useLocalTime=${this.useLocalTime}\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 [\r\n srOnlyStyle,\r\n 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 a:focus,\r\n #container.hoverable a:hover {\r\n box-shadow: var(\r\n --tileHoverBoxShadow,\r\n 0 0 6px 2px rgba(8, 8, 32, 0.8)\r\n );\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 border-radius: 4px;\r\n outline: none;\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}\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';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport { LayoutType } from './models';\nimport {\n HoverPaneController,\n HoverPaneControllerInterface,\n HoverPaneProperties,\n HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n extends BaseTileComponent\n implements\n SharedResizeObserverResizeHandlerInterface,\n HoverPaneProviderInterface\n{\n /*\n * Reactive properties inherited from BaseTileComponent:\n * - model?: TileModel;\n * - currentWidth?: number;\n * - currentHeight?: number;\n * - baseNavigationUrl?: string;\n * - baseImageUrl?: string;\n * - collectionPagePath?: string;\n * - sortParam: SortParam | null = null;\n * - defaultSortParam: SortParam | null = null;\n * - creatorFilter?: string;\n * - mobileBreakpoint?: number;\n * - loggedIn = false;\n * - suppressTileBlurring = false;\n * - useLocalTime = false;\n */\n\n @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n @property({ type: Boolean }) isManageView = false;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @property({ type: Object })\n collectionTitles?: CollectionTitles;\n\n @property({ type: Boolean }) showTvClips = false;\n\n /** What type of simplified layout to use in grid mode, if any */\n @property({ type: String }) layoutType: LayoutType = 'default';\n\n /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n @property({ type: Boolean }) enableHoverPane = false;\n\n @property({ type: String }) manageCheckTitle = msg(\n 'Remove this item from the list',\n );\n\n private hoverPaneController?: HoverPaneControllerInterface;\n\n @query('#container')\n private container!: HTMLDivElement;\n\n @query('tile-hover-pane')\n private hoverPane?: TileHoverPane;\n\n @query('.tile-link')\n private tileLinkElement?: HTMLAnchorElement;\n\n acquireFocus(): void {\n this.tileLinkElement?.focus();\n }\n\n releaseFocus(): void {\n this.tileLinkElement?.blur();\n }\n\n /** Maps each display mode to whether hover panes should appear in that mode */\n private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n TileDisplayMode,\n boolean\n > = {\n grid: true,\n 'list-compact': true,\n 'list-detail': false,\n 'list-header': false,\n };\n\n render() {\n const isGridMode = this.tileDisplayMode === 'grid';\n const hoverPaneTemplate =\n this.hoverPaneController?.getTemplate() ?? nothing;\n return html`\n <div id=\"container\" class=${isGridMode ? 'hoverable' : ''}>\n ${this.tileDisplayMode === 'list-header'\n ? this.headerTemplate\n : this.tileTemplate}\n ${this.manageCheckTemplate} ${hoverPaneTemplate}\n </div>\n `;\n }\n\n protected firstUpdated(): void {\n if (this.shouldPrepareHoverPane) {\n this.hoverPaneController = new HoverPaneController(this, {\n mobileBreakpoint: this.mobileBreakpoint,\n enableLongPress: false,\n });\n }\n }\n\n private get headerTemplate() {\n const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n this;\n return html`\n <tile-list-compact-header\n class=\"header\"\n .currentWidth=${currentWidth}\n .sortParam=${sortParam ?? defaultSortParam}\n .mobileBreakpoint=${mobileBreakpoint}\n >\n </tile-list-compact-header>\n `;\n }\n\n private get tileTemplate() {\n return html`\n ${this.tileDisplayMode === 'list-detail'\n ? this.tile\n : this.linkTileTemplate}\n `;\n }\n\n private get linkTileTemplate() {\n return html`\n <a\n href=${this.linkTileHref}\n aria-label=${this.model?.title ?? 'Untitled item'}\n aria-describedby=\"link-aria-description\"\n aria-haspopup=${this.shouldPrepareHoverPane ? 'dialog' : 'false'}\n title=${this.shouldPrepareHoverPane\n ? nothing // Don't show title tooltips when we have the tile info popups\n : ifDefined(this.model?.title)}\n @click=${this.handleLinkClicked}\n @contextmenu=${this.handleLinkContextMenu}\n class=\"tile-link\"\n >\n ${this.tile}\n </a>\n <div id=\"link-aria-description\" class=\"sr-only\">\n ${msg('Press Down Arrow to preview item details')}\n </div>\n `;\n }\n\n private get linkTileHref(): string | typeof nothing {\n if (!this.model?.identifier || this.baseNavigationUrl == null)\n return nothing;\n\n // Use the server-specified href if available.\n // Otherwise, construct a details page URL from the item identifier.\n if (this.model.href) {\n return `${this.baseNavigationUrl}${this.model.href}`;\n }\n\n return this.displayValueProvider.itemPageUrl(\n this.model.identifier,\n this.model.mediatype === 'collection',\n );\n }\n\n private get manageCheckTemplate() {\n if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n return html`\n <div class=\"manage-check\">\n <input\n type=\"checkbox\"\n title=${this.manageCheckTitle}\n ?checked=${this.model?.checked}\n @change=${this.handleLinkClicked}\n />\n </div>\n `;\n }\n\n /**\n * Whether hover pane behavior should be prepared for this tile\n * (e.g., whether mouse listeners should be attached, etc.)\n */\n private get shouldPrepareHoverPane(): boolean {\n return (\n this.enableHoverPane &&\n !!this.tileDisplayMode &&\n TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n !this.model?.captureDates // don't show hover panes on web archive tiles\n );\n }\n\n private get isHoverEnabled(): boolean {\n return window.matchMedia('(hover: hover)').matches;\n }\n\n /**\n * Whether the info button should be shown on this tile.\n * Only shown on touch/non-hover devices where a hover pane is available,\n * so the button always has something to toggle.\n */\n private get shouldShowInfoButton(): boolean {\n return !this.isHoverEnabled && this.shouldPrepareHoverPane;\n }\n\n /** @inheritdoc */\n getHoverPane(): TileHoverPane | undefined {\n return this.hoverPane;\n }\n\n /** @inheritdoc */\n getHoverPaneProps(): HoverPaneProperties {\n return this;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n\n disconnectedCallback(): void {\n this.stopResizeObservation(this.resizeObserver);\n }\n\n private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n observer?.removeObserver({\n handler: this,\n target: this.container,\n });\n }\n\n private startResizeObservation() {\n this.stopResizeObservation(this.resizeObserver);\n this.resizeObserver?.addObserver({\n handler: this,\n target: this.container,\n });\n }\n\n updated(props: PropertyValues) {\n if (props.has('resizeObserver')) {\n const previousObserver = props.get(\n 'resizeObserver',\n ) as SharedResizeObserverInterface;\n this.stopResizeObservation(previousObserver);\n this.startResizeObservation();\n }\n }\n\n /**\n * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n * In manage view, it also checks/unchecks the tile.\n */\n private handleLinkClicked(e: Event): void {\n if (this.isManageView) {\n e.preventDefault();\n if (this.model) this.model.checked = !this.model.checked;\n }\n\n this.dispatchEvent(\n new CustomEvent('resultSelected', { detail: this.model }),\n );\n }\n\n /**\n * Handler for when the tile link is right-clicked.\n * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n */\n private handleLinkContextMenu(e: Event): void {\n if (this.isManageView && this.linkTileHref !== nothing) {\n e.preventDefault();\n window.open(this.linkTileHref, '_blank');\n }\n }\n\n private tileInfoButtonPressed(\n e: CustomEvent<{ x: number; y: number }>,\n ): void {\n this.hoverPaneController?.toggleHoverPane({\n coords: e.detail,\n enableTouchBackdrop: true,\n });\n }\n\n private get tile() {\n const {\n model,\n collectionPagePath,\n baseNavigationUrl,\n currentWidth,\n currentHeight,\n sortParam,\n creatorFilter,\n mobileBreakpoint,\n defaultSortParam,\n } = this;\n\n if (!model) return nothing;\n\n switch (this.tileDisplayMode) {\n case 'grid':\n switch (model.mediatype) {\n case 'collection':\n return html`<collection-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n .layoutType=${this.layoutType}\n ?showInfoButton=${this.shouldShowInfoButton}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </collection-tile>`;\n case 'account':\n return html`<account-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n ?showInfoButton=${this.shouldShowInfoButton}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </account-tile>`;\n case 'search':\n return html`<search-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .baseImageUrl=${this.baseImageUrl}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .creatorFilter=${creatorFilter}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n ?showInfoButton=${false}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </search-tile>`;\n default:\n return html`<item-tile\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${this.currentWidth}\n .currentHeight=${this.currentHeight}\n .baseImageUrl=${this.baseImageUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n .isManageView=${this.isManageView}\n .layoutType=${this.layoutType}\n ?showTvClips=${this.showTvClips}\n ?showInfoButton=${this.shouldShowInfoButton}\n ?useLocalTime=${this.useLocalTime}\n @infoButtonPressed=${this.tileInfoButtonPressed}\n >\n </item-tile>`;\n }\n case 'list-compact':\n return html`<tile-list-compact\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n ?useLocalTime=${this.useLocalTime}\n >\n </tile-list-compact>`;\n case 'list-detail':\n return html`<tile-list\n .model=${model}\n .collectionPagePath=${collectionPagePath}\n .collectionTitles=${this.collectionTitles}\n .currentWidth=${currentWidth}\n .currentHeight=${currentHeight}\n .baseNavigationUrl=${baseNavigationUrl}\n .sortParam=${sortParam}\n .defaultSortParam=${defaultSortParam}\n .creatorFilter=${creatorFilter}\n .mobileBreakpoint=${mobileBreakpoint}\n .baseImageUrl=${this.baseImageUrl}\n .loggedIn=${this.loggedIn}\n .suppressBlurring=${this.suppressBlurring}\n ?useLocalTime=${this.useLocalTime}\n >\n </tile-list>`;\n default:\n return nothing;\n }\n }\n\n static get styles() {\n return [\n srOnlyStyle,\n css`\n :host {\n display: block;\n height: 100%;\n }\n\n collection-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n }\n\n account-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #fcf5e6;\n }\n\n item-tile {\n --tileBorderColor: #dddddd;\n --imageBlockBackgroundColor: #f1f1f4;\n }\n\n search-tile {\n --tileBorderColor: #555555;\n --tileBackgroundColor: #666666;\n --imageBlockBackgroundColor: #666666;\n --iconFillColor: #2c2c2c;\n }\n\n #container {\n position: relative;\n height: 100%;\n border-radius: 4px;\n }\n\n #container.hoverable a:focus,\n #container.hoverable a:hover {\n box-shadow: var(\n --tileHoverBoxShadow,\n 0 0 6px 2px rgba(8, 8, 32, 0.8)\n );\n transition: box-shadow 0.1s ease;\n }\n\n a {\n display: block;\n height: 100%;\n color: unset;\n text-decoration: none;\n transition: transform 0.05s ease;\n border-radius: 4px;\n outline: none;\n }\n\n a :first-child {\n display: block;\n height: 100%;\n }\n\n .manage-check {\n position: absolute;\n right: 0;\n top: 0;\n border: 5px solid #2c2c2c;\n border-radius: 3px;\n background-color: #2c2c2c;\n z-index: 1;\n }\n\n .manage-check > input[type='checkbox'] {\n display: block;\n margin: 0;\n }\n\n #touch-backdrop {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n z-index: 2;\n background: transparent;\n }\n\n tile-hover-pane {\n position: absolute;\n top: 0;\n left: -9999px;\n z-index: 2;\n }\n `,\n ];\n }\n}\n"]}
|
package/index.ts
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
export { CollectionBrowser } from './src/collection-browser';
|
|
2
|
-
export { CollectionBrowserDataSource } from './src/data-source/collection-browser-data-source';
|
|
3
|
-
export { CollectionBrowserDataSourceInterface } from './src/data-source/collection-browser-data-source-interface';
|
|
4
|
-
export { CollectionBrowserQueryState } from './src/data-source/collection-browser-query-state';
|
|
5
|
-
export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
|
|
6
|
-
export {
|
|
7
|
-
CollectionDisplayMode,
|
|
8
|
-
SortField,
|
|
9
|
-
TileModel,
|
|
10
|
-
FacetOption,
|
|
11
|
-
SelectedFacets,
|
|
12
|
-
getDefaultSelectedFacets,
|
|
13
|
-
} from './src/models';
|
|
14
|
-
export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
|
|
15
|
-
export { CollectionTile } from './src/tiles/grid/collection-tile';
|
|
16
|
-
export { AccountTile } from './src/tiles/grid/account-tile';
|
|
17
|
-
export { ItemTile } from './src/tiles/grid/item-tile';
|
|
18
|
-
export { TileList } from './src/tiles/list/tile-list';
|
|
19
|
-
export { TileListCompact } from './src/tiles/list/tile-list-compact';
|
|
20
|
-
export { TileDispatcher } from './src/tiles/tile-dispatcher';
|
|
21
|
-
export { LayoutType } from './src/tiles/models';
|
|
22
|
-
export {
|
|
23
|
-
SmartQueryHeuristic,
|
|
24
|
-
KeywordFacetMap,
|
|
25
|
-
SmartFacet,
|
|
26
|
-
} from './src/collection-facets/smart-facets/models';
|
|
27
|
-
export * from './src/collection-facets/smart-facets/heuristics/index';
|
|
28
|
-
export { SmartQueryHeuristicGroup } from './src/collection-facets/smart-facets/smart-facet-heuristics';
|
|
1
|
+
export { CollectionBrowser } from './src/collection-browser';
|
|
2
|
+
export { CollectionBrowserDataSource } from './src/data-source/collection-browser-data-source';
|
|
3
|
+
export { CollectionBrowserDataSourceInterface } from './src/data-source/collection-browser-data-source-interface';
|
|
4
|
+
export { CollectionBrowserQueryState } from './src/data-source/collection-browser-query-state';
|
|
5
|
+
export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
|
|
6
|
+
export {
|
|
7
|
+
CollectionDisplayMode,
|
|
8
|
+
SortField,
|
|
9
|
+
TileModel,
|
|
10
|
+
FacetOption,
|
|
11
|
+
SelectedFacets,
|
|
12
|
+
getDefaultSelectedFacets,
|
|
13
|
+
} from './src/models';
|
|
14
|
+
export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
|
|
15
|
+
export { CollectionTile } from './src/tiles/grid/collection-tile';
|
|
16
|
+
export { AccountTile } from './src/tiles/grid/account-tile';
|
|
17
|
+
export { ItemTile } from './src/tiles/grid/item-tile';
|
|
18
|
+
export { TileList } from './src/tiles/list/tile-list';
|
|
19
|
+
export { TileListCompact } from './src/tiles/list/tile-list-compact';
|
|
20
|
+
export { TileDispatcher } from './src/tiles/tile-dispatcher';
|
|
21
|
+
export { LayoutType } from './src/tiles/models';
|
|
22
|
+
export {
|
|
23
|
+
SmartQueryHeuristic,
|
|
24
|
+
KeywordFacetMap,
|
|
25
|
+
SmartFacet,
|
|
26
|
+
} from './src/collection-facets/smart-facets/models';
|
|
27
|
+
export * from './src/collection-facets/smart-facets/heuristics/index';
|
|
28
|
+
export { SmartQueryHeuristicGroup } from './src/collection-facets/smart-facets/smart-facet-heuristics';
|
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": "4.3.2-alpha-webdev7939.
|
|
6
|
+
"version": "4.3.2-alpha-webdev7939.4",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@internetarchive/histogram-date-range": "^1.4.2",
|
|
32
32
|
"@internetarchive/ia-dropdown": "^2.0.0",
|
|
33
33
|
"@internetarchive/iaux-item-metadata": "^1.0.5",
|
|
34
|
-
"@internetarchive/infinite-scroller": "1.1.0-alpha-webdev7939.
|
|
34
|
+
"@internetarchive/infinite-scroller": "1.1.0-alpha-webdev7939.6",
|
|
35
35
|
"@internetarchive/modal-manager": "^2.0.5",
|
|
36
36
|
"@internetarchive/search-service": "^2.7.1",
|
|
37
37
|
"@internetarchive/shared-resize-observer": "^0.2.0",
|
|
@@ -1168,7 +1168,7 @@ export class CollectionBrowser
|
|
|
1168
1168
|
if ((this.currentPage ?? 1) > 1) {
|
|
1169
1169
|
this.goToPage(1);
|
|
1170
1170
|
}
|
|
1171
|
-
this.
|
|
1171
|
+
this.setCurrentPage(1);
|
|
1172
1172
|
}
|
|
1173
1173
|
|
|
1174
1174
|
/**
|
|
@@ -2198,47 +2198,45 @@ export class CollectionBrowser
|
|
|
2198
2198
|
private visibleCellsChanged(
|
|
2199
2199
|
e: CustomEvent<{ visibleCellIndices: number[] }>,
|
|
2200
2200
|
) {
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2201
|
+
this.updateVisiblePage(e.detail.visibleCellIndices);
|
|
2202
|
+
}
|
|
2203
|
+
|
|
2204
|
+
/**
|
|
2205
|
+
* Recomputes the current page from the given set of visible cell indices
|
|
2206
|
+
* and emits `visiblePageChanged` if the page actually changed.
|
|
2207
|
+
*/
|
|
2208
|
+
private updateVisiblePage(visibleCellIndices: number[]): void {
|
|
2209
|
+
if (this.isScrollingToCell) return;
|
|
2209
2210
|
if (visibleCellIndices.length === 0) return;
|
|
2210
2211
|
|
|
2212
|
+
// The indices aren't necessarily sorted, so sort them here to ensure our
|
|
2213
|
+
// calculations below find the right cell/page.
|
|
2214
|
+
const sorted = [...visibleCellIndices].sort((a, b) => a - b);
|
|
2215
|
+
|
|
2211
2216
|
// For page determination, do not count more than a single page of visible cells,
|
|
2212
2217
|
// since otherwise patrons using very tall screens will be treated as one page
|
|
2213
2218
|
// further than they actually are.
|
|
2214
2219
|
const lastIndexWithinCurrentPage =
|
|
2215
|
-
Math.min(this.pageSize,
|
|
2216
|
-
const lastVisibleCellIndex =
|
|
2220
|
+
Math.min(this.pageSize, sorted.length) - 1;
|
|
2221
|
+
const lastVisibleCellIndex = sorted[lastIndexWithinCurrentPage];
|
|
2217
2222
|
const lastVisibleCellPage =
|
|
2218
2223
|
Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
|
|
2219
2224
|
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
const isSorted = sorted.every((v, i) => v === visibleCellIndices[i]);
|
|
2223
|
-
const minIdx = sorted[0];
|
|
2224
|
-
const maxIdx = sorted[sorted.length - 1];
|
|
2225
|
-
const first10 = visibleCellIndices.slice(0, 10).join(',');
|
|
2226
|
-
const last10 = visibleCellIndices.slice(-10).join(',');
|
|
2227
|
-
|
|
2228
|
-
// eslint-disable-next-line no-console
|
|
2229
|
-
console.log(
|
|
2230
|
-
`[CB visibleCellsChanged] computedPage=${lastVisibleCellPage} lastIdx=${lastVisibleCellIndex} sampledAt=${lastIndexWithinCurrentPage} len=${visibleCellIndices.length} sorted=${isSorted} min=${minIdx} max=${maxIdx} scrollY=${window.scrollY} first10=[${first10}] last10=[${last10}]`,
|
|
2231
|
-
);
|
|
2225
|
+
this.setCurrentPage(lastVisibleCellPage);
|
|
2226
|
+
}
|
|
2232
2227
|
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2228
|
+
/**
|
|
2229
|
+
* Sets the current page number and emits a `visiblePageChanged`
|
|
2230
|
+
* event if the new page differs from the previous one.
|
|
2231
|
+
*/
|
|
2232
|
+
private setCurrentPage(pageNumber: number): void {
|
|
2233
|
+
if (this.currentPage === pageNumber) return;
|
|
2234
|
+
this.currentPage = pageNumber;
|
|
2235
|
+
this.dispatchEvent(
|
|
2236
|
+
new CustomEvent('visiblePageChanged', {
|
|
2237
|
+
detail: { pageNumber },
|
|
2238
|
+
}),
|
|
2239
|
+
);
|
|
2242
2240
|
}
|
|
2243
2241
|
|
|
2244
2242
|
// we only want to scroll on the very first query change
|
|
@@ -2338,10 +2336,10 @@ export class CollectionBrowser
|
|
|
2338
2336
|
this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
|
|
2339
2337
|
this.selectedFacets = restorationState.selectedFacets;
|
|
2340
2338
|
if (!this.suppressURLQuery) this.baseQuery = restorationState.baseQuery;
|
|
2341
|
-
this.
|
|
2339
|
+
this.setCurrentPage(restorationState.currentPage ?? 1);
|
|
2342
2340
|
this.minSelectedDate = restorationState.minSelectedDate;
|
|
2343
2341
|
this.maxSelectedDate = restorationState.maxSelectedDate;
|
|
2344
|
-
if (this.currentPage > 1) {
|
|
2342
|
+
if (this.currentPage && this.currentPage > 1) {
|
|
2345
2343
|
this.goToPage(this.currentPage);
|
|
2346
2344
|
}
|
|
2347
2345
|
}
|
|
@@ -2420,10 +2418,6 @@ export class CollectionBrowser
|
|
|
2420
2418
|
|
|
2421
2419
|
private async scrollToPage(pageNumber: number): Promise<void> {
|
|
2422
2420
|
const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
|
|
2423
|
-
// eslint-disable-next-line no-console
|
|
2424
|
-
console.log(
|
|
2425
|
-
`[CB scrollToPage] ENTRY page=${pageNumber} targetCell=${cellIndexToScrollTo} pagesToRender=${this.pagesToRender} estimatedTileCount=${this.estimatedTileCount} itemCount=${this.infiniteScroller?.itemCount} scrollY=${window.scrollY}`,
|
|
2426
|
-
);
|
|
2427
2421
|
|
|
2428
2422
|
// Wait for the infinite scroller be rendered before proceeding
|
|
2429
2423
|
let waitAttempts = 0;
|
|
@@ -2431,13 +2425,7 @@ export class CollectionBrowser
|
|
|
2431
2425
|
await this.updateComplete;
|
|
2432
2426
|
waitAttempts++;
|
|
2433
2427
|
}
|
|
2434
|
-
if (!this.infiniteScroller)
|
|
2435
|
-
// eslint-disable-next-line no-console
|
|
2436
|
-
console.log(
|
|
2437
|
-
`[CB scrollToPage] NO_SCROLLER after wait waitAttempts=${waitAttempts}`,
|
|
2438
|
-
);
|
|
2439
|
-
return;
|
|
2440
|
-
}
|
|
2428
|
+
if (!this.infiniteScroller) return;
|
|
2441
2429
|
|
|
2442
2430
|
// The scroller have its default `itemCount=0`, so propagate our estimated
|
|
2443
2431
|
// tile count before jumping to the desired page.
|
|
@@ -2458,11 +2446,13 @@ export class CollectionBrowser
|
|
|
2458
2446
|
true,
|
|
2459
2447
|
);
|
|
2460
2448
|
this.isScrollingToCell = false;
|
|
2461
|
-
// eslint-disable-next-line no-console
|
|
2462
|
-
console.log(
|
|
2463
|
-
`[CB scrollToPage] DONE page=${pageNumber} targetCell=${cellIndexToScrollTo} scrolled=${scrolled} scrollY=${window.scrollY}`,
|
|
2464
|
-
);
|
|
2465
2449
|
this.infiniteScroller.refreshAllVisibleCells();
|
|
2450
|
+
|
|
2451
|
+
// After we finish scrolling, recompute the visible page from the new state
|
|
2452
|
+
// so that it doesn't fall out of sync.
|
|
2453
|
+
if (scrolled) {
|
|
2454
|
+
this.updateVisiblePage(this.infiniteScroller.getVisibleCellIndices());
|
|
2455
|
+
}
|
|
2466
2456
|
}
|
|
2467
2457
|
|
|
2468
2458
|
/**
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
import { property } from 'lit/decorators.js';
|
|
3
|
-
import type { SortParam } from '@internetarchive/search-service';
|
|
4
|
-
import { TileDisplayValueProvider } from './tile-display-value-provider';
|
|
5
|
-
import type { TileModel } from '../models';
|
|
6
|
-
import { DateFormat, formatDate } from '../utils/format-date';
|
|
7
|
-
|
|
8
|
-
export abstract class BaseTileComponent extends LitElement {
|
|
9
|
-
@property({ type: Object }) model?: TileModel;
|
|
10
|
-
|
|
11
|
-
@property({ type: Number }) currentWidth?: number;
|
|
12
|
-
|
|
13
|
-
@property({ type: Number }) currentHeight?: number;
|
|
14
|
-
|
|
15
|
-
@property({ type: String }) baseNavigationUrl?: string;
|
|
16
|
-
|
|
17
|
-
@property({ type: String }) baseImageUrl?: string;
|
|
18
|
-
|
|
19
|
-
@property({ type: String }) collectionPagePath?: string;
|
|
20
|
-
|
|
21
|
-
@property({ type: Object }) sortParam: SortParam | null = null;
|
|
22
|
-
|
|
23
|
-
@property({ type: Object }) defaultSortParam: SortParam | null = null;
|
|
24
|
-
|
|
25
|
-
@property({ type: String }) creatorFilter?: string;
|
|
26
|
-
|
|
27
|
-
@property({ type: Number }) mobileBreakpoint?: number;
|
|
28
|
-
|
|
29
|
-
@property({ type: Boolean }) loggedIn = false;
|
|
30
|
-
|
|
31
|
-
@property({ type: Boolean }) suppressBlurring = false;
|
|
32
|
-
|
|
33
|
-
@property({ type: Boolean }) useLocalTime = false;
|
|
34
|
-
|
|
35
|
-
protected displayValueProvider = new TileDisplayValueProvider();
|
|
36
|
-
|
|
37
|
-
protected willUpdate(changed: PropertyValues<this>) {
|
|
38
|
-
// Ensure the TileDisplayValueProvider stays up-to-date as properties change
|
|
39
|
-
if (
|
|
40
|
-
changed.has('model') ||
|
|
41
|
-
changed.has('baseNavigationUrl') ||
|
|
42
|
-
changed.has('collectionPagePath') ||
|
|
43
|
-
changed.has('sortParam') ||
|
|
44
|
-
changed.has('defaultSortParam') ||
|
|
45
|
-
changed.has('creatorFilter')
|
|
46
|
-
) {
|
|
47
|
-
this.displayValueProvider = new TileDisplayValueProvider({
|
|
48
|
-
model: this.model,
|
|
49
|
-
baseNavigationUrl: this.baseNavigationUrl,
|
|
50
|
-
collectionPagePath: this.collectionPagePath,
|
|
51
|
-
sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
|
|
52
|
-
creatorFilter: this.creatorFilter,
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* The formatted date string for given date and format type, taking into
|
|
59
|
-
* account whether this tile component should be using local time or UTC.
|
|
60
|
-
*/
|
|
61
|
-
protected getFormattedDate(date?: Date, format?: DateFormat): string {
|
|
62
|
-
const { useLocalTime } = this;
|
|
63
|
-
return formatDate(date, format, { useLocalTime });
|
|
64
|
-
}
|
|
65
|
-
}
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
import type { SortParam } from '@internetarchive/search-service';
|
|
4
|
+
import { TileDisplayValueProvider } from './tile-display-value-provider';
|
|
5
|
+
import type { TileModel } from '../models';
|
|
6
|
+
import { DateFormat, formatDate } from '../utils/format-date';
|
|
7
|
+
|
|
8
|
+
export abstract class BaseTileComponent extends LitElement {
|
|
9
|
+
@property({ type: Object }) model?: TileModel;
|
|
10
|
+
|
|
11
|
+
@property({ type: Number }) currentWidth?: number;
|
|
12
|
+
|
|
13
|
+
@property({ type: Number }) currentHeight?: number;
|
|
14
|
+
|
|
15
|
+
@property({ type: String }) baseNavigationUrl?: string;
|
|
16
|
+
|
|
17
|
+
@property({ type: String }) baseImageUrl?: string;
|
|
18
|
+
|
|
19
|
+
@property({ type: String }) collectionPagePath?: string;
|
|
20
|
+
|
|
21
|
+
@property({ type: Object }) sortParam: SortParam | null = null;
|
|
22
|
+
|
|
23
|
+
@property({ type: Object }) defaultSortParam: SortParam | null = null;
|
|
24
|
+
|
|
25
|
+
@property({ type: String }) creatorFilter?: string;
|
|
26
|
+
|
|
27
|
+
@property({ type: Number }) mobileBreakpoint?: number;
|
|
28
|
+
|
|
29
|
+
@property({ type: Boolean }) loggedIn = false;
|
|
30
|
+
|
|
31
|
+
@property({ type: Boolean }) suppressBlurring = false;
|
|
32
|
+
|
|
33
|
+
@property({ type: Boolean }) useLocalTime = false;
|
|
34
|
+
|
|
35
|
+
protected displayValueProvider = new TileDisplayValueProvider();
|
|
36
|
+
|
|
37
|
+
protected willUpdate(changed: PropertyValues<this>) {
|
|
38
|
+
// Ensure the TileDisplayValueProvider stays up-to-date as properties change
|
|
39
|
+
if (
|
|
40
|
+
changed.has('model') ||
|
|
41
|
+
changed.has('baseNavigationUrl') ||
|
|
42
|
+
changed.has('collectionPagePath') ||
|
|
43
|
+
changed.has('sortParam') ||
|
|
44
|
+
changed.has('defaultSortParam') ||
|
|
45
|
+
changed.has('creatorFilter')
|
|
46
|
+
) {
|
|
47
|
+
this.displayValueProvider = new TileDisplayValueProvider({
|
|
48
|
+
model: this.model,
|
|
49
|
+
baseNavigationUrl: this.baseNavigationUrl,
|
|
50
|
+
collectionPagePath: this.collectionPagePath,
|
|
51
|
+
sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
|
|
52
|
+
creatorFilter: this.creatorFilter,
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* The formatted date string for given date and format type, taking into
|
|
59
|
+
* account whether this tile component should be using local time or UTC.
|
|
60
|
+
*/
|
|
61
|
+
protected getFormattedDate(date?: Date, format?: DateFormat): string {
|
|
62
|
+
const { useLocalTime } = this;
|
|
63
|
+
return formatDate(date, format, { useLocalTime });
|
|
64
|
+
}
|
|
65
|
+
}
|