svelte-pdfz
Version:
svelte-pdf provides a component for rendering PDF documents using PDF.js
382 lines (381 loc) • 37.8 kB
JavaScript
import { d as set_current_component, r as run_all, f as current_component, c as create_ssr_component, e as escape, h as null_to_empty, o as onDestroy, i as add_attribute, v as validate_component } from "../../chunks/ssr.js";
import * as pdfjs from "pdfjs-dist";
const dirty_components = [];
const binding_callbacks = [];
let render_callbacks = [];
const flush_callbacks = [];
const resolved_promise = /* @__PURE__ */ Promise.resolve();
let update_scheduled = false;
function schedule_update() {
if (!update_scheduled) {
update_scheduled = true;
resolved_promise.then(flush);
}
}
function tick() {
schedule_update();
return resolved_promise;
}
function add_render_callback(fn) {
render_callbacks.push(fn);
}
const seen_callbacks = /* @__PURE__ */ new Set();
let flushidx = 0;
function flush() {
if (flushidx !== 0) {
return;
}
const saved_component = current_component;
do {
try {
while (flushidx < dirty_components.length) {
const component = dirty_components[flushidx];
flushidx++;
set_current_component(component);
update(component.$$);
}
} catch (e) {
dirty_components.length = 0;
flushidx = 0;
throw e;
}
set_current_component(null);
dirty_components.length = 0;
flushidx = 0;
while (binding_callbacks.length) binding_callbacks.pop()();
for (let i = 0; i < render_callbacks.length; i += 1) {
const callback = render_callbacks[i];
if (!seen_callbacks.has(callback)) {
seen_callbacks.add(callback);
callback();
}
}
render_callbacks.length = 0;
} while (dirty_components.length);
while (flush_callbacks.length) {
flush_callbacks.pop()();
}
update_scheduled = false;
seen_callbacks.clear();
set_current_component(saved_component);
}
function update($$) {
if ($$.fragment !== null) {
$$.update();
run_all($$.before_update);
const dirty = $$.dirty;
$$.dirty = [-1];
$$.fragment && $$.fragment.p($$.ctx, dirty);
$$.after_update.forEach(add_render_callback);
}
}
const pdfWorker = "/_app/immutable/workers/pdf.worker-CX4xeFrb.js";
const calcRT = (paraBody) => {
const wordsPerMinute = 200;
let textLength = paraBody.split(" ").length;
if (textLength > 0) {
return Math.ceil(textLength / wordsPerMinute);
}
};
const getPageText = (pageNum, PDFDocumentInstance) => {
return new Promise(function(resolve, reject) {
PDFDocumentInstance.getPage(pageNum).then(function(pdfPage) {
pdfPage.getTextContent().then(function(textContent) {
var textItems = textContent.items;
var finalString = "";
for (var i = 0; i < textItems.length; i++) {
var item = textItems[i];
finalString += item.str + " ";
}
resolve(finalString);
});
});
});
};
class ClassBuilder {
constructor(classes, defaultClasses) {
this.defaults = typeof classes === "function" ? classes(defaultClasses) : classes;
this.classes = this.defaults;
}
flush() {
this.classes = this.defaults;
return this;
}
extend(...fns) {
return this;
}
get() {
return this.classes;
}
replace(classes, cond = true) {
if (cond && classes) {
this.classes = Object.keys(classes).reduce(
(acc, from) => acc.replace(new RegExp(from, "g"), classes[from]),
this.classes
);
}
return this;
}
remove(classes, cond = true) {
if (cond && classes) {
this.classes = classes.split(" ").reduce(
(acc, cur) => acc.replace(new RegExp(cur, "g"), ""),
this.classes
);
}
return this;
}
add(className, cond = true, defaultValue) {
if (!cond || !className) return this;
switch (typeof className) {
case "string":
default:
this.classes += ` ${className} `;
return this;
case "function":
this.classes += ` ${className(defaultValue || this.classes)} `;
return this;
}
}
}
const css$1 = {
code: ".tooltip.svelte-10lk5cm{left:50%;transform:translateX(-50%);white-space:nowrap;font-size:0.75rem;position:absolute;margin-top:0.5rem;background-color:#718096;color:#fff;border-radius:0.25rem;padding-top:1rem;padding-bottom:1rem;padding-right:0.75rem;padding-left:0.75rem;z-index:30}.activator.svelte-10lk5cm{position:relative;display:inline-block}",
map: `{"version":3,"file":"Tooltip.svelte","sources":["Tooltip.svelte"],"sourcesContent":["<script>\\n import { scale } from 'svelte/transition'\\n import { ClassBuilder } from './classes.js'\\n const classesDefault = 'tooltip'\\n let className = ''\\n export let classes = classesDefault\\n export { className as class }\\n export let show = false\\n\\n export let timeout = null\\n const cb = new ClassBuilder(classes, classesDefault)\\n $: c = cb.flush().add(classes, true, classesDefault).add(className).get()\\n function showTooltip() {\\n if (show) return\\n show = true\\n if (!timeout) return\\n timeout = setTimeout(() => {\\n show = false\\n }, timeout)\\n }\\n function hideTooltip() {\\n if (!show) return\\n\\n show = false\\n clearTimeout(timeout)\\n }\\n /**\\n * @param {{ (): void; (): void; apply?: any; }} func\\n * @param {number} wait milliseconds\\n * @param {boolean} [immediate]\\n */\\n function debounce(func, wait, immediate) {\\n /**\\n * @type {number}\\n */\\n let timeout\\n return function () {\\n let context = this,\\n args = arguments\\n let later = function () {\\n timeout = null\\n if (!immediate) func.apply(context, args)\\n }\\n let callNow = immediate && !timeout\\n clearTimeout(timeout)\\n timeout = setTimeout(later, wait)\\n if (callNow) func.apply(context, args)\\n }\\n }\\n<\/script>\\n\\n<div class=\\"activator\\">\\n <div\\n role=\\"note\\"\\n on:mouseenter={debounce(showTooltip, 100)}\\n on:mouseleave={debounce(hideTooltip, 100)}\\n on:mouseenter\\n on:mouseleave\\n on:focus\\n on:blur\\n >\\n <slot name=\\"activator\\" />\\n </div>\\n\\n {#if show}\\n <div\\n in:scale={{ duration: 150 }}\\n out:scale={{ duration: 150, delay: 100 }}\\n class={c}\\n >\\n <slot />\\n </div>\\n {/if}\\n</div>\\n\\n<style>\\n .tooltip {\\n left: 50%;\\n transform: translateX(-50%);\\n white-space: nowrap;\\n font-size: 0.75rem;\\n position: absolute;\\n margin-top: 0.5rem;\\n background-color: #718096;\\n color: #fff;\\n border-radius: 0.25rem;\\n padding-top: 1rem;\\n padding-bottom: 1rem;\\n padding-right: 0.75rem;\\n padding-left: 0.75rem;\\n z-index: 30;\\n }\\n .activator {\\n position: relative;\\n display: inline-block;\\n }\\n</style>\\n"],"names":[],"mappings":"AA4EE,uBAAS,CACP,IAAI,CAAE,GAAG,CACT,SAAS,CAAE,WAAW,IAAI,CAAC,CAC3B,WAAW,CAAE,MAAM,CACnB,SAAS,CAAE,OAAO,CAClB,QAAQ,CAAE,QAAQ,CAClB,UAAU,CAAE,MAAM,CAClB,gBAAgB,CAAE,OAAO,CACzB,KAAK,CAAE,IAAI,CACX,aAAa,CAAE,OAAO,CACtB,WAAW,CAAE,IAAI,CACjB,cAAc,CAAE,IAAI,CACpB,aAAa,CAAE,OAAO,CACtB,YAAY,CAAE,OAAO,CACrB,OAAO,CAAE,EACX,CACA,yBAAW,CACT,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,YACX"}`
};
const classesDefault = "tooltip";
const Tooltip = create_ssr_component(($$result, $$props, $$bindings, slots) => {
let c;
let { class: className = "" } = $$props;
let { classes = classesDefault } = $$props;
let { show = false } = $$props;
let { timeout = null } = $$props;
const cb = new ClassBuilder(classes, classesDefault);
if ($$props.class === void 0 && $$bindings.class && className !== void 0) $$bindings.class(className);
if ($$props.classes === void 0 && $$bindings.classes && classes !== void 0) $$bindings.classes(classes);
if ($$props.show === void 0 && $$bindings.show && show !== void 0) $$bindings.show(show);
if ($$props.timeout === void 0 && $$bindings.timeout && timeout !== void 0) $$bindings.timeout(timeout);
$$result.css.add(css$1);
c = cb.flush().add(classes, true, classesDefault).add(className).get();
return `<div class="activator svelte-10lk5cm"><div role="note">${slots.activator ? slots.activator({}) : ``}</div> ${show ? `<div class="${escape(null_to_empty(c), true) + " svelte-10lk5cm"}">${slots.default ? slots.default({}) : ``}</div>` : ``} </div>`;
});
const css = {
code: "@import './styles.css';",
map: `{"version":3,"file":"PdfViewer.svelte","sources":["PdfViewer.svelte"],"sourcesContent":["<script>\\n // @ts-nocheck\\n\\n import * as pdfjs from 'pdfjs-dist';\\n // import * as pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs'\\n import pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker&url';\\n import { onDestroy, tick } from 'svelte';\\n import { calcRT, getPageText, onPrint, savePDF } from './utils/Helper.svelte';\\n import Tooltip from './utils/Tooltip.svelte';\\n\\n export let url;\\n export let data;\\n export let scale = 1.8;\\n export let pageNum = 1; //must be number\\n export let flipTime = 120; //by default 2 minute, value in seconds\\n export let showButtons = [\\n 'navigation',\\n 'zoom',\\n 'print',\\n 'rotate',\\n 'download',\\n 'autoflip',\\n 'timeInfo',\\n 'pageInfo',\\n ]; //array\\n export let showBorder = true; //boolean\\n export let totalPage = 0;\\n export let downloadFileName = '';\\n export let showTopButton = true; // boolean\\n\\n pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;\\n\\n let canvas;\\n let page_num = 0;\\n let pageCount = 0;\\n let pdfDoc = null;\\n let pageRendering = false;\\n let pageNumPending = null;\\n let rotation = 0;\\n let pdfContent = '';\\n let readingTime = 0;\\n let autoFlip = false;\\n let interval;\\n let secondInterval;\\n let seconds = flipTime;\\n let pages = [];\\n let password = '';\\n let passwordError = false;\\n let passwordMessage = '';\\n let isInitialized = false;\\n const minScale = 1.0;\\n const maxScale = 2.3;\\n\\n const renderPage = (num) => {\\n pageRendering = true;\\n // Using promise to fetch the page\\n pdfDoc.getPage(num).then(function (page) {\\n let viewport = page.getViewport({ scale: scale, rotation: rotation });\\n const canvasContext = canvas.getContext('2d');\\n canvas.height = viewport.height;\\n canvas.width = viewport.width;\\n\\n // Render PDF page into canvas context\\n let renderContext = {\\n canvasContext,\\n viewport,\\n };\\n let renderTask = page.render(renderContext);\\n\\n // Wait for rendering to finish\\n renderTask.promise.then(function () {\\n pageRendering = false;\\n if (pageNumPending !== null) {\\n // New page rendering is pending\\n // renderPage(pageNumPending);\\n if (pageNum < pdfDoc.totalPage) {\\n pages[pageNum] = canvas;\\n pageNum++;\\n pdfDoc.getPage(pageNum).then(renderPage);\\n } else {\\n for (let i = 1; i < pages.length; i++) {\\n canvas.appendChild(pages[i]);\\n }\\n }\\n pageNumPending = null;\\n }\\n });\\n });\\n\\n // Update page counters\\n showButtons.length ? (page_num.textContent = num) : null;\\n };\\n\\n const queueRenderPage = (num) => {\\n if (pageRendering) {\\n pageNumPending = num;\\n } else {\\n renderPage(num);\\n }\\n };\\n\\n /**\\n * Displays previous page.\\n */\\n const onPrevPage = () => {\\n if (pageNum <= 1) {\\n return;\\n }\\n pageNum--;\\n queueRenderPage(pageNum);\\n };\\n\\n /**\\n * Displays next page.\\n */\\n const onNextPage = () => {\\n if (pageNum >= pdfDoc.numPages) {\\n return;\\n }\\n pageNum++;\\n queueRenderPage(pageNum);\\n };\\n /*\\n * Display Zoom In\\n */\\n const onZoomIn = () => {\\n if (scale <= maxScale) {\\n scale = scale + 0.1;\\n queueRenderPage(pageNum);\\n }\\n };\\n /*\\n * Display Zoom Out\\n */\\n const onZoomOut = () => {\\n if (scale >= minScale) {\\n scale = scale - 0.1;\\n queueRenderPage(pageNum);\\n }\\n };\\n\\n const printPdf = (url) => {\\n onPrint(url);\\n };\\n\\n const clockwiseRotate = () => {\\n rotation = rotation + 90;\\n queueRenderPage(pageNum);\\n };\\n\\n const antiClockwiseRotate = () => {\\n rotation = rotation - 90;\\n queueRenderPage(pageNum);\\n };\\n\\n const onPasswordSubmit = () => {\\n initialLoad();\\n };\\n\\n /**\\n * Asynchronously downloads PDF.\\n */\\n\\n const initialLoad = async () => {\\n let loadingTask = pdfjs.getDocument({\\n ...(url && { url }),\\n ...(data && { data }),\\n ...(password && { password }),\\n });\\n loadingTask.promise\\n .then(async function (pdfDoc_) {\\n pdfDoc = pdfDoc_;\\n passwordError = false;\\n await tick();\\n\\n showButtons.length ? (pageCount.textContent = pdfDoc.numPages) : null;\\n totalPage = pdfDoc.numPages;\\n if (showButtons.length) {\\n for (let number = 1; number <= totalPage; number++) {\\n // Extract the text\\n getPageText(number, pdfDoc).then(function (textPage) {\\n // Show the text of the page in the console\\n pdfContent = pdfContent.concat(textPage);\\n readingTime = calcRT(pdfContent);\\n });\\n }\\n }\\n isInitialized = true;\\n })\\n .catch(function (error) {\\n passwordError = true;\\n passwordMessage = error.message;\\n });\\n };\\n initialLoad();\\n $: if (isInitialized) queueRenderPage(pageNum);\\n\\n //turn page after certain time interval\\n const onPageTurn = () => {\\n autoFlip = !autoFlip;\\n if (autoFlip === false) {\\n clearInterval(interval); //stop autoflip\\n clearInterval(secondInterval); //stop countdown seconds\\n }\\n if (autoFlip === true && pageNum <= totalPage) {\\n //countdown seconds\\n secondInterval = setInterval(() => {\\n seconds = seconds - 1;\\n }, 1000);\\n interval = setInterval(() => {\\n seconds = flipTime; //reset second after page flip\\n onNextPage();\\n }, flipTime * 1000); //every {flipTime} seconds\\n }\\n };\\n //Download pdf function\\n const downloadPdf = ({ url: fileURL, data }) => {\\n let fileName =\\n downloadFileName ||\\n (fileURL && fileURL.substring(fileURL.lastIndexOf('/') + 1));\\n savePDF({ fileURL, data, name: fileName });\\n };\\n //prevent memory leak\\n onDestroy(() => {\\n clearInterval(interval);\\n clearInterval(secondInterval);\\n });\\n\\n let pageWidth;\\n let pageHeight;\\n<\/script>\\n\\n<svelte:window bind:innerWidth={pageWidth} bind:innerHeight={pageHeight} />\\n<div class=\\"parent\\">\\n <div class={showBorder === true ? 'control' : 'null'}>\\n {#if passwordError === true}\\n <div class=\\"password-viewer\\">\\n <p>This document requires a password to open:</p>\\n <p class=\\"password-message\\">{passwordMessage}</p>\\n <div class=\\"password-container\\">\\n <input type=\\"password\\" class=\\"password-input\\" bind:value={password} />\\n <button on:click={onPasswordSubmit} class=\\"password-button\\">\\n Submit\\n </button>\\n </div>\\n </div>\\n {:else if showButtons.length}\\n <div class=\\"control-start\\">\\n <div class=\\"line\\">\\n {#if showButtons.includes('navigation')}\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control {pageNum <= 1 ? 'disabled' : null}\\"\\n on:click={() => onPrevPage()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <polygon\\n points=\\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485\\n 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\\"\\n />\\n </svg>\\n </span>\\n Previous\\n </Tooltip>\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control {pageNum >= totalPage\\n ? 'disabled'\\n : null}\\"\\n on:click={() => onNextPage()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <polygon\\n points=\\"16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707\\n 11.515 18.485 10.101 17.071 16.172 11 0 11 0 9\\"\\n />\\n </svg>\\n </span>\\n Next\\n </Tooltip>\\n {/if}\\n {#if showButtons.includes('zoom')}\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control {scale >= maxScale ? 'disabled' : null}\\"\\n on:click={() => onZoomIn()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n fill-rule=\\"evenodd\\"\\n d=\\"M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42\\n 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7\\n 7V5h2v2h2v2H9v2H7V9H5V7h2z\\"\\n />\\n </svg>\\n </span>\\n Zoom In\\n </Tooltip>\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control {scale <= minScale ? 'disabled' : null}\\"\\n on:click={() => onZoomOut()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n fill-rule=\\"evenodd\\"\\n d=\\"M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42\\n 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM5\\n 7h6v2H5V7z\\"\\n />\\n </svg>\\n </span>\\n Zoom Out\\n </Tooltip>\\n {/if}\\n {#if showButtons.includes('print')}\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control\\"\\n on:click={() => printPdf(url)}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n d=\\"M4 16H0V6h20v10h-4v4H4v-4zm2-4v6h8v-6H6zM4 0h12v5H4V0zM2\\n 8v2h2V8H2zm4 0v2h2V8H6z\\"\\n />\\n </svg>\\n </span>\\n Print\\n </Tooltip>\\n {/if}\\n {#if showButtons.includes('rotate')}\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control\\"\\n on:click={() => antiClockwiseRotate()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon rot-icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n d=\\"M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42\\n 1.42zM12 10h8l-4 4-4-4z\\"\\n />\\n </svg>\\n </span>\\n Anti-Clockwise\\n </Tooltip>\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control\\"\\n on:click={() => clockwiseRotate()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n d=\\"M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42\\n 1.42zM12 10h8l-4 4-4-4z\\"\\n />\\n </svg>\\n </span>\\n Clockwise\\n </Tooltip>\\n {/if}\\n {#if showButtons.includes('download')}\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"button-control\\"\\n on:click={() => downloadPdf({ url, data })}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path d=\\"M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z\\" />\\n </svg>\\n </span>\\n Download\\n </Tooltip>\\n {/if}\\n {#if showButtons.includes('autoflip')}\\n <Tooltip>\\n <span\\n role=\\"button\\"\\n tabindex=\\"0\\"\\n slot=\\"activator\\"\\n class=\\"page-info button-control\\"\\n on:click={() => onPageTurn()}\\n on:keydown\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n {#if autoFlip === true}\\n <path d=\\"M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z\\" />\\n {:else}\\n <path\\n d=\\"M9.896,3.838L0.792,1.562v14.794l9.104,2.276L19,16.356V1.562L9.896,3.838z\\n M9.327,17.332L1.93,15.219V3.27 l7.397,1.585V17.332z\\n M17.862,15.219l-7.397,2.113V4.855l7.397-1.585V15.219z\\"\\n />\\n {/if}\\n </svg>\\n </span>\\n {autoFlip === true ? seconds : 'Auto Turn Page'}\\n </Tooltip>\\n {/if}\\n <span\\n class=\\"page-info\\"\\n style={showButtons.includes('timeInfo') ? '' : 'display: none;'}\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n d=\\"M16.32 7.1A8 8 0 1 1 9 4.06V2h2v2.06c1.46.18 2.8.76 3.9\\n 1.62l1.46-1.46 1.42 1.42-1.46 1.45zM10 18a6 6 0 1 0 0-12 6 6 0 0\\n 0 0 12zM7 0h6v2H7V0zm5.12 8.46l1.42 1.42L10 13.4 8.59\\n 12l3.53-3.54z\\"\\n />\\n </svg>\\n <span class=\\"text\\">{readingTime} min read</span>\\n </span>\\n <span\\n class=\\"page-info\\"\\n style={showButtons.includes('pageInfo') ? '' : 'display: none;'}\\n >\\n <svg\\n class=\\"icon\\"\\n xmlns=\\"http://www.w3.org/2000/svg\\"\\n viewBox=\\"0 0 20 20\\"\\n >\\n <path\\n d=\\"M16 2h4v15a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V0h16v2zm0 2v13a1 1 0\\n 0 0 1 1 1 1 0 0 0 1-1V4h-2zM2 2v15a1 1 0 0 0 1 1h11.17a2.98 2.98\\n 0 0 1-.17-1V2H2zm2 8h8v2H4v-2zm0 4h8v2H4v-2zM4 4h8v4H4V4z\\"\\n />\\n </svg>\\n <div class=\\"text\\">\\n Page :\\n <span bind:this={page_num} />\\n /\\n <span bind:this={pageCount} />\\n </div>\\n </span>\\n </div>\\n <div class={showBorder === true ? 'viewer' : 'null'}>\\n <canvas bind:this={canvas} width={pageWidth} height={pageHeight} />\\n </div>\\n </div>\\n {:else}\\n <div class={showBorder === true ? 'viewer' : 'null'}>\\n <canvas bind:this={canvas} />\\n <!-- width={window.innerWidth} -->\\n <!-- height={window.innerHeight} -->\\n </div>\\n {/if}\\n </div>\\n {#if showTopButton}\\n <button id=\\"topBtn\\" on:click={() => window.scrollTo(0, 0)}>\\n <svg class=\\"icon\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 20 20\\">\\n <path d=\\"M7 10v8h6v-8h5l-8-8-8 8h5z\\" />\\n </svg>\\n </button>\\n {/if}\\n</div>\\n\\n<style>\\n @import './styles.css';\\n</style>\\n"],"names":[],"mappings":"AAkhBE,QAAQ,cAAc"}`
};
const minScale = 1;
const maxScale = 2.3;
const PdfViewer = create_ssr_component(($$result, $$props, $$bindings, slots) => {
let { url } = $$props;
let { data } = $$props;
let { scale = 1.8 } = $$props;
let { pageNum = 1 } = $$props;
let { flipTime = 120 } = $$props;
let { showButtons = [
"navigation",
"zoom",
"print",
"rotate",
"download",
"autoflip",
"timeInfo",
"pageInfo"
] } = $$props;
let { showBorder = true } = $$props;
let { totalPage = 0 } = $$props;
let { downloadFileName = "" } = $$props;
let { showTopButton = true } = $$props;
pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker;
let canvas;
let page_num = 0;
let pageCount = 0;
let pdfDoc = null;
let pageRendering = false;
let pageNumPending = null;
let rotation = 0;
let pdfContent = "";
let readingTime = 0;
let interval;
let secondInterval;
let pages = [];
let password = "";
let passwordError = false;
let passwordMessage = "";
let isInitialized = false;
const renderPage = (num) => {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
let viewport = page.getViewport({ scale, rotation });
const canvasContext = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = { canvasContext, viewport };
let renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
if (pageNum < pdfDoc.totalPage) {
pages[pageNum] = canvas;
pageNum++;
pdfDoc.getPage(pageNum).then(renderPage);
} else {
for (let i = 1; i < pages.length; i++) {
canvas.appendChild(pages[i]);
}
}
pageNumPending = null;
}
});
});
showButtons.length ? page_num.textContent = num : null;
};
const queueRenderPage = (num) => {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
};
const initialLoad = async () => {
let loadingTask = pdfjs.getDocument({
...url && { url },
...data && { data },
...password
});
loadingTask.promise.then(async function(pdfDoc_) {
pdfDoc = pdfDoc_;
passwordError = false;
await tick();
showButtons.length ? pageCount.textContent = pdfDoc.numPages : null;
totalPage = pdfDoc.numPages;
if (showButtons.length) {
for (let number = 1; number <= totalPage; number++) {
getPageText(number, pdfDoc).then(function(textPage) {
pdfContent = pdfContent.concat(textPage);
readingTime = calcRT(pdfContent);
});
}
}
isInitialized = true;
}).catch(function(error) {
passwordError = true;
passwordMessage = error.message;
});
};
initialLoad();
onDestroy(() => {
clearInterval(interval);
clearInterval(secondInterval);
});
let pageWidth;
let pageHeight;
if ($$props.url === void 0 && $$bindings.url && url !== void 0) $$bindings.url(url);
if ($$props.data === void 0 && $$bindings.data && data !== void 0) $$bindings.data(data);
if ($$props.scale === void 0 && $$bindings.scale && scale !== void 0) $$bindings.scale(scale);
if ($$props.pageNum === void 0 && $$bindings.pageNum && pageNum !== void 0) $$bindings.pageNum(pageNum);
if ($$props.flipTime === void 0 && $$bindings.flipTime && flipTime !== void 0) $$bindings.flipTime(flipTime);
if ($$props.showButtons === void 0 && $$bindings.showButtons && showButtons !== void 0) $$bindings.showButtons(showButtons);
if ($$props.showBorder === void 0 && $$bindings.showBorder && showBorder !== void 0) $$bindings.showBorder(showBorder);
if ($$props.totalPage === void 0 && $$bindings.totalPage && totalPage !== void 0) $$bindings.totalPage(totalPage);
if ($$props.downloadFileName === void 0 && $$bindings.downloadFileName && downloadFileName !== void 0) $$bindings.downloadFileName(downloadFileName);
if ($$props.showTopButton === void 0 && $$bindings.showTopButton && showTopButton !== void 0) $$bindings.showTopButton(showTopButton);
$$result.css.add(css);
{
if (isInitialized) queueRenderPage(pageNum);
}
return ` <div class="parent"><div${add_attribute("class", showBorder === true ? "control" : "null", 0)}>${passwordError === true ? `<div class="password-viewer"><p data-svelte-h="svelte-1d6vq7g">This document requires a password to open:</p> <p class="password-message">${escape(passwordMessage)}</p> <div class="password-container"><input type="password" class="password-input"${add_attribute("value", password, 0)}> <button class="password-button" data-svelte-h="svelte-pjp04f">Submit</button></div></div>` : `${showButtons.length ? `<div class="control-start"><div class="line">${showButtons.includes("navigation") ? `${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="${"button-control " + escape(pageNum <= 1 ? "disabled" : null, true)}"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485
18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"></polygon></svg></span>`;
},
default: () => {
return `Previous`;
}
})} ${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="${"button-control " + escape(pageNum >= totalPage ? "disabled" : null, true)}"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="16.172 9 10.101 2.929 11.515 1.515 20 10 19.293 10.707
11.515 18.485 10.101 17.071 16.172 11 0 11 0 9"></polygon></svg></span>`;
},
default: () => {
return `Next`;
}
})}` : ``} ${showButtons.includes("zoom") ? `${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="${"button-control " + escape(scale >= maxScale ? "disabled" : null, true)}"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42
1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7
7V5h2v2h2v2H9v2H7V9H5V7h2z"></path></svg></span>`;
},
default: () => {
return `Zoom In`;
}
})} ${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="${"button-control " + escape(scale <= minScale ? "disabled" : null, true)}"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42
1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM5
7h6v2H5V7z"></path></svg></span>`;
},
default: () => {
return `Zoom Out`;
}
})}` : ``} ${showButtons.includes("print") ? `${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="button-control" data-svelte-h="svelte-19y611v"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 16H0V6h20v10h-4v4H4v-4zm2-4v6h8v-6H6zM4 0h12v5H4V0zM2
8v2h2V8H2zm4 0v2h2V8H6z"></path></svg></span>`;
},
default: () => {
return `Print`;
}
})}` : ``} ${showButtons.includes("rotate") ? `${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="button-control" data-svelte-h="svelte-tk6nke"><svg class="icon rot-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42
1.42zM12 10h8l-4 4-4-4z"></path></svg></span>`;
},
default: () => {
return `Anti-Clockwise`;
}
})} ${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="button-control" data-svelte-h="svelte-10vh4p"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42
1.42zM12 10h8l-4 4-4-4z"></path></svg></span>`;
},
default: () => {
return `Clockwise`;
}
})}` : ``} ${showButtons.includes("download") ? `${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="button-control" data-svelte-h="svelte-1sz9e7n"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg></span>`;
},
default: () => {
return `Download`;
}
})}` : ``} ${showButtons.includes("autoflip") ? `${validate_component(Tooltip, "Tooltip").$$render($$result, {}, {}, {
activator: () => {
return `<span role="button" tabindex="0" slot="activator" class="page-info button-control"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">${`<path d="M9.896,3.838L0.792,1.562v14.794l9.104,2.276L19,16.356V1.562L9.896,3.838z
M9.327,17.332L1.93,15.219V3.27 l7.397,1.585V17.332z
M17.862,15.219l-7.397,2.113V4.855l7.397-1.585V15.219z"></path>`}</svg></span>`;
},
default: () => {
return `${escape("Auto Turn Page")}`;
}
})}` : ``} <span class="page-info"${add_attribute("style", showButtons.includes("timeInfo") ? "" : "display: none;", 0)}><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.32 7.1A8 8 0 1 1 9 4.06V2h2v2.06c1.46.18 2.8.76 3.9
1.62l1.46-1.46 1.42 1.42-1.46 1.45zM10 18a6 6 0 1 0 0-12 6 6 0 0
0 0 12zM7 0h6v2H7V0zm5.12 8.46l1.42 1.42L10 13.4 8.59
12l3.53-3.54z"></path></svg> <span class="text">${escape(readingTime)} min read</span></span> <span class="page-info"${add_attribute("style", showButtons.includes("pageInfo") ? "" : "display: none;", 0)}><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 2h4v15a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V0h16v2zm0 2v13a1 1 0
0 0 1 1 1 1 0 0 0 1-1V4h-2zM2 2v15a1 1 0 0 0 1 1h11.17a2.98 2.98
0 0 1-.17-1V2H2zm2 8h8v2H4v-2zm0 4h8v2H4v-2zM4 4h8v4H4V4z"></path></svg> <div class="text">Page :
<span${add_attribute("this", page_num, 0)}></span>
/
<span${add_attribute("this", pageCount, 0)}></span></div></span></div> <div${add_attribute("class", showBorder === true ? "viewer" : "null", 0)}><canvas${add_attribute("width", pageWidth, 0)}${add_attribute("height", pageHeight, 0)}${add_attribute("this", canvas, 0)}></canvas></div></div>` : `<div${add_attribute("class", showBorder === true ? "viewer" : "null", 0)}><canvas${add_attribute("this", canvas, 0)}></canvas> </div>`}`}</div> ${showTopButton ? `<button id="topBtn" data-svelte-h="svelte-doxth2"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 10v8h6v-8h5l-8-8-8 8h5z"></path></svg></button>` : ``} </div>`;
});
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `${validate_component(PdfViewer, "PdfViewer").$$render(
$$result,
{
url: "https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf"
},
{},
{}
)}`;
});
export {
Page as default
};