fix(core): update

This commit is contained in:
Philipp Kunz 2022-05-30 23:15:32 +02:00
parent 57edbb872b
commit 5b6436b023
7 changed files with 169 additions and 8 deletions

41
package-lock.json generated
View File

@ -15,7 +15,8 @@
"@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-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": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.61", "@gitzone/tsbuild": "^2.1.61",
@ -2479,6 +2480,12 @@
"node": ">=6" "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": { "node_modules/duplexer3": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://verdaccio.lossless.one/duplexer3/-/duplexer3-0.1.4.tgz", "resolved": "https://verdaccio.lossless.one/duplexer3/-/duplexer3-0.1.4.tgz",
@ -4710,6 +4717,24 @@
"node": ">=7" "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": { "node_modules/pdfjs/node_modules/uuid": {
"version": "8.3.2", "version": "8.3.2",
"resolved": "https://verdaccio.lossless.one/uuid/-/uuid-8.3.2.tgz", "resolved": "https://verdaccio.lossless.one/uuid/-/uuid-8.3.2.tgz",
@ -8017,6 +8042,11 @@
"dns-packet": "^5.2.4" "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": { "duplexer3": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://verdaccio.lossless.one/duplexer3/-/duplexer3-0.1.4.tgz", "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": { "pend": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://verdaccio.lossless.one/pend/-/pend-1.2.0.tgz", "resolved": "https://verdaccio.lossless.one/pend/-/pend-1.2.0.tgz",

View File

@ -20,7 +20,8 @@
"@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1", "@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-regular-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": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.61", "@gitzone/tsbuild": "^2.1.61",

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@designestate/dees-catalog', name: '@designestate/dees-catalog',
version: '1.0.90', version: '1.0.91',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -86,7 +86,7 @@ export class DeesButton extends DeesElement {
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')}; border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 2px; border-radius: 2px;
line-height: 40px; line-height: 40px;
padding: 0px 10px; padding: 0px 8px;
min-width: 100px; min-width: 100px;
user-select: none; user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')}; color: ${cssManager.bdTheme('#333', ' #ccc')};
@ -143,7 +143,7 @@ export class DeesButton extends DeesElement {
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
padding: 0px 48px; padding: 0px 48px;
margin-top: 36px; margin-top: 32px;
} }
.button.pending { .button.pending {

View File

@ -65,9 +65,9 @@ export class DeesChips extends DeesElement {
padding: 8px 12px; padding: 8px 12px;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
border-radius: 30px; border-radius: 40px;
margin-right: 3px; margin-right: 4px;
margin-bottom: 7px; margin-bottom: 8px;
} }
.chip:hover { .chip:hover {

120
ts_web/elements/dees-pdf.ts Normal file
View File

@ -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` <dees-pdf></dees-pdf> `;
// 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`
<style>
:host {
font-family: 'Roboto', sans-serif;
display: block;
box-sizing: border-box;
max-width: 800px;
}
:host([hidden]) {
display: none;
}
#pdfcanvas {
box-shadow: 0px 0px 5px #ccc;
width: 100%;
}
</style>
<canvas id="pdfcanvas" .height=${0} .width=${0}></canvas>
`;
}
public static pdfJsReady: Promise<any>;
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);
}
);
}
}

View File

@ -10,6 +10,7 @@ export * from './dees-input-fileupload.js';
export * from './dees-input-quantityselector.js'; export * from './dees-input-quantityselector.js';
export * from './dees-input-radio.js'; export * from './dees-input-radio.js';
export * from './dees-input-text.js'; export * from './dees-input-text.js';
export * from './dees-pdf.js';
export * from './dees-speechbubble.js'; export * from './dees-speechbubble.js';
export * from './dees-spinner.js'; export * from './dees-spinner.js';
export * from './dees-stepper.js'; export * from './dees-stepper.js';