From 08143b0906733f72f61122dd5dd8c3eaafc5c01a Mon Sep 17 00:00:00 2001 From: Patrizio Bekerle <patrizio@bekerle.com> Date: Tue, 26 May 2020 14:33:04 +0200 Subject: [PATCH] Fix page number updating (#7) --- src/vpu-pdf-preview.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/vpu-pdf-preview.js b/src/vpu-pdf-preview.js index 4971ecb..ad9d0c4 100644 --- a/src/vpu-pdf-preview.js +++ b/src/vpu-pdf-preview.js @@ -1,6 +1,7 @@ import {createI18nInstance} from './i18n.js'; import {css, html} from 'lit-element'; import {classMap} from 'lit-html/directives/class-map.js'; +import {live} from 'lit-html/directives/live.js'; import {ScopedElementsMixin} from '@open-wc/scoped-elements'; import VPULitElement from 'vpu-common/vpu-lit-element'; import {MiniSpinner} from 'vpu-common'; @@ -77,16 +78,6 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) { // that.showPDF(this.files[0]); // }); - // change on page input - this._("#pdf-page-no").addEventListener('input', async () => { - const page_no = parseInt(that._("#pdf-page-no").value); - console.log('page_no = ', page_no); - - if (page_no > 0 && page_no <= that.totalPages) { - await that.showPage(page_no); - } - }); - // redraw page if window was resized window.onresize = async () => { await that.showPage(that.currentPage); @@ -152,6 +143,16 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) { }); } + async onPageNumberChanged(e) { + let obj = e.target; + const page_no = parseInt(obj.value); + console.log('page_no = ', page_no); + + if (page_no > 0 && page_no <= this.totalPages) { + await this.showPage(page_no); + } + } + /** * Initialize and load the PDF * @@ -435,7 +436,11 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) { title="${i18n.t('pdf-preview.previous-page')}" @click="${async () => { if (this.currentPage > 1) await this.showPage(--this.currentPage); } }" ?disabled="${this.isPageRenderingInProgress || this.currentPage === 1}">${i18n.t('pdf-preview.previous')}</button> - <input type="number" id="pdf-page-no" min="1" max="${this.totalPages}" value="${this.currentPage}"> + <input type="number" + min="1" + max="${this.totalPages}" + @input="${this.onPageNumberChanged}" + .value="${live(this.currentPage)}"> <button class="button" title="${i18n.t('pdf-preview.next-page')}" @click="${async () => { if (this.currentPage < this.totalPages) await this.showPage(++this.currentPage); } }" -- GitLab