Skip to content

Commit 226eba0

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
931486: Updated the required to standalone in redaction sample
1 parent 77a1127 commit 226eba0

File tree

3 files changed

+505
-783
lines changed

3 files changed

+505
-783
lines changed

‎How to/Redact a PDF Document/Angular Client/src/app/app.component.html

Lines changed: 118 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,119 @@
11
<style>
2-
.control-section{
3-
margin-top: 100px;
4-
}
5-
6-
</style>
7-
<div class="control-section" id="e-pv-redact-sb-panel">
8-
<div class="content-wrapper">
9-
<div class="flex-container">
10-
</div>
11-
<!--Appbar-->
12-
<div class="row" [style.display]="'none'" id="e-pv-redact-sb-appbar">
13-
<div class="col-md-12">
14-
<ejs-appbar colorMode="Primary" (created)="onLoad($event)">
15-
<span class="regular">Redaction</span>
16-
<div class="e-appbar-spacer"></div>
17-
<button #defaultButtonDownload ejs-button cssClass="e-inherit"
18-
iconCss="e-icons e-download e-btn-icon e-icon-left" (click)="download($event)">Download</button>
19-
</ejs-appbar>
20-
</div>
21-
</div>
22-
23-
<!--primary toolbar-->
24-
<div class="e-sample-resize-container">
25-
<!-- Render the Toolbar Component -->
26-
<ejs-toolbar overflowMode='Popup' cssClass="template" id="e-pv-redact-sb-toolbar" #primaryToolbar>
27-
<e-items>
28-
<e-item prefixIcon="e-icon e-folder" tooltipText="Open" id="pdfviewer_open" text="Open"
29-
(click)="openDocumentClicked($event)"></e-item>
30-
<e-item type="Separator"></e-item>
31-
<e-item prefixIcon="e-icon e-text-annotation" tooltipText="Text" cssClass="e-pv-redact-sb-font-container"
32-
text="Text" (click)="addText($event)"></e-item>
33-
<e-item prefixIcon="e-icons e-image" tooltipText="Image" cssClass="e-pv-redact-sb-image-container"
34-
text="Image" id="targetButton" (click)="imageDialog()"></e-item>
35-
<e-item prefixIcon="e-icons e-opacity" tooltipText="Pattern" cssClass="e-pv-redact-sb-pattern-container"
36-
text="Pattern" (click)="addPattern($event)"></e-item>
37-
<e-item prefixIcon="e-icons black-out" tooltipText="Black out" cssClass="e-pv-redact-sb-black-out-container"
38-
text="Blackout" (click)="addBlackout($event)"></e-item>
39-
<e-item prefixIcon="e-icons white-out" tooltipText="White out" cssClass="e-pv-redact-sb-white-out-container"
40-
text="Whiteout" (click)="addWhiteout($event)"></e-item>
41-
<e-item type="Separator"></e-item>
42-
<e-item prefixIcon="e-icons e-redact" cssClass="e-pv-redact-sb-redaction-container" text="Redact" tooltipTex="Redaction"
43-
id="redacticon" (click)="redaction()" [disabled]="true"></e-item>
44-
</e-items>
45-
</ejs-toolbar>
46-
</div>
47-
<!--secondary toolbar-->
48-
<div id="e-pv-redact-sb-toolbar-secondary" class="e-pv-secondary-toolbar">
49-
<ejs-toolbar #secondaryToolbar>
50-
<e-items>
51-
<e-item prefixIcon="e-icons e-chevron-left" cssClas="e-pv-redact-sb-previous-container" id="previousPage" tooltipText="Previous Page"
52-
(click)="previousClicked($event)" [disabled]="true"></e-item>
53-
54-
<e-item>
55-
<ng-template #template>
56-
<div>
57-
<span id="e-pv-redact-sb-currentPage" title="Current Page">1 &ensp;</span>
58-
<span id="e-pv-redact-sb-totalPage" title="Total Page">/ 1</span>
59-
</div>
60-
</ng-template>
61-
</e-item>
62-
63-
<e-item prefixIcon="e-icon e-chevron-right" cssClass="e-pv-redact-sb-next-container" id="nextPage" tooltipText="Next Page"
64-
(click)="nextClicked($event)" [disabled]="true"></e-item>
65-
66-
<e-item type="Separator"></e-item>
67-
68-
<e-item cssClass="percentage">
69-
<ng-template #template>
70-
<ejs-combobox id='comboelement' [dataSource]='data' value="100%" [showClearButton]='false'
71-
(change)="zoomValueChange($event)" width="90px" tooltipText="Zoom">
72-
</ejs-combobox>
73-
</ng-template>
74-
</e-item>
75-
</e-items>
76-
</ejs-toolbar>
77-
</div>
78-
<!--pdfviewer-->
79-
<ejs-pdfviewer #pdfviewer id='pdfViewer' [documentPath]='document' [serviceUrl]='service'
80-
(pageChange)='pageChanged($event)' (documentLoad)='documentLoaded($event)'
81-
(annotationAdd)='annotationAdd($event)' (annotationRemove)='annotationRemove($event)' [enableAnnotationToolbar] ="false" [enableCommentPanel] = "false" [enableToolbar]=false
82-
[enableNavigationToolbar]=false (created)='onLoad($event)' style="height:640px; display: block">
83-
</ejs-pdfviewer>
84-
<input type="file" id="fileUpload" accept=".pdf" style="display:block;visibility:hidden;width:0;height:0;">
85-
86-
<!--dialog box-->
87-
<div class="control-section template">
88-
<ejs-dialog id="e-pv-redact-sb-dialog" #dialogComponent [showCloseIcon]='showCloseIcon' [target]='target'
89-
[width]='width' [visible]='visible' [isModal]='isModal'>
90-
<ng-template #footerTemplate>
91-
<button id="cancelButton" #cancelButton class="e-control e-btn e-primary" data-ripple="true"
92-
(click)="closeDialog($event)">Cancel</button>
93-
</ng-template>
94-
<ng-template #header>
95-
<div id="dlg-template" title="upload" class="e-icon-settings"> Upload Image </div>
96-
</ng-template>
97-
98-
<div class="drop-area-wrap" id="e-pv-redact-sb-drop-area-wrap" [style.display]="'none'">
99-
<div id='e-pv-redact-sb-defaultfileupload'>
100-
<div class="control_wrapper">
101-
<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [dropArea]='dropElement'
102-
(change)='onFileChange($event)' [allowedExtensions]='allowedExtensions' ></ejs-uploader>
103-
<span class="e-file-drop">Or drop files here</span>
104-
<div>(Only JPG and PNG images will be accepted)</div>
105-
</div>
106-
</div>
107-
</div>
108-
<div class="e-pv-redact-sb-image-list">
109-
<div id='imageContainer' class="e-pv-redact-sb-image-container">
110-
<img id='imageView' class="e-pv-redact-sb-image-source" style="display:none"/>
111-
</div>
112-
</div>
113-
114-
</ejs-dialog>
115-
</div>
116-
</div>
117-
</div>
118-
119-
2+
.control-section{
3+
margin-top: 100px;
4+
}
5+
6+
</style>
7+
<div class="control-section" id="e-pv-redact-sb-panel">
8+
<div class="content-wrapper">
9+
<div class="flex-container">
10+
</div>
11+
<!--Appbar-->
12+
<div class="row" [style.display]="'none'" id="e-pv-redact-sb-appbar">
13+
<div class="col-md-12">
14+
<ejs-appbar colorMode="Primary" (created)="onLoad($event)">
15+
<span class="regular">Redaction</span>
16+
<div class="e-appbar-spacer"></div>
17+
<button #defaultButtonDownload ejs-button cssClass="e-inherit"
18+
iconCss="e-icons e-download e-btn-icon e-icon-left" (click)="download($event)">Download</button>
19+
</ejs-appbar>
20+
</div>
21+
</div>
22+
23+
<!--primary toolbar-->
24+
<div class="e-sample-resize-container">
25+
<!-- Render the Toolbar Component -->
26+
<ejs-toolbar overflowMode='Popup' cssClass="template" id="e-pv-redact-sb-toolbar" #primaryToolbar>
27+
<e-items>
28+
<e-item prefixIcon="e-icon e-folder" tooltipText="Open" id="pdfviewer_open" text="Open"
29+
(click)="openDocumentClicked($event)"></e-item>
30+
<e-item type="Separator"></e-item>
31+
<e-item prefixIcon="e-icon e-text-annotation" tooltipText="Text" cssClass="e-pv-redact-sb-font-container"
32+
text="Text" (click)="addText($event)"></e-item>
33+
<e-item prefixIcon="e-icons e-image" tooltipText="Image" cssClass="e-pv-redact-sb-image-container"
34+
text="Image" id="targetButton" (click)="imageDialog()"></e-item>
35+
<e-item prefixIcon="e-icons e-opacity" tooltipText="Pattern" cssClass="e-pv-redact-sb-pattern-container"
36+
text="Pattern" (click)="addPattern($event)"></e-item>
37+
<e-item prefixIcon="e-icons black-out" tooltipText="Black out" cssClass="e-pv-redact-sb-black-out-container"
38+
text="Blackout" (click)="addBlackout($event)"></e-item>
39+
<e-item prefixIcon="e-icons white-out" tooltipText="White out" cssClass="e-pv-redact-sb-white-out-container"
40+
text="Whiteout" (click)="addWhiteout($event)"></e-item>
41+
<e-item type="Separator"></e-item>
42+
<e-item prefixIcon="e-icons e-redact" cssClass="e-pv-redact-sb-redaction-container" text="Redact"
43+
id="redacticon" (click)="redaction()" [disabled]="true"></e-item>
44+
</e-items>
45+
</ejs-toolbar>
46+
</div>
47+
<!--secondary toolbar-->
48+
<div id="e-pv-redact-sb-toolbar-secondary" class="e-pv-secondary-toolbar">
49+
<ejs-toolbar #secondaryToolbar>
50+
<e-items>
51+
<e-item prefixIcon="e-icons e-chevron-left" cssClas="e-pv-redact-sb-previous-container" id="previousPage"
52+
(click)="previousClicked($event)" [disabled]="true"></e-item>
53+
54+
<e-item>
55+
<ng-template #template>
56+
<div>
57+
<span id="e-pv-redact-sb-currentPage">1 &ensp;</span>
58+
<span id="e-pv-redact-sb-totalPage">/ 1</span>
59+
</div>
60+
</ng-template>
61+
</e-item>
62+
63+
<e-item prefixIcon="e-icon e-chevron-right" cssClass="e-pv-redact-sb-next-container" id="nextPage"
64+
(click)="nextClicked($event)" [disabled]="true"></e-item>
65+
66+
<e-item type="Separator"></e-item>
67+
68+
<e-item cssClass="percentage">
69+
<ng-template #template>
70+
<ejs-combobox id='comboelement' [dataSource]='data' value="100%" [showClearButton]='false'
71+
(change)="zoomValueChange($event)" width="90px">
72+
</ejs-combobox>
73+
</ng-template>
74+
</e-item>
75+
</e-items>
76+
</ejs-toolbar>
77+
</div>
78+
<!--pdfviewer-->
79+
<ejs-pdfviewer #pdfviewer id='pdfViewer' [documentPath]='document' [resourceUrl]='resource'
80+
(pageChange)='pageChanged($event)' (documentLoad)='documentLoaded($event)'
81+
(annotationAdd)='annotationAdd($event)' (annotationRemove)='annotationRemove($event)' [enableAnnotationToolbar] ="false" [enableCommentPanel] = "false" [enableToolbar]=false
82+
[enableNavigationToolbar]=false (created)='onLoad($event)' style="height:640px; display: block">
83+
</ejs-pdfviewer>
84+
<input type="file" id="fileUpload" accept=".pdf" style="display:block;visibility:hidden;width:0;height:0;">
85+
86+
<!--dialog box-->
87+
<div class="control-section template">
88+
<ejs-dialog id="e-pv-redact-sb-dialog" #dialogComponent [height]='height' [showCloseIcon]='showCloseIcon' [target]='target'
89+
[width]='width' [visible]='visible' [isModal]='isModal'>
90+
<ng-template #footerTemplate>
91+
<button id="cancelButton" #cancelButton class="e-control e-btn e-primary" data-ripple="true"
92+
(click)="closeDialog($event)">Cancel</button>
93+
</ng-template>
94+
<ng-template #header>
95+
<div id="dlg-template" title="upload" class="e-icon-settings"> Upload Image </div>
96+
</ng-template>
97+
98+
<div class="drop-area-wrap" id="e-pv-redact-sb-drop-area-wrap" [style.display]="'none'">
99+
<div id='e-pv-redact-sb-defaultfileupload'>
100+
<div class="control_wrapper">
101+
<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [dropArea]='dropElement'
102+
(change)='onFileChange($event)' [allowedExtensions]='allowedExtensions' ></ejs-uploader>
103+
<span class="e-file-drop">Or drop files here</span>
104+
<div>(Only JPG and PNG images will be accepted)</div>
105+
</div>
106+
</div>
107+
</div>
108+
<div class="e-pv-redact-sb-image-list">
109+
<div id='imageContainer' class="e-pv-redact-sb-image-container">
110+
<img id='imageView' class="e-pv-redact-sb-image-source" style="display:none"/>
111+
</div>
112+
</div>
113+
114+
</ejs-dialog>
115+
</div>
116+
</div>
117+
</div>
118+
119+

0 commit comments

Comments
 (0)