Skip to content

Commit 14dfc87

Browse files
SaravanaPriya31SaravanaPriya31
SaravanaPriya31
authored and
SaravanaPriya31
committed
commit
1 parent 9ca72ca commit 14dfc87

File tree

10 files changed

+93
-180
lines changed

10 files changed

+93
-180
lines changed

‎How to/customize existing toolbar/.gitignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
src/**/*.js
2-
!src/system.config.js
1+
dist/
32
node_modules/

‎How to/customize existing toolbar/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
44

5-
The application contains Essential JS 2 button component for preview and all common settings are preconfigured.
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.
66
77
## Getting Started
88

@@ -57,9 +57,9 @@ If JDK is not installed in your local machine, you can download it from [here](h
5757

5858
## Running
5959

60-
The application is configured with `browser-sync`, so it will serve the web application in your default browser.
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.
6161

62-
We used `SystemJS` for module loading.
62+
We have used [Webpack](https://github.com/webpack/webpack) for module loading.
6363

6464
You can use the below npm script to run the web application.
6565

‎How to/customize existing toolbar/e2e/protractor.conf.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ exports.config = {
1111
jasmineNodeOpts: {
1212
defaultTimeoutInterval: 10000
1313
},
14+
directConnect: true,
1415

1516
onPrepare: function() {
1617
browser.waitForAngularEnabled(false);

‎How to/customize existing toolbar/gulpfile.js‎

Lines changed: 14 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,18 @@ var gulp = require('gulp');
55
/**
66
* Compile TypeScript to JS
77
*/
8-
gulp.task('compile', gulp.series(function(done) {
9-
var ts = require('gulp-typescript');
10-
// Default typescript config
11-
var defaultConfig = {
12-
typescript: require('typescript')
13-
};
14-
var tsProject, tsResult;
15-
// Create the typescript project
16-
tsProject = ts.createProject('tsconfig.json', defaultConfig);
17-
// Get typescript result
18-
tsResult = gulp.src(['./src/**/*.ts'], { base: '.' })
19-
.pipe(ts(tsProject))
20-
.pipe(gulp.dest('./'))
21-
.on('error', function(e) {
22-
done(e);
23-
process.exit(1);
24-
}).on('end', function() {
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 () {
2516
done();
2617
});
27-
}));
28-
29-
/**
30-
* Load the sample in src/app/index
31-
*/
32-
gulp.task('start', gulp.series('compile', function(done) {
33-
var browserSync = require('browser-sync');
34-
var bs = browserSync.create('Essential JS 2');
35-
var options = {
36-
server: {
37-
baseDir: ['./src', './']
38-
},
39-
ui: false
40-
};
41-
bs.init(options, done);
42-
43-
/**
44-
* Watching typescript file changes
45-
*/
46-
gulp.watch('src/**/*.ts', gulp.series('compile', bs.reload)).on('change', reportChanges);
47-
}));
48-
49-
18+
});
5019

51-
function reportChanges(event) {
52-
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
53-
}
5420
/**
5521
* Testing spec files
5622
*/
@@ -64,33 +30,31 @@ gulp.task('e2e-webdriver-update', webdriver_update({
6430
webdriverManagerArgs: ['--ie', '--edge']
6531
}));
6632

67-
gulp.task('e2e-test', gulp.series('compile', function(done) {
33+
gulp.task('e2e-test', gulp.series('compile', function (done) {
6834
var browserSync = require('browser-sync');
6935
var bs = browserSync.create('Essential JS 2');
7036
var options = {
7137
server: {
7238
baseDir: [
73-
'./src/app/',
74-
'./src/resource/',
75-
'./node_modules/@syncfusion/ej2/'
39+
'./dist/',
7640
],
7741
directory: true
7842
},
7943
ui: false,
8044
open: false,
8145
notify: false
8246
};
83-
bs.init(options, function() {
47+
bs.init(options, function () {
8448
gulp.src(['./spec/**/*.spec.js'])
8549
.pipe(protractor({
8650
configFile: 'e2e/protractor.conf.js'
8751
}))
88-
.on('error', function(e) {
52+
.on('error', function (e) {
8953
console.error('Error: ' + e.message);
9054
done();
9155
process.exit(1);
9256
})
93-
.on('end', function() {
57+
.on('end', function () {
9458
done();
9559
process.exit(0);
9660
});

‎How to/customize existing toolbar/package.json‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
11
{
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-
"dependencies": {
12-
"@syncfusion/ej2": "*"
13-
},
14-
"devDependencies": {
15-
"browser-sync": "^2.18.12",
16-
"gulp": "*",
17-
"gulp-protractor": "*",
18-
"gulp-typescript": "*",
19-
"jasmine": "^2.6.0",
20-
"systemjs": "^0.20.14",
21-
"typescript": "*"
22-
},
23-
"scripts": {
24-
"start": "gulp start",
25-
"serve": "gulp e2e-serve",
26-
"test": "gulp e2e-test",
27-
"update-webdriver": "gulp e2e-webdriver-update"
28-
}
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+
}
2938
}

‎How to/customize existing toolbar/src/app/app.ts‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
1-
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
2-
TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, CustomToolbarItemModel} from "../src/index";
3-
4-
PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
5-
TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);
6-
let toolItem: CustomToolbarItemModel = {
7-
prefixIcon: 'e-icons e-paste',
8-
id: 'print',
9-
tooltipText: 'Custom toolbar item',
10-
align: 'left'
11-
};
12-
13-
//Initialize EJ2 Pdfviewer Container component with custom toolbar item.
14-
let viewer: PdfViewer = new PdfViewer();
1+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
152

16-
viewer.toolbarSettings = { toolbarItems: [toolItem, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
17-
viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
18-
viewer.resourceUrl="https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
19-
// To utilize the server-backed PDF Viewer, need to specify the service URL. This can be done by including viewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer'
20-
viewer.appendTo("#pdfViewer");
21-
3+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
4+
let toolItem: CustomToolbarItemModel = {
5+
prefixIcon: 'e-icons e-paste',
6+
id: 'print',
7+
tooltipText: 'Custom toolbar item',
8+
align: 'left'
9+
};
10+
let pdfviewer: PdfViewer = new PdfViewer();
11+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
12+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
13+
pdfviewer.toolbarSettings = { toolbarItems: [toolItem, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
14+
15+
pdfviewer.appendTo('#PdfViewer');
2216
//To handle custom toolbar click event.
23-
viewer.toolbarClick = function (args) {
17+
pdfviewer.toolbarClick = function (args) {
2418
if (args.item && args.item.id === 'print') {
25-
viewer.printModule.print();
19+
pdfviewer.print.print();
2620
}
2721
else if (args.item && args.item.id === 'download') {
28-
viewer.download();
22+
pdfviewer.download();
2923
}
3024
};

‎How to/customize existing toolbar/src/index.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,10 @@
99
<meta name="author" content="Syncfusion" />
1010
<link rel="shortcut icon" href="resources/favicon.ico" />
1111
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
12-
13-
<!--style reference from app-->
14-
<link href="/styles/styles.css" rel="stylesheet" />
15-
16-
<!--system js reference and configuration-->
17-
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
18-
<script src="system.config.js" type="text/javascript"></script>
1912
</head>
2013

2114
<body>
22-
<!--Element which will render as PdfViewer -->
15+
<!--Element which will render as PDF Viewer -->
2316
<div id="PdfViewer"></div>
2417
</body>
2518

‎How to/customize existing toolbar/src/styles/styles.css‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
2-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
3-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
4-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
5-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
6-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
7-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
8-
@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
1+
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
2+
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
3+
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
4+
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
5+
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
6+
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
7+
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
8+
@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
9+
@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";

‎How to/customize existing toolbar/src/system.config.js‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎How to/customize existing toolbar/tsconfig.json‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
11
{
2-
"compilerOptions": {
3-
"target": "es5",
4-
"module": "amd",
5-
"removeComments": true,
6-
"noLib": false,
7-
"sourceMap": true,
8-
"pretty": true,
9-
"allowUnreachableCode": false,
10-
"allowUnusedLabels": false,
11-
"noImplicitAny": true,
12-
"noImplicitReturns": true,
13-
"noImplicitUseStrict": false,
14-
"noFallthroughCasesInSwitch": true,
15-
"allowJs": false,
16-
"noEmitOnError": true,
17-
"forceConsistentCasingInFileNames": true,
18-
"moduleResolution": "node",
19-
"suppressImplicitAnyIndexErrors": true,
20-
"lib": ["es6", "dom"]
21-
},
22-
"compileOnSave": false
23-
}
2+
"compilerOptions": {
3+
"target": "es2016",
4+
"module": "ES6",
5+
"sourceMap": true,
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"strict": true,
9+
"skipLibCheck": true,
10+
"moduleResolution": "node"
11+
}
12+
}

0 commit comments

Comments
 (0)