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';