diff --git a/package-lock.json b/package-lock.json index 64a9a58..1c4539a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,8 @@ "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1" + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "pdfjs-dist": "^2.14.305" }, "devDependencies": { "@gitzone/tsbuild": "^2.1.61", @@ -2479,6 +2480,12 @@ "node": ">=6" } }, + "node_modules/dommatrix": { + "version": "1.0.3", + "resolved": "https://verdaccio.lossless.one/dommatrix/-/dommatrix-1.0.3.tgz", + "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==", + "license": "MIT" + }, "node_modules/duplexer3": { "version": "0.1.4", "resolved": "https://verdaccio.lossless.one/duplexer3/-/duplexer3-0.1.4.tgz", @@ -4710,6 +4717,24 @@ "node": ">=7" } }, + "node_modules/pdfjs-dist": { + "version": "2.14.305", + "resolved": "https://verdaccio.lossless.one/pdfjs-dist/-/pdfjs-dist-2.14.305.tgz", + "integrity": "sha512-5f7i25J1dKIBczhgfxEgNxfYNIxXEdxqo6Qb4ehY7Ja+p6AI4uUmk/OcVGXfRGm2ys5iaJJhJUwBFwv6Jl/Qww==", + "license": "Apache-2.0", + "dependencies": { + "dommatrix": "^1.0.1", + "web-streams-polyfill": "^3.2.1" + }, + "peerDependencies": { + "worker-loader": "^3.0.8" + }, + "peerDependenciesMeta": { + "worker-loader": { + "optional": true + } + } + }, "node_modules/pdfjs/node_modules/uuid": { "version": "8.3.2", "resolved": "https://verdaccio.lossless.one/uuid/-/uuid-8.3.2.tgz", @@ -8017,6 +8042,11 @@ "dns-packet": "^5.2.4" } }, + "dommatrix": { + "version": "1.0.3", + "resolved": "https://verdaccio.lossless.one/dommatrix/-/dommatrix-1.0.3.tgz", + "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==" + }, "duplexer3": { "version": "0.1.4", "resolved": "https://verdaccio.lossless.one/duplexer3/-/duplexer3-0.1.4.tgz", @@ -9451,6 +9481,15 @@ } } }, + "pdfjs-dist": { + "version": "2.14.305", + "resolved": "https://verdaccio.lossless.one/pdfjs-dist/-/pdfjs-dist-2.14.305.tgz", + "integrity": "sha512-5f7i25J1dKIBczhgfxEgNxfYNIxXEdxqo6Qb4ehY7Ja+p6AI4uUmk/OcVGXfRGm2ys5iaJJhJUwBFwv6Jl/Qww==", + "requires": { + "dommatrix": "^1.0.1", + "web-streams-polyfill": "^3.2.1" + } + }, "pend": { "version": "1.2.0", "resolved": "https://verdaccio.lossless.one/pend/-/pend-1.2.0.tgz", diff --git a/package.json b/package.json index b61e60f..26ff436 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1" + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "pdfjs-dist": "^2.14.305" }, "devDependencies": { "@gitzone/tsbuild": "^2.1.61", diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index f989965..dc30c7c 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@designestate/dees-catalog', - version: '1.0.90', + version: '1.0.91', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts index 30790c9..c928224 100644 --- a/ts_web/elements/dees-button.ts +++ b/ts_web/elements/dees-button.ts @@ -86,7 +86,7 @@ export class DeesButton extends DeesElement { border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')}; border-radius: 2px; line-height: 40px; - padding: 0px 10px; + padding: 0px 8px; min-width: 100px; user-select: none; color: ${cssManager.bdTheme('#333', ' #ccc')}; @@ -143,7 +143,7 @@ export class DeesButton extends DeesElement { line-height: 48px; font-size: 16px; padding: 0px 48px; - margin-top: 36px; + margin-top: 32px; } .button.pending { diff --git a/ts_web/elements/dees-chips.ts b/ts_web/elements/dees-chips.ts index 6af31eb..b384ddf 100644 --- a/ts_web/elements/dees-chips.ts +++ b/ts_web/elements/dees-chips.ts @@ -65,9 +65,9 @@ export class DeesChips extends DeesElement { padding: 8px 12px; font-size: 14px; color: #fff; - border-radius: 30px; - margin-right: 3px; - margin-bottom: 7px; + border-radius: 40px; + margin-right: 4px; + margin-bottom: 8px; } .chip:hover { diff --git a/ts_web/elements/dees-pdf.ts b/ts_web/elements/dees-pdf.ts new file mode 100644 index 0000000..45a7c39 --- /dev/null +++ b/ts_web/elements/dees-pdf.ts @@ -0,0 +1,120 @@ +import { DeesElement, property, html, customElement, domtools } from '@designestate/dees-element'; +import { TemplateResult } from 'lit-html'; + +import { Deferred } from '@pushrocks/smartpromise'; + +import type pdfjsTypes from 'pdfjs-dist'; + +declare global { + interface HTMLElementTagNameMap { + 'dees-pdf': DeesPdf; + } +} + +@customElement('dees-pdf') +export class DeesPdf extends DeesElement { + // DEMO + public static demo = () => html` `; + + // INSTANCE + + @property() + public pdfUrl: string = + 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf'; + + constructor() { + super(); + + // you have access to all kinds of things through this. + // this.setAttribute('gotIt','true'); + } + + public render(): TemplateResult { + return html` + + + `; + } + + public static pdfJsReady: Promise; + public static pdfjsLib: typeof pdfjsTypes; + public async connectedCallback() { + super.connectedCallback(); + if (!DeesPdf.pdfJsReady) { + const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer(); + DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise; + const loadDeferred = domtools.plugins.smartpromise.defer(); + const script = document.createElement('script'); + script.addEventListener('load', () => { + console.log('pdf.js loaded!'); + loadDeferred.resolve(); + }); + script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js'; + document.getElementsByTagName('head')[0].appendChild(script); + // The workerSrc property shall be specified. + await loadDeferred.promise; + DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf']; + DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; + pdfJsReadyDeferred.resolve(); + } + await DeesPdf.pdfJsReady; + this.displayContent(); + } + + public async displayContent() { + await DeesPdf.pdfJsReady; + + // Asynchronous download of PDF + const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl); + loadingTask.promise.then( + (pdf) => { + console.log('PDF loaded'); + + // Fetch the first page + const pageNumber = 1; + pdf.getPage(pageNumber).then((page) => { + console.log('Page loaded'); + + const scale = 10; + const viewport = page.getViewport({ scale: scale }); + + // Prepare canvas using PDF page dimensions + const canvas: any = this.shadowRoot.querySelector('#pdfcanvas'); + const context = canvas.getContext('2d'); + canvas.height = viewport.height; + canvas.width = viewport.width; + + // Render PDF page into canvas context + const renderContext = { + canvasContext: context, + viewport: viewport, + }; + + const renderTask = page.render(renderContext); + renderTask.promise.then(function () { + console.log('Page rendered'); + }); + }); + }, + (reason) => { + // PDF loading error + console.error(reason); + } + ); + } +} diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index 15ed57a..b3af1d6 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -10,6 +10,7 @@ export * from './dees-input-fileupload.js'; export * from './dees-input-quantityselector.js'; export * from './dees-input-radio.js'; export * from './dees-input-text.js'; +export * from './dees-pdf.js'; export * from './dees-speechbubble.js'; export * from './dees-spinner.js'; export * from './dees-stepper.js';