wickes-css2 2.113.0 → 2.117.0-develop.1

package/src/js/libs/pdf-preview.js

@@ -0,0 +1,1177 @@
+/* eslint-env amd */
+/*!
+ * PdfPreview - a small, dependency-free PDF preview with pagination.
+ *
+ * Renders a PDF into a container as one canvas per page, and wires up optional
+ * navigation controls. Brings no styling of its own: the consumer supplies the
+ * markup, the classes, and the CSS.
+ *
+ * pdf.js is the only dependency and is fetched from a CDN on first use, unless
+ * an instance of it is passed in or already present on the page.
+ *
+ * Quick start
+ * -----------
+ *   <div id="preview">
+ *     <button data-pdf-preview-prev>Prev</button>
+ *     <input data-pdf-preview-page>
+ *     / <span data-pdf-preview-total></span>
+ *     <button data-pdf-preview-next>Next</button>
+ *     <div data-pdf-preview-pages></div>
+ *   </div>
+ *
+ *   var preview = new PdfPreview('#preview');
+ *   preview.load(fileOrBlobOrUrl);
+ *
+ * Constructing against an element that already has an instance returns that
+ * instance, so this is safe to call repeatedly. Options are read on first
+ * construction only; call destroy() first to rebuild with different ones.
+ *
+ * Declarative usage
+ * -----------------
+ *   <div data-pdf-preview data-pdf-preview-src="doc.pdf"> ... </div>
+ *   PdfPreview.initAll();
+ *
+ * Thumbnails
+ * ----------
+ * One page drawn to an offscreen canvas and handed back as a data URL, for use
+ * as the src of an <img>. No root element and no preview needed.
+ *
+ *   PdfPreview.thumbnail(fileOrBlobOrUrl, { width: 120 }).then(function (thumb) {
+ *     img.src = thumb.dataUrl;
+ *   });
+ *
+ *   PdfPreview.thumbnailInto(img, fileOrBlobOrUrl, { width: 120 });
+ *
+ *   <img data-pdf-thumbnail data-pdf-thumbnail-src="doc.pdf" alt="First page">
+ *   PdfPreview.initThumbnails();
+ *
+ * A preview that already has a document open can make one from it, without
+ * reading and parsing the file a second time:
+ *
+ *   preview.getThumbnail({ width: 120 }).then(...);
+ *
+ * Thumbnail options
+ * -----------------
+ *   width           number   width to draw the page at in CSS px, default 160
+ *   height          number   height to draw the page at in CSS px, default none.
+ *                            With both, the page is fitted inside the box and
+ *                            keeps its aspect ratio
+ *   page            number   page to draw, default 1, clamped to the document
+ *   maxPixelRatio   number   as above, default 2
+ *   type            string   image format, default 'image/jpeg'
+ *   quality         number   quality for lossy formats, 0 to 1, default 0.85
+ *   background      string   colour drawn behind the page, default '#ffffff'
+ *   pdfjsLib, pdfjsUrl, pdfjsWorkerUrl  as above
+ *
+ * Thumbnail events (dispatched on the <img>, bubbling)
+ * ----------------------------------------------------
+ *   pdfthumbnail:loaded  detail: { dataUrl, width, height, page, pageCount }
+ *   pdfthumbnail:error   detail: { error }
+ *
+ * Out of the box it injects a handful of base styles so the pages stack inside a
+ * scrolling viewport. These go in at the top of <head>, so any stylesheet on the
+ * page overrides them, and `injectStyles: false` turns them off entirely.
+ *
+ * Options
+ * -------
+ *   scale           number   page size relative to the PDF's own size, used when
+ *                            fitWidth is false (or the container has no width
+ *                            yet), default 1.5
+ *   pageClass       string   extra class set on every page canvas, default ''
+ *   src             string   URL loaded immediately
+ *   fitWidth        boolean  size pages to the container width, default true
+ *   maxPixelRatio   number   cap on the device pixel ratio pages are rendered
+ *                            at, to bound memory on dense screens, default 2
+ *   height          number|string  max-height of the scrolling viewport, any
+ *                                  CSS length, default '50vh'. 'none' removes
+ *                                  the cap. Bare numbers are treated as px.
+ *   spacing         number|string  gap between pages and inset around them,
+ *                                  default 16px. Bare numbers are treated as px.
+ *   injectStyles    boolean  add the base layout styles, default true
+ *   pdfjsLib        object   existing pdf.js instance, skips the CDN fetch
+ *   pdfjsUrl        string   pdf.js script URL
+ *   pdfjsWorkerUrl  string   pdf.js worker URL
+ *   selectors       object   overrides for the markup hooks below
+ *
+ * Events (dispatched on the root element, all bubbling)
+ * -----------------------------------------------------
+ *   pdfpreview:loaded      detail: { pageCount }
+ *   pdfpreview:pagechange  detail: { page }
+ *   pdfpreview:error       detail: { error }
+ */
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        module.exports = factory();
+    } else {
+        root.PdfPreview = factory();
+    }
+})(typeof self !== 'undefined' ? self : this, function () {
+    'use strict';
+
+    var DEFAULTS = {
+        scale: 1.5,
+        pageClass: '',
+        src: null,
+        fitWidth: true,
+        maxPixelRatio: 2,
+        height: '50vh',
+        spacing: null,
+        injectStyles: true,
+        pdfjsLib: null,
+        pdfjsUrl: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js',
+        pdfjsWorkerUrl: 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js',
+    };
+
+    // Thumbnails share the pdf.js plumbing with previews but nothing else, so
+    // they get their own defaults rather than overloading the ones above.
+    var THUMBNAIL_DEFAULTS = {
+        width: 160,
+        height: null,
+        page: 1,
+        maxPixelRatio: DEFAULTS.maxPixelRatio,
+        // JPEG keeps the data URL small, which matters when it lives in an
+        // attribute. PDF pages are opaque, so there is no transparency to lose.
+        type: 'image/jpeg',
+        quality: 0.85,
+        background: '#ffffff',
+        pdfjsLib: DEFAULTS.pdfjsLib,
+        pdfjsUrl: DEFAULTS.pdfjsUrl,
+        pdfjsWorkerUrl: DEFAULTS.pdfjsWorkerUrl,
+    };
+
+    var SELECTORS = {
+        root: '[data-pdf-preview]',
+        pages: '[data-pdf-preview-pages]',
+        first: '[data-pdf-preview-first]',
+        prev: '[data-pdf-preview-prev]',
+        next: '[data-pdf-preview-next]',
+        last: '[data-pdf-preview-last]',
+        pageInput: '[data-pdf-preview-page]',
+        pageTotal: '[data-pdf-preview-total]',
+        thumbnail: '[data-pdf-thumbnail]',
+    };
+
+    // Classes the library puts on its own elements. Prefixed to stay clear of
+    // whatever the consumer names things.
+    var CLASSES = {
+        pages: 'pdfp-pages',
+        page: 'pdfp-page',
+        pageAuto: 'pdfp-page--auto',
+    };
+
+    var STYLE_ID = 'pdf-preview-base-styles';
+
+    /**
+     * The minimum needed for a usable document view: a scrolling viewport with
+     * pages stacked inside it. Decoration is left to the consumer, so this is
+     * inserted at the top of <head> and any stylesheet on the page outranks it.
+     */
+    var BASE_STYLES =
+        '.' +
+        CLASSES.pages +
+        '{overflow-y:auto;overflow-x:hidden;max-height:var(--pdfp-height);scrollbar-gutter:stable;' +
+        'padding:var(--pdfp-spacing,16px);-webkit-overflow-scrolling:touch}' +
+        '.' +
+        CLASSES.page +
+        '{display:block;width:100%;height:auto;margin:0 auto}' +
+        // Canvases are rendered at a multiple of their display size for sharp
+        // output on dense screens, so natural-size pages need their CSS width
+        // set explicitly. The library supplies it as --pdfp-page-width.
+        '.' +
+        CLASSES.pageAuto +
+        '{width:var(--pdfp-page-width,auto);max-width:100%}' +
+        '.' +
+        CLASSES.page +
+        '+.' +
+        CLASSES.page +
+        '{margin-top:var(--pdfp-spacing,16px)}';
+
+    // How long after the last scroll event a programmatic scroll is treated as
+    // finished, and the safety net for when it produces no scroll events at all.
+    var SETTLE_DELAY = 150;
+    var SETTLE_TIMEOUT = 700;
+
+    // Largest canvas iOS Safari will draw (4096 x 4096); bigger ones render blank.
+    var MAX_CANVAS_PIXELS = 16777216;
+
+    var INSTANCE_KEY = '__pdfPreview';
+    var THUMBNAIL_KEY = '__pdfThumbnail';
+    var pdfjsPromise = null;
+    var stylesInjected = false;
+
+    function noop() {
+        // Deliberately empty: used to mark a rejection as handled.
+    }
+
+    function injectBaseStyles() {
+        if (stylesInjected || document.getElementById(STYLE_ID)) {
+            stylesInjected = true;
+
+            return;
+        }
+
+        var style = document.createElement('style');
+
+        style.id = STYLE_ID;
+        style.appendChild(document.createTextNode(BASE_STYLES));
+        document.head.insertBefore(style, document.head.firstChild);
+        stylesInjected = true;
+    }
+
+    function assign(target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            if (!source) {
+                continue;
+            }
+
+            for (var key in source) {
+                if (
+                    Object.prototype.hasOwnProperty.call(source, key) &&
+                    source[key] !== undefined
+                ) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    }
+
+    function smoothScrollSupported() {
+        return 'scrollBehavior' in document.documentElement.style;
+    }
+
+    function emit(element, name, detail) {
+        var event;
+
+        try {
+            event = new CustomEvent(name, { detail: detail, bubbles: true });
+        } catch (error) {
+            // IE11 and other engines without the CustomEvent constructor.
+            event = document.createEvent('CustomEvent');
+            event.initCustomEvent(name, true, false, detail);
+        }
+
+        element.dispatchEvent(event);
+    }
+
+    /**
+     * Scale back a render that would need a canvas bigger than iOS Safari will
+     * draw. Shared by pages and thumbnails, so neither can render blank.
+     */
+    function clampRenderScale(natural, renderScale) {
+        var area = natural.width * natural.height * renderScale * renderScale;
+
+        if (area > MAX_CANVAS_PIXELS) {
+            return renderScale * Math.sqrt(MAX_CANVAS_PIXELS / area);
+        }
+
+        return renderScale;
+    }
+
+    function toCssLength(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+
+        return /^-?\d+(\.\d+)?$/.test(String(value)) ? value + 'px' : String(value);
+    }
+
+    function addClass(existing, name) {
+        var current = existing ? String(existing).split(/\s+/) : [];
+
+        for (var i = 0; i < current.length; i++) {
+            if (current[i] === name) {
+                return existing;
+            }
+        }
+
+        current.push(name);
+
+        return current.join(' ').replace(/^\s+/, '');
+    }
+
+    function resolveElement(target) {
+        if (!target) {
+            return null;
+        }
+
+        if (typeof target === 'string') {
+            return document.querySelector(target);
+        }
+
+        // Accept a jQuery-like or array-like wrapper.
+        if (target.nodeType !== 1 && typeof target.length === 'number') {
+            return target[0] || null;
+        }
+
+        return target.nodeType === 1 ? target : null;
+    }
+
+    function readDataOptions(element) {
+        var scale = parseFloat(element.getAttribute('data-pdf-preview-scale'));
+        var maxPixelRatio = parseFloat(element.getAttribute('data-pdf-preview-max-pixel-ratio'));
+
+        var fitWidth = element.getAttribute('data-pdf-preview-fit-width');
+
+        return {
+            scale: isNaN(scale) ? undefined : scale,
+            maxPixelRatio: isNaN(maxPixelRatio) ? undefined : maxPixelRatio,
+            pageClass: element.getAttribute('data-pdf-preview-page-class') || undefined,
+            src: element.getAttribute('data-pdf-preview-src') || undefined,
+            height: element.getAttribute('data-pdf-preview-height') || undefined,
+            spacing: element.getAttribute('data-pdf-preview-spacing') || undefined,
+            fitWidth: fitWidth === null ? undefined : fitWidth !== 'false',
+        };
+    }
+
+    function loadScript(url) {
+        return new Promise(function (resolve, reject) {
+            var script = document.createElement('script');
+
+            script.src = url;
+            script.onload = resolve;
+            script.onerror = function () {
+                reject(new Error('PdfPreview: failed to load ' + url));
+            };
+            document.head.appendChild(script);
+        });
+    }
+
+    function getPdfjs(options) {
+        if (options.pdfjsLib) {
+            return Promise.resolve(options.pdfjsLib);
+        }
+
+        if (window.pdfjsLib) {
+            return Promise.resolve(window.pdfjsLib);
+        }
+
+        if (!pdfjsPromise) {
+            pdfjsPromise = loadScript(options.pdfjsUrl).then(function () {
+                var lib = window.pdfjsLib || window['pdfjs-dist/build/pdf'];
+
+                if (!lib) {
+                    throw new Error('PdfPreview: pdf.js did not register itself');
+                }
+
+                if (options.pdfjsWorkerUrl && lib.GlobalWorkerOptions) {
+                    lib.GlobalWorkerOptions.workerSrc = options.pdfjsWorkerUrl;
+                }
+
+                window.pdfjsLib = lib;
+
+                return lib;
+            });
+        }
+
+        return pdfjsPromise;
+    }
+
+    /**
+     * Scale that fits a page into the requested box. With a width and a height
+     * the smaller of the two wins, so the page is contained rather than
+     * stretched; the thumbnail then matches the page's own aspect ratio.
+     */
+    function thumbnailDisplayScale(natural, options) {
+        var width = parseFloat(options.width);
+        var height = parseFloat(options.height);
+        var scale = Infinity;
+
+        if (width > 0) {
+            scale = Math.min(scale, width / natural.width);
+        }
+
+        if (height > 0) {
+            scale = Math.min(scale, height / natural.height);
+        }
+
+        return scale === Infinity ? 1 : scale;
+    }
+
+    /**
+     * Draw one page to an offscreen canvas and hand it back as a data URL. The
+     * canvas is released straight away, so all that is kept is the string.
+     */
+    function drawThumbnail(page, options) {
+        var natural = page.getViewport({ scale: 1 });
+        var displayScale = thumbnailDisplayScale(natural, options);
+        var pixelRatio = Math.min(window.devicePixelRatio || 1, options.maxPixelRatio);
+        var renderScale = clampRenderScale(natural, displayScale * pixelRatio);
+        var viewport = page.getViewport({ scale: renderScale });
+        var canvas = document.createElement('canvas');
+
+        canvas.width = Math.floor(viewport.width);
+        canvas.height = Math.floor(viewport.height);
+
+        return page
+            .render({
+                canvasContext: canvas.getContext('2d'),
+                viewport: viewport,
+                // pdf.js fills white by default, but a PDF page carries no
+                // background of its own, so say it explicitly rather than rely
+                // on the default of whichever pdf.js is in play.
+                background: options.background,
+            })
+            .promise.then(function () {
+                var dataUrl = canvas.toDataURL(options.type, options.quality);
+
+                // Zero-sized canvases free their backing store immediately,
+                // which matters on iOS where it is capped per page.
+                canvas.width = 0;
+                canvas.height = 0;
+
+                return {
+                    dataUrl: dataUrl,
+                    width: Math.round(natural.width * displayScale),
+                    height: Math.round(natural.height * displayScale),
+                };
+            });
+    }
+
+    function thumbnailFromDocument(doc, options) {
+        var requested = parseInt(options.page, 10);
+        var pageNumber = Math.min(Math.max(isNaN(requested) ? 1 : requested, 1), doc.numPages);
+
+        return doc.getPage(pageNumber).then(function (page) {
+            return drawThumbnail(page, options).then(function (thumbnail) {
+                thumbnail.page = pageNumber;
+                thumbnail.pageCount = doc.numPages;
+
+                return thumbnail;
+            });
+        });
+    }
+
+    function readThumbnailDataOptions(element) {
+        var width = parseFloat(element.getAttribute('data-pdf-thumbnail-width'));
+        var height = parseFloat(element.getAttribute('data-pdf-thumbnail-height'));
+        var page = parseInt(element.getAttribute('data-pdf-thumbnail-page'), 10);
+        var quality = parseFloat(element.getAttribute('data-pdf-thumbnail-quality'));
+
+        return {
+            src: element.getAttribute('data-pdf-thumbnail-src') || undefined,
+            width: isNaN(width) ? undefined : width,
+            height: isNaN(height) ? undefined : height,
+            page: isNaN(page) ? undefined : page,
+            type: element.getAttribute('data-pdf-thumbnail-type') || undefined,
+            quality: isNaN(quality) ? undefined : quality,
+        };
+    }
+
+    function PdfPreview(target, options) {
+        var element = resolveElement(target);
+
+        if (!element) {
+            throw new Error('PdfPreview: root element not found');
+        }
+
+        // Calling on an already-initialised element returns the existing
+        // instance, so it is safe to call repeatedly for the same root.
+        if (element[INSTANCE_KEY]) {
+            return element[INSTANCE_KEY];
+        }
+
+        // Tolerate being called without `new`.
+        if (!(this instanceof PdfPreview)) {
+            return new PdfPreview(element, options);
+        }
+
+        this.element = element;
+        this.options = assign({}, DEFAULTS, readDataOptions(element), options);
+        this.selectors = assign({}, SELECTORS, (options || {}).selectors);
+        this.pagesContainer = element.querySelector(this.selectors.pages) || element;
+        this.doc = null;
+        this.canvases = [];
+        this.objectUrl = null;
+        // Bumped by every load() and reset(), so async work started by an
+        // earlier load can tell it has been superseded and stop touching the DOM.
+        this._loadId = 0;
+        this._loadingTask = null;
+
+        element[INSTANCE_KEY] = this;
+
+        if (this.options.injectStyles) {
+            injectBaseStyles();
+            this.pagesContainer.className = addClass(this.pagesContainer.className, CLASSES.pages);
+        }
+
+        // Sizing options are handed to the base styles as custom properties
+        // rather than set as inline max-height/padding/margin, so a consumer
+        // stylesheet can still override the real properties.
+        var height = toCssLength(this.options.height);
+        var spacing = toCssLength(this.options.spacing);
+
+        if (this.pagesContainer.style.setProperty) {
+            if (height) {
+                this.pagesContainer.style.setProperty('--pdfp-height', height);
+            }
+
+            if (spacing) {
+                this.pagesContainer.style.setProperty('--pdfp-spacing', spacing);
+            }
+        }
+
+        this._bind();
+
+        if (this.options.src) {
+            this.load(this.options.src);
+        }
+    }
+
+    PdfPreview.prototype._find = function (selector) {
+        return selector ? this.element.querySelector(selector) : null;
+    };
+
+    PdfPreview.prototype._emit = function (name, detail) {
+        emit(this.element, name, detail);
+    };
+
+    PdfPreview.prototype._bind = function () {
+        var self = this;
+
+        this._onClick = function (event) {
+            var target = event.target;
+
+            function matches(selector) {
+                return selector && target.closest(selector);
+            }
+
+            if (matches(self.selectors.first)) {
+                self.goToPage(1);
+            } else if (matches(self.selectors.prev)) {
+                self.goToPage(self.getCurrentPage() - 1);
+            } else if (matches(self.selectors.next)) {
+                self.goToPage(self.getCurrentPage() + 1);
+            } else if (matches(self.selectors.last)) {
+                self.goToPage(self.getPageCount());
+            } else {
+                return;
+            }
+
+            event.preventDefault();
+        };
+
+        this._onChange = function (event) {
+            if (!self.selectors.pageInput || !event.target.closest(self.selectors.pageInput)) {
+                return;
+            }
+
+            var value = parseInt(event.target.value, 10);
+
+            if (!isNaN(value) && value >= 1 && value <= self.getPageCount()) {
+                self.goToPage(value);
+            } else {
+                self._setPageInput(self.getCurrentPage());
+            }
+        };
+
+        this._onScroll = function (event) {
+            var target = event.target;
+
+            // Listening in the capture phase on the document sees every scroll
+            // on the page, since scroll events do not bubble. Only the ones that
+            // move the pages matter: the pages container itself when it is the
+            // scrolling viewport, or an ancestor (the window, a modal) when the
+            // pages sit in normal flow.
+            if (target !== document && !(target.contains && target.contains(self.pagesContainer))) {
+                return;
+            }
+
+            if (self._scrollLocked) {
+                // A programmatic scroll is running, so keep showing the
+                // destination page and wait for it to settle rather than
+                // reporting every page it travels past.
+                self._lockPageSync(SETTLE_DELAY);
+
+                return;
+            }
+
+            if (self._scrollFrame) {
+                return;
+            }
+
+            self._scrollFrame = requestAnimationFrame(function () {
+                self._scrollFrame = null;
+                self._setPageInput(self.getCurrentPage());
+            });
+        };
+
+        this.element.addEventListener('click', this._onClick);
+        this.element.addEventListener('change', this._onChange);
+        document.addEventListener('scroll', this._onScroll, true);
+    };
+
+    /** Whether the pages container is itself the scrolling viewport. */
+    PdfPreview.prototype._isScrollViewport = function () {
+        return this.pagesContainer.scrollHeight > this.pagesContainer.clientHeight;
+    };
+
+    /**
+     * Stop scroll events from writing to the page input until things have
+     * settled. Called again on every scroll event so the lock lasts as long as
+     * the animation does. Once settled, the page asked for by goToPage() is kept
+     * even if it could not be scrolled fully into place (e.g. the second-to-last
+     * page when the last one is short); the next user scroll re-syncs.
+     */
+    PdfPreview.prototype._lockPageSync = function (delay) {
+        var self = this;
+
+        this._scrollLocked = true;
+        clearTimeout(this._scrollTimer);
+
+        this._scrollTimer = setTimeout(function () {
+            self._scrollLocked = false;
+            self._setPageInput(self._targetPage || self.getCurrentPage());
+            self._targetPage = null;
+        }, delay);
+    };
+
+    PdfPreview.prototype._setPageInput = function (page) {
+        var input = this._find(this.selectors.pageInput);
+
+        if (input && String(input.value) !== String(page)) {
+            input.value = page;
+            this._emit('pdfpreview:pagechange', { page: page });
+        }
+    };
+
+    PdfPreview.prototype._setPageTotal = function (total) {
+        var element = this._find(this.selectors.pageTotal);
+
+        if (element) {
+            element.textContent = total;
+        }
+    };
+
+    PdfPreview.prototype._isCurrentLoad = function (token) {
+        return token === this._loadId;
+    };
+
+    /** Width available to a page inside the pages container, in CSS px. */
+    PdfPreview.prototype._contentWidth = function () {
+        var container = this.pagesContainer;
+        var style = window.getComputedStyle(container);
+
+        return (
+            container.clientWidth -
+            (parseFloat(style.paddingLeft) || 0) -
+            (parseFloat(style.paddingRight) || 0)
+        );
+    };
+
+    /**
+     * Scale that gives a page its on-screen (CSS) size: the container width
+     * when fitting, otherwise the `scale` option. Also used when the container
+     * has no width yet, e.g. when loading into a hidden element.
+     */
+    PdfPreview.prototype._displayScale = function (pageWidth) {
+        if (this.options.fitWidth && this._availableWidth > 0) {
+            return this._availableWidth / pageWidth;
+        }
+
+        return this.options.scale;
+    };
+
+    PdfPreview.prototype._renderPage = function (num, token) {
+        var self = this;
+
+        return this.doc.getPage(num).then(function (page) {
+            if (!self._isCurrentLoad(token)) {
+                return;
+            }
+
+            // Draw at display size x device pixel ratio, so the canvas has one
+            // backing pixel per screen pixel and stays sharp on dense screens,
+            // capped to keep memory in check.
+            var natural = page.getViewport({ scale: 1 });
+            var displayScale = self._displayScale(natural.width);
+            var pixelRatio = Math.min(window.devicePixelRatio || 1, self.options.maxPixelRatio);
+            var renderScale = clampRenderScale(natural, displayScale * pixelRatio);
+            var viewport = page.getViewport({ scale: renderScale });
+            var canvas = document.createElement('canvas');
+
+            canvas.width = Math.floor(viewport.width);
+            canvas.height = Math.floor(viewport.height);
+            canvas.setAttribute('data-page', num);
+
+            if (canvas.style.setProperty) {
+                canvas.style.setProperty(
+                    '--pdfp-page-width',
+                    Math.round(natural.width * displayScale) + 'px'
+                );
+            }
+
+            var className = '';
+
+            if (self.options.injectStyles) {
+                className = addClass(className, CLASSES.page);
+
+                if (!self.options.fitWidth) {
+                    className = addClass(className, CLASSES.pageAuto);
+                }
+            }
+
+            if (self.options.pageClass) {
+                className = addClass(className, self.options.pageClass);
+            }
+
+            if (className) {
+                canvas.className = className;
+            }
+
+            self.pagesContainer.appendChild(canvas);
+            self.canvases.push(canvas);
+
+            return page.render({
+                canvasContext: canvas.getContext('2d'),
+                viewport: viewport,
+            }).promise;
+        });
+    };
+
+    PdfPreview.prototype._renderFrom = function (num, token) {
+        var self = this;
+
+        if (!this._isCurrentLoad(token) || !this.doc || num > this.doc.numPages) {
+            return Promise.resolve();
+        }
+
+        return this._renderPage(num, token).then(function () {
+            return self._renderFrom(num + 1, token);
+        });
+    };
+
+    /**
+     * Render a PDF. Accepts a File, a Blob, or a URL string.
+     * Returns a Promise resolving with the pdf.js document, or with undefined
+     * when the load is superseded by another load(), reset() or destroy()
+     * before it finishes.
+     */
+    PdfPreview.prototype.load = function (source) {
+        var self = this;
+
+        if (!source) {
+            return Promise.reject(new Error('PdfPreview: no source given'));
+        }
+
+        this.reset();
+
+        var token = ++this._loadId;
+
+        return getPdfjs(this.options)
+            .then(function (pdfjsLib) {
+                if (!self._isCurrentLoad(token)) {
+                    return null;
+                }
+
+                var url = source;
+
+                if (typeof source !== 'string') {
+                    self.objectUrl = URL.createObjectURL(source);
+                    url = self.objectUrl;
+                }
+
+                // isEvalSupported: false stops pdf.js compiling font glyphs into
+                // code with new Function(), which a crafted PDF can abuse to run
+                // its own script (CVE-2024-4367, fixed in pdf.js 4.2.67). Glyphs
+                // are interpreted instead; slightly slower, but safe for any
+                // pdf.js version, including one passed in via `pdfjsLib`.
+                self._loadingTask = pdfjsLib.getDocument({ url: url, isEvalSupported: false });
+
+                return self._loadingTask.promise;
+            })
+            .then(function (doc) {
+                if (!doc) {
+                    return undefined;
+                }
+
+                if (!self._isCurrentLoad(token)) {
+                    // Resolved after being superseded: free it and bail out.
+                    doc.destroy();
+
+                    return undefined;
+                }
+
+                self.doc = doc;
+                self._setPageTotal(doc.numPages);
+
+                var input = self._find(self.selectors.pageInput);
+
+                if (input) {
+                    input.setAttribute('max', doc.numPages);
+                    input.value = 1;
+                }
+
+                self._emit('pdfpreview:loaded', { pageCount: doc.numPages });
+
+                // Measured once per load, so every page is fitted to the same width.
+                self._availableWidth = self._contentWidth();
+
+                return self._renderFrom(1, token).then(function () {
+                    return self._isCurrentLoad(token) ? doc : undefined;
+                });
+            })
+            .catch(function (error) {
+                // Cancelling a load makes pdf.js reject whatever was in flight
+                // (worker destroyed, rendering cancelled). That is expected, not
+                // an error worth reporting.
+                if (!self._isCurrentLoad(token)) {
+                    return undefined;
+                }
+
+                self._emit('pdfpreview:error', { error: error });
+                throw error;
+            });
+    };
+
+    /**
+     * Remove all rendered pages, cancel any load in progress and release the
+     * current document.
+     */
+    PdfPreview.prototype.reset = function () {
+        this._loadId++;
+
+        if (this._loadingTask) {
+            // Also destroys the document it produced, and aborts the fetch and
+            // parsing if it has not finished yet.
+            this._loadingTask.destroy();
+            this._loadingTask = null;
+        }
+
+        while (this.pagesContainer.firstChild) {
+            this.pagesContainer.removeChild(this.pagesContainer.firstChild);
+        }
+
+        this.canvases = [];
+        this.doc = null;
+        clearTimeout(this._scrollTimer);
+        cancelAnimationFrame(this._scrollFrame);
+        this._scrollFrame = null;
+        this._scrollLocked = false;
+        this._targetPage = null;
+        this._setPageTotal('');
+
+        var input = this._find(this.selectors.pageInput);
+
+        if (input) {
+            input.value = 1;
+        }
+
+        if (this.objectUrl) {
+            URL.revokeObjectURL(this.objectUrl);
+            this.objectUrl = null;
+        }
+    };
+
+    PdfPreview.prototype.getPageCount = function () {
+        return this.doc ? this.doc.numPages : 0;
+    };
+
+    /**
+     * Thumbnail of the document this preview already has open, so the file is
+     * read and parsed once for both. Resolves with { dataUrl, width, height,
+     * page, pageCount }, or with undefined when a later load(), reset() or
+     * destroy() takes over while it is being drawn. Rejects when no document is
+     * open; use the static PdfPreview.thumbnail() for that case.
+     */
+    PdfPreview.prototype.getThumbnail = function (options) {
+        var self = this;
+
+        if (!this.doc) {
+            return Promise.reject(new Error('PdfPreview: no document loaded'));
+        }
+
+        var settings = assign(
+            {},
+            THUMBNAIL_DEFAULTS,
+            { maxPixelRatio: this.options.maxPixelRatio },
+            options
+        );
+        var token = this._loadId;
+
+        return thumbnailFromDocument(this.doc, settings).then(
+            function (thumbnail) {
+                return self._isCurrentLoad(token) ? thumbnail : undefined;
+            },
+            function (error) {
+                // Superseded loads destroy the document mid-render, which
+                // rejects. Expected, and not this thumbnail's problem.
+                if (!self._isCurrentLoad(token)) {
+                    return undefined;
+                }
+
+                throw error;
+            }
+        );
+    };
+
+    /**
+     * The page under, or nearest to, the middle of the visible area: the
+     * pages container when it scrolls, otherwise the browser window.
+     */
+    PdfPreview.prototype.getCurrentPage = function () {
+        var count = this.canvases.length;
+
+        if (!count) {
+            return 1;
+        }
+
+        var middle;
+
+        if (this._isScrollViewport()) {
+            var container = this.pagesContainer;
+
+            // A short last page can never reach the middle, so treat the very
+            // end of the scroll range as the last page (and the start as the first).
+            if (container.scrollTop + container.clientHeight >= container.scrollHeight - 1) {
+                return count;
+            }
+
+            if (container.scrollTop <= 0) {
+                return 1;
+            }
+
+            var bounds = container.getBoundingClientRect();
+
+            middle = bounds.top + bounds.height / 2;
+        } else {
+            middle = window.innerHeight / 2;
+        }
+
+        var nearest = 1;
+        var nearestDistance = Infinity;
+
+        for (var i = 0; i < count; i++) {
+            var pageBounds = this.canvases[i].getBoundingClientRect();
+
+            if (pageBounds.top <= middle && pageBounds.bottom >= middle) {
+                return i + 1;
+            }
+
+            // The middle is in the gap between pages (or past either end):
+            // fall back to whichever page edge is closest to it.
+            var distance = Math.min(
+                Math.abs(pageBounds.top - middle),
+                Math.abs(pageBounds.bottom - middle)
+            );
+
+            if (distance < nearestDistance) {
+                nearestDistance = distance;
+                nearest = i + 1;
+            }
+        }
+
+        return nearest;
+    };
+
+    PdfPreview.prototype.goToPage = function (page) {
+        var canvas = this.canvases[page - 1];
+
+        if (!canvas || page < 1 || page > this.getPageCount()) {
+            return this;
+        }
+
+        var container = this.pagesContainer;
+
+        // Show the destination straight away and hold it there for the duration
+        // of the scroll, so the input does not count through every page on route.
+        this._setPageInput(page);
+        this._targetPage = page;
+        this._lockPageSync(SETTLE_TIMEOUT);
+
+        if (this._isScrollViewport()) {
+            // Scroll the viewport itself rather than using scrollIntoView, which
+            // would also scroll every ancestor and drag the page away from the
+            // navigation controls.
+            var offset = canvas.getBoundingClientRect().top - container.getBoundingClientRect().top;
+            var paddingTop = parseFloat(window.getComputedStyle(container).paddingTop) || 0;
+            var top = container.scrollTop + offset - paddingTop;
+
+            if (smoothScrollSupported() && container.scrollTo) {
+                container.scrollTo({ top: top, behavior: 'smooth' });
+            } else {
+                container.scrollTop = top;
+            }
+        } else {
+            // Not a scrolling viewport, so the pages sit in normal page flow and
+            // moving the document is the only way to reach them.
+            canvas.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+
+        return this;
+    };
+
+    /** Unbind listeners, clear the container and forget the instance. */
+    PdfPreview.prototype.destroy = function () {
+        this.reset();
+        clearTimeout(this._scrollTimer);
+        this._scrollLocked = false;
+        this.element.removeEventListener('click', this._onClick);
+        this.element.removeEventListener('change', this._onChange);
+        document.removeEventListener('scroll', this._onScroll, true);
+        delete this.element[INSTANCE_KEY];
+    };
+
+    /**
+     * Thumbnail of one page of a PDF, as a data URL for the src of an <img>.
+     * Accepts a File, a Blob or a URL, and needs no preview and no element.
+     * Resolves with { dataUrl, width, height, page, pageCount }, where width
+     * and height are the CSS px the thumbnail is meant to be shown at.
+     *
+     * The document is closed and any object URL revoked before it resolves, so
+     * nothing is held on to but the string.
+     */
+    PdfPreview.thumbnail = function (source, options) {
+        if (!source) {
+            return Promise.reject(new Error('PdfPreview.thumbnail: no source given'));
+        }
+
+        var settings = assign({}, THUMBNAIL_DEFAULTS, options);
+        var objectUrl = null;
+        var loadingTask = null;
+
+        function release() {
+            if (loadingTask) {
+                // Destroys the document it produced along with it.
+                loadingTask.destroy();
+                loadingTask = null;
+            }
+
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+                objectUrl = null;
+            }
+        }
+
+        return getPdfjs(settings)
+            .then(function (pdfjsLib) {
+                var url = source;
+
+                if (typeof source !== 'string') {
+                    objectUrl = URL.createObjectURL(source);
+                    url = objectUrl;
+                }
+
+                // isEvalSupported: false for the same reason as in load().
+                loadingTask = pdfjsLib.getDocument({ url: url, isEvalSupported: false });
+
+                return loadingTask.promise;
+            })
+            .then(function (doc) {
+                return thumbnailFromDocument(doc, settings);
+            })
+            .then(
+                function (thumbnail) {
+                    release();
+
+                    return thumbnail;
+                },
+                function (error) {
+                    release();
+
+                    throw error;
+                }
+            );
+    };
+
+    /**
+     * Render a thumbnail straight into an <img>: sets its src, and its width
+     * and height so the tile holds its space before the image arrives. Options
+     * can come from data-pdf-thumbnail-* attributes on the element, with the
+     * ones passed here winning. `source` may be omitted to use
+     * data-pdf-thumbnail-src.
+     *
+     * Dispatches pdfthumbnail:loaded or pdfthumbnail:error on the element. On
+     * failure the element is left untouched, so whatever it already shows (a
+     * generic file icon, say) stays visible.
+     */
+    PdfPreview.thumbnailInto = function (target, source, options) {
+        var element = resolveElement(target);
+
+        if (!element) {
+            return Promise.reject(new Error('PdfPreview.thumbnailInto: element not found'));
+        }
+
+        if (element.tagName !== 'IMG') {
+            return Promise.reject(new Error('PdfPreview.thumbnailInto: expects an <img> element'));
+        }
+
+        var settings = assign({}, readThumbnailDataOptions(element), options);
+
+        return PdfPreview.thumbnail(source || settings.src, settings).then(
+            function (thumbnail) {
+                element.src = thumbnail.dataUrl;
+                element.setAttribute('width', thumbnail.width);
+                element.setAttribute('height', thumbnail.height);
+                emit(element, 'pdfthumbnail:loaded', thumbnail);
+
+                return thumbnail;
+            },
+            function (error) {
+                emit(element, 'pdfthumbnail:error', { error: error });
+
+                throw error;
+            }
+        );
+    };
+
+    /**
+     * Fill every [data-pdf-thumbnail] within an optional scope from its
+     * data-pdf-thumbnail-src. Returns the promises, one per element, in
+     * document order. Elements already handled are skipped, so this is safe to
+     * call again after adding markup.
+     */
+    PdfPreview.initThumbnails = function (scope, options) {
+        var context = resolveElement(scope) || document;
+        var elements = context.querySelectorAll(SELECTORS.thumbnail);
+        var promises = [];
+
+        for (var i = 0; i < elements.length; i++) {
+            var element = elements[i];
+
+            if (!element[THUMBNAIL_KEY]) {
+                element[THUMBNAIL_KEY] = PdfPreview.thumbnailInto(element, null, options);
+                // Failures are reported through pdfthumbnail:error and through
+                // the returned promise. This stops a caller that watches the
+                // events instead from logging an unhandled rejection.
+                element[THUMBNAIL_KEY].catch(noop);
+            }
+
+            promises.push(element[THUMBNAIL_KEY]);
+        }
+
+        return promises;
+    };
+
+    /** Existing instance for an element, or null. */
+    PdfPreview.get = function (target) {
+        var element = resolveElement(target);
+
+        return (element && element[INSTANCE_KEY]) || null;
+    };
+
+    /** Initialise every [data-pdf-preview] within an optional scope. */
+    PdfPreview.initAll = function (scope, options) {
+        var context = resolveElement(scope) || document;
+        var elements = context.querySelectorAll(SELECTORS.root);
+        var instances = [];
+
+        for (var i = 0; i < elements.length; i++) {
+            instances.push(new PdfPreview(elements[i], options));
+        }
+
+        return instances;
+    };
+
+    PdfPreview.defaults = DEFAULTS;
+    PdfPreview.thumbnailDefaults = THUMBNAIL_DEFAULTS;
+    PdfPreview.selectors = SELECTORS;
+    PdfPreview.classes = CLASSES;
+
+    return PdfPreview;
+});