diff --git a/src/vpu-pdf-preview.js b/src/vpu-pdf-preview.js
index 2d07e9051767bd34a41ebf7658e95c94f09f6793..f8176fe878f2624ebffc5844264da27741346b87 100644
--- a/src/vpu-pdf-preview.js
+++ b/src/vpu-pdf-preview.js
@@ -89,6 +89,11 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
await that.showPage(that.currentPage);
};
+ // Safari can't use that yet
+ // new ResizeObserver(async () => {
+ // await that.showPage(that.currentPage);
+ // }).observe(this._('#pdf-main-container'));
+
// add fabric.js canvas for signature positioning
this.fabricCanvas = new fabric.Canvas(this._('#fabric-canvas'));
// add signature image
@@ -144,6 +149,11 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
* @param page_no
*/
async showPage(page_no) {
+ // we need to wait unil the last rendering is finished
+ if (this.isPageRenderingInProgress) {
+ return;
+ }
+
const that = this;
this.isPageRenderingInProgress = true;
this.currentPage = page_no;
@@ -154,9 +164,9 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
// original width of the pdf page at scale 1
const pdf_original_width = page.getViewport({ scale: 1 }).width;
- // set the canvas width to the width of the container
- this.fabricCanvas.setWidth(this._('#pdf-main-container').clientWidth);
- this.canvas.width = this._('#pdf-main-container').clientWidth;
+ // set the canvas width to the width of the container (minus the borders)
+ this.fabricCanvas.setWidth(this._('#pdf-main-container').clientWidth - 2);
+ this.canvas.width = this._('#pdf-main-container').clientWidth - 2;
// as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered
// const scale_required = this.fabricCanvas.width / pdf_original_width;
@@ -187,10 +197,12 @@ export class PdfPreview extends ScopedElementsMixin(VPULitElement) {
});
} catch(error) {
console.error(error.message);
+ that.isPageRenderingInProgress = false;
}
});
} catch(error) {
console.error(error.message);
+ that.isPageRenderingInProgress = false;
}
}
diff --git a/src/vpu-qualified-signature-pdf-upload.js b/src/vpu-qualified-signature-pdf-upload.js
index c049f10cecefadbd56d7feca67ccdb4add0b6324..bff5d6ecb3000150862bac7fabb5f2355ab3fefc 100644
--- a/src/vpu-qualified-signature-pdf-upload.js
+++ b/src/vpu-qualified-signature-pdf-upload.js
@@ -430,18 +430,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
${commonStyles.getButtonCSS()}
${commonStyles.getNotificationCSS()}
- .flex-container {
- display: flex;
- flex-flow: row wrap;
- }
-
- .flex-container > div {
- margin-right: 20px;
- }
-
#pdf-preview {
- flex: 1 0;
- margin-right: 0;
min-width: 320px;
}
@@ -498,9 +487,23 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
color: #e4154b;
}
- .emtpy-queue {
+ .empty-queue {
margin: 10px 0;
}
+
+ #grid-container {
+ display: flex;
+ flex-flow: row wrap;
+ }
+
+ #grid-container > div {
+ margin-right: 20px;
+ }
+
+ #grid-container > div:last-child {
+ margin-right: 0;
+ flex: 1 0;
+ }
`;
}
@@ -577,77 +580,81 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
></vpu-fileupload>
</div>
</div>
- <div class="flex-container">
- <div class="files-block field ${classMap({hidden: !this.queueBlockEnabled})}">
- <h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2>
- <div class="control">
- ${this.getQueuedFilesHtml()}
+ <div id="grid-container">
+ <div class="left-container">
+ <div class="files-block field ${classMap({hidden: !this.queueBlockEnabled})}">
+ <h2>${i18n.t('qualified-pdf-upload.queued-files-label')}</h2>
+ <div class="control">
+ ${this.getQueuedFilesHtml()}
+ </div>
+ <div class="empty-queue control ${classMap({hidden: this.queuedFilesCount !== 0})}">
+ ${i18n.t('qualified-pdf-upload.queued-files-empty1')}<br />
+ ${i18n.t('qualified-pdf-upload.queued-files-empty2')}
+ </div>
+ <div class="control">
+ <button @click="${() => { this.signingProcessEnabled = true; }}"
+ ?disabled="${this.queuedFilesCount === 0}"
+ class="button is-primary ${classMap({hidden: this.signingProcessEnabled})}">
+ ${i18n.t('qualified-pdf-upload.start-signing-process-button')}
+ </button>
+ <button @click="${() => { this.signingProcessEnabled = false; this.externalAuthInProgress = false; }}"
+ ?disabled="${this.queuedFilesCount === 0}"
+ class="button ${classMap({hidden: !this.signingProcessEnabled})}">
+ ${i18n.t('qualified-pdf-upload.stop-signing-process-button')}
+ </button>
+ </div>
</div>
- <div class="emtpy-queue control ${classMap({hidden: this.queuedFilesCount !== 0})}">
- ${i18n.t('qualified-pdf-upload.queued-files-empty1')}<br />
- ${i18n.t('qualified-pdf-upload.queued-files-empty2')}
+ <div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}">
+ <h2>${i18n.t('qualified-pdf-upload.signed-files-label')}</h2>
+ <div class="control">
+ ${this.getSignedFilesHtml()}
+ </div>
</div>
- <div class="control">
- <button @click="${() => { this.signingProcessEnabled = true; }}"
- ?disabled="${this.queuedFilesCount === 0}"
- class="button is-primary ${classMap({hidden: this.signingProcessEnabled})}">
- ${i18n.t('qualified-pdf-upload.start-signing-process-button')}
- </button>
- <button @click="${() => { this.signingProcessEnabled = false; this.externalAuthInProgress = false; }}"
- ?disabled="${this.queuedFilesCount === 0}"
- class="button ${classMap({hidden: !this.signingProcessEnabled})}">
- ${i18n.t('qualified-pdf-upload.stop-signing-process-button')}
- </button>
+ <div class="field ${classMap({hidden: this.signedFilesCount === 0})}">
+ <div class="control">
+ <vpu-button id="zip-download-button" value="${i18n.t('qualified-pdf-upload.download-zip-button')}" title="${i18n.t('qualified-pdf-upload.download-zip-button-tooltip')}" @click="${this.zipDownloadClickHandler}" type="is-primary"></vpu-button>
+ </div>
</div>
- </div>
- <div id="pdf-preview" class="field ${classMap({hidden: !this.signaturePlacementInProgress})}">
- <h2>${i18n.t('qualified-pdf-upload.signature-placement-label')}</h2>
- <div class="file">
- <a class="is-remove" title="${i18n.t('qualified-pdf-upload.close-preview')}"
- @click="${() => { this.signaturePlacementInProgress = false; }}">
- ${this.currentFile.name} (${humanFileSize(this.currentFile !== undefined ? this.currentFile.size : 0)})
- <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
- </a>
+ <div class="files-block error-files field ${classMap({hidden: this.errorFilesCount === 0})}">
+ <h2 class="error">${i18n.t('qualified-pdf-upload.error-files-label')}</h2>
+ <div class="control">
+ ${this.getErrorFilesHtml()}
+ </div>
</div>
- <vpu-pdf-preview lang="${this.lang}" @vpu-pdf-preview-accept="${this.storePDFData}"></vpu-pdf-preview>
- </div>
- <div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
- <vpu-mini-spinner></vpu-mini-spinner>
- <strong>${this.uploadStatusFileName}</strong>
- ${this.uploadStatusText}
- </div>
- <div class="files-block field ${classMap({hidden: !this.externalAuthInProgress})}">
- <h2>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h2>
- <div class="file">
- <a class="is-remove" title="${i18n.t('qualified-pdf-upload.remove-current-file-button-title')}"
- @click="${() => { this.externalAuthInProgress = false; }}">
- ${this.currentFileName} (${humanFileSize(this.currentFile.file !== undefined ? this.currentFile.file.size : 0)})
- <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
- </a>
+ <div class="field ${classMap({hidden: this.errorFilesCount === 0})}">
+ <div class="control">
+ <vpu-button id="re-upload-all-button" ?disabled="${this.uploadInProgress}" value="${i18n.t('qualified-pdf-upload.re-upload-all-button')}" title="${i18n.t('qualified-pdf-upload.re-upload-all-button-title')}" @click="${this.reUploadAllClickHandler}" type="is-primary"></vpu-button>
+ </div>
</div>
- <iframe name="external_iframe" id="iframe"></iframe>
- </div>
- </div>
- <div class="files-block field ${classMap({hidden: this.signedFilesCount === 0})}">
- <h2>${i18n.t('qualified-pdf-upload.signed-files-label')}</h2>
- <div class="control">
- ${this.getSignedFilesHtml()}
- </div>
- </div>
- <div class="field ${classMap({hidden: this.signedFilesCount === 0})}">
- <div class="control">
- <vpu-button id="zip-download-button" value="${i18n.t('qualified-pdf-upload.download-zip-button')}" title="${i18n.t('qualified-pdf-upload.download-zip-button-tooltip')}" @click="${this.zipDownloadClickHandler}" type="is-primary"></vpu-button>
</div>
- </div>
- <div class="files-block error-files field ${classMap({hidden: this.errorFilesCount === 0})}">
- <h2 class="error">${i18n.t('qualified-pdf-upload.error-files-label')}</h2>
- <div class="control">
- ${this.getErrorFilesHtml()}
- </div>
- </div>
- <div class="field ${classMap({hidden: this.errorFilesCount === 0})}">
- <div class="control">
- <vpu-button id="re-upload-all-button" ?disabled="${this.uploadInProgress}" value="${i18n.t('qualified-pdf-upload.re-upload-all-button')}" title="${i18n.t('qualified-pdf-upload.re-upload-all-button-title')}" @click="${this.reUploadAllClickHandler}" type="is-primary"></vpu-button>
+ <div class="right-container">
+ <div id="pdf-preview" class="field ${classMap({hidden: !this.signaturePlacementInProgress})}">
+ <h2>${i18n.t('qualified-pdf-upload.signature-placement-label')}</h2>
+ <div class="file">
+ <a class="is-remove" title="${i18n.t('qualified-pdf-upload.close-preview')}"
+ @click="${() => { this.signaturePlacementInProgress = false; }}">
+ ${this.currentFile.name} (${humanFileSize(this.currentFile !== undefined ? this.currentFile.size : 0)})
+ <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
+ </a>
+ </div>
+ <vpu-pdf-preview lang="${this.lang}" @vpu-pdf-preview-accept="${this.storePDFData}"></vpu-pdf-preview>
+ </div>
+ <div class="field notification is-info ${classMap({hidden: !this.uploadInProgress})}">
+ <vpu-mini-spinner></vpu-mini-spinner>
+ <strong>${this.uploadStatusFileName}</strong>
+ ${this.uploadStatusText}
+ </div>
+ <div class="files-block field ${classMap({hidden: !this.externalAuthInProgress})}">
+ <h2>${i18n.t('qualified-pdf-upload.current-signing-process-label')}</h2>
+ <div class="file">
+ <a class="is-remove" title="${i18n.t('qualified-pdf-upload.remove-current-file-button-title')}"
+ @click="${() => { this.externalAuthInProgress = false; }}">
+ ${this.currentFileName} (${humanFileSize(this.currentFile.file !== undefined ? this.currentFile.file.size : 0)})
+ <vpu-icon name="close" style="font-size: 0.7em"></vpu-icon>
+ </a>
+ </div>
+ <iframe name="external_iframe" id="iframe"></iframe>
+ </div>
</div>
</div>
</div>