@internetarchive/collection-browser 0.0.1-alpha.34 → 0.0.1-alpha.35

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.
Files changed (19) hide show
  1. package/dist/src/mediatype-icon.js +1 -1
  2. package/dist/src/mediatype-icon.js.map +1 -1
  3. package/dist/src/models.d.ts +1 -1
  4. package/dist/src/models.js +4 -4
  5. package/dist/src/models.js.map +1 -1
  6. package/dist/src/restoration-state-handler.js +30 -15
  7. package/dist/src/restoration-state-handler.js.map +1 -1
  8. package/dist/src/sort-filter-bar/sort-filter-bar.d.ts +1 -0
  9. package/dist/src/sort-filter-bar/sort-filter-bar.js +65 -16
  10. package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
  11. package/dist/src/tiles/list/tile-list.d.ts +1 -1
  12. package/dist/src/tiles/list/tile-list.js +24 -9
  13. package/dist/src/tiles/list/tile-list.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/mediatype-icon.ts +1 -1
  16. package/src/models.ts +4 -4
  17. package/src/restoration-state-handler.ts +31 -17
  18. package/src/sort-filter-bar/sort-filter-bar.ts +63 -16
  19. package/src/tiles/list/tile-list.ts +23 -8
package/dist/src/mediatype-icon.js CHANGED
@@ -84,7 +84,7 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
84
84
  color: #2c2c2c;
85
85
  margin: auto;
86
86
  display: block;
87
- text-align: center;
87
+ text-align: var(--iconTextAlign, center);
88
88
  }
89
89
 
90
90
  #icon.hide-text p {
package/dist/src/mediatype-icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { accountIcon } from './assets/img/icons/mediatype/account';\nimport { audioIcon } from './assets/img/icons/mediatype/audio';\nimport { collectionIcon } from './assets/img/icons/mediatype/collection';\nimport { dataIcon } from './assets/img/icons/mediatype/data';\nimport { etreeIcon } from './assets/img/icons/mediatype/etree';\nimport { imagesIcon } from './assets/img/icons/mediatype/images';\nimport { filmIcon } from './assets/img/icons/mediatype/film';\nimport { radioIcon } from './assets/img/icons/mediatype/radio';\nimport { softwareIcon } from './assets/img/icons/mediatype/software';\nimport { textsIcon } from './assets/img/icons/mediatype/texts';\nimport { tvIcon } from './assets/img/icons/mediatype/tv';\nimport { videoIcon } from './assets/img/icons/mediatype/video';\nimport { webIcon } from './assets/img/icons/mediatype/web';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string | undefined;\n\n @property({ type: Array }) collections: string[] | undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private readonly mediatypeIcons: { [key: string]: any } = {\n account: accountIcon,\n audio: audioIcon,\n collection: collectionIcon,\n data: dataIcon,\n etree: etreeIcon,\n film: filmIcon,\n image: imagesIcon,\n movies: filmIcon,\n radio: radioIcon,\n software: softwareIcon,\n texts: textsIcon,\n tv: tvIcon,\n video: videoIcon,\n web: webIcon,\n };\n\n private readonly mediatypeText: { [key: string]: any } = {\n account: 'Account',\n audio: 'Audio',\n collection: 'Collection',\n data: 'Data',\n etree: 'E-tree',\n film: 'Film',\n image: 'Image',\n movies: 'Movie',\n radio: 'Radio',\n software: 'Software',\n texts: 'Text',\n tv: 'TV',\n video: 'Video',\n web: 'Web',\n };\n\n private get displayMediaType() {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype;\n }\n\n render() {\n if (!this.mediatype) {\n return html``;\n }\n\n const displayMediatype = this.displayMediaType || '';\n\n return html`\n <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\">\n ${this.mediatypeIcons[displayMediatype]}\n <p class=\"status-text\">${this.mediatypeText[displayMediatype]}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: center;\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../src/mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { accountIcon } from './assets/img/icons/mediatype/account';\nimport { audioIcon } from './assets/img/icons/mediatype/audio';\nimport { collectionIcon } from './assets/img/icons/mediatype/collection';\nimport { dataIcon } from './assets/img/icons/mediatype/data';\nimport { etreeIcon } from './assets/img/icons/mediatype/etree';\nimport { imagesIcon } from './assets/img/icons/mediatype/images';\nimport { filmIcon } from './assets/img/icons/mediatype/film';\nimport { radioIcon } from './assets/img/icons/mediatype/radio';\nimport { softwareIcon } from './assets/img/icons/mediatype/software';\nimport { textsIcon } from './assets/img/icons/mediatype/texts';\nimport { tvIcon } from './assets/img/icons/mediatype/tv';\nimport { videoIcon } from './assets/img/icons/mediatype/video';\nimport { webIcon } from './assets/img/icons/mediatype/web';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string | undefined;\n\n @property({ type: Array }) collections: string[] | undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private readonly mediatypeIcons: { [key: string]: any } = {\n account: accountIcon,\n audio: audioIcon,\n collection: collectionIcon,\n data: dataIcon,\n etree: etreeIcon,\n film: filmIcon,\n image: imagesIcon,\n movies: filmIcon,\n radio: radioIcon,\n software: softwareIcon,\n texts: textsIcon,\n tv: tvIcon,\n video: videoIcon,\n web: webIcon,\n };\n\n private readonly mediatypeText: { [key: string]: any } = {\n account: 'Account',\n audio: 'Audio',\n collection: 'Collection',\n data: 'Data',\n etree: 'E-tree',\n film: 'Film',\n image: 'Image',\n movies: 'Movie',\n radio: 'Radio',\n software: 'Software',\n texts: 'Text',\n tv: 'TV',\n video: 'Video',\n web: 'Web',\n };\n\n private get displayMediaType() {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype;\n }\n\n render() {\n if (!this.mediatype) {\n return html``;\n }\n\n const displayMediatype = this.displayMediaType || '';\n\n return html`\n <div id=\"icon\" class=\"${this.showText ? 'show-text' : 'hide-text'}\">\n ${this.mediatypeIcons[displayMediatype]}\n <p class=\"status-text\">${this.mediatypeText[displayMediatype]}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}
package/dist/src/models.d.ts CHANGED
@@ -39,7 +39,7 @@ export declare enum SortField {
39
39
  'views' = "views",
40
40
  'title' = "title",
41
41
  'datearchived' = "datearchived",
42
- 'datepublished' = "datepublished",
42
+ 'date' = "date",
43
43
  'datereviewed' = "datereviewed",
44
44
  'dateadded' = "dateadded",
45
45
  'creator' = "creator"
package/dist/src/models.js CHANGED
@@ -7,7 +7,7 @@ export var SortField;
7
7
  SortField["views"] = "views";
8
8
  SortField["title"] = "title";
9
9
  SortField["datearchived"] = "datearchived";
10
- SortField["datepublished"] = "datepublished";
10
+ SortField["date"] = "date";
11
11
  SortField["datereviewed"] = "datereviewed";
12
12
  SortField["dateadded"] = "dateadded";
13
13
  SortField["creator"] = "creator";
@@ -17,7 +17,7 @@ export const SortFieldDisplayName = {
17
17
  views: 'Views',
18
18
  title: 'Title',
19
19
  datearchived: 'Date Archived',
20
- datepublished: 'Date Published',
20
+ date: 'Date Published',
21
21
  datereviewed: 'Date Reviewed',
22
22
  dateadded: 'Date Added',
23
23
  creator: 'Creator',
@@ -30,7 +30,7 @@ export const SortFieldToMetadataField = {
30
30
  views: 'week',
31
31
  title: 'titleSorter',
32
32
  datearchived: 'publicdate',
33
- datepublished: 'date',
33
+ date: 'date',
34
34
  datereviewed: 'reviewdate',
35
35
  dateadded: 'addeddate',
36
36
  creator: 'creatorSorter',
@@ -40,7 +40,7 @@ export const SortFieldToMetadataField = {
40
40
  */
41
41
  export const MetadataFieldToSortField = {
42
42
  titleSorter: SortField.title,
43
- date: SortField.datepublished,
43
+ date: SortField.date,
44
44
  publicdate: SortField.datearchived,
45
45
  reviewdate: SortField.datereviewed,
46
46
  addeddate: SortField.dateadded,
package/dist/src/models.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AA0CA;;GAEG;AACH,MAAM,CAAN,IAAY,SASX;AATD,WAAY,SAAS;IACnB,oCAAyB,CAAA;IACzB,4BAAiB,CAAA;IACjB,4BAAiB,CAAA;IACjB,0CAA+B,CAAA;IAC/B,4CAAiC,CAAA;IACjC,0CAA+B,CAAA;IAC/B,oCAAyB,CAAA;IACzB,gCAAqB,CAAA;AACvB,CAAC,EATW,SAAS,KAAT,SAAS,QASpB;AAcD,MAAM,CAAC,MAAM,oBAAoB,GAE7B;IACF,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,eAAe;IAC7B,aAAa,EAAE,gBAAgB;IAC/B,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC;IACF,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,aAAa;IACpB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,MAAM;IACrB,YAAY,EAAE,YAAY;IAC1B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,eAAe;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC;IACF,WAAW,EAAE,SAAS,CAAC,KAAK;IAC5B,IAAI,EAAE,SAAS,CAAC,aAAa;IAC7B,UAAU,EAAE,SAAS,CAAC,YAAY;IAClC,UAAU,EAAE,SAAS,CAAC,YAAY;IAClC,SAAS,EAAE,SAAS,CAAC,SAAS;IAC9B,aAAa,EAAE,SAAS,CAAC,OAAO;IAChC,IAAI,EAAE,SAAS,CAAC,KAAK;CACtB,CAAC;AAmCF,MAAM,CAAC,MAAM,qBAAqB,GAAmB;IACnD,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,EAAE;CACT,CAAC","sourcesContent":["import type { MediaType } from '@internetarchive/field-parsers';\n\nexport interface TileModel {\n averageRating?: number;\n collectionIdentifier?: string;\n collectionName?: string;\n collections: string[];\n commentCount: number;\n creator?: string;\n creators: string[];\n dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]\n dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]\n datePublished?: Date; // Date work published in the world (user-defined) [from: date]\n dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]\n description?: string;\n favCount: number;\n identifier: string;\n issue?: string;\n itemCount: number;\n mediatype: MediaType;\n source?: string;\n subjects: string[];\n title: string;\n viewCount: number;\n volume?: string;\n}\n\nexport type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';\n\nexport type TileDisplayMode =\n | 'grid'\n | 'list-compact'\n | 'list-detail'\n | 'list-header';\n\n/**\n * This is mainly used to set the cookies for the collection display mode.\n *\n * It allows the user to set different modes for different contexts (collection page, search page, etc).\n */\nexport type CollectionBrowserContext = 'collection' | 'search';\n\n/**\n * The sort fields shown in the sort filter bar\n */\nexport enum SortField {\n 'relevance' = 'relevance',\n 'views' = 'views',\n 'title' = 'title',\n 'datearchived' = 'datearchived',\n 'datepublished' = 'datepublished',\n 'datereviewed' = 'datereviewed',\n 'dateadded' = 'dateadded',\n 'creator' = 'creator',\n}\n\n/**\n * The metadata fields we sort by that map to the SortFields above\n */\nexport type MetadataSortField =\n | 'week'\n | 'titleSorter'\n | 'date'\n | 'creatorSorter'\n | 'publicdate'\n | 'reviewdate'\n | 'addeddate';\n\nexport const SortFieldDisplayName: {\n [key in SortField]: string;\n} = {\n relevance: 'Relevance',\n views: 'Views',\n title: 'Title',\n datearchived: 'Date Archived',\n datepublished: 'Date Published',\n datereviewed: 'Date Reviewed',\n dateadded: 'Date Added',\n creator: 'Creator',\n};\n\n/**\n * Maps the SortField above to the corresponding Metadata field in the API.\n */\nexport const SortFieldToMetadataField: {\n [key in SortField]: MetadataSortField | null;\n} = {\n relevance: null,\n views: 'week',\n title: 'titleSorter',\n datearchived: 'publicdate',\n datepublished: 'date',\n datereviewed: 'reviewdate',\n dateadded: 'addeddate',\n creator: 'creatorSorter',\n};\n\n/**\n * Maps the Metadata field to the corresponding SortField field in the API.\n */\nexport const MetadataFieldToSortField: {\n [key in MetadataSortField]: SortField;\n} = {\n titleSorter: SortField.title,\n date: SortField.datepublished,\n publicdate: SortField.datearchived,\n reviewdate: SortField.datereviewed,\n addeddate: SortField.dateadded,\n creatorSorter: SortField.creator,\n week: SortField.views,\n};\n\nexport type FacetOption =\n | 'subject'\n | 'mediatype'\n | 'language'\n | 'creator'\n | 'collection'\n | 'year';\n\nexport type SelectedFacetState = 'selected' | 'hidden';\n\nexport type FacetState = SelectedFacetState | 'none';\n\nexport interface FacetBucket {\n // for some facets, we augment the key with a display value\n displayText?: string;\n key: string;\n count: number;\n state: FacetState;\n}\n\nexport interface FacetGroup {\n title: string;\n key: FacetOption;\n buckets: FacetBucket[];\n}\n\nexport type FacetValue = string;\n\nexport type SelectedFacets = Record<\n FacetOption,\n Record<FacetValue, SelectedFacetState>\n>;\n\nexport const defaultSelectedFacets: SelectedFacets = {\n subject: {},\n mediatype: {},\n language: {},\n creator: {},\n collection: {},\n year: {},\n};\n"]}
1
+ {"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"AA0CA;;GAEG;AACH,MAAM,CAAN,IAAY,SASX;AATD,WAAY,SAAS;IACnB,oCAAyB,CAAA;IACzB,4BAAiB,CAAA;IACjB,4BAAiB,CAAA;IACjB,0CAA+B,CAAA;IAC/B,0BAAe,CAAA;IACf,0CAA+B,CAAA;IAC/B,oCAAyB,CAAA;IACzB,gCAAqB,CAAA;AACvB,CAAC,EATW,SAAS,KAAT,SAAS,QASpB;AAcD,MAAM,CAAC,MAAM,oBAAoB,GAE7B;IACF,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,eAAe;IAC7B,IAAI,EAAE,gBAAgB;IACtB,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC;IACF,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,aAAa;IACpB,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,YAAY;IAC1B,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,eAAe;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAEjC;IACF,WAAW,EAAE,SAAS,CAAC,KAAK;IAC5B,IAAI,EAAE,SAAS,CAAC,IAAI;IACpB,UAAU,EAAE,SAAS,CAAC,YAAY;IAClC,UAAU,EAAE,SAAS,CAAC,YAAY;IAClC,SAAS,EAAE,SAAS,CAAC,SAAS;IAC9B,aAAa,EAAE,SAAS,CAAC,OAAO;IAChC,IAAI,EAAE,SAAS,CAAC,KAAK;CACtB,CAAC;AAmCF,MAAM,CAAC,MAAM,qBAAqB,GAAmB;IACnD,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,EAAE;CACT,CAAC","sourcesContent":["import type { MediaType } from '@internetarchive/field-parsers';\n\nexport interface TileModel {\n averageRating?: number;\n collectionIdentifier?: string;\n collectionName?: string;\n collections: string[];\n commentCount: number;\n creator?: string;\n creators: string[];\n dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]\n dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]\n datePublished?: Date; // Date work published in the world (user-defined) [from: date]\n dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]\n description?: string;\n favCount: number;\n identifier: string;\n issue?: string;\n itemCount: number;\n mediatype: MediaType;\n source?: string;\n subjects: string[];\n title: string;\n viewCount: number;\n volume?: string;\n}\n\nexport type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';\n\nexport type TileDisplayMode =\n | 'grid'\n | 'list-compact'\n | 'list-detail'\n | 'list-header';\n\n/**\n * This is mainly used to set the cookies for the collection display mode.\n *\n * It allows the user to set different modes for different contexts (collection page, search page, etc).\n */\nexport type CollectionBrowserContext = 'collection' | 'search';\n\n/**\n * The sort fields shown in the sort filter bar\n */\nexport enum SortField {\n 'relevance' = 'relevance',\n 'views' = 'views',\n 'title' = 'title',\n 'datearchived' = 'datearchived',\n 'date' = 'date',\n 'datereviewed' = 'datereviewed',\n 'dateadded' = 'dateadded',\n 'creator' = 'creator',\n}\n\n/**\n * The metadata fields we sort by that map to the SortFields above\n */\nexport type MetadataSortField =\n | 'week'\n | 'titleSorter'\n | 'date'\n | 'creatorSorter'\n | 'publicdate'\n | 'reviewdate'\n | 'addeddate';\n\nexport const SortFieldDisplayName: {\n [key in SortField]: string;\n} = {\n relevance: 'Relevance',\n views: 'Views',\n title: 'Title',\n datearchived: 'Date Archived',\n date: 'Date Published',\n datereviewed: 'Date Reviewed',\n dateadded: 'Date Added',\n creator: 'Creator',\n};\n\n/**\n * Maps the SortField above to the corresponding Metadata field in the API.\n */\nexport const SortFieldToMetadataField: {\n [key in SortField]: MetadataSortField | null;\n} = {\n relevance: null,\n views: 'week',\n title: 'titleSorter',\n datearchived: 'publicdate',\n date: 'date',\n datereviewed: 'reviewdate',\n dateadded: 'addeddate',\n creator: 'creatorSorter',\n};\n\n/**\n * Maps the Metadata field to the corresponding SortField field in the API.\n */\nexport const MetadataFieldToSortField: {\n [key in MetadataSortField]: SortField;\n} = {\n titleSorter: SortField.title,\n date: SortField.date,\n publicdate: SortField.datearchived,\n reviewdate: SortField.datereviewed,\n addeddate: SortField.dateadded,\n creatorSorter: SortField.creator,\n week: SortField.views,\n};\n\nexport type FacetOption =\n | 'subject'\n | 'mediatype'\n | 'language'\n | 'creator'\n | 'collection'\n | 'year';\n\nexport type SelectedFacetState = 'selected' | 'hidden';\n\nexport type FacetState = SelectedFacetState | 'none';\n\nexport interface FacetBucket {\n // for some facets, we augment the key with a display value\n displayText?: string;\n key: string;\n count: number;\n state: FacetState;\n}\n\nexport interface FacetGroup {\n title: string;\n key: FacetOption;\n buckets: FacetBucket[];\n}\n\nexport type FacetValue = string;\n\nexport type SelectedFacets = Record<\n FacetOption,\n Record<FacetValue, SelectedFacetState>\n>;\n\nexport const defaultSelectedFacets: SelectedFacets = {\n subject: {},\n mediatype: {},\n language: {},\n creator: {},\n collection: {},\n year: {},\n};\n"]}
package/dist/src/restoration-state-handler.js CHANGED
@@ -50,17 +50,18 @@ export class RestorationStateHandler {
50
50
  searchParams.delete('and[]');
51
51
  searchParams.delete('not[]');
52
52
  if (state.sortParam) {
53
- url.searchParams.set('sort', state.sortParam.asString);
53
+ const prefix = state.sortParam.direction === 'desc' ? '-' : '';
54
+ searchParams.set('sort', `${prefix}${state.sortParam.field}`);
54
55
  }
55
56
  if (state.baseQuery) {
56
- url.searchParams.set('query', state.baseQuery);
57
+ searchParams.set('query', state.baseQuery);
57
58
  }
58
59
  if (state.currentPage) {
59
60
  if (state.currentPage > 1) {
60
- url.searchParams.set('page', state.currentPage.toString());
61
+ searchParams.set('page', state.currentPage.toString());
61
62
  }
62
63
  else {
63
- url.searchParams.delete('page');
64
+ searchParams.delete('page');
64
65
  }
65
66
  }
66
67
  if (state.selectedFacets) {
@@ -73,22 +74,22 @@ export class RestorationStateHandler {
73
74
  const notValue = facetState === 'hidden';
74
75
  const paramValue = `${facetName}:${key}`;
75
76
  if (notValue) {
76
- url.searchParams.append('not[]', paramValue);
77
+ searchParams.append('not[]', paramValue);
77
78
  }
78
79
  else {
79
- url.searchParams.append('and[]', paramValue);
80
+ searchParams.append('and[]', paramValue);
80
81
  }
81
82
  }
82
83
  }
83
84
  }
84
85
  if (state.dateRangeQueryClause) {
85
- url.searchParams.append('and[]', state.dateRangeQueryClause);
86
+ searchParams.append('and[]', state.dateRangeQueryClause);
86
87
  }
87
88
  if (state.titleQuery) {
88
- url.searchParams.append('and[]', state.titleQuery);
89
+ searchParams.append('and[]', state.titleQuery);
89
90
  }
90
91
  if (state.creatorQuery) {
91
- url.searchParams.append('and[]', state.creatorQuery);
92
+ searchParams.append('and[]', state.creatorQuery);
92
93
  }
93
94
  window.history.pushState({
94
95
  sort: state.sortParam,
@@ -127,13 +128,27 @@ export class RestorationStateHandler {
127
128
  restorationState.baseQuery = searchQuery;
128
129
  }
129
130
  if (sortQuery) {
130
- const [field, direction] = sortQuery.split(' ');
131
- const metadataField = MetadataFieldToSortField[field];
132
- if (metadataField) {
133
- restorationState.selectedSort = metadataField;
131
+ // check for two different sort formats: `date desc` and `-date`
132
+ const hasSpace = sortQuery.indexOf(' ') > -1;
133
+ if (hasSpace) {
134
+ const [field, direction] = sortQuery.split(' ');
135
+ const metadataField = MetadataFieldToSortField[field];
136
+ if (metadataField) {
137
+ restorationState.selectedSort = metadataField;
138
+ }
139
+ if (direction === 'desc' || direction === 'asc') {
140
+ restorationState.sortDirection = direction;
141
+ }
134
142
  }
135
- if (direction === 'desc' || direction === 'asc') {
136
- restorationState.sortDirection = direction;
143
+ else {
144
+ const sortDirection = sortQuery.startsWith('-') ? 'desc' : 'asc';
145
+ const sortField = sortQuery.startsWith('-')
146
+ ? sortQuery.slice(1)
147
+ : sortQuery;
148
+ const metadataField = MetadataFieldToSortField[sortField];
149
+ if (metadataField)
150
+ restorationState.selectedSort = metadataField;
151
+ restorationState.sortDirection = sortDirection;
137
152
  }
138
153
  }
139
154
  if (facetAnds) {
package/dist/src/restoration-state-handler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"restoration-state-handler.js","sourceRoot":"","sources":["../../src/restoration-state-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { SortDirection, SortParam } from '@internetarchive/search-service';\nimport { getCookie, setCookie } from 'typescript-cookie';\nimport {\n MetadataFieldToSortField,\n MetadataSortField,\n FacetOption,\n CollectionBrowserContext,\n CollectionDisplayMode,\n SelectedFacets,\n SortField,\n} from './models';\n\nexport interface RestorationState {\n displayMode?: CollectionDisplayMode;\n sortParam?: SortParam;\n selectedSort?: SortField;\n sortDirection?: SortDirection;\n selectedFacets: SelectedFacets;\n baseQuery?: string;\n currentPage?: number;\n dateRangeQueryClause?: string;\n titleQuery?: string;\n creatorQuery?: string;\n minSelectedDate?: string;\n maxSelectedDate?: string;\n selectedTitleFilter?: string;\n selectedCreatorFilter?: string;\n}\n\nexport interface RestorationStateHandlerInterface {\n persistState(state: RestorationState): void;\n getRestorationState(): RestorationState;\n}\n\nexport class RestorationStateHandler\n implements RestorationStateHandlerInterface\n{\n private context: CollectionBrowserContext;\n\n private cookieDomain = '.archive.org';\n\n private cookieExpiration = 30;\n\n private cookiePath = '/';\n\n constructor(options: { context: CollectionBrowserContext }) {\n this.context = options.context;\n }\n\n persistState(state: RestorationState): void {\n if (state.displayMode) this.persistViewStateToCookies(state.displayMode);\n this.persistQueryStateToUrl(state);\n }\n\n getRestorationState(): RestorationState {\n const restorationState = this.loadQueryStateFromUrl();\n const displayMode = this.loadTileViewStateFromCookies();\n restorationState.displayMode = displayMode;\n return restorationState;\n }\n\n private persistViewStateToCookies(displayMode: CollectionDisplayMode) {\n const gridState = displayMode === 'grid' ? 'tiles' : 'lists';\n setCookie(`view-${this.context}`, gridState, {\n domain: this.cookieDomain,\n expires: this.cookieExpiration,\n path: this.cookiePath,\n });\n const detailsState = displayMode === 'list-detail' ? 'showdetails' : '';\n setCookie(`showdetails-${this.context}`, detailsState, {\n domain: this.cookieDomain,\n expires: this.cookieExpiration,\n path: this.cookiePath,\n });\n }\n\n private loadTileViewStateFromCookies(): CollectionDisplayMode {\n const viewState = getCookie(`view-${this.context}`);\n const detailsState = getCookie(`showdetails-${this.context}`);\n if (viewState === 'tiles' || viewState === undefined) return 'grid';\n if (detailsState === 'showdetails') return 'list-detail';\n return 'list-compact';\n }\n\n private persistQueryStateToUrl(state: RestorationState) {\n const url = new URL(window.location.href);\n const { searchParams } = url;\n searchParams.delete('sort');\n searchParams.delete('query');\n searchParams.delete('page');\n searchParams.delete('and[]');\n searchParams.delete('not[]');\n\n if (state.sortParam) {\n url.searchParams.set('sort', state.sortParam.asString);\n }\n\n if (state.baseQuery) {\n url.searchParams.set('query', state.baseQuery);\n }\n\n if (state.currentPage) {\n if (state.currentPage > 1) {\n url.searchParams.set('page', state.currentPage.toString());\n } else {\n url.searchParams.delete('page');\n }\n }\n\n if (state.selectedFacets) {\n for (const [facetName, facetValues] of Object.entries(\n state.selectedFacets\n )) {\n const facetEntries = Object.entries(facetValues);\n // eslint-disable-next-line no-continue\n if (facetEntries.length === 0) continue;\n for (const [key, facetState] of facetEntries) {\n const notValue = facetState === 'hidden';\n const paramValue = `${facetName}:${key}`;\n if (notValue) {\n url.searchParams.append('not[]', paramValue);\n } else {\n url.searchParams.append('and[]', paramValue);\n }\n }\n }\n }\n\n if (state.dateRangeQueryClause) {\n url.searchParams.append('and[]', state.dateRangeQueryClause);\n }\n if (state.titleQuery) {\n url.searchParams.append('and[]', state.titleQuery);\n }\n if (state.creatorQuery) {\n url.searchParams.append('and[]', state.creatorQuery);\n }\n\n window.history.pushState(\n {\n sort: state.sortParam,\n query: state.baseQuery,\n page: state.currentPage,\n and: state.selectedFacets,\n not: state.selectedFacets,\n dateRange: state.dateRangeQueryClause,\n },\n '',\n url\n );\n }\n\n private loadQueryStateFromUrl(): RestorationState {\n const url = new URL(window.location.href);\n const pageNumber = url.searchParams.get('page');\n const searchQuery = url.searchParams.get('query');\n const sortQuery = url.searchParams.get('sort');\n const facetAnds = url.searchParams.getAll('and[]');\n const facetNots = url.searchParams.getAll('not[]');\n\n const restorationState: RestorationState = {\n selectedFacets: {\n subject: {},\n creator: {},\n mediatype: {},\n language: {},\n collection: {},\n year: {},\n },\n };\n\n if (pageNumber) {\n const parsed = parseInt(pageNumber, 10);\n restorationState.currentPage = parsed;\n } else {\n restorationState.currentPage = 1;\n }\n if (searchQuery) {\n restorationState.baseQuery = searchQuery;\n }\n if (sortQuery) {\n const [field, direction] = sortQuery.split(' ');\n const metadataField =\n MetadataFieldToSortField[field as MetadataSortField];\n if (metadataField) {\n restorationState.selectedSort = metadataField;\n }\n if (direction === 'desc' || direction === 'asc') {\n restorationState.sortDirection = direction as SortDirection;\n }\n }\n if (facetAnds) {\n facetAnds.forEach(and => {\n const [field, value] = and.split(':');\n switch (field) {\n case 'year': {\n const [minDate, maxDate] = value.split(' TO ');\n // we have two potential ways of filtering by date:\n // the range with \"date TO date\" or the single date with \"date\"\n // this is checking for the range case and if we don't have those, fall\n // back to the single date case\n if (minDate && maxDate) {\n restorationState.minSelectedDate = minDate.substring(\n 1,\n minDate.length\n );\n restorationState.maxSelectedDate = maxDate.substring(\n 0,\n maxDate.length - 1\n );\n restorationState.dateRangeQueryClause = `year:${value}`;\n } else {\n restorationState.selectedFacets[field as FacetOption][value] =\n 'selected';\n }\n break;\n }\n case 'firstTitle':\n restorationState.selectedTitleFilter = value;\n break;\n case 'firstCreator':\n restorationState.selectedCreatorFilter = value;\n break;\n default:\n restorationState.selectedFacets[field as FacetOption][value] =\n 'selected';\n }\n });\n }\n if (facetNots) {\n facetNots.forEach(not => {\n const [field, value] = not.split(':');\n restorationState.selectedFacets[field as FacetOption][value] = 'hidden';\n });\n }\n return restorationState;\n }\n}\n"]}
1
+ {"version":3,"file":"restoration-state-handler.js","sourceRoot":"","sources":["../../src/restoration-state-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { SortDirection, SortParam } from '@internetarchive/search-service';\nimport { getCookie, setCookie } from 'typescript-cookie';\nimport {\n MetadataFieldToSortField,\n MetadataSortField,\n FacetOption,\n CollectionBrowserContext,\n CollectionDisplayMode,\n SelectedFacets,\n SortField,\n} from './models';\n\nexport interface RestorationState {\n displayMode?: CollectionDisplayMode;\n sortParam?: SortParam;\n selectedSort?: SortField;\n sortDirection?: SortDirection;\n selectedFacets: SelectedFacets;\n baseQuery?: string;\n currentPage?: number;\n dateRangeQueryClause?: string;\n titleQuery?: string;\n creatorQuery?: string;\n minSelectedDate?: string;\n maxSelectedDate?: string;\n selectedTitleFilter?: string;\n selectedCreatorFilter?: string;\n}\n\nexport interface RestorationStateHandlerInterface {\n persistState(state: RestorationState): void;\n getRestorationState(): RestorationState;\n}\n\nexport class RestorationStateHandler\n implements RestorationStateHandlerInterface\n{\n private context: CollectionBrowserContext;\n\n private cookieDomain = '.archive.org';\n\n private cookieExpiration = 30;\n\n private cookiePath = '/';\n\n constructor(options: { context: CollectionBrowserContext }) {\n this.context = options.context;\n }\n\n persistState(state: RestorationState): void {\n if (state.displayMode) this.persistViewStateToCookies(state.displayMode);\n this.persistQueryStateToUrl(state);\n }\n\n getRestorationState(): RestorationState {\n const restorationState = this.loadQueryStateFromUrl();\n const displayMode = this.loadTileViewStateFromCookies();\n restorationState.displayMode = displayMode;\n return restorationState;\n }\n\n private persistViewStateToCookies(displayMode: CollectionDisplayMode) {\n const gridState = displayMode === 'grid' ? 'tiles' : 'lists';\n setCookie(`view-${this.context}`, gridState, {\n domain: this.cookieDomain,\n expires: this.cookieExpiration,\n path: this.cookiePath,\n });\n const detailsState = displayMode === 'list-detail' ? 'showdetails' : '';\n setCookie(`showdetails-${this.context}`, detailsState, {\n domain: this.cookieDomain,\n expires: this.cookieExpiration,\n path: this.cookiePath,\n });\n }\n\n private loadTileViewStateFromCookies(): CollectionDisplayMode {\n const viewState = getCookie(`view-${this.context}`);\n const detailsState = getCookie(`showdetails-${this.context}`);\n if (viewState === 'tiles' || viewState === undefined) return 'grid';\n if (detailsState === 'showdetails') return 'list-detail';\n return 'list-compact';\n }\n\n private persistQueryStateToUrl(state: RestorationState) {\n const url = new URL(window.location.href);\n const { searchParams } = url;\n searchParams.delete('sort');\n searchParams.delete('query');\n searchParams.delete('page');\n searchParams.delete('and[]');\n searchParams.delete('not[]');\n\n if (state.sortParam) {\n const prefix = state.sortParam.direction === 'desc' ? '-' : '';\n searchParams.set('sort', `${prefix}${state.sortParam.field}`);\n }\n\n if (state.baseQuery) {\n searchParams.set('query', state.baseQuery);\n }\n\n if (state.currentPage) {\n if (state.currentPage > 1) {\n searchParams.set('page', state.currentPage.toString());\n } else {\n searchParams.delete('page');\n }\n }\n\n if (state.selectedFacets) {\n for (const [facetName, facetValues] of Object.entries(\n state.selectedFacets\n )) {\n const facetEntries = Object.entries(facetValues);\n // eslint-disable-next-line no-continue\n if (facetEntries.length === 0) continue;\n for (const [key, facetState] of facetEntries) {\n const notValue = facetState === 'hidden';\n const paramValue = `${facetName}:${key}`;\n if (notValue) {\n searchParams.append('not[]', paramValue);\n } else {\n searchParams.append('and[]', paramValue);\n }\n }\n }\n }\n\n if (state.dateRangeQueryClause) {\n searchParams.append('and[]', state.dateRangeQueryClause);\n }\n if (state.titleQuery) {\n searchParams.append('and[]', state.titleQuery);\n }\n if (state.creatorQuery) {\n searchParams.append('and[]', state.creatorQuery);\n }\n\n window.history.pushState(\n {\n sort: state.sortParam,\n query: state.baseQuery,\n page: state.currentPage,\n and: state.selectedFacets,\n not: state.selectedFacets,\n dateRange: state.dateRangeQueryClause,\n },\n '',\n url\n );\n }\n\n private loadQueryStateFromUrl(): RestorationState {\n const url = new URL(window.location.href);\n const pageNumber = url.searchParams.get('page');\n const searchQuery = url.searchParams.get('query');\n const sortQuery = url.searchParams.get('sort');\n const facetAnds = url.searchParams.getAll('and[]');\n const facetNots = url.searchParams.getAll('not[]');\n\n const restorationState: RestorationState = {\n selectedFacets: {\n subject: {},\n creator: {},\n mediatype: {},\n language: {},\n collection: {},\n year: {},\n },\n };\n\n if (pageNumber) {\n const parsed = parseInt(pageNumber, 10);\n restorationState.currentPage = parsed;\n } else {\n restorationState.currentPage = 1;\n }\n if (searchQuery) {\n restorationState.baseQuery = searchQuery;\n }\n if (sortQuery) {\n // check for two different sort formats: `date desc` and `-date`\n const hasSpace = sortQuery.indexOf(' ') > -1;\n if (hasSpace) {\n const [field, direction] = sortQuery.split(' ');\n const metadataField =\n MetadataFieldToSortField[field as MetadataSortField];\n if (metadataField) {\n restorationState.selectedSort = metadataField;\n }\n if (direction === 'desc' || direction === 'asc') {\n restorationState.sortDirection = direction as SortDirection;\n }\n } else {\n const sortDirection = sortQuery.startsWith('-') ? 'desc' : 'asc';\n const sortField = sortQuery.startsWith('-')\n ? sortQuery.slice(1)\n : sortQuery;\n const metadataField =\n MetadataFieldToSortField[sortField as MetadataSortField];\n if (metadataField) restorationState.selectedSort = metadataField;\n restorationState.sortDirection = sortDirection as SortDirection;\n }\n }\n if (facetAnds) {\n facetAnds.forEach(and => {\n const [field, value] = and.split(':');\n switch (field) {\n case 'year': {\n const [minDate, maxDate] = value.split(' TO ');\n // we have two potential ways of filtering by date:\n // the range with \"date TO date\" or the single date with \"date\"\n // this is checking for the range case and if we don't have those, fall\n // back to the single date case\n if (minDate && maxDate) {\n restorationState.minSelectedDate = minDate.substring(\n 1,\n minDate.length\n );\n restorationState.maxSelectedDate = maxDate.substring(\n 0,\n maxDate.length - 1\n );\n restorationState.dateRangeQueryClause = `year:${value}`;\n } else {\n restorationState.selectedFacets[field as FacetOption][value] =\n 'selected';\n }\n break;\n }\n case 'firstTitle':\n restorationState.selectedTitleFilter = value;\n break;\n case 'firstCreator':\n restorationState.selectedCreatorFilter = value;\n break;\n default:\n restorationState.selectedFacets[field as FacetOption][value] =\n 'selected';\n }\n });\n }\n if (facetNots) {\n facetNots.forEach(not => {\n const [field, value] = not.split(':');\n restorationState.selectedFacets[field as FacetOption][value] = 'hidden';\n });\n }\n return restorationState;\n }\n}\n"]}
package/dist/src/sort-filter-bar/sort-filter-bar.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare class SortFilterBar extends LitElement implements SharedResizeObs
15
15
  dateSortSelectorVisible: boolean;
16
16
  desktopSelectorBarWidth: number;
17
17
  selectorBarContainerWidth: number;
18
+ hoveringOverDateSortOptions: boolean;
18
19
  private desktopSortSelector;
19
20
  private sortSelectorContainer;
20
21
  render(): TemplateResult<1>;
package/dist/src/sort-filter-bar/sort-filter-bar.js CHANGED
@@ -20,6 +20,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
20
20
  this.dateSortSelectorVisible = false;
21
21
  this.desktopSelectorBarWidth = 0;
22
22
  this.selectorBarContainerWidth = 0;
23
+ this.hoveringOverDateSortOptions = false;
23
24
  }
24
25
  render() {
25
26
  return html `
@@ -44,7 +45,9 @@ let SortFilterBar = class SortFilterBar extends LitElement {
44
45
  <div id="display-style-selector">${this.displayOptionTemplate}</div>
45
46
  </div>
46
47
 
47
- ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}
48
+ ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
49
+ ? this.dateSortSelector
50
+ : nothing}
48
51
 
49
52
  <div id="bottom-shadow"></div>
50
53
  </div>
@@ -147,8 +150,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
147
150
  <li>${this.getSortDisplayOption(SortField.views)}</li>
148
151
  <li>${this.getSortDisplayOption(SortField.title)}</li>
149
152
  <li>
150
- ${this.getSortDisplayOption(SortField.datearchived, {
151
- additionalClickEvent: () => {
153
+ ${this.getSortDisplayOption(SortField.date, {
154
+ clickEvent: () => {
155
+ if (!this.dateOptionSelected)
156
+ this.setSelectedSort(SortField.date);
152
157
  this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
153
158
  },
154
159
  displayName: html `${this.dateSortField}`,
@@ -157,7 +162,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
157
162
  </li>
158
163
  <li>
159
164
  ${this.getSortDisplayOption(SortField.creator, {
160
- additionalClickEvent: () => {
165
+ clickEvent: () => {
161
166
  this.creatorSelectorVisible = !this.creatorSelectorVisible;
162
167
  },
163
168
  })}
@@ -186,10 +191,13 @@ let SortFilterBar = class SortFilterBar extends LitElement {
186
191
  <a
187
192
  href="#"
188
193
  @click=${(e) => {
189
- var _a;
190
194
  e.preventDefault();
191
- this.setSelectedSort(sortField);
192
- (_a = options === null || options === void 0 ? void 0 : options.additionalClickEvent) === null || _a === void 0 ? void 0 : _a.call(options, e);
195
+ if (options === null || options === void 0 ? void 0 : options.clickEvent) {
196
+ options.clickEvent(e);
197
+ }
198
+ else {
199
+ this.setSelectedSort(sortField);
200
+ }
193
201
  }}
194
202
  class=${isSelected() ? 'selected' : ''}
195
203
  >
@@ -260,7 +268,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
260
268
  <div id="date-sort-selector">
261
269
  <ul>
262
270
  <li>${this.getDateSortButton(SortField.datearchived)}</li>
263
- <li>${this.getDateSortButton(SortField.datepublished)}</li>
271
+ <li>${this.getDateSortButton(SortField.date)}</li>
264
272
  <li>${this.getDateSortButton(SortField.datereviewed)}</li>
265
273
  <li>${this.getDateSortButton(SortField.dateadded)}</li>
266
274
  </ul>
@@ -273,6 +281,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
273
281
  @click=${() => {
274
282
  this.selectDateSort(sortField);
275
283
  }}
284
+ class=${this.selectedSort === sortField ? 'selected' : ''}
276
285
  >
277
286
  ${SortFieldDisplayName[sortField]}
278
287
  </button>
@@ -301,12 +310,13 @@ let SortFilterBar = class SortFilterBar extends LitElement {
301
310
  * @memberof SortFilterBar
302
311
  */
303
312
  get dateOptionSelected() {
304
- return [
305
- 'datearchived',
306
- 'datepublished',
307
- 'datereviewed',
308
- 'dateadded',
309
- ].includes(this.selectedSort);
313
+ const dateSortFields = [
314
+ SortField.datearchived,
315
+ SortField.date,
316
+ SortField.datereviewed,
317
+ SortField.dateadded,
318
+ ];
319
+ return dateSortFields.includes(this.selectedSort);
310
320
  }
311
321
  /**
312
322
  * The display name of the current date field
@@ -318,10 +328,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
318
328
  */
319
329
  get dateSortField() {
320
330
  var _a;
321
- const defaultSort = SortFieldDisplayName[SortField.datearchived];
322
- return this.dateOptionSelected
331
+ const defaultSort = SortFieldDisplayName[SortField.date];
332
+ const name = this.dateOptionSelected
323
333
  ? (_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : defaultSort
324
334
  : defaultSort;
335
+ return name;
325
336
  }
326
337
  get titleSelectorBar() {
327
338
  return html ` <alpha-bar
@@ -364,6 +375,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
364
375
  }
365
376
  };
366
377
  SortFilterBar.styles = css `
378
+ #container {
379
+ position: relative;
380
+ }
381
+
367
382
  #sort-bar {
368
383
  display: flex;
369
384
  justify-content: space-between;
@@ -420,6 +435,36 @@ SortFilterBar.styles = css `
420
435
  cursor: default;
421
436
  }
422
437
 
438
+ #date-sort-selector {
439
+ position: absolute;
440
+ left: 150px;
441
+ top: 40px;
442
+
443
+ z-index: 1;
444
+ padding: 1rem;
445
+ background-color: rgba(255, 255, 255, 0.75);
446
+ border-radius: 2.5rem;
447
+ border: 1px solid #404142;
448
+ }
449
+
450
+ #date-sort-selector button {
451
+ background: none;
452
+ border-radius: 15px;
453
+ color: #404142;
454
+ border: none;
455
+ appearance: none;
456
+ cursor: pointer;
457
+ -webkit-appearance: none;
458
+ font-size: 1.4rem;
459
+ font-weight: 400;
460
+ padding: 0.5rem 1.2rem;
461
+ }
462
+
463
+ #date-sort-selector button.selected {
464
+ background-color: #404142;
465
+ color: white;
466
+ }
467
+
423
468
  #show-details {
424
469
  text-transform: uppercase;
425
470
  cursor: pointer;
@@ -476,6 +521,7 @@ SortFilterBar.styles = css `
476
521
  text-transform: uppercase;
477
522
  font-size: 1.4rem;
478
523
  color: #333;
524
+ line-height: 2.5;
479
525
  }
480
526
 
481
527
  #desktop-sort-selector li a.selected {
@@ -555,6 +601,9 @@ __decorate([
555
601
  __decorate([
556
602
  state()
557
603
  ], SortFilterBar.prototype, "selectorBarContainerWidth", void 0);
604
+ __decorate([
605
+ state()
606
+ ], SortFilterBar.prototype, "hoveringOverDateSortOptions", void 0);
558
607
  __decorate([
559
608
  query('#desktop-sort-selector')
560
609
  ], SortFilterBar.prototype, "desktopSortSelector", void 0);
package/dist/src/sort-filter-bar/sort-filter-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n CollectionDisplayMode,\n SortField,\n SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n @property({ type: String }) sortDirection: 'asc' | 'desc' | null = null;\n\n @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @state() titleSelectorVisible: boolean = false;\n\n @state() creatorSelectorVisible: boolean = false;\n\n @state() dateSortSelectorVisible = false;\n\n @state() desktopSelectorBarWidth = 0;\n\n @state() selectorBarContainerWidth = 0;\n\n @query('#desktop-sort-selector')\n private desktopSortSelector!: HTMLUListElement;\n\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n render() {\n return html`\n <div id=\"container\">\n ${this.titleSelectorVisible || this.selectedSort === 'title'\n ? this.titleSelectorBar\n : nothing}\n ${this.creatorSelectorVisible || this.selectedSort === 'creator'\n ? this.creatorSelectorBar\n : nothing}\n\n <div id=\"sort-bar\">\n <div id=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n\n <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n </div>\n\n ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}\n\n <div id=\"bottom-shadow\"></div>\n </div>\n `;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedSort') && this.sortDirection === null) {\n this.sortDirection = 'desc';\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.titleSelectorVisible = true;\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.creatorSelectorVisible = true;\n }\n\n if (changed.has('resizeObserver')) {\n const oldObserver = changed.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n if (oldObserver) this.disconnectResizeObserver(oldObserver);\n this.setupResizeObserver();\n }\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver) {\n this.disconnectResizeObserver(this.resizeObserver);\n }\n }\n\n private disconnectResizeObserver(\n resizeObserver: SharedResizeObserverInterface\n ) {\n resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n resizeObserver.removeObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n this.resizeObserver.addObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortSelector)\n this.desktopSelectorBarWidth = entry.contentRect.width;\n else if (entry.target === this.sortSelectorContainer)\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n\n private get sortDirectionSelectorTemplate() {\n return html`\n <div id=\"sort-direction-selector\">\n <button\n id=\"sort-ascending-btn\"\n class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('asc');\n }}\n >\n ${sortIcon}\n </button>\n <button\n id=\"sort-descending-btn\"\n class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('desc');\n }}\n >\n ${sortIcon}\n </button>\n </div>\n `;\n }\n\n private get desktopSortSelectorTemplate() {\n return html`\n <ul\n id=\"desktop-sort-selector\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <li id=\"sort-by-text\">Sort By</li>\n <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance)\n : nothing}\n </li>\n <li>${this.getSortDisplayOption(SortField.views)}</li>\n <li>${this.getSortDisplayOption(SortField.title)}</li>\n <li>\n ${this.getSortDisplayOption(SortField.datearchived, {\n additionalClickEvent: () => {\n this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n },\n displayName: html`${this.dateSortField}`,\n isSelected: () => this.dateOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n additionalClickEvent: () => {\n this.creatorSelectorVisible = !this.creatorSelectorVisible;\n },\n })}\n </li>\n </ul>\n `;\n }\n\n /**\n * This generates each of the sort option links.\n *\n * It manages the display value and the selected state of the option.\n *\n * @param sortField\n * @param options {\n * additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.\n * displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n * isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n */\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n additionalClickEvent?: (e: Event) => void;\n isSelected?: () => boolean;\n displayName?: TemplateResult;\n }\n ): TemplateResult {\n const isSelected =\n options?.isSelected ?? (() => this.selectedSort === sortField);\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n this.setSelectedSort(sortField);\n options?.additionalClickEvent?.(e);\n }}\n class=${isSelected() ? 'selected' : ''}\n >\n ${displayName}\n </a>\n `;\n }\n\n private get mobileSortSelectorTemplate() {\n return html`\n <select\n id=\"mobile-sort-selector\"\n @change=${this.mobileSortChanged}\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${Object.keys(SortField).map(\n field => html`\n <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n ${SortFieldDisplayName[field as SortField]}\n </option>\n `\n )}\n </select>\n `;\n }\n\n private mobileSortChanged(e: Event) {\n const target = e.target as HTMLSelectElement;\n this.setSelectedSort(target.value as SortField);\n }\n\n private get displayOptionTemplate() {\n return html`\n <ul>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'grid';\n }}\n class=${this.displayMode === 'grid' ? 'active' : ''}\n >\n ${tileIcon}\n </button>\n </li>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'list-detail';\n }}\n class=${this.displayMode === 'list-detail' ? 'active' : ''}\n >\n ${listIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-button\"\n @click=${() => {\n this.displayMode = 'list-compact';\n }}\n class=${this.displayMode === 'list-compact' ? 'active' : ''}\n >\n ${compactIcon}\n </button>\n </li>\n </ul>\n `;\n }\n\n private get dateSortSelector() {\n return html`\n <div id=\"date-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.datearchived)}</li>\n <li>${this.getDateSortButton(SortField.datepublished)}</li>\n <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n <li>${this.getDateSortButton(SortField.dateadded)}</li>\n </ul>\n </div>\n `;\n }\n\n private getDateSortButton(sortField: SortField) {\n return html`\n <button\n @click=${() => {\n this.selectDateSort(sortField);\n }}\n >\n ${SortFieldDisplayName[sortField]}\n </button>\n `;\n }\n\n private selectDateSort(sortField: SortField) {\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private setSortDirections(sortDirection: 'asc' | 'desc') {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n this.emitSortChangedEvent();\n }\n\n /**\n * There are four date sort options.\n *\n * This checks to see if the current sort is one of them.\n *\n * @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n */\n private get dateOptionSelected(): boolean {\n return [\n 'datearchived',\n 'datepublished',\n 'datereviewed',\n 'dateadded',\n ].includes(this.selectedSort);\n }\n\n /**\n * The display name of the current date field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get dateSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.datearchived];\n return this.dateOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n const event = new CustomEvent('titleLetterChanged', {\n detail: { selectedLetter: e.detail.selectedLetter },\n });\n this.dispatchEvent(event);\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n const event = new CustomEvent('creatorLetterChanged', {\n detail: { selectedLetter: e.detail.selectedLetter },\n });\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: 'asc' | 'desc' | null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static styles = css`\n #sort-bar {\n display: flex;\n justify-content: space-between;\n border: 1px solid rgb(232, 232, 232);\n align-items: center;\n padding: 0.5rem 1.5rem;\n }\n\n #sort-direction-container {\n flex: 0;\n }\n\n #sort-by-text {\n text-transform: uppercase;\n }\n\n #bottom-shadow {\n height: 1px;\n width: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n background-color: #bbb;\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n }\n\n li {\n padding: 0;\n }\n\n .sort-button {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: inherit;\n width: 12px;\n height: 12px;\n opacity: 0.5;\n }\n\n .sort-button.selected {\n opacity: 1;\n }\n\n .sort-button:disabled {\n opacity: 0.25;\n cursor: default;\n }\n\n #show-details {\n text-transform: uppercase;\n cursor: pointer;\n display: flex;\n }\n\n #show-details input {\n margin-right: 0.5rem;\n flex: 0 0 12px;\n }\n\n #sort-descending-btn {\n transform: rotate(180deg);\n }\n\n #sort-direction-selector {\n display: flex;\n flex-direction: column;\n gap: 3px;\n margin-right: 1rem;\n }\n\n #sort-selector-container {\n flex: 1;\n }\n\n /*\n we move the desktop sort selector offscreen instead of display: none\n because we need to observe the width of it vs its container to determine\n if it's wide enough to display the desktop version and if you displY: none,\n the width becomes 0\n */\n #desktop-sort-selector.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n\n #mobile-sort-selector.hidden {\n display: none;\n }\n\n #desktop-sort-selector {\n display: inline-flex;\n }\n\n #desktop-sort-selector li {\n display: flex;\n align-items: center;\n }\n\n #desktop-sort-selector li a {\n text-decoration: none;\n text-transform: uppercase;\n font-size: 1.4rem;\n color: #333;\n }\n\n #desktop-sort-selector li a.selected {\n font-weight: bold;\n }\n\n #desktop-sort-selector li::after {\n content: '•';\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n #desktop-sort-selector li:first-child::after {\n content: '';\n }\n\n #desktop-sort-selector li:last-child::after {\n content: '';\n }\n\n #display-style-selector {\n flex: 0;\n }\n\n #display-style-selector button {\n background: none;\n color: inherit;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n opacity: 0.5;\n }\n\n #display-style-selector button.active {\n opacity: 1;\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n `;\n}\n"]}
1
+ {"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n SharedResizeObserverInterface,\n SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n CollectionDisplayMode,\n SortField,\n SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n extends LitElement\n implements SharedResizeObserverResizeHandlerInterface\n{\n @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n @property({ type: String }) sortDirection: 'asc' | 'desc' | null = null;\n\n @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n @property({ type: String }) selectedTitleFilter: string | null = null;\n\n @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n @property({ type: Boolean }) showRelevance: boolean = true;\n\n @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n @state() titleSelectorVisible: boolean = false;\n\n @state() creatorSelectorVisible: boolean = false;\n\n @state() dateSortSelectorVisible = false;\n\n @state() desktopSelectorBarWidth = 0;\n\n @state() selectorBarContainerWidth = 0;\n\n @state() hoveringOverDateSortOptions = false;\n\n @query('#desktop-sort-selector')\n private desktopSortSelector!: HTMLUListElement;\n\n @query('#sort-selector-container')\n private sortSelectorContainer!: HTMLDivElement;\n\n render() {\n return html`\n <div id=\"container\">\n ${this.titleSelectorVisible || this.selectedSort === 'title'\n ? this.titleSelectorBar\n : nothing}\n ${this.creatorSelectorVisible || this.selectedSort === 'creator'\n ? this.creatorSelectorBar\n : nothing}\n\n <div id=\"sort-bar\">\n <div id=\"sort-direction-container\">\n ${this.sortDirectionSelectorTemplate}\n </div>\n\n <div id=\"sort-selector-container\">\n ${this.mobileSortSelectorTemplate}\n ${this.desktopSortSelectorTemplate}\n </div>\n\n <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n </div>\n\n ${this.dateSortSelectorVisible && !this.mobileSelectorVisible\n ? this.dateSortSelector\n : nothing}\n\n <div id=\"bottom-shadow\"></div>\n </div>\n `;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('displayMode')) {\n this.displayModeChanged();\n }\n\n if (changed.has('selectedSort') && this.sortDirection === null) {\n this.sortDirection = 'desc';\n }\n\n if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n this.titleSelectorVisible = true;\n }\n\n if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n this.creatorSelectorVisible = true;\n }\n\n if (changed.has('resizeObserver')) {\n const oldObserver = changed.get(\n 'resizeObserver'\n ) as SharedResizeObserverInterface;\n if (oldObserver) this.disconnectResizeObserver(oldObserver);\n this.setupResizeObserver();\n }\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver) {\n this.disconnectResizeObserver(this.resizeObserver);\n }\n }\n\n private disconnectResizeObserver(\n resizeObserver: SharedResizeObserverInterface\n ) {\n resizeObserver.removeObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n resizeObserver.removeObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private setupResizeObserver() {\n if (!this.resizeObserver) return;\n this.resizeObserver.addObserver({\n target: this.sortSelectorContainer,\n handler: this,\n });\n\n this.resizeObserver.addObserver({\n target: this.desktopSortSelector,\n handler: this,\n });\n }\n\n private get mobileSelectorVisible() {\n return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n }\n\n handleResize(entry: ResizeObserverEntry): void {\n if (entry.target === this.desktopSortSelector)\n this.desktopSelectorBarWidth = entry.contentRect.width;\n else if (entry.target === this.sortSelectorContainer)\n this.selectorBarContainerWidth = entry.contentRect.width;\n }\n\n private get sortDirectionSelectorTemplate() {\n return html`\n <div id=\"sort-direction-selector\">\n <button\n id=\"sort-ascending-btn\"\n class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('asc');\n }}\n >\n ${sortIcon}\n </button>\n <button\n id=\"sort-descending-btn\"\n class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n ?disabled=${this.selectedSort === 'relevance'}\n @click=${() => {\n this.setSortDirections('desc');\n }}\n >\n ${sortIcon}\n </button>\n </div>\n `;\n }\n\n private get desktopSortSelectorTemplate() {\n return html`\n <ul\n id=\"desktop-sort-selector\"\n class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n >\n <li id=\"sort-by-text\">Sort By</li>\n <li>\n ${this.showRelevance\n ? this.getSortDisplayOption(SortField.relevance)\n : nothing}\n </li>\n <li>${this.getSortDisplayOption(SortField.views)}</li>\n <li>${this.getSortDisplayOption(SortField.title)}</li>\n <li>\n ${this.getSortDisplayOption(SortField.date, {\n clickEvent: () => {\n if (!this.dateOptionSelected)\n this.setSelectedSort(SortField.date);\n this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n },\n displayName: html`${this.dateSortField}`,\n isSelected: () => this.dateOptionSelected,\n })}\n </li>\n <li>\n ${this.getSortDisplayOption(SortField.creator, {\n clickEvent: () => {\n this.creatorSelectorVisible = !this.creatorSelectorVisible;\n },\n })}\n </li>\n </ul>\n `;\n }\n\n /**\n * This generates each of the sort option links.\n *\n * It manages the display value and the selected state of the option.\n *\n * @param sortField\n * @param options {\n * additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.\n * displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n * isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n * }\n * @returns\n */\n private getSortDisplayOption(\n sortField: SortField,\n options?: {\n clickEvent?: (e: Event) => void;\n isSelected?: () => boolean;\n displayName?: TemplateResult;\n }\n ): TemplateResult {\n const isSelected =\n options?.isSelected ?? (() => this.selectedSort === sortField);\n const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n return html`\n <a\n href=\"#\"\n @click=${(e: Event) => {\n e.preventDefault();\n if (options?.clickEvent) {\n options.clickEvent(e);\n } else {\n this.setSelectedSort(sortField);\n }\n }}\n class=${isSelected() ? 'selected' : ''}\n >\n ${displayName}\n </a>\n `;\n }\n\n private get mobileSortSelectorTemplate() {\n return html`\n <select\n id=\"mobile-sort-selector\"\n @change=${this.mobileSortChanged}\n class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n >\n ${Object.keys(SortField).map(\n field => html`\n <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n ${SortFieldDisplayName[field as SortField]}\n </option>\n `\n )}\n </select>\n `;\n }\n\n private mobileSortChanged(e: Event) {\n const target = e.target as HTMLSelectElement;\n this.setSelectedSort(target.value as SortField);\n }\n\n private get displayOptionTemplate() {\n return html`\n <ul>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'grid';\n }}\n class=${this.displayMode === 'grid' ? 'active' : ''}\n >\n ${tileIcon}\n </button>\n </li>\n <li>\n <button\n id=\"grid-button\"\n @click=${() => {\n this.displayMode = 'list-detail';\n }}\n class=${this.displayMode === 'list-detail' ? 'active' : ''}\n >\n ${listIcon}\n </button>\n </li>\n <li>\n <button\n id=\"list-button\"\n @click=${() => {\n this.displayMode = 'list-compact';\n }}\n class=${this.displayMode === 'list-compact' ? 'active' : ''}\n >\n ${compactIcon}\n </button>\n </li>\n </ul>\n `;\n }\n\n private get dateSortSelector() {\n return html`\n <div id=\"date-sort-selector\">\n <ul>\n <li>${this.getDateSortButton(SortField.datearchived)}</li>\n <li>${this.getDateSortButton(SortField.date)}</li>\n <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n <li>${this.getDateSortButton(SortField.dateadded)}</li>\n </ul>\n </div>\n `;\n }\n\n private getDateSortButton(sortField: SortField) {\n return html`\n <button\n @click=${() => {\n this.selectDateSort(sortField);\n }}\n class=${this.selectedSort === sortField ? 'selected' : ''}\n >\n ${SortFieldDisplayName[sortField]}\n </button>\n `;\n }\n\n private selectDateSort(sortField: SortField) {\n this.dateSortSelectorVisible = false;\n this.setSelectedSort(sortField);\n }\n\n private setSortDirections(sortDirection: 'asc' | 'desc') {\n this.sortDirection = sortDirection;\n this.emitSortChangedEvent();\n }\n\n private setSelectedSort(sort: SortField) {\n this.selectedSort = sort;\n this.emitSortChangedEvent();\n }\n\n /**\n * There are four date sort options.\n *\n * This checks to see if the current sort is one of them.\n *\n * @readonly\n * @private\n * @type {boolean}\n * @memberof SortFilterBar\n */\n private get dateOptionSelected(): boolean {\n const dateSortFields: SortField[] = [\n SortField.datearchived,\n SortField.date,\n SortField.datereviewed,\n SortField.dateadded,\n ];\n return dateSortFields.includes(this.selectedSort);\n }\n\n /**\n * The display name of the current date field\n *\n * @readonly\n * @private\n * @type {string}\n * @memberof SortFilterBar\n */\n private get dateSortField(): string {\n const defaultSort = SortFieldDisplayName[SortField.date];\n const name = this.dateOptionSelected\n ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n : defaultSort;\n return name;\n }\n\n private get titleSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedTitleFilter}\n @letterChanged=${this.titleLetterChanged}\n ></alpha-bar>`;\n }\n\n private get creatorSelectorBar() {\n return html` <alpha-bar\n .selectedLetter=${this.selectedCreatorFilter}\n @letterChanged=${this.creatorLetterChanged}\n ></alpha-bar>`;\n }\n\n private titleLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n const event = new CustomEvent('titleLetterChanged', {\n detail: { selectedLetter: e.detail.selectedLetter },\n });\n this.dispatchEvent(event);\n }\n\n private creatorLetterChanged(\n e: CustomEvent<{ selectedLetter: string | undefined }>\n ) {\n const event = new CustomEvent('creatorLetterChanged', {\n detail: { selectedLetter: e.detail.selectedLetter },\n });\n this.dispatchEvent(event);\n }\n\n private displayModeChanged() {\n const event = new CustomEvent('displayModeChanged', {\n detail: { displayMode: this.displayMode },\n });\n this.dispatchEvent(event);\n }\n\n private emitSortChangedEvent() {\n const event = new CustomEvent<{\n selectedSort: SortField;\n sortDirection: 'asc' | 'desc' | null;\n }>('sortChanged', {\n detail: {\n selectedSort: this.selectedSort,\n sortDirection: this.sortDirection,\n },\n });\n this.dispatchEvent(event);\n }\n\n static styles = css`\n #container {\n position: relative;\n }\n\n #sort-bar {\n display: flex;\n justify-content: space-between;\n border: 1px solid rgb(232, 232, 232);\n align-items: center;\n padding: 0.5rem 1.5rem;\n }\n\n #sort-direction-container {\n flex: 0;\n }\n\n #sort-by-text {\n text-transform: uppercase;\n }\n\n #bottom-shadow {\n height: 1px;\n width: 100%;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n background-color: #bbb;\n }\n\n ul {\n list-style: none;\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n }\n\n li {\n padding: 0;\n }\n\n .sort-button {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: inherit;\n width: 12px;\n height: 12px;\n opacity: 0.5;\n }\n\n .sort-button.selected {\n opacity: 1;\n }\n\n .sort-button:disabled {\n opacity: 0.25;\n cursor: default;\n }\n\n #date-sort-selector {\n position: absolute;\n left: 150px;\n top: 40px;\n\n z-index: 1;\n padding: 1rem;\n background-color: rgba(255, 255, 255, 0.75);\n border-radius: 2.5rem;\n border: 1px solid #404142;\n }\n\n #date-sort-selector button {\n background: none;\n border-radius: 15px;\n color: #404142;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n font-size: 1.4rem;\n font-weight: 400;\n padding: 0.5rem 1.2rem;\n }\n\n #date-sort-selector button.selected {\n background-color: #404142;\n color: white;\n }\n\n #show-details {\n text-transform: uppercase;\n cursor: pointer;\n display: flex;\n }\n\n #show-details input {\n margin-right: 0.5rem;\n flex: 0 0 12px;\n }\n\n #sort-descending-btn {\n transform: rotate(180deg);\n }\n\n #sort-direction-selector {\n display: flex;\n flex-direction: column;\n gap: 3px;\n margin-right: 1rem;\n }\n\n #sort-selector-container {\n flex: 1;\n }\n\n /*\n we move the desktop sort selector offscreen instead of display: none\n because we need to observe the width of it vs its container to determine\n if it's wide enough to display the desktop version and if you displY: none,\n the width becomes 0\n */\n #desktop-sort-selector.hidden {\n position: absolute;\n top: -9999px;\n left: -9999px;\n }\n\n #mobile-sort-selector.hidden {\n display: none;\n }\n\n #desktop-sort-selector {\n display: inline-flex;\n }\n\n #desktop-sort-selector li {\n display: flex;\n align-items: center;\n }\n\n #desktop-sort-selector li a {\n text-decoration: none;\n text-transform: uppercase;\n font-size: 1.4rem;\n color: #333;\n line-height: 2.5;\n }\n\n #desktop-sort-selector li a.selected {\n font-weight: bold;\n }\n\n #desktop-sort-selector li::after {\n content: '•';\n padding-left: 1rem;\n padding-right: 1rem;\n }\n\n #desktop-sort-selector li:first-child::after {\n content: '';\n }\n\n #desktop-sort-selector li:last-child::after {\n content: '';\n }\n\n #display-style-selector {\n flex: 0;\n }\n\n #display-style-selector button {\n background: none;\n color: inherit;\n border: none;\n appearance: none;\n cursor: pointer;\n -webkit-appearance: none;\n opacity: 0.5;\n }\n\n #display-style-selector button.active {\n opacity: 1;\n }\n\n #display-style-selector button svg {\n width: 24px;\n height: 24px;\n }\n `;\n}\n"]}
package/dist/src/tiles/list/tile-list.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare class TileList extends LitElement {
13
13
  mobileBreakpoint?: number;
14
14
  render(): import("lit-html").TemplateResult<1>;
15
15
  private get imgTemplate();
16
- private get iconLeftTemplate();
16
+ private get iconRightTemplate();
17
17
  private get titleTemplate();
18
18
  private get itemLineTemplate();
19
19
  private get volumeTemplate();
package/dist/src/tiles/list/tile-list.js CHANGED
@@ -19,10 +19,12 @@ let TileList = class TileList extends LitElement {
19
19
  <div id="list-line" class="${this.classSize}">
20
20
  <div id="list-line-left">
21
21
  <div id="thumb">${this.imgTemplate}</div>
22
- ${this.iconLeftTemplate}
23
22
  </div>
24
23
  <div id="list-line-right">
25
- <div id="title">${this.titleTemplate}</div>
24
+ <div id="title-line">
25
+ <div id="title">${this.titleTemplate}</div>
26
+ ${this.iconRightTemplate}
27
+ </div>
26
28
  ${this.itemLineTemplate} ${this.creatorTemplate}
27
29
  <div id="dates-line">
28
30
  ${this.datePublishedTemplate} ${this.dateSortByTemplate}
@@ -48,14 +50,18 @@ let TileList = class TileList extends LitElement {
48
50
  class=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}
49
51
  />`;
50
52
  }
51
- get iconLeftTemplate() {
52
- var _a;
53
+ get iconRightTemplate() {
54
+ var _a, _b;
53
55
  if (this.classSize !== 'desktop') {
54
56
  return nothing;
55
57
  }
56
58
  return html `
57
- <div id="icon-left">
58
- <mediatype-icon .mediatype=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype} .showText=${true}>
59
+ <div id="icon-right">
60
+ <mediatype-icon
61
+ .mediatype=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}
62
+ .collections=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.collections}
63
+ .showText=${false}
64
+ >
59
65
  </mediatype-icon>
60
66
  </div>
61
67
  `;
@@ -314,11 +320,14 @@ let TileList = class TileList extends LitElement {
314
320
  -moz-border-radius: 50px;
315
321
  }
316
322
 
317
- #icon-left {
323
+ #icon-right {
324
+ width: 20px;
318
325
  padding-top: 5px;
319
326
  --iconHeight: 20px;
320
327
  --iconWidth: 20px;
321
- text-align: center;
328
+ --iconTextAlign: right;
329
+ margin-top: -10px;
330
+ text-align: right;
322
331
  }
323
332
 
324
333
  #title {
@@ -330,6 +339,7 @@ let TileList = class TileList extends LitElement {
330
339
  line-height: 25px;
331
340
  margin-top: -4px;
332
341
  padding-bottom: 2px;
342
+ flex-grow: 1;
333
343
  }
334
344
 
335
345
  .metadata {
@@ -375,6 +385,10 @@ let TileList = class TileList extends LitElement {
375
385
  column-gap: 5px;
376
386
  }
377
387
 
388
+ #list-line-right {
389
+ width: 100%;
390
+ }
391
+
378
392
  div a:hover {
379
393
  text-decoration: underline;
380
394
  }
@@ -382,7 +396,8 @@ let TileList = class TileList extends LitElement {
382
396
  /* Lines containing multiple div as row */
383
397
  #item-line,
384
398
  #dates-line,
385
- #views-line {
399
+ #views-line,
400
+ #title-line {
386
401
  display: flex;
387
402
  flex-direction: row;
388
403
  gap: 10px;
package/dist/src/tiles/list/tile-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { dateLabel } from './date-label';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <div id=\"list-line-left\">\n <div id=\"thumb\">${this.imgTemplate}</div>\n ${this.iconLeftTemplate}\n </div>\n <div id=\"list-line-right\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate}\n </div>\n </div>\n `;\n }\n\n // Display templates\n private get imgTemplate() {\n if (!this.model?.identifier) {\n return nothing;\n }\n return html` <img\n src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n alt=\"${this.model.identifier}\"\n class=${this.model?.mediatype}\n />`;\n }\n\n private get iconLeftTemplate() {\n if (this.classSize !== 'desktop') {\n return nothing;\n }\n return html`\n <div id=\"icon-left\">\n <mediatype-icon .mediatype=${this.model?.mediatype} .showText=${true}>\n </mediatype-icon>\n </div>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get creatorTemplate() {\n if (!this.model?.creators || this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' ||\n this.sortParam.field === 'reviewdate' ||\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n return this.metadataTemplate(\n `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects || this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.model?.collections) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections', true)}\n ${join(\n map(this.model.collections, id => this.collectionLink(id)),\n html`,&nbsp;`\n )}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n DOMPurify.sanitize(this.model?.description ?? ''),\n '',\n 'description'\n );\n }\n\n // Utility functions\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string, isFlex = false) {\n // Note nobreak space needed to use display:flex\n // in parent element when making , delimnited list\n // to remove space between text and ,\n return html`${label\n ? html`<span class=\"label\">${label}:${isFlex ? html`&nbsp;` : ` `}</span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field || !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n // eslint-disable-next-line lit/no-invalid-html\n return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n }\n\n private detailsLink(identifier: string, text?: string) {\n if (!identifier) {\n return nothing;\n }\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n return html`<a href=\"${this.baseNavigationUrl}/details/${identifier}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n private collectionLink(identifier: string) {\n if (!identifier) {\n return nothing;\n }\n // No whitespace after closing tag\n return html`<a href=\"${this.baseNavigationUrl}/details/${identifier}\"\n >${this.collectionName(identifier)}</a\n >`;\n }\n\n private collectionName(identifier: string) {\n return html`<async-collection-name\n .collectionNameCache=${this.collectionNameCache}\n .identifier=${identifier}\n ></async-collection-name>`;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat | NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n .label {\n font-weight: bold;\n }\n\n .mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n .desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n /* fields */\n\n #thumb img {\n object-fit: cover;\n display: block;\n }\n\n .mobile #thumb img {\n width: 90px;\n height: 90px;\n }\n\n .desktop #thumb img {\n width: 100px;\n height: 100px;\n }\n\n #thumb img.collection {\n border-radius: 8px;\n -webkit-border-radius: 8px;\n -moz-border-radius: 8px;\n }\n\n .mobile #thumb img.account {\n border-radius: 45px;\n -webkit-border-radius: 45px;\n -moz-border-radius: 45px;\n }\n\n .desktop #thumb img.account {\n border-radius: 50px;\n -webkit-border-radius: 50px;\n -moz-border-radius: 50px;\n }\n\n #icon-left {\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n text-align: center;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n /* align top of text with image */\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #creator,\n #topic,\n #source {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #collections {\n /*\n Hack to collapse line whitespace between text and ,\n Use &nbsp; for required spaces\n */\n display: flex;\n }\n\n #description {\n padding-top: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; /* number of lines to show */\n line-clamp: 3;\n -webkit-box-orient: vertical;\n text-align: left;\n }\n\n /* Top level container */\n #list-line {\n display: flex;\n column-gap: 5px;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n /* Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { dateLabel } from './date-label';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam | null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <div id=\"list-line-left\">\n <div id=\"thumb\">${this.imgTemplate}</div>\n </div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate}\n </div>\n </div>\n `;\n }\n\n // Display templates\n private get imgTemplate() {\n if (!this.model?.identifier) {\n return nothing;\n }\n return html` <img\n src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n alt=\"${this.model.identifier}\"\n class=${this.model?.mediatype}\n />`;\n }\n\n private get iconRightTemplate() {\n if (this.classSize !== 'desktop') {\n return nothing;\n }\n return html`\n <div id=\"icon-right\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n .showText=${false}\n >\n </mediatype-icon>\n </div>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get creatorTemplate() {\n if (!this.model?.creators || this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' ||\n this.sortParam.field === 'reviewdate' ||\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n return this.metadataTemplate(\n `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects || this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.model?.collections) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections', true)}\n ${join(\n map(this.model.collections, id => this.collectionLink(id)),\n html`,&nbsp;`\n )}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n DOMPurify.sanitize(this.model?.description ?? ''),\n '',\n 'description'\n );\n }\n\n // Utility functions\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string, isFlex = false) {\n // Note nobreak space needed to use display:flex\n // in parent element when making , delimnited list\n // to remove space between text and ,\n return html`${label\n ? html`<span class=\"label\">${label}:${isFlex ? html`&nbsp;` : ` `}</span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field || !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n // eslint-disable-next-line lit/no-invalid-html\n return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n }\n\n private detailsLink(identifier: string, text?: string) {\n if (!identifier) {\n return nothing;\n }\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n return html`<a href=\"${this.baseNavigationUrl}/details/${identifier}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n private collectionLink(identifier: string) {\n if (!identifier) {\n return nothing;\n }\n // No whitespace after closing tag\n return html`<a href=\"${this.baseNavigationUrl}/details/${identifier}\"\n >${this.collectionName(identifier)}</a\n >`;\n }\n\n private collectionName(identifier: string) {\n return html`<async-collection-name\n .collectionNameCache=${this.collectionNameCache}\n .identifier=${identifier}\n ></async-collection-name>`;\n }\n\n /*\n * TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n */\n private get date(): Date | undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat | NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n .label {\n font-weight: bold;\n }\n\n .mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n .desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n /* fields */\n\n #thumb img {\n object-fit: cover;\n display: block;\n }\n\n .mobile #thumb img {\n width: 90px;\n height: 90px;\n }\n\n .desktop #thumb img {\n width: 100px;\n height: 100px;\n }\n\n #thumb img.collection {\n border-radius: 8px;\n -webkit-border-radius: 8px;\n -moz-border-radius: 8px;\n }\n\n .mobile #thumb img.account {\n border-radius: 45px;\n -webkit-border-radius: 45px;\n -moz-border-radius: 45px;\n }\n\n .desktop #thumb img.account {\n border-radius: 50px;\n -webkit-border-radius: 50px;\n -moz-border-radius: 50px;\n }\n\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -10px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n /* align top of text with image */\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #creator,\n #topic,\n #source {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #collections {\n /*\n Hack to collapse line whitespace between text and ,\n Use &nbsp; for required spaces\n */\n display: flex;\n }\n\n #description {\n padding-top: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; /* number of lines to show */\n line-clamp: 3;\n -webkit-box-orient: vertical;\n text-align: left;\n }\n\n /* Top level container */\n #list-line {\n display: flex;\n column-gap: 5px;\n }\n\n #list-line-right {\n width: 100%;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n /* Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n `;\n }\n}\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": "0.0.1-alpha.34",
6
+ "version": "0.0.1-alpha.35",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.js",
9
9
  "scripts": {
package/src/mediatype-icon.ts CHANGED
@@ -98,7 +98,7 @@ export class MediatypeIcon extends LitElement {
98
98
  color: #2c2c2c;
99
99
  margin: auto;
100
100
  display: block;
101
- text-align: center;
101
+ text-align: var(--iconTextAlign, center);
102
102
  }
103
103
 
104
104
  #icon.hide-text p {
package/src/models.ts CHANGED
@@ -48,7 +48,7 @@ export enum SortField {
48
48
  'views' = 'views',
49
49
  'title' = 'title',
50
50
  'datearchived' = 'datearchived',
51
- 'datepublished' = 'datepublished',
51
+ 'date' = 'date',
52
52
  'datereviewed' = 'datereviewed',
53
53
  'dateadded' = 'dateadded',
54
54
  'creator' = 'creator',
@@ -73,7 +73,7 @@ export const SortFieldDisplayName: {
73
73
  views: 'Views',
74
74
  title: 'Title',
75
75
  datearchived: 'Date Archived',
76
- datepublished: 'Date Published',
76
+ date: 'Date Published',
77
77
  datereviewed: 'Date Reviewed',
78
78
  dateadded: 'Date Added',
79
79
  creator: 'Creator',
@@ -89,7 +89,7 @@ export const SortFieldToMetadataField: {
89
89
  views: 'week',
90
90
  title: 'titleSorter',
91
91
  datearchived: 'publicdate',
92
- datepublished: 'date',
92
+ date: 'date',
93
93
  datereviewed: 'reviewdate',
94
94
  dateadded: 'addeddate',
95
95
  creator: 'creatorSorter',
@@ -102,7 +102,7 @@ export const MetadataFieldToSortField: {
102
102
  [key in MetadataSortField]: SortField;
103
103
  } = {
104
104
  titleSorter: SortField.title,
105
- date: SortField.datepublished,
105
+ date: SortField.date,
106
106
  publicdate: SortField.datearchived,
107
107
  reviewdate: SortField.datereviewed,
108
108
  addeddate: SortField.dateadded,
package/src/restoration-state-handler.ts CHANGED
@@ -92,18 +92,19 @@ export class RestorationStateHandler
92
92
  searchParams.delete('not[]');
93
93
 
94
94
  if (state.sortParam) {
95
- url.searchParams.set('sort', state.sortParam.asString);
95
+ const prefix = state.sortParam.direction === 'desc' ? '-' : '';
96
+ searchParams.set('sort', `${prefix}${state.sortParam.field}`);
96
97
  }
97
98
 
98
99
  if (state.baseQuery) {
99
- url.searchParams.set('query', state.baseQuery);
100
+ searchParams.set('query', state.baseQuery);
100
101
  }
101
102
 
102
103
  if (state.currentPage) {
103
104
  if (state.currentPage > 1) {
104
- url.searchParams.set('page', state.currentPage.toString());
105
+ searchParams.set('page', state.currentPage.toString());
105
106
  } else {
106
- url.searchParams.delete('page');
107
+ searchParams.delete('page');
107
108
  }
108
109
  }
109
110
 
@@ -118,22 +119,22 @@ export class RestorationStateHandler
118
119
  const notValue = facetState === 'hidden';
119
120
  const paramValue = `${facetName}:${key}`;
120
121
  if (notValue) {
121
- url.searchParams.append('not[]', paramValue);
122
+ searchParams.append('not[]', paramValue);
122
123
  } else {
123
- url.searchParams.append('and[]', paramValue);
124
+ searchParams.append('and[]', paramValue);
124
125
  }
125
126
  }
126
127
  }
127
128
  }
128
129
 
129
130
  if (state.dateRangeQueryClause) {
130
- url.searchParams.append('and[]', state.dateRangeQueryClause);
131
+ searchParams.append('and[]', state.dateRangeQueryClause);
131
132
  }
132
133
  if (state.titleQuery) {
133
- url.searchParams.append('and[]', state.titleQuery);
134
+ searchParams.append('and[]', state.titleQuery);
134
135
  }
135
136
  if (state.creatorQuery) {
136
- url.searchParams.append('and[]', state.creatorQuery);
137
+ searchParams.append('and[]', state.creatorQuery);
137
138
  }
138
139
 
139
140
  window.history.pushState(
@@ -179,14 +180,27 @@ export class RestorationStateHandler
179
180
  restorationState.baseQuery = searchQuery;
180
181
  }
181
182
  if (sortQuery) {
182
- const [field, direction] = sortQuery.split(' ');
183
- const metadataField =
184
- MetadataFieldToSortField[field as MetadataSortField];
185
- if (metadataField) {
186
- restorationState.selectedSort = metadataField;
187
- }
188
- if (direction === 'desc' || direction === 'asc') {
189
- restorationState.sortDirection = direction as SortDirection;
183
+ // check for two different sort formats: `date desc` and `-date`
184
+ const hasSpace = sortQuery.indexOf(' ') > -1;
185
+ if (hasSpace) {
186
+ const [field, direction] = sortQuery.split(' ');
187
+ const metadataField =
188
+ MetadataFieldToSortField[field as MetadataSortField];
189
+ if (metadataField) {
190
+ restorationState.selectedSort = metadataField;
191
+ }
192
+ if (direction === 'desc' || direction === 'asc') {
193
+ restorationState.sortDirection = direction as SortDirection;
194
+ }
195
+ } else {
196
+ const sortDirection = sortQuery.startsWith('-') ? 'desc' : 'asc';
197
+ const sortField = sortQuery.startsWith('-')
198
+ ? sortQuery.slice(1)
199
+ : sortQuery;
200
+ const metadataField =
201
+ MetadataFieldToSortField[sortField as MetadataSortField];
202
+ if (metadataField) restorationState.selectedSort = metadataField;
203
+ restorationState.sortDirection = sortDirection as SortDirection;
190
204
  }
191
205
  }
192
206
  if (facetAnds) {
package/src/sort-filter-bar/sort-filter-bar.ts CHANGED
@@ -52,6 +52,8 @@ export class SortFilterBar
52
52
 
53
53
  @state() selectorBarContainerWidth = 0;
54
54
 
55
+ @state() hoveringOverDateSortOptions = false;
56
+
55
57
  @query('#desktop-sort-selector')
56
58
  private desktopSortSelector!: HTMLUListElement;
57
59
 
@@ -81,7 +83,9 @@ export class SortFilterBar
81
83
  <div id="display-style-selector">${this.displayOptionTemplate}</div>
82
84
  </div>
83
85
 
84
- ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}
86
+ ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
87
+ ? this.dateSortSelector
88
+ : nothing}
85
89
 
86
90
  <div id="bottom-shadow"></div>
87
91
  </div>
@@ -200,8 +204,10 @@ export class SortFilterBar
200
204
  <li>${this.getSortDisplayOption(SortField.views)}</li>
201
205
  <li>${this.getSortDisplayOption(SortField.title)}</li>
202
206
  <li>
203
- ${this.getSortDisplayOption(SortField.datearchived, {
204
- additionalClickEvent: () => {
207
+ ${this.getSortDisplayOption(SortField.date, {
208
+ clickEvent: () => {
209
+ if (!this.dateOptionSelected)
210
+ this.setSelectedSort(SortField.date);
205
211
  this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
206
212
  },
207
213
  displayName: html`${this.dateSortField}`,
@@ -210,7 +216,7 @@ export class SortFilterBar
210
216
  </li>
211
217
  <li>
212
218
  ${this.getSortDisplayOption(SortField.creator, {
213
- additionalClickEvent: () => {
219
+ clickEvent: () => {
214
220
  this.creatorSelectorVisible = !this.creatorSelectorVisible;
215
221
  },
216
222
  })}
@@ -235,7 +241,7 @@ export class SortFilterBar
235
241
  private getSortDisplayOption(
236
242
  sortField: SortField,
237
243
  options?: {
238
- additionalClickEvent?: (e: Event) => void;
244
+ clickEvent?: (e: Event) => void;
239
245
  isSelected?: () => boolean;
240
246
  displayName?: TemplateResult;
241
247
  }
@@ -248,8 +254,11 @@ export class SortFilterBar
248
254
  href="#"
249
255
  @click=${(e: Event) => {
250
256
  e.preventDefault();
251
- this.setSelectedSort(sortField);
252
- options?.additionalClickEvent?.(e);
257
+ if (options?.clickEvent) {
258
+ options.clickEvent(e);
259
+ } else {
260
+ this.setSelectedSort(sortField);
261
+ }
253
262
  }}
254
263
  class=${isSelected() ? 'selected' : ''}
255
264
  >
@@ -326,7 +335,7 @@ export class SortFilterBar
326
335
  <div id="date-sort-selector">
327
336
  <ul>
328
337
  <li>${this.getDateSortButton(SortField.datearchived)}</li>
329
- <li>${this.getDateSortButton(SortField.datepublished)}</li>
338
+ <li>${this.getDateSortButton(SortField.date)}</li>
330
339
  <li>${this.getDateSortButton(SortField.datereviewed)}</li>
331
340
  <li>${this.getDateSortButton(SortField.dateadded)}</li>
332
341
  </ul>
@@ -340,6 +349,7 @@ export class SortFilterBar
340
349
  @click=${() => {
341
350
  this.selectDateSort(sortField);
342
351
  }}
352
+ class=${this.selectedSort === sortField ? 'selected' : ''}
343
353
  >
344
354
  ${SortFieldDisplayName[sortField]}
345
355
  </button>
@@ -372,12 +382,13 @@ export class SortFilterBar
372
382
  * @memberof SortFilterBar
373
383
  */
374
384
  private get dateOptionSelected(): boolean {
375
- return [
376
- 'datearchived',
377
- 'datepublished',
378
- 'datereviewed',
379
- 'dateadded',
380
- ].includes(this.selectedSort);
385
+ const dateSortFields: SortField[] = [
386
+ SortField.datearchived,
387
+ SortField.date,
388
+ SortField.datereviewed,
389
+ SortField.dateadded,
390
+ ];
391
+ return dateSortFields.includes(this.selectedSort);
381
392
  }
382
393
 
383
394
  /**
@@ -389,10 +400,11 @@ export class SortFilterBar
389
400
  * @memberof SortFilterBar
390
401
  */
391
402
  private get dateSortField(): string {
392
- const defaultSort = SortFieldDisplayName[SortField.datearchived];
393
- return this.dateOptionSelected
403
+ const defaultSort = SortFieldDisplayName[SortField.date];
404
+ const name = this.dateOptionSelected
394
405
  ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
395
406
  : defaultSort;
407
+ return name;
396
408
  }
397
409
 
398
410
  private get titleSelectorBar() {
@@ -448,6 +460,10 @@ export class SortFilterBar
448
460
  }
449
461
 
450
462
  static styles = css`
463
+ #container {
464
+ position: relative;
465
+ }
466
+
451
467
  #sort-bar {
452
468
  display: flex;
453
469
  justify-content: space-between;
@@ -504,6 +520,36 @@ export class SortFilterBar
504
520
  cursor: default;
505
521
  }
506
522
 
523
+ #date-sort-selector {
524
+ position: absolute;
525
+ left: 150px;
526
+ top: 40px;
527
+
528
+ z-index: 1;
529
+ padding: 1rem;
530
+ background-color: rgba(255, 255, 255, 0.75);
531
+ border-radius: 2.5rem;
532
+ border: 1px solid #404142;
533
+ }
534
+
535
+ #date-sort-selector button {
536
+ background: none;
537
+ border-radius: 15px;
538
+ color: #404142;
539
+ border: none;
540
+ appearance: none;
541
+ cursor: pointer;
542
+ -webkit-appearance: none;
543
+ font-size: 1.4rem;
544
+ font-weight: 400;
545
+ padding: 0.5rem 1.2rem;
546
+ }
547
+
548
+ #date-sort-selector button.selected {
549
+ background-color: #404142;
550
+ color: white;
551
+ }
552
+
507
553
  #show-details {
508
554
  text-transform: uppercase;
509
555
  cursor: pointer;
@@ -560,6 +606,7 @@ export class SortFilterBar
560
606
  text-transform: uppercase;
561
607
  font-size: 1.4rem;
562
608
  color: #333;
609
+ line-height: 2.5;
563
610
  }
564
611
 
565
612
  #desktop-sort-selector li a.selected {
package/src/tiles/list/tile-list.ts CHANGED
@@ -34,10 +34,12 @@ export class TileList extends LitElement {
34
34
  <div id="list-line" class="${this.classSize}">
35
35
  <div id="list-line-left">
36
36
  <div id="thumb">${this.imgTemplate}</div>
37
- ${this.iconLeftTemplate}
38
37
  </div>
39
38
  <div id="list-line-right">
40
- <div id="title">${this.titleTemplate}</div>
39
+ <div id="title-line">
40
+ <div id="title">${this.titleTemplate}</div>
41
+ ${this.iconRightTemplate}
42
+ </div>
41
43
  ${this.itemLineTemplate} ${this.creatorTemplate}
42
44
  <div id="dates-line">
43
45
  ${this.datePublishedTemplate} ${this.dateSortByTemplate}
@@ -64,13 +66,17 @@ export class TileList extends LitElement {
64
66
  />`;
65
67
  }
66
68
 
67
- private get iconLeftTemplate() {
69
+ private get iconRightTemplate() {
68
70
  if (this.classSize !== 'desktop') {
69
71
  return nothing;
70
72
  }
71
73
  return html`
72
- <div id="icon-left">
73
- <mediatype-icon .mediatype=${this.model?.mediatype} .showText=${true}>
74
+ <div id="icon-right">
75
+ <mediatype-icon
76
+ .mediatype=${this.model?.mediatype}
77
+ .collections=${this.model?.collections}
78
+ .showText=${false}
79
+ >
74
80
  </mediatype-icon>
75
81
  </div>
76
82
  `;
@@ -368,11 +374,14 @@ export class TileList extends LitElement {
368
374
  -moz-border-radius: 50px;
369
375
  }
370
376
 
371
- #icon-left {
377
+ #icon-right {
378
+ width: 20px;
372
379
  padding-top: 5px;
373
380
  --iconHeight: 20px;
374
381
  --iconWidth: 20px;
375
- text-align: center;
382
+ --iconTextAlign: right;
383
+ margin-top: -10px;
384
+ text-align: right;
376
385
  }
377
386
 
378
387
  #title {
@@ -384,6 +393,7 @@ export class TileList extends LitElement {
384
393
  line-height: 25px;
385
394
  margin-top: -4px;
386
395
  padding-bottom: 2px;
396
+ flex-grow: 1;
387
397
  }
388
398
 
389
399
  .metadata {
@@ -429,6 +439,10 @@ export class TileList extends LitElement {
429
439
  column-gap: 5px;
430
440
  }
431
441
 
442
+ #list-line-right {
443
+ width: 100%;
444
+ }
445
+
432
446
  div a:hover {
433
447
  text-decoration: underline;
434
448
  }
@@ -436,7 +450,8 @@ export class TileList extends LitElement {
436
450
  /* Lines containing multiple div as row */
437
451
  #item-line,
438
452
  #dates-line,
439
- #views-line {
453
+ #views-line,
454
+ #title-line {
440
455
  display: flex;
441
456
  flex-direction: row;
442
457
  gap: 10px;