Skip to content

Commit b612bc5

Browse files
SaravanaPriya31SaravanaPriya31
SaravanaPriya31
authored and
SaravanaPriya31
committed
865587: context menu sample commit
1 parent 3d97ddf commit b612bc5

File tree

10 files changed

+432
-0
lines changed

10 files changed

+432
-0
lines changed

‎How to/Custom Context Menu/.babelrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

‎How to/Custom Context Menu/.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎How to/Custom Context Menu/.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎How to/Custom Context Menu/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Getting Started
2+
3+
> A Vue.js project
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# build for production with minification
15+
npm run build
16+
```
17+
18+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎How to/Custom Context Menu/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>quickstart</title>
7+
</head>
8+
9+
<body>
10+
<div id="app"></div>
11+
<script src="/dist/build.js"></script>
12+
</body>
13+
14+
</html>
15+
16+

‎How to/Custom Context Menu/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "quickstart",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"scripts": {
6+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
7+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
8+
},
9+
"dependencies": {
10+
"@syncfusion/ej2-vue-pdfviewer": "*",
11+
"@syncfusion/ej2-vue-navigations": "*",
12+
"@syncfusion/ej2-vue-buttons": "*",
13+
"vue": "^2.5.11"
14+
},
15+
"browserslist": [
16+
"> 1%",
17+
"last 2 versions",
18+
"not ie <= 8"
19+
],
20+
"devDependencies": {
21+
"babel-core": "^6.26.0",
22+
"babel-loader": "^7.1.2",
23+
"babel-preset-env": "^1.6.0",
24+
"babel-preset-stage-3": "^6.24.1",
25+
"cross-env": "^5.0.5",
26+
"css-loader": "^0.28.7",
27+
"file-loader": "^1.1.4",
28+
"vue-loader": "^13.0.5",
29+
"vue-template-compiler": "^2.4.4",
30+
"webpack": "^3.6.0",
31+
"webpack-dev-server": "^2.9.1"
32+
}
33+
}

‎How to/Custom Context Menu/src/App.vue

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<template>
2+
<div id="app">
3+
<tr>
4+
<td class="left-side-pdfviewer">Hide Default Context Menu</td>
5+
<td>
6+
<ejs-checkbox
7+
id="enable"
8+
@change="contextmenuHelper"
9+
:checked="false"
10+
cssClass="multiline"></ejs-checkbox>
11+
</td>
12+
</tr>
13+
<tr>
14+
<td class="left-side-pdfviewer">Add Custom option at bottom</td>
15+
<td>
16+
<ejs-checkbox
17+
id="position"
18+
@change="contextmenuHelper"
19+
:checked="false"
20+
cssClass="multiline" ></ejs-checkbox>
21+
</td>
22+
</tr>
23+
<ejs-pdfviewer
24+
id="pdfviewer"
25+
ref="pdfviewer"
26+
:documentPath="documentPath"
27+
:resourceUrl="resourceUrl"
28+
:documentLoad="documentLoad"
29+
:customContextMenuSelect="customContextMenuSelect"
30+
:customContextMenuBeforeOpen="customContextMenuBeforeOpen">
31+
</ejs-pdfviewer>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer } from "@syncfusion/ej2-vue-pdfviewer";
37+
import { MenuComponent } from "@syncfusion/ej2-vue-navigations";
38+
import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
39+
40+
export default {
41+
components: {
42+
'ejs-pdfviewer': PdfViewerComponent,
43+
'ejs-menu': MenuComponent,
44+
'ejs-checkbox': CheckBoxComponent
45+
},
46+
data: function() {
47+
return {
48+
documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
49+
resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib',
50+
menuItems : [
51+
{
52+
text: 'Search In Google',
53+
id: 'search_in_google',
54+
iconCss: 'e-icons e-de-ctnr-find'
55+
},
56+
{
57+
text: 'Lock Annotation',
58+
iconCss: 'e-icons e-lock',
59+
id: 'lock_annotation'
60+
},
61+
{
62+
text: 'Unlock Annotation',
63+
iconCss: 'e-icons e-unlock',
64+
id: 'unlock_annotation'
65+
},
66+
{
67+
text: 'Lock Form Fields',
68+
iconCss: 'e-icons e-lock',
69+
id: 'read_only_true'
70+
},
71+
{
72+
text: 'Unlock Form Fields',
73+
iconCss: 'e-icons e-unlock',
74+
id: 'read_only_false'
75+
},
76+
]
77+
}
78+
},
79+
provide: {
80+
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]
81+
},
82+
methods: {
83+
documentLoad: function (args) {
84+
var viewer = this.$refs.pdfviewer.ej2Instances;
85+
viewer.addCustomMenu(this.menuItems, false, false);
86+
},
87+
88+
customContextMenuSelect: function (args) {
89+
var viewer = this.$refs.pdfviewer.ej2Instances;
90+
switch (args.id) {
91+
case 'search_in_google':
92+
for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
93+
var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
94+
if ((viewer.textSelectionModule.isTextSelection) && (/\S/.test(content))) {
95+
window.open('http://google.com/search?q=' + content);
96+
}
97+
}
98+
break;
99+
case 'lock_annotation':
100+
this.lockAnnotations(args);
101+
break;
102+
case 'unlock_annotation':
103+
this.unlockAnnotations(args);
104+
break;
105+
case 'read_only_true':
106+
this.setReadOnlyTrue(args);
107+
break;
108+
case 'read_only_false':
109+
this.setReadOnlyFalse(args);
110+
break;
111+
default:
112+
break;
113+
}
114+
},
115+
116+
customContextMenuBeforeOpen : function (args) {
117+
var viewer = this.$refs.pdfviewer.ej2Instances;
118+
for (var i = 0; i < args.ids.length; i++) {
119+
var search = document.getElementById(args.ids[i]);
120+
if (search) {
121+
search.style.display = 'none';
122+
if (args.ids[i] === 'search_in_google' && (viewer.textSelectionModule) && viewer.textSelectionModule.isTextSelection) {
123+
search.style.display = 'block';
124+
} else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
125+
var isLockOption = args.ids[i] === "lock_annotation";
126+
for (var j = 0; j < viewer.selectedItems.annotations.length; j++) {
127+
var selectedAnnotation = viewer.selectedItems.annotations[j];
128+
if (selectedAnnotation && selectedAnnotation.annotationSettings) {
129+
var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
130+
(!isLockOption && selectedAnnotation.annotationSettings.isLock);
131+
search.style.display = shouldDisplay ? 'block' : 'none';
132+
}
133+
}
134+
} else if ((args.ids[i] === "read_only_true" || args.ids[i] === "read_only_false") && viewer.selectedItems.formFields.length !== 0) {
135+
var isReadOnlyOption = args.ids[i] === "read_only_true";
136+
for (var j = 0; j < viewer.selectedItems.formFields.length; j++) {
137+
var selectedFormFields = viewer.selectedItems.formFields[j];
138+
if (selectedFormFields) {
139+
var selectedFormField = viewer.selectedItems.formFields[j].isReadonly;
140+
var displayMenu = (isReadOnlyOption && !selectedFormField) || (!isReadOnlyOption && selectedFormField);
141+
search.style.display = displayMenu ? 'block' : 'none';
142+
}
143+
}
144+
} else if (args.ids[i] === 'formfield properties' && viewer.selectedItems.formFields.length !== 0) {
145+
search.style.display = 'block';
146+
}
147+
}
148+
}
149+
},
150+
151+
lockAnnotations: function (args) {
152+
var viewer = this.$refs.pdfviewer.ej2Instances;
153+
var selectedAnnotations = viewer.selectedItems.annotations;
154+
for (var i = 0; i < selectedAnnotations.length; i++) {
155+
var annotation = selectedAnnotations[i];
156+
if (annotation && annotation.annotationSettings) {
157+
annotation.annotationSettings.isLock = true;
158+
viewer.annotationModule.editAnnotation(annotation);
159+
args.cancel = false;
160+
}
161+
}
162+
},
163+
unlockAnnotations: function (args) {
164+
var viewer = this.$refs.pdfviewer.ej2Instances;
165+
var selectedAnnotations = viewer.selectedItems.annotations;
166+
for (var i = 0; i < selectedAnnotations.length; i++) {
167+
var annotation = selectedAnnotations[i];
168+
if (annotation && annotation.annotationSettings) {
169+
annotation.annotationSettings.isLock = false;
170+
viewer.annotationModule.editAnnotation(annotation);
171+
args.cancel = false;
172+
}
173+
}
174+
},
175+
176+
setReadOnlyTrue: function (args) {
177+
var viewer = this.$refs.pdfviewer.ej2Instances;
178+
var selectedFormFields = viewer.selectedItems.formFields;
179+
for (var i = 0; i < selectedFormFields.length; i++) {
180+
var selectedFormField = selectedFormFields[i];
181+
if (selectedFormField) {
182+
viewer.formDesignerModule.updateFormField(selectedFormField, {
183+
isReadOnly: true,
184+
});
185+
}
186+
args.cancel = false;
187+
}
188+
},
189+
190+
setReadOnlyFalse: function (args) {
191+
var viewer = this.$refs.pdfviewer.ej2Instances;
192+
var selectedFormFields = viewer.selectedItems.formFields;
193+
for (var i = 0; i < selectedFormFields.length; i++) {
194+
var selectedFormField = selectedFormFields[i];
195+
if (selectedFormField) {
196+
viewer.formDesignerModule.updateFormField(selectedFormField, {
197+
isReadOnly: false,
198+
});
199+
}
200+
args.cancel = false;
201+
202+
}
203+
},
204+
205+
contextmenuHelper: function (args) {
206+
var viewer = this.$refs.pdfviewer.ej2Instances;
207+
viewer.addCustomMenu(this.menuItems, enable.checked, position.checked);
208+
},
209+
}
210+
};
211+
</script>
212+
213+
<style>
214+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
215+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
216+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
217+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
218+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
219+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
220+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
221+
@import "../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css";
222+
223+
#app {
224+
font-family: "Avenir", Helvetica, Arial, sans-serif;
225+
-webkit-font-smoothing: antialiased;
226+
-moz-osx-font-smoothing: grayscale;
227+
text-align: center;
228+
color: #2c3e50;
229+
margin-top: 60px;
230+
}
231+
232+
h1,
233+
h2 {
234+
font-weight: normal;
235+
}
236+
237+
ul {
238+
list-style-type: none;
239+
padding: 0;
240+
}
241+
242+
li {
243+
display: inline-block;
244+
margin: 0 10px;
245+
}
246+
247+
a {
248+
color: #42b983;
249+
}
250+
</style>

‎How to/Custom Context Menu/src/assets/logo.png

6.69 KB
Loading

‎How to/Custom Context Menu/src/main.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import { PdfViewerPlugin } from '@syncfusion/ej2-vue-pdfviewer';
4+
5+
Vue.use(PdfViewerPlugin);
6+
7+
new Vue({
8+
el: '#app',
9+
render: h => h(App)
10+
})

0 commit comments

Comments
 (0)