@internetarchive/ia-item-navigator 2.0.2-a1 → 2.0.2-a2
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -236,8 +236,8 @@ let IauxViewableFiles = class IauxViewableFiles extends LitElement {
|
|
|
236
236
|
if (this.addSortToUrl) {
|
|
237
237
|
hrefUrl =
|
|
238
238
|
this.sortOrderBy === 'default'
|
|
239
|
-
? `${baseUrl}
|
|
240
|
-
: `${baseUrl}
|
|
239
|
+
? `${baseUrl}`
|
|
240
|
+
: `${baseUrl}?sort=${this.sortOrderBy}`;
|
|
241
241
|
}
|
|
242
242
|
return hrefUrl;
|
|
243
243
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iaux-viewable-files.js","sourceRoot":"","sources":["../../../src/menus/iaux-viewable-files.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-classes-per-file */\n/* eslint-disable lit-a11y/list */\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\n// sort icons\nconst sortAscIcon = html`\n <svg\n name=\"sort-asc\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612\"\n stroke=\"#fff\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.661538\"\n transform=\"matrix(1 0 0 -1 0 18.692308)\"\n />\n </g>\n </svg>\n`;\nconst sortDescIcon = html`\n <svg\n name=\"sort-desc\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612\"\n stroke=\"#fff\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.661538\"\n />\n </g>\n </svg>\n`;\nconst sortNeutralIcon = html`\n <svg\n name=\"sort-neutral\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g fill=\"#fff\" fill-rule=\"evenodd\">\n <path\n d=\"m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z\"\n fill-rule=\"nonzero\"\n />\n <circle cx=\"13\" cy=\"9\" r=\"2\" />\n </g>\n </svg>\n`;\n\ntype sortOptions = 'title_asc' | 'title_desc' | 'default';\n\ntype ItemInfo = {\n url_path: string;\n image: string;\n title: string;\n author: string;\n file_subprefix: string;\n file_source: string;\n file_origin?: string;\n};\n\n/* icon for menu shortcut & menu icon */\nexport const viewableFilesIcon = html`\n <svg\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"volumesTitleID volumesDescID\"\n >\n <title id=\"volumesTitleID\">Viewable Files</title>\n <g fill=\"#ffffff\">\n <path\n fill=\"#ffffff\"\n d=\"m9.83536396 0h10.07241114c.1725502.47117517.3378411.76385809.4958725.87804878.1295523.11419069.3199719.1998337.5712586.25692905.2512868.05709534.4704647.08564301.6575337.08564301h.2806036v15.24362526h-4.3355343v3.8106985h-4.44275v3.7250554h-12.01318261c-.27306495 0-.50313194-.085643-.69020098-.256929-.18706903-.1712861-.30936193-.3425721-.36687867-.5138581l-.06449694-.2785477v-14.2159091c0-.32815965.08627512-.5922949.25882537-.79240577.17255024-.20011086.34510049-.32150776.51765073-.36419068l.25882537-.0640244h3.36472977v-2.54767184c0-.31374722.08627513-.57067627.25882537-.77078714.17255025-.20011086.34510049-.32150776.51765074-.36419068l.25882536-.06402439h3.36472978v-2.56929047c0-.32815964.08627512-.5922949.25882537-.79240576.17255024-.20011087.34510049-.31430156.51765073-.34257207zm10.78355264 15.6294346v-13.53076498c-.2730649-.08536585-.4456152-.16380266-.5176507-.23531042-.1725502-.1424612-.2730649-.27078714-.3015441-.38497783v13.36031043h-9.87808272c0 .0144124-.02149898.0144124-.06449694 0-.04299795-.0144124-.08962561.006929-.13988296.0640244-.05025735.0570953-.07538603.1427383-.07538603.256929s.02149898.210643.06449694.289357c.04299795.078714.08599591.1322062.12899387.1604767l.06449693.0216187h10.71905571zm-10.2449613-2.4412417h7.98003v-11.60421286h-7.98003zm1.6827837-9.41990022h4.6153002c.1725502 0 .3199718.05349224.4422647.16047672s.1834393.23891353.1834393.39578714c0 .15687362-.0611464.28519956-.1834393.38497783s-.2697145.1496674-.4422647.1496674h-4.6153002c-.1725503 0-.3199719-.04988913-.4422647-.1496674-.1222929-.09977827-.1834394-.22810421-.1834394-.38497783 0-.15687361.0611465-.28880266.1834394-.39578714.1222928-.10698448.2697144-.16047672.4422647-.16047672zm-6.08197737 13.50997782h7.72120467v-.8131929h-3.79610541c-.27306495 0-.49950224-.085643-.67931188-.256929-.17980964-.1712861-.29847284-.3425721-.35598958-.5138581l-.06449694-.2785477v-10.02023282h-2.82530086zm6.77217827-11.36890243h3.2139578c.1295522 0 .240956.05709534.3342113.17128603.0932554.11419069.139883.24972284.139883.40659645 0 .15687362-.0466276.28880267-.139883.39578714-.0932553.10698448-.2046591.16047672-.3342113.16047672h-3.2139578c-.1295523 0-.2373264-.05349224-.3233223-.16047672-.0859959-.10698447-.1289938-.23891352-.1289938-.39578714 0-.15687361.0429979-.29240576.1289938-.40659645s.19377-.17128603.3233223-.17128603zm-11.15043132 15.11557653h7.69942646v-.7491685h-3.79610539c-.25854616 0-.48135376-.0892462-.66842279-.2677384-.18706904-.1784922-.30936193-.3605876-.36687868-.546286l-.06449694-.2569291v-10.04101994h-2.80352266zm14.62237682-4.5606985h-.8191949v2.1410754h-9.89986085s-.04299796.0285477-.12899387.085643c-.08599592.0570954-.12201369.1427384-.10805331.2569291 0 .1141907.01786928.210643.05360784.289357.03573856.0787139.07538603.125.1189424.138858l.06449694.0432373h10.71905575v-2.9542683zm-4.3991936 3.8106985h-.8191949v2.077051h-9.8563045c0 .0144124-.02149898.0144124-.06449694 0-.04299795-.0144125-.08962561.0105321-.13988296.0748337-.05025735.0643015-.07538603.1607538-.07538603.289357 0 .1141906.02149898.2070399.06449694.2785476.04299795.0715078.08599591.1141907.12899387.1280488l.06449693.0216186h10.69811519v-2.8686252z\"\n />\n </g>\n </svg>\n`;\n\n/* <iaux-sort-viewable-files> side panel header button */\n@customElement('iaux-sort-viewable-files')\nexport class IauxSortFilesButton extends LitElement {\n @property({ type: Array }) fileListRaw: any[] = [];\n\n @property({ type: Array }) fileListSorted: any[] = [];\n\n @property({ type: String, reflect: true }) sortOrderBy: sortOptions =\n 'default';\n\n render() {\n return html`<div class=\"sort-multi-file-list\">${this.sortButton}</div>`;\n }\n\n get sortButton() {\n const sortIcons = {\n default: html`\n <button\n class=\"sort-by neutral-icon\"\n aria-label=\"Sort volumes in initial order\"\n @click=${() => this.sortVolumes('title_asc')}\n >\n ${sortNeutralIcon}\n </button>\n `,\n title_asc: html`\n <button\n class=\"sort-by asc-icon\"\n aria-label=\"Sort volumes in ascending order\"\n @click=${() => this.sortVolumes('title_desc')}\n >\n ${sortAscIcon}\n </button>\n `,\n title_desc: html`\n <button\n class=\"sort-by desc-icon\"\n aria-label=\"Sort volumes in descending order\"\n @click=${() => this.sortVolumes('default')}\n >\n ${sortDescIcon}\n </button>\n `,\n };\n\n return sortIcons[this.sortOrderBy];\n }\n\n sortVolumes(sortType: sortOptions) {\n this.sortOrderBy = sortType;\n let sortedFiles = [];\n\n sortedFiles = this.fileListRaw.sort((a, b) => {\n if (sortType === 'title_asc') return a.title.localeCompare(b.title);\n if (sortType === 'title_desc') return b.title.localeCompare(a.title);\n return a.orig_sort - b.orig_sort;\n });\n\n this.dispatchEvent(\n new CustomEvent('fileListSorted', {\n detail: {\n sortType,\n sortedFiles,\n },\n bubbles: true,\n composed: true,\n }),\n );\n this.fileListSorted = sortedFiles;\n }\n\n static get styles() {\n return css`\n button.sort-by {\n padding: 0px;\n background-color: transparent;\n border: 0px;\n --iconWidth: var(--menuSliderHeaderIconWidth);\n --iconHeight: var(--menuSliderHeaderIconHeight);\n }\n `;\n }\n}\n\n/* <iaux-viewable-files> side panel menu */\n@customElement('iaux-viewable-files')\nexport class IauxViewableFiles extends LitElement {\n @property({ type: String }) baseHost: string = 'archive.org';\n\n @property({ type: String }) sortOrderBy:\n | 'default'\n | 'title_asc'\n | 'title_desc' = 'default';\n\n @property({ type: String }) subPrefix: string = '';\n\n @property({ type: Array }) fileList: any[] = [];\n\n @property({ type: Boolean, reflect: true }) addSortToUrl = false;\n\n firstUpdated() {\n const activeFile = this.shadowRoot!.querySelector('.content.active') as any;\n // allow for css animations to run before scrolling to active file\n setTimeout(() => {\n // scroll active file into view if needed\n // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari\n // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`\n activeFile?.scrollIntoViewIfNeeded(true);\n\n // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & \"IE 11\"\n // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(\n }, 350);\n }\n\n volumeItemWithImageTitle(item: ItemInfo) {\n const hrefUrl = this.fileUrl(item);\n\n return html`\n <li class=\"content active\">\n <div class=\"separator\"></div>\n <a class=\"container\" href=\"${hrefUrl}\">\n <div class=\"image\">\n <img src=\"${item.image}\" alt=\"preview\" />\n </div>\n <div class=\"text\">\n <p class=\"item-title\">${item.title}</p>\n <small>by: ${item.author}</small>\n </div>\n </a>\n </li>\n `;\n }\n\n fileUrl(item: ItemInfo) {\n const baseUrl = `//${this.baseHost}${item.url_path}`;\n let hrefUrl = baseUrl;\n if (this.addSortToUrl) {\n hrefUrl =\n this.sortOrderBy === 'default'\n ? `${baseUrl}${item.url_path}`\n : `${baseUrl}${item.url_path}?sort=${this.sortOrderBy}`;\n }\n return hrefUrl;\n }\n\n get pdfLabel(): TemplateResult {\n return html`<span class=\"pdf-label\"><span class=\"sr-only\">view this</span> PDF</span>`;\n }\n\n fileLi(item: ItemInfo): TemplateResult {\n const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';\n const hrefUrl = this.fileUrl(item);\n const isPdf = (item.file_source ?? '').match(/^[^+]+\\.pdf$/i);\n\n return html`\n <li>\n <div class=\"separator\"></div>\n <div class=\"content${activeClass}\">\n <a href=${hrefUrl}>\n <p class=\"item-title\">${item.title}${isPdf ? this.pdfLabel : nothing}</p>\n </a>\n </div>\n </li>\n `;\n }\n\n get fileListTemplate(): TemplateResult {\n const filesDisplay = repeat(\n this.fileList,\n file => file?.file_prefix,\n this.fileLi.bind(this),\n );\n return html`\n <ul>\n ${filesDisplay}\n <div class=\"separator\"></div>\n </ul>\n `;\n }\n\n render() {\n return html` ${this.fileList.length ? this.fileListTemplate : nothing} `;\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--primaryTextColor);\n margin-top: 14px;\n margin-bottom: 2rem;\n --activeBorderWidth: 2px;\n }\n\n a {\n color: #ffffff;\n text-decoration: none;\n }\n\n img {\n width: 35px;\n height: 45px;\n }\n\n ul {\n padding: 0;\n list-style: none;\n margin: var(--activeBorderWidth) 0.5rem 1rem 0;\n }\n\n ul > li:first-child .separator {\n display: none;\n }\n\n li {\n cursor: pointer;\n outline: none;\n position: relative;\n }\n\n li .content {\n padding: 2px 0 4px 2px;\n border: var(--activeBorderWidth) solid transparent;\n padding: 0.2rem 0 0.4rem 0.2rem;\n }\n\n li .content.active {\n border: var(--activeBorderWidth) solid #538bc5;\n }\n\n li.content a {\n display: flex;\n }\n\n small {\n font-style: italic;\n white-space: initial;\n }\n\n .container {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .item-title {\n margin-block-start: 0em;\n margin-block-end: 0em;\n font-size: 14px;\n font-weight: bold;\n word-wrap: break-word;\n padding-left: 5px;\n /* display: flex; */\n }\n\n .separator {\n background-color: var(--secondaryBGColor);\n width: 98%;\n margin: 1px auto;\n height: 1px;\n }\n\n .text {\n padding-left: 10px;\n }\n\n .icon {\n display: inline-block;\n width: 14px;\n height: 14px;\n margin-left: 0.7rem;\n border: 1px solid var(--primaryTextColor);\n border-radius: 2px;\n background: var(--activeButtonBg) 50% 50% no-repeat;\n }\n\n .pdf-label {\n border: 1px solid;\n padding: 2px 5px;\n border-radius: 20px;\n display: inline-block;\n margin-left: 5px;\n font-size: 0.9rem;\n }\n\n .pdf-label .sr-only {\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n padding: 0;\n border: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"iaux-viewable-files.js","sourceRoot":"","sources":["../../../src/menus/iaux-viewable-files.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable max-classes-per-file */\n/* eslint-disable lit-a11y/list */\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\n// sort icons\nconst sortAscIcon = html`\n <svg\n name=\"sort-asc\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612\"\n stroke=\"#fff\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.661538\"\n transform=\"matrix(1 0 0 -1 0 18.692308)\"\n />\n </g>\n </svg>\n`;\nconst sortDescIcon = html`\n <svg\n name=\"sort-desc\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z\"\n fill=\"#fff\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612\"\n stroke=\"#fff\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.661538\"\n />\n </g>\n </svg>\n`;\nconst sortNeutralIcon = html`\n <svg\n name=\"sort-neutral\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g fill=\"#fff\" fill-rule=\"evenodd\">\n <path\n d=\"m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z\"\n fill-rule=\"nonzero\"\n />\n <path\n d=\"m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z\"\n fill-rule=\"nonzero\"\n />\n <circle cx=\"13\" cy=\"9\" r=\"2\" />\n </g>\n </svg>\n`;\n\ntype sortOptions = 'title_asc' | 'title_desc' | 'default';\n\ntype ItemInfo = {\n url_path: string;\n image: string;\n title: string;\n author: string;\n file_subprefix: string;\n file_source: string;\n file_origin?: string;\n};\n\n/* icon for menu shortcut & menu icon */\nexport const viewableFilesIcon = html`\n <svg\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"volumesTitleID volumesDescID\"\n >\n <title id=\"volumesTitleID\">Viewable Files</title>\n <g fill=\"#ffffff\">\n <path\n fill=\"#ffffff\"\n d=\"m9.83536396 0h10.07241114c.1725502.47117517.3378411.76385809.4958725.87804878.1295523.11419069.3199719.1998337.5712586.25692905.2512868.05709534.4704647.08564301.6575337.08564301h.2806036v15.24362526h-4.3355343v3.8106985h-4.44275v3.7250554h-12.01318261c-.27306495 0-.50313194-.085643-.69020098-.256929-.18706903-.1712861-.30936193-.3425721-.36687867-.5138581l-.06449694-.2785477v-14.2159091c0-.32815965.08627512-.5922949.25882537-.79240577.17255024-.20011086.34510049-.32150776.51765073-.36419068l.25882537-.0640244h3.36472977v-2.54767184c0-.31374722.08627513-.57067627.25882537-.77078714.17255025-.20011086.34510049-.32150776.51765074-.36419068l.25882536-.06402439h3.36472978v-2.56929047c0-.32815964.08627512-.5922949.25882537-.79240576.17255024-.20011087.34510049-.31430156.51765073-.34257207zm10.78355264 15.6294346v-13.53076498c-.2730649-.08536585-.4456152-.16380266-.5176507-.23531042-.1725502-.1424612-.2730649-.27078714-.3015441-.38497783v13.36031043h-9.87808272c0 .0144124-.02149898.0144124-.06449694 0-.04299795-.0144124-.08962561.006929-.13988296.0640244-.05025735.0570953-.07538603.1427383-.07538603.256929s.02149898.210643.06449694.289357c.04299795.078714.08599591.1322062.12899387.1604767l.06449693.0216187h10.71905571zm-10.2449613-2.4412417h7.98003v-11.60421286h-7.98003zm1.6827837-9.41990022h4.6153002c.1725502 0 .3199718.05349224.4422647.16047672s.1834393.23891353.1834393.39578714c0 .15687362-.0611464.28519956-.1834393.38497783s-.2697145.1496674-.4422647.1496674h-4.6153002c-.1725503 0-.3199719-.04988913-.4422647-.1496674-.1222929-.09977827-.1834394-.22810421-.1834394-.38497783 0-.15687361.0611465-.28880266.1834394-.39578714.1222928-.10698448.2697144-.16047672.4422647-.16047672zm-6.08197737 13.50997782h7.72120467v-.8131929h-3.79610541c-.27306495 0-.49950224-.085643-.67931188-.256929-.17980964-.1712861-.29847284-.3425721-.35598958-.5138581l-.06449694-.2785477v-10.02023282h-2.82530086zm6.77217827-11.36890243h3.2139578c.1295522 0 .240956.05709534.3342113.17128603.0932554.11419069.139883.24972284.139883.40659645 0 .15687362-.0466276.28880267-.139883.39578714-.0932553.10698448-.2046591.16047672-.3342113.16047672h-3.2139578c-.1295523 0-.2373264-.05349224-.3233223-.16047672-.0859959-.10698447-.1289938-.23891352-.1289938-.39578714 0-.15687361.0429979-.29240576.1289938-.40659645s.19377-.17128603.3233223-.17128603zm-11.15043132 15.11557653h7.69942646v-.7491685h-3.79610539c-.25854616 0-.48135376-.0892462-.66842279-.2677384-.18706904-.1784922-.30936193-.3605876-.36687868-.546286l-.06449694-.2569291v-10.04101994h-2.80352266zm14.62237682-4.5606985h-.8191949v2.1410754h-9.89986085s-.04299796.0285477-.12899387.085643c-.08599592.0570954-.12201369.1427384-.10805331.2569291 0 .1141907.01786928.210643.05360784.289357.03573856.0787139.07538603.125.1189424.138858l.06449694.0432373h10.71905575v-2.9542683zm-4.3991936 3.8106985h-.8191949v2.077051h-9.8563045c0 .0144124-.02149898.0144124-.06449694 0-.04299795-.0144125-.08962561.0105321-.13988296.0748337-.05025735.0643015-.07538603.1607538-.07538603.289357 0 .1141906.02149898.2070399.06449694.2785476.04299795.0715078.08599591.1141907.12899387.1280488l.06449693.0216186h10.69811519v-2.8686252z\"\n />\n </g>\n </svg>\n`;\n\n/* <iaux-sort-viewable-files> side panel header button */\n@customElement('iaux-sort-viewable-files')\nexport class IauxSortFilesButton extends LitElement {\n @property({ type: Array }) fileListRaw: any[] = [];\n\n @property({ type: Array }) fileListSorted: any[] = [];\n\n @property({ type: String, reflect: true }) sortOrderBy: sortOptions =\n 'default';\n\n render() {\n return html`<div class=\"sort-multi-file-list\">${this.sortButton}</div>`;\n }\n\n get sortButton() {\n const sortIcons = {\n default: html`\n <button\n class=\"sort-by neutral-icon\"\n aria-label=\"Sort volumes in initial order\"\n @click=${() => this.sortVolumes('title_asc')}\n >\n ${sortNeutralIcon}\n </button>\n `,\n title_asc: html`\n <button\n class=\"sort-by asc-icon\"\n aria-label=\"Sort volumes in ascending order\"\n @click=${() => this.sortVolumes('title_desc')}\n >\n ${sortAscIcon}\n </button>\n `,\n title_desc: html`\n <button\n class=\"sort-by desc-icon\"\n aria-label=\"Sort volumes in descending order\"\n @click=${() => this.sortVolumes('default')}\n >\n ${sortDescIcon}\n </button>\n `,\n };\n\n return sortIcons[this.sortOrderBy];\n }\n\n sortVolumes(sortType: sortOptions) {\n this.sortOrderBy = sortType;\n let sortedFiles = [];\n\n sortedFiles = this.fileListRaw.sort((a, b) => {\n if (sortType === 'title_asc') return a.title.localeCompare(b.title);\n if (sortType === 'title_desc') return b.title.localeCompare(a.title);\n return a.orig_sort - b.orig_sort;\n });\n\n this.dispatchEvent(\n new CustomEvent('fileListSorted', {\n detail: {\n sortType,\n sortedFiles,\n },\n bubbles: true,\n composed: true,\n }),\n );\n this.fileListSorted = sortedFiles;\n }\n\n static get styles() {\n return css`\n button.sort-by {\n padding: 0px;\n background-color: transparent;\n border: 0px;\n --iconWidth: var(--menuSliderHeaderIconWidth);\n --iconHeight: var(--menuSliderHeaderIconHeight);\n }\n `;\n }\n}\n\n/* <iaux-viewable-files> side panel menu */\n@customElement('iaux-viewable-files')\nexport class IauxViewableFiles extends LitElement {\n @property({ type: String }) baseHost: string = 'archive.org';\n\n @property({ type: String }) sortOrderBy:\n | 'default'\n | 'title_asc'\n | 'title_desc' = 'default';\n\n @property({ type: String }) subPrefix: string = '';\n\n @property({ type: Array }) fileList: any[] = [];\n\n @property({ type: Boolean, reflect: true }) addSortToUrl = false;\n\n firstUpdated() {\n const activeFile = this.shadowRoot!.querySelector('.content.active') as any;\n // allow for css animations to run before scrolling to active file\n setTimeout(() => {\n // scroll active file into view if needed\n // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari\n // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`\n activeFile?.scrollIntoViewIfNeeded(true);\n\n // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & \"IE 11\"\n // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(\n }, 350);\n }\n\n volumeItemWithImageTitle(item: ItemInfo) {\n const hrefUrl = this.fileUrl(item);\n\n return html`\n <li class=\"content active\">\n <div class=\"separator\"></div>\n <a class=\"container\" href=\"${hrefUrl}\">\n <div class=\"image\">\n <img src=\"${item.image}\" alt=\"preview\" />\n </div>\n <div class=\"text\">\n <p class=\"item-title\">${item.title}</p>\n <small>by: ${item.author}</small>\n </div>\n </a>\n </li>\n `;\n }\n\n fileUrl(item: ItemInfo) {\n const baseUrl = `//${this.baseHost}${item.url_path}`;\n let hrefUrl = baseUrl;\n if (this.addSortToUrl) {\n hrefUrl =\n this.sortOrderBy === 'default'\n ? `${baseUrl}`\n : `${baseUrl}?sort=${this.sortOrderBy}`;\n }\n return hrefUrl;\n }\n\n get pdfLabel(): TemplateResult {\n return html`<span class=\"pdf-label\"><span class=\"sr-only\">view this</span> PDF</span>`;\n }\n\n fileLi(item: ItemInfo): TemplateResult {\n const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';\n const hrefUrl = this.fileUrl(item);\n const isPdf = (item.file_source ?? '').match(/^[^+]+\\.pdf$/i);\n\n return html`\n <li>\n <div class=\"separator\"></div>\n <div class=\"content${activeClass}\">\n <a href=${hrefUrl}>\n <p class=\"item-title\">${item.title}${isPdf ? this.pdfLabel : nothing}</p>\n </a>\n </div>\n </li>\n `;\n }\n\n get fileListTemplate(): TemplateResult {\n const filesDisplay = repeat(\n this.fileList,\n file => file?.file_prefix,\n this.fileLi.bind(this),\n );\n return html`\n <ul>\n ${filesDisplay}\n <div class=\"separator\"></div>\n </ul>\n `;\n }\n\n render() {\n return html` ${this.fileList.length ? this.fileListTemplate : nothing} `;\n }\n\n static get styles() {\n return css`\n :host {\n display: block;\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--primaryTextColor);\n margin-top: 14px;\n margin-bottom: 2rem;\n --activeBorderWidth: 2px;\n }\n\n a {\n color: #ffffff;\n text-decoration: none;\n }\n\n img {\n width: 35px;\n height: 45px;\n }\n\n ul {\n padding: 0;\n list-style: none;\n margin: var(--activeBorderWidth) 0.5rem 1rem 0;\n }\n\n ul > li:first-child .separator {\n display: none;\n }\n\n li {\n cursor: pointer;\n outline: none;\n position: relative;\n }\n\n li .content {\n padding: 2px 0 4px 2px;\n border: var(--activeBorderWidth) solid transparent;\n padding: 0.2rem 0 0.4rem 0.2rem;\n }\n\n li .content.active {\n border: var(--activeBorderWidth) solid #538bc5;\n }\n\n li.content a {\n display: flex;\n }\n\n small {\n font-style: italic;\n white-space: initial;\n }\n\n .container {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .item-title {\n margin-block-start: 0em;\n margin-block-end: 0em;\n font-size: 14px;\n font-weight: bold;\n word-wrap: break-word;\n padding-left: 5px;\n /* display: flex; */\n }\n\n .separator {\n background-color: var(--secondaryBGColor);\n width: 98%;\n margin: 1px auto;\n height: 1px;\n }\n\n .text {\n padding-left: 10px;\n }\n\n .icon {\n display: inline-block;\n width: 14px;\n height: 14px;\n margin-left: 0.7rem;\n border: 1px solid var(--primaryTextColor);\n border-radius: 2px;\n background: var(--activeButtonBg) 50% 50% no-repeat;\n }\n\n .pdf-label {\n border: 1px solid;\n padding: 2px 5px;\n border-radius: 20px;\n display: inline-block;\n margin-left: 5px;\n font-size: 0.9rem;\n }\n\n .pdf-label .sr-only {\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n padding: 0;\n border: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -256,8 +256,8 @@ export class IauxViewableFiles extends LitElement {
|
|
|
256
256
|
if (this.addSortToUrl) {
|
|
257
257
|
hrefUrl =
|
|
258
258
|
this.sortOrderBy === 'default'
|
|
259
|
-
? `${baseUrl}
|
|
260
|
-
: `${baseUrl}
|
|
259
|
+
? `${baseUrl}`
|
|
260
|
+
: `${baseUrl}?sort=${this.sortOrderBy}`;
|
|
261
261
|
}
|
|
262
262
|
return hrefUrl;
|
|
263
263
|
}
|