Skip to content

Commit 3673530

Browse files
SaravanaPriya31SaravanaPriya31
SaravanaPriya31
authored and
SaravanaPriya31
committed
865587: context menu sample commit
1 parent cfb5417 commit 3673530

File tree

14 files changed

+473
-38
lines changed

14 files changed

+473
-38
lines changed

‎How to/Custom Context Menu/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
node_modules/

‎How to/Custom Context Menu/README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Essential JS 2 QuickStart
2+
3+
This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
4+
5+
>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
6+
7+
## Getting Started
8+
9+
To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
10+
11+
```
12+
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
13+
cd quickstart
14+
```
15+
16+
## Installing
17+
18+
We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
19+
20+
We already configure the required packages in the `package.json` file.
21+
22+
You can run the below command to install all dependent packages related to this seed project.
23+
24+
```
25+
npm install
26+
```
27+
28+
## Testing
29+
30+
This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
31+
32+
We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
33+
34+
Protractor can interact with our web application and verify the test scripts.
35+
36+
We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
37+
38+
```
39+
npm run update-webdriver
40+
```
41+
42+
Open another terminal and run the below npm script. It will start web server to serve our application.
43+
44+
```
45+
npm run serve
46+
```
47+
48+
Once the web server is up and running, we can run the end-to-end tests using the below npm script
49+
50+
```
51+
npm run test
52+
```
53+
54+
> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
55+
56+
If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
57+
58+
## Running
59+
60+
The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
61+
62+
We have used [Webpack](https://github.com/webpack/webpack) for module loading.
63+
64+
You can use the below npm script to run the web application.
65+
66+
```
67+
npm run start
68+
```
69+
70+
## Resources
71+
72+
You can also refer the below resources to know more details about Essential JS 2 components.
73+
74+
* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
75+
* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)

‎How to/Custom Context Menu/e2e/index.spec.js‎

Whitespace-only changes.

‎How to/Custom Context Menu/e2e/protractor.conf.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
exports.config = {
2+
3+
allScriptsTimeout: 11000,
4+
5+
capabilities: {
6+
'browserName': 'chrome'
7+
},
8+
9+
framework: 'jasmine',
10+
11+
jasmineNodeOpts: {
12+
defaultTimeoutInterval: 10000
13+
},
14+
directConnect: true,
15+
16+
onPrepare: function() {
17+
browser.waitForAngularEnabled(false);
18+
},
19+
20+
specs: ['./*.spec.js']
21+
};

‎How to/Custom Context Menu/gulpfile.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use strict';
2+
3+
var gulp = require('gulp');
4+
5+
/**
6+
* Compile TypeScript to JS
7+
*/
8+
gulp.task('compile', function (done) {
9+
var webpack = require('webpack');
10+
var webpackStream = require('webpack-stream');
11+
gulp.src(['./src/app/app.ts']).pipe(webpackStream({
12+
config: require('./webpack.config.js')
13+
}, webpack))
14+
.pipe(gulp.dest('./dist'))
15+
.on('end', function () {
16+
done();
17+
});
18+
});
19+
20+
/**
21+
* Testing spec files
22+
*/
23+
var protractor = require('gulp-protractor').protractor;
24+
var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
25+
var webdriver_update = require('gulp-protractor').webdriver_update_specific;
26+
27+
gulp.task('e2e-serve', webdriver_standalone);
28+
29+
gulp.task('e2e-webdriver-update', webdriver_update({
30+
webdriverManagerArgs: ['--ie', '--edge']
31+
}));
32+
33+
gulp.task('e2e-test', gulp.series('compile', function (done) {
34+
var browserSync = require('browser-sync');
35+
var bs = browserSync.create('Essential JS 2');
36+
var options = {
37+
server: {
38+
baseDir: [
39+
'./dist/',
40+
],
41+
directory: true
42+
},
43+
ui: false,
44+
open: false,
45+
notify: false
46+
};
47+
bs.init(options, function () {
48+
gulp.src(['./spec/**/*.spec.js'])
49+
.pipe(protractor({
50+
configFile: 'e2e/protractor.conf.js'
51+
}))
52+
.on('error', function (e) {
53+
console.error('Error: ' + e.message);
54+
done();
55+
process.exit(1);
56+
})
57+
.on('end', function () {
58+
done();
59+
process.exit(0);
60+
});
61+
});
62+
}));

‎How to/Custom Context Menu/license‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
2+
3+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
4+
5+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
6+
7+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
8+
9+
The Syncfusion license that contains the terms and conditions can be found at
10+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

‎How to/Custom Context Menu/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "ej2-quickstart",
3+
"version": "0.0.1",
4+
"description": "Essential JS 2 typescript quick start application",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/syncfusion/ej2-quickstart.git"
10+
},
11+
"scripts": {
12+
"start": "webpack-dev-server --mode development",
13+
"build": "webpack --mode production",
14+
"serve": "gulp e2e-serve",
15+
"test": "gulp e2e-test",
16+
"update-webdriver": "gulp e2e-webdriver-update"
17+
},
18+
"devDependencies": {
19+
"ajv": "^8.11.2",
20+
"browser-sync": "^2.18.12",
21+
"gulp": "*",
22+
"typescript": "*",
23+
"gulp-protractor": "*",
24+
"gulp-typescript": "*",
25+
"jasmine": "^2.6.0",
26+
"css-loader": "^6.7.2",
27+
"ts-loader": "^9.4.1",
28+
"mini-css-extract-plugin": "^2.7.0",
29+
"html-webpack-plugin": "^5.5.0",
30+
"webpack": "^5.75.0",
31+
"webpack-cli": "^5.0.0",
32+
"webpack-dev-server": "^4.11.1",
33+
"webpack-stream": "^7.0.0"
34+
},
35+
"dependencies": {
36+
"@syncfusion/ej2": "*"
37+
}
38+
}

‎How to/Custom Context Menu/src/app/app.ts‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
2+
import { MenuItemModel } from '@syncfusion/ej2-navigations';
3+
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
4+
5+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
6+
7+
let pdfviewer: PdfViewer = new PdfViewer();
8+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
9+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
10+
11+
var menuItems: MenuItemModel[] = [
12+
{
13+
text: 'Search In Google',
14+
id: 'search_in_google',
15+
iconCss: 'e-icons e-de-ctnr-find'
16+
},
17+
{
18+
text: 'Lock Annotation',
19+
iconCss: 'e-icons e-lock',
20+
id: 'lock_annotation'
21+
},
22+
{
23+
text: 'Unlock Annotation',
24+
iconCss: 'e-icons e-unlock',
25+
id: 'unlock_annotation'
26+
},
27+
{
28+
text: 'Lock Form Fields',
29+
iconCss: 'e-icons e-lock',
30+
id: 'read_only_true'
31+
},
32+
{
33+
text: 'Unlock Form Fields',
34+
iconCss: 'e-icons e-unlock',
35+
id: 'read_only_false'
36+
},
37+
];
38+
39+
40+
pdfviewer.appendTo('#PdfViewer');
41+
42+
pdfviewer.documentLoad = function (args: any) {
43+
pdfviewer.addCustomMenu(menuItems, false, false);
44+
}
45+
46+
pdfviewer.customContextMenuSelect = function (args: any) {
47+
switch (args.id) {
48+
case 'search_in_google':
49+
for (var i = 0; i < pdfviewer.textSelectionModule.selectionRangeArray.length; i++) {
50+
var content = pdfviewer.textSelectionModule.selectionRangeArray[i].textContent;
51+
if ((pdfviewer.textSelectionModule.isTextSelection) && (/\S/.test(content))) {
52+
window.open('http://google.com/search?q=' + content);
53+
}
54+
}
55+
break;
56+
case 'lock_annotation':
57+
lockAnnotations(args);
58+
break;
59+
case 'unlock_annotation':
60+
unlockAnnotations(args);
61+
break;
62+
case 'read_only_true':
63+
setReadOnlyTrue(args);
64+
break;
65+
case 'read_only_false':
66+
setReadOnlyFalse(args);
67+
break;
68+
case 'formfield properties':
69+
break;
70+
default:
71+
break;
72+
}
73+
};
74+
75+
pdfviewer.customContextMenuBeforeOpen = function (args: any) {
76+
for (var i = 0; i < args.ids.length; i++) {
77+
var search = document.getElementById(args.ids[i]);
78+
if (search) {
79+
search.style.display = 'none';
80+
if (args.ids[i] === 'search_in_google' && (pdfviewer.textSelectionModule) && pdfviewer.textSelectionModule.isTextSelection) {
81+
search.style.display = 'block';
82+
} else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
83+
var isLockOption = args.ids[i] === "lock_annotation";
84+
for (var j = 0; j < pdfviewer.selectedItems.annotations.length; j++) {
85+
var selectedAnnotation: any = pdfviewer.selectedItems.annotations[j];
86+
if (selectedAnnotation && selectedAnnotation.annotationSettings) {
87+
var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
88+
(!isLockOption && selectedAnnotation.annotationSettings.isLock);
89+
search.style.display = shouldDisplay ? 'block' : 'none';
90+
}
91+
}
92+
} else if ((args.ids[i] === "read_only_true" || args.ids[i] === "read_only_false") && pdfviewer.selectedItems.formFields.length !== 0) {
93+
var isReadOnlyOption = args.ids[i] === "read_only_true";
94+
for (var k = 0; k < pdfviewer.selectedItems.formFields.length; k++) {
95+
var selectedFormFields = pdfviewer.selectedItems.formFields[k];
96+
if (selectedFormFields) {
97+
var selectedFormField = pdfviewer.selectedItems.formFields[k].isReadonly;
98+
var displayMenu = (isReadOnlyOption && !selectedFormField) || (!isReadOnlyOption && selectedFormField);
99+
search.style.display = displayMenu ? 'block' : 'none';
100+
}
101+
}
102+
} else if (args.ids[i] === 'formfield properties' && pdfviewer.selectedItems.formFields.length !== 0) {
103+
search.style.display = 'block';
104+
}
105+
}
106+
}
107+
};
108+
109+
function lockAnnotations(args: any) {
110+
var selectedAnnotations: any = pdfviewer.selectedItems.annotations;
111+
for (var i = 0; i < selectedAnnotations.length; i++) {
112+
var annotation = selectedAnnotations[i];
113+
if (annotation && annotation.annotationSettings) {
114+
annotation.annotationSettings.isLock = true;
115+
pdfviewer.annotationModule.editAnnotation(annotation);
116+
args.cancel = false;
117+
}
118+
}
119+
}
120+
121+
function unlockAnnotations(args: any) {
122+
var selectedAnnotations: any = pdfviewer.selectedItems.annotations;
123+
for (var i = 0; i < selectedAnnotations.length; i++) {
124+
var annotation = selectedAnnotations[i];
125+
if (annotation && annotation.annotationSettings) {
126+
annotation.annotationSettings.isLock = false;
127+
pdfviewer.annotationModule.editAnnotation(annotation);
128+
args.cancel = false;
129+
}
130+
}
131+
}
132+
133+
function setReadOnlyTrue(args: any) {
134+
var selectedFormFields = pdfviewer.selectedItems.formFields;
135+
for (var i = 0; i < selectedFormFields.length; i++) {
136+
var selectedFormField = selectedFormFields[i];
137+
if (selectedFormField) {
138+
pdfviewer.formDesignerModule.updateFormField(selectedFormField, {
139+
isReadOnly: true,
140+
} as any);
141+
}
142+
args.cancel = false;
143+
}
144+
}
145+
146+
function setReadOnlyFalse(args: any) {
147+
var selectedFormFields = pdfviewer.selectedItems.formFields;
148+
for (var i = 0; i < selectedFormFields.length; i++) {
149+
var selectedFormField = selectedFormFields[i];
150+
if (selectedFormField) {
151+
pdfviewer.formDesignerModule.updateFormField(selectedFormField, {
152+
isReadOnly: false,
153+
} as any);
154+
}
155+
args.cancel = false;
156+
}
157+
}
158+
159+
let defaultCheckBoxObj: CheckBox = new CheckBox({
160+
change: contextmenuHelper,
161+
cssClass: 'multiline',
162+
});
163+
defaultCheckBoxObj.appendTo('#hide-default-context-menu');
164+
165+
let positionCheckBoxObj: CheckBox = new CheckBox({
166+
change: contextmenuHelper,
167+
cssClass: 'multiline',
168+
});
169+
positionCheckBoxObj.appendTo('#show-custom-menu-bottom');
170+
171+
function contextmenuHelper(args: ChangeEventArgs): void {
172+
pdfviewer.addCustomMenu(menuItems, defaultCheckBoxObj.checked, positionCheckBoxObj.checked);
173+
}
174+
175+
pdfviewer.appendTo('#PdfViewer');

0 commit comments

Comments
 (0)