@hmcts/media-viewer 2.9.1 → 2.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/images/icon-page.svg +52 -0
- package/assets/sass/toolbar/main-toolbar.scss +8 -8
- package/assets/sass/toolbar/redaction-toolbar.scss +10 -0
- package/bundles/hmcts-media-viewer.umd.js +46 -10
- package/bundles/hmcts-media-viewer.umd.js.map +1 -1
- package/bundles/hmcts-media-viewer.umd.min.js +1 -1
- package/bundles/hmcts-media-viewer.umd.min.js.map +1 -1
- package/esm2015/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.js +16 -1
- package/esm2015/lib/toolbar/main-toolbar/main-toolbar.component.js +2 -2
- package/esm2015/lib/toolbar/redaction-toolbar/redaction-toolbar.component.js +6 -2
- package/esm2015/lib/toolbar/search-bar/search-bar.component.js +2 -2
- package/esm2015/lib/toolbar/toolbar-event.service.js +16 -2
- package/esm2015/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.js +4 -2
- package/fesm2015/hmcts-media-viewer.js +40 -5
- package/fesm2015/hmcts-media-viewer.js.map +1 -1
- package/hmcts-media-viewer-v2.9.3.tgz +0 -0
- package/hmcts-media-viewer.metadata.json +1 -1
- package/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.d.ts +2 -0
- package/lib/annotations/annotation-set/annotation-create/box-highlight-create/box-highlight-create.component.d.ts.map +1 -1
- package/lib/toolbar/redaction-toolbar/redaction-toolbar.component.d.ts +1 -0
- package/lib/toolbar/redaction-toolbar/redaction-toolbar.component.d.ts.map +1 -1
- package/lib/toolbar/search-bar/search-bar.component.d.ts.map +1 -1
- package/lib/toolbar/toolbar-event.service.d.ts +2 -0
- package/lib/toolbar/toolbar-event.service.d.ts.map +1 -1
- package/lib/viewers/pdf-viewer/pdf-js/pdf-js-wrapper.d.ts.map +1 -1
- package/package.json +1 -1
- package/hmcts-media-viewer-v2.9.1.tgz +0 -0
|
@@ -90,7 +90,9 @@ class PdfJsWrapper {
|
|
|
90
90
|
this.pdfViewer.setDocument(pdfDocument);
|
|
91
91
|
this.pdfViewer.linkService.setDocument(pdfDocument, null);
|
|
92
92
|
const outline = yield pdfDocument.getOutline();
|
|
93
|
-
|
|
93
|
+
if (outline) {
|
|
94
|
+
yield this.setOutlinePageNumbers(pdfDocument, outline);
|
|
95
|
+
}
|
|
94
96
|
this.documentOutline = outline;
|
|
95
97
|
this.outlineLoaded.next(this.documentOutline);
|
|
96
98
|
const pdfMetaData = yield pdfDocument.getMetadata();
|
|
@@ -280,6 +282,7 @@ class ToolbarEventService {
|
|
|
280
282
|
this.redactionPreview = new Subject();
|
|
281
283
|
this.applyRedactToDocument = new Subject();
|
|
282
284
|
this.clearAllRedactMarkers = new Subject();
|
|
285
|
+
this.redactWholePage = new Subject();
|
|
283
286
|
this.sidebarOpen = new BehaviorSubject(false);
|
|
284
287
|
this.searchBarHidden = new BehaviorSubject(true);
|
|
285
288
|
this.commentsPanelVisible = new BehaviorSubject(false);
|
|
@@ -294,12 +297,14 @@ class ToolbarEventService {
|
|
|
294
297
|
this.highlightModeSubject.next(false);
|
|
295
298
|
this.drawModeSubject.next(false);
|
|
296
299
|
this.showCommentSummary.next(false);
|
|
300
|
+
this.grabNDrag.next(false);
|
|
297
301
|
}
|
|
298
302
|
// Function to inform Observers that highlightMode has been enabled
|
|
299
303
|
toggleHighlightMode() {
|
|
300
304
|
// Highlight and Draw states are mutually exclusive
|
|
301
305
|
if (this.highlightModeSubject.getValue() === false) {
|
|
302
306
|
this.drawModeSubject.next(false);
|
|
307
|
+
this.grabNDrag.next(false);
|
|
303
308
|
this.highlightModeSubject.next(true);
|
|
304
309
|
}
|
|
305
310
|
else {
|
|
@@ -310,6 +315,7 @@ class ToolbarEventService {
|
|
|
310
315
|
toggleDrawMode() {
|
|
311
316
|
if (this.drawModeSubject.getValue() === false) {
|
|
312
317
|
this.highlightModeSubject.next(false);
|
|
318
|
+
this.grabNDrag.next(false);
|
|
313
319
|
this.drawModeSubject.next(true);
|
|
314
320
|
}
|
|
315
321
|
else {
|
|
@@ -368,7 +374,14 @@ class ToolbarEventService {
|
|
|
368
374
|
this.sidebarOpen.next(toggle);
|
|
369
375
|
}
|
|
370
376
|
toggleRedactionMode() {
|
|
371
|
-
|
|
377
|
+
if (this.redactionMode.getValue() === false) {
|
|
378
|
+
this.drawModeSubject.next(false);
|
|
379
|
+
this.grabNDrag.next(false);
|
|
380
|
+
this.redactionMode.next(true);
|
|
381
|
+
}
|
|
382
|
+
else {
|
|
383
|
+
this.redactionMode.next(false);
|
|
384
|
+
}
|
|
372
385
|
}
|
|
373
386
|
toggleRedactionPreview(viewMode) {
|
|
374
387
|
this.redactionPreview.next(viewMode);
|
|
@@ -379,6 +392,9 @@ class ToolbarEventService {
|
|
|
379
392
|
applyRedactionToDocument() {
|
|
380
393
|
this.applyRedactToDocument.next();
|
|
381
394
|
}
|
|
395
|
+
redactPage() {
|
|
396
|
+
this.redactWholePage.next();
|
|
397
|
+
}
|
|
382
398
|
toggleCommentsPanel(isVisible) {
|
|
383
399
|
if (isVisible) {
|
|
384
400
|
this.toggleParticipantsList(!isVisible);
|
|
@@ -3037,7 +3053,7 @@ class MainToolbarComponent {
|
|
|
3037
3053
|
MainToolbarComponent.decorators = [
|
|
3038
3054
|
{ type: Component, args: [{
|
|
3039
3055
|
selector: 'mv-main-toolbar',
|
|
3040
|
-
template: "<div class=\"toolbar\">\n <div id=\"toolbarContainer\">\n <div class=\"mv-toolbar__container\">\n <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n </div>\n <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n <button id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <span>More options</span>\n </button>\n <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\n <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n\n <div id=\"mvMenuItems\" #mvMenuItems>\n <ng-template #menuItems>\n\n <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n class=\"mv-button mv-toolbar__menu-button--index\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n (click)=\"toggleSideBar(); isDropdownMenuOpen = false\">\n <span>Index</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\">\n <span data-l10n-id=\"draw_label\">Draw a box</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\" data-l10n-id=\"toggleHighlightButton\">\n <span data-l10n-id=\"highlight_label\">Highlight</span>\n </button>\n\n <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n <span>Page</span>\n\n <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n (click)=\"decreasePageNumber()\"><span></span></button>\n <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n (click)=\"increasePageNumber()\"><span></span></button>\n\n <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"toolbarButtons.showZoom\">\n <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n <span>Zoom</span>\n <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n (click)=\"stepZoom(-0.1)\"><span></span></button>\n <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n </option>\n </select>\n\n <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n data-l10n-id=\"zoom_in\"><span></span></button>\n </div>\n </ng-container>\n\n <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n </button>\n <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n </button>\n <span>Rotate</span>\n </div>\n\n <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\">\n <span data-l10n-id=\"search_label\">Search</span>\n </button>\n\n <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"><span data-l10n-id=\"icpMode_label\">Present</span>\n </button>\n\n <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\">\n <span>Redact</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n class=\"mv-button mv-toolbar__menu-button--grab\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\">\n <span>Grab and drag</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n (click)=\"downloadFile(); isDropdownMenuOpen = false\">\n <span>Download</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n (click)=\"printFile(); isDropdownMenuOpen = false\">\n <span>Print</span>\n </button>\n\n <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\">\n <span>Comments</span>\n </button>\n </ng-template>\n </div>\n <mv-search-bar></mv-search-bar>\n </div>\n\n <div id=\"loadingBar\">\n <div class=\"progress\">\n <div class=\"glimmer\">\n </div>\n </div>\n </div>\n </div>\n</div>\n"
|
|
3056
|
+
template: "<div class=\"toolbar\">\n <div id=\"toolbarContainer\">\n <div class=\"mv-toolbar__container\">\n <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n </div>\n <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n <button id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n <span>More options</span>\n </button>\n <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\n <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n </div>\n </ng-template>\n </div>\n </div>\n\n <div id=\"mvMenuItems\" #mvMenuItems>\n <ng-template #menuItems>\n\n <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n class=\"mv-button mv-toolbar__menu-button--index\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n (click)=\"toggleSideBar(); isDropdownMenuOpen = false\">\n <span>Index</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\">\n <span data-l10n-id=\"draw_label\">Draw a box</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\" data-l10n-id=\"toggleHighlightButton\">\n <span data-l10n-id=\"highlight_label\">Highlight</span>\n </button>\n\n <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n <span>Page</span>\n\n <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n (click)=\"decreasePageNumber()\"><span></span></button>\n <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n (click)=\"increasePageNumber()\"><span></span></button>\n\n <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"toolbarButtons.showZoom\">\n <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n (click)=\"stepZoom(-0.1)\"><span></span></button>\n <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n </option>\n </select>\n\n <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n data-l10n-id=\"zoom_in\"><span></span></button>\n </div>\n </ng-container>\n\n <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n </button>\n <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n </button>\n <span>Rotate</span>\n </div>\n\n <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\">\n </button>\n\n <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"><span data-l10n-id=\"icpMode_label\">Present</span>\n </button>\n\n <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\">\n <span>Redact</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n class=\"mv-button mv-toolbar__menu-button--grab\" title=\"Grab and drag\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\">\n <span>Grab and drag</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n (click)=\"downloadFile(); isDropdownMenuOpen = false\">\n </button>\n\n <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n (click)=\"printFile(); isDropdownMenuOpen = false\">\n </button>\n\n <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\">\n <span>Comments</span>\n </button>\n\n </ng-template>\n </div>\n <mv-search-bar></mv-search-bar>\n </div>\n\n <div id=\"loadingBar\">\n <div class=\"progress\">\n <div class=\"glimmer\">\n </div>\n </div>\n </div>\n </div>\n</div>\n"
|
|
3041
3057
|
},] }
|
|
3042
3058
|
];
|
|
3043
3059
|
/** @nocollapse */
|
|
@@ -3124,7 +3140,7 @@ class SearchBarComponent {
|
|
|
3124
3140
|
if (this.resultCount && this.resultCount > 0) {
|
|
3125
3141
|
setTimeout(() => {
|
|
3126
3142
|
this.findNext.nativeElement.focus();
|
|
3127
|
-
},
|
|
3143
|
+
}, 1000);
|
|
3128
3144
|
}
|
|
3129
3145
|
}
|
|
3130
3146
|
onEscapeKeyPress(e) {
|
|
@@ -3214,6 +3230,10 @@ class RedactionToolbarComponent {
|
|
|
3214
3230
|
toggleRedactBar() {
|
|
3215
3231
|
this.toolbarEventService.toggleRedactionMode();
|
|
3216
3232
|
}
|
|
3233
|
+
redactPage() {
|
|
3234
|
+
this.toolbarEventService.drawModeSubject.next(true);
|
|
3235
|
+
this.toolbarEventService.redactPage();
|
|
3236
|
+
}
|
|
3217
3237
|
ngOnDestroy() {
|
|
3218
3238
|
this.$subscription.unsubscribe();
|
|
3219
3239
|
}
|
|
@@ -3221,7 +3241,7 @@ class RedactionToolbarComponent {
|
|
|
3221
3241
|
RedactionToolbarComponent.decorators = [
|
|
3222
3242
|
{ type: Component, args: [{
|
|
3223
3243
|
selector: 'mv-redaction-toolbar',
|
|
3224
|
-
template: "<div class=\"redaction\">\n <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">Redaction options</label>\n <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n </button>\n\n <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n <span data-l10n-id=\"Clear all\">Clear all</span>\n </button>\n\n <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n </button>\n\n <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n <span data-l10n-id=\"Save Document\">Save document</span>\n </button>\n\n <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button redaction-button--close\" title=\"Close Redaction\" data-l10n-id=\"mvRedactBtn\"\n (click)=\"toggleRedactBar()\">\n <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n </button>\n\n</div>\n"
|
|
3244
|
+
template: "<div class=\"redaction\">\n <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">Redaction options</label>\n <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n </button>\n\n <button id=\"redactPageButton\" class=\"mv-button redaction-button--redact-page\" title=\"Redact Page\"\n data-l10n-id=\"redactPageButton\" (click)=\"redactPage()\">\n <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n </button>\n\n <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n </button>\n\n <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n <span data-l10n-id=\"Clear all\">Clear all</span>\n </button>\n\n <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n </button>\n\n <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n <span data-l10n-id=\"Save Document\">Save document</span>\n </button>\n\n <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button redaction-button--close\" title=\"Close Redaction\" data-l10n-id=\"mvRedactBtn\"\n (click)=\"toggleRedactBar()\">\n <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n </button>\n\n</div>\n"
|
|
3225
3245
|
},] }
|
|
3226
3246
|
];
|
|
3227
3247
|
/** @nocollapse */
|
|
@@ -4169,6 +4189,9 @@ class BoxHighlightCreateComponent {
|
|
|
4169
4189
|
this.toolbarEvents.drawModeSubject.subscribe(drawMode => {
|
|
4170
4190
|
this.defaultHeight = drawMode ? '100%' : '0px';
|
|
4171
4191
|
this.defaultWidth = drawMode ? '100%' : '0px';
|
|
4192
|
+
}),
|
|
4193
|
+
this.toolbarEvents.redactWholePage.subscribe(() => {
|
|
4194
|
+
this.wholePage = true;
|
|
4172
4195
|
})
|
|
4173
4196
|
];
|
|
4174
4197
|
}
|
|
@@ -4178,6 +4201,10 @@ class BoxHighlightCreateComponent {
|
|
|
4178
4201
|
});
|
|
4179
4202
|
}
|
|
4180
4203
|
initHighlight({ offsetX, offsetY }) {
|
|
4204
|
+
if (this.wholePage) {
|
|
4205
|
+
this.highlightPage();
|
|
4206
|
+
return;
|
|
4207
|
+
}
|
|
4181
4208
|
this.position = 'absolute';
|
|
4182
4209
|
this.backgroundColor = 'yellow';
|
|
4183
4210
|
this.drawStartX = offsetX;
|
|
@@ -4224,6 +4251,14 @@ class BoxHighlightCreateComponent {
|
|
|
4224
4251
|
this.display = 'none';
|
|
4225
4252
|
this.width = 0;
|
|
4226
4253
|
this.height = 0;
|
|
4254
|
+
this.wholePage = false;
|
|
4255
|
+
}
|
|
4256
|
+
highlightPage() {
|
|
4257
|
+
this.height = this.pageHeight;
|
|
4258
|
+
this.width = this.pageWidth;
|
|
4259
|
+
this.top = 0;
|
|
4260
|
+
this.left = 0;
|
|
4261
|
+
this.createHighlight();
|
|
4227
4262
|
}
|
|
4228
4263
|
}
|
|
4229
4264
|
BoxHighlightCreateComponent.decorators = [
|