Skip to content

Commit 305987d

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1010807: Addressed review changes
1 parent 8eeabe3 commit 305987d

1 file changed

Lines changed: 91 additions & 204 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/react/context-menu/custom-context-menu.md‎

Lines changed: 91 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ You can add custom options to the context menu using the [addCustomMenu()](https
7272
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
7373
</PdfViewerComponent>
7474
</div>
75-
</div>);
76-
75+
</div>
76+
);
7777
}
7878
const root = ReactDOM.createRoot(document.getElementById('sample'));
7979
root.render(<App />);
@@ -84,232 +84,120 @@ root.render(<App />);
8484
The [customContextMenuSelect()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextMenuselect) method defines actions for custom menu items.
8585

8686
```jsx
87-
export function App() {
88-
89-
let menuItems = [
90-
{
91-
text: 'Search In Google',
92-
id: 'search_in_google',
93-
iconCss: 'e-icons e-search'
94-
},
95-
{
96-
text: 'Lock Annotation',
97-
iconCss: 'e-icons e-lock',
98-
id: 'lock_annotation'
99-
},
100-
{
101-
text: 'Unlock Annotation',
102-
iconCss: 'e-icons e-unlock',
103-
id: 'unlock_annotation'
104-
},
105-
{
106-
text: 'Lock Form Field',
107-
iconCss: 'e-icons e-lock',
108-
id: 'read_only_true'
109-
},
110-
{
111-
text: 'Unlock Form Field',
112-
iconCss: 'e-icons e-unlock',
113-
id: 'read_only_false'
114-
},
115-
];
116-
117-
function documentLoad(args) {
118-
var viewer = document.getElementById('container').ej2_instances[0];
119-
viewer.addCustomMenu(menuItems, false, false);
120-
}
121-
122-
function customContextMenuSelect(args) {
123-
var viewer = document.getElementById('container').ej2_instances[0];
124-
switch (args.id) {
125-
case 'search_in_google':
126-
for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
127-
var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
128-
if ((viewer.textSelectionModule.isTextSelection) && (\/\S\/.test(content))) {
129-
window.open('http://google.com/search?q=' + content);
130-
}
87+
function customContextMenuSelect(args) {
88+
var viewer = document.getElementById('container').ej2_instances[0];
89+
switch (args.id) {
90+
case 'search_in_google':
91+
for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
92+
var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
93+
if ((viewer.textSelectionModule.isTextSelection) && (\/\S\/.test(content))) {
94+
window.open('http://google.com/search?q=' + content);
13195
}
132-
break;
133-
case 'lock_annotation':
134-
lockAnnotations(args);
135-
break;
136-
case 'unlock_annotation':
137-
unlockAnnotations(args);
138-
break;
139-
case 'read_only_true':
140-
setReadOnlyTrue(args);
141-
break;
142-
case 'read_only_false':
143-
setReadOnlyFalse(args);
144-
break;
145-
default:
146-
break;
147-
}
96+
}
97+
break;
98+
case 'lock_annotation':
99+
lockAnnotations(args);
100+
break;
101+
case 'unlock_annotation':
102+
unlockAnnotations(args);
103+
break;
104+
case 'read_only_true':
105+
setReadOnlyTrue(args);
106+
break;
107+
case 'read_only_false':
108+
setReadOnlyFalse(args);
109+
break;
110+
default:
111+
break;
148112
}
113+
}
149114

150-
function lockAnnotations(args) {
151-
for (var i = 0; i < viewer.annotationCollection.length; i++) {
152-
if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
153-
viewer.annotationCollection[i].annotationSettings.isLock = true;
154-
viewer.annotationCollection[i].isCommentLock = true;
155-
viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
156-
}
157-
args.cancel = false;
115+
function lockAnnotations(args) {
116+
for (var i = 0; i < viewer.annotationCollection.length; i++) {
117+
if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
118+
viewer.annotationCollection[i].annotationSettings.isLock = true;
119+
viewer.annotationCollection[i].isCommentLock = true;
120+
viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
158121
}
122+
args.cancel = false;
159123
}
124+
}
160125

161-
function unlockAnnotations(args) {
162-
for (var i = 0; i < viewer.annotationCollection.length; i++) {
163-
if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
164-
viewer.annotationCollection[i].annotationSettings.isLock = false;
165-
viewer.annotationCollection[i].isCommentLock = false;
166-
viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
167-
}
168-
args.cancel = false;
126+
function unlockAnnotations(args) {
127+
for (var i = 0; i < viewer.annotationCollection.length; i++) {
128+
if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
129+
viewer.annotationCollection[i].annotationSettings.isLock = false;
130+
viewer.annotationCollection[i].isCommentLock = false;
131+
viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
169132
}
133+
args.cancel = false;
170134
}
135+
}
171136

172-
function setReadOnlyTrue(args) {
173-
var viewer = document.getElementById('container').ej2_instances[0];
174-
var selectedFormFields = viewer.selectedItems.formFields;
175-
for (var i = 0; i < selectedFormFields.length; i++) {
176-
var selectedFormField = selectedFormFields[i];
177-
if (selectedFormField) {
178-
viewer.formDesignerModule.updateFormField(selectedFormField, {
179-
isReadOnly: true,
180-
});
181-
}
182-
args.cancel = false;
137+
function setReadOnlyTrue(args) {
138+
var viewer = document.getElementById('container').ej2_instances[0];
139+
var selectedFormFields = viewer.selectedItems.formFields;
140+
for (var i = 0; i < selectedFormFields.length; i++) {
141+
var selectedFormField = selectedFormFields[i];
142+
if (selectedFormField) {
143+
viewer.formDesignerModule.updateFormField(selectedFormField, {
144+
isReadOnly: true,
145+
});
183146
}
147+
args.cancel = false;
184148
}
149+
}
185150

186-
function setReadOnlyFalse(args) {
187-
var viewer = document.getElementById('container').ej2_instances[0];
188-
var selectedFormFields = viewer.selectedItems.formFields;
189-
for (var i = 0; i < selectedFormFields.length; i++) {
190-
var selectedFormField = selectedFormFields[i];
191-
if (selectedFormField) {
192-
viewer.formDesignerModule.updateFormField(selectedFormField, {
193-
isReadOnly: false,
194-
});
195-
}
196-
args.cancel = false;
151+
function setReadOnlyFalse(args) {
152+
var viewer = document.getElementById('container').ej2_instances[0];
153+
var selectedFormFields = viewer.selectedItems.formFields;
154+
for (var i = 0; i < selectedFormFields.length; i++) {
155+
var selectedFormField = selectedFormFields[i];
156+
if (selectedFormField) {
157+
viewer.formDesignerModule.updateFormField(selectedFormField, {
158+
isReadOnly: false,
159+
});
197160
}
161+
args.cancel = false;
198162
}
199-
200-
return (
201-
<div>
202-
<div className='control-section'>
203-
{/* Render the PDF Viewer */}
204-
<PdfViewerComponent
205-
id="container"
206-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
207-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
208-
documentLoad={documentLoad}
209-
customContextMenuSelect={customContextMenuSelect}
210-
height='640px'>
211-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
212-
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
213-
</PdfViewerComponent>
214-
</div>
215-
</div>);
216-
217163
}
218-
const root = ReactDOM.createRoot(document.getElementById('sample'));
219-
root.render(<App />);
220164
```
221165

222166
## Dynamic Context Menu Customization
223167

224168
The [customContextMenuBeforeOpen()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextMenubeforeopen) event allows for dynamic showing or hiding of items based on selection or document state.
225169

226170
```jsx
227-
export function App() {
228-
229-
let menuItems = [
230-
{
231-
text: 'Search In Google',
232-
id: 'search_in_google',
233-
iconCss: 'e-icons e-search'
234-
},
235-
{
236-
text: 'Lock Annotation',
237-
iconCss: 'e-icons e-lock',
238-
id: 'lock_annotation'
239-
},
240-
{
241-
text: 'Unlock Annotation',
242-
iconCss: 'e-icons e-unlock',
243-
id: 'unlock_annotation'
244-
},
245-
{
246-
text: 'Lock Form Field',
247-
iconCss: 'e-icons e-lock',
248-
id: 'read_only_true'
249-
},
250-
{
251-
text: 'Unlock Form Field',
252-
iconCss: 'e-icons e-unlock',
253-
id: 'read_only_false'
254-
},
255-
];
256-
257-
function customContextMenuBeforeOpen(args) {
258-
for (var i = 0; i < args.ids.length; i++) {
259-
var search = document.getElementById(args.ids[i]);
260-
var viewer = document.getElementById('container').ej2_instances[0];
261-
if (search) {
262-
search.style.display = 'none';
263-
if (args.ids[i] === 'search_in_google' && (viewer.textSelectionModule) && viewer.textSelectionModule.isTextSelection) {
264-
search.style.display = 'block';
265-
} else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
266-
var isLockOption = args.ids[i] === "lock_annotation";
267-
for (var j = 0; j < viewer.selectedItems.annotations.length; j++) {
268-
var selectedAnnotation = viewer.selectedItems.annotations[j];
269-
if (selectedAnnotation && selectedAnnotation.annotationSettings) {
270-
var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
271-
(!isLockOption && selectedAnnotation.annotationSettings.isLock);
272-
search.style.display = shouldDisplay ? 'block' : 'none';
273-
}
171+
function customContextMenuBeforeOpen(args) {
172+
for (var i = 0; i < args.ids.length; i++) {
173+
var search = document.getElementById(args.ids[i]);
174+
var viewer = document.getElementById('container').ej2_instances[0];
175+
if (search) {
176+
search.style.display = 'none';
177+
if (args.ids[i] === 'search_in_google' && (viewer.textSelectionModule) && viewer.textSelectionModule.isTextSelection) {
178+
search.style.display = 'block';
179+
} else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
180+
var isLockOption = args.ids[i] === "lock_annotation";
181+
for (var j = 0; j < viewer.selectedItems.annotations.length; j++) {
182+
var selectedAnnotation = viewer.selectedItems.annotations[j];
183+
if (selectedAnnotation && selectedAnnotation.annotationSettings) {
184+
var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
185+
(!isLockOption && selectedAnnotation.annotationSettings.isLock);
186+
search.style.display = shouldDisplay ? 'block' : 'none';
274187
}
275-
} else if (args.ids[i] === "read_only_true" && viewer.selectedItems.formFields.length !== 0) {
276-
var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
277-
search.style.display = selectedFormField ? 'none' : 'block';
278-
} else if (args.ids[i] === "read_only_false" && viewer.selectedItems.formFields.length !== 0) {
279-
var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
280-
search.style.display = selectedFormField ? 'block' : 'none';
281-
} else if (args.ids[i] === 'formfield properties' && viewer.selectedItems.formFields.length !== 0) {
282-
search.style.display = 'block';
283188
}
189+
} else if (args.ids[i] === "read_only_true" && viewer.selectedItems.formFields.length !== 0) {
190+
var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
191+
search.style.display = selectedFormField ? 'none' : 'block';
192+
} else if (args.ids[i] === "read_only_false" && viewer.selectedItems.formFields.length !== 0) {
193+
var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
194+
search.style.display = selectedFormField ? 'block' : 'none';
195+
} else if (args.ids[i] === 'formfield properties' && viewer.selectedItems.formFields.length !== 0) {
196+
search.style.display = 'block';
284197
}
285198
}
286199
}
287-
288-
function documentLoad(args) {
289-
var viewer = document.getElementById('container').ej2_instances[0];
290-
viewer.addCustomMenu(menuItems, true);
291-
}
292-
293-
return (
294-
<div>
295-
<div className='control-section'>
296-
{/* Render the PDF Viewer */}
297-
<PdfViewerComponent
298-
id="container"
299-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
300-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
301-
documentLoad={documentLoad}
302-
customContextMenuBeforeOpen={customContextMenuBeforeOpen}
303-
height='640px'>
304-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
305-
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
306-
</PdfViewerComponent>
307-
</div>
308-
</div>);
309-
310200
}
311-
const root = ReactDOM.createRoot(document.getElementById('sample'));
312-
root.render(<App />);
313201
```
314202

315203
## Disable the Context Menu Entirely
@@ -346,9 +234,8 @@ The following is the output of the custom context menu with customization.
346234
{% endhighlight %}
347235
{% endtabs %}
348236

349-
N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the <div> element in either the `index.TSX` or `index.JSX` file:
350-
**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
237+
N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the <div> element in either the `index.TSX` or `index.JSX` file: **serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
351238

352-
{% previewsample "document-Processing/code-snippet/pdfviewer/react/custom-context-menu" %}
239+
{% previewsample "document-processing/code-snippet/pdfviewer/react/custom-context-menu" %}
353240

354-
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu)
241+
[View the sample in Stackblitz](https://stackblitz.com/edit/react-zmbkebwq?file=index.js)

0 commit comments

Comments
 (0)