commit

SyncfusionExamples · Dec 15, 2023 · 9ca72ca · 9ca72ca
1 parent 5232d1f
commit 9ca72ca
Show file tree

Hide file tree

Showing 13 changed files with 359 additions and 0 deletions.
diff --git a/How to/customize existing toolbar/.gitignore b/How to/customize existing toolbar/.gitignore
@@ -0,0 +1,3 @@
+src/**/*.js
+!src/system.config.js
+node_modules/
diff --git a/How to/customize existing toolbar/README.md b/How to/customize existing toolbar/README.md
@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+The application contains Essential JS 2 button component for preview and all common settings are preconfigured.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+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.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+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).
+
+## Running
+
+The application is configured with `browser-sync`, so it will serve the web application in your default browser.
+
+We used `SystemJS` for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)
diff --git a/How to/customize existing toolbar/e2e/index.spec.js b/How to/customize existing toolbar/e2e/index.spec.js
diff --git a/How to/customize existing toolbar/e2e/protractor.conf.js b/How to/customize existing toolbar/e2e/protractor.conf.js
@@ -0,0 +1,20 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};
diff --git a/How to/customize existing toolbar/gulpfile.js b/How to/customize existing toolbar/gulpfile.js
@@ -0,0 +1,98 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', gulp.series(function(done) {
+    var ts = require('gulp-typescript');
+    // Default typescript config
+    var defaultConfig = {
+        typescript: require('typescript')
+    };
+    var tsProject, tsResult;
+    // Create the typescript project
+    tsProject = ts.createProject('tsconfig.json', defaultConfig);
+    // Get typescript result
+    tsResult = gulp.src(['./src/**/*.ts'], { base: '.' })
+        .pipe(ts(tsProject))
+        .pipe(gulp.dest('./'))
+        .on('error', function(e) {
+            done(e);
+            process.exit(1);
+        }).on('end', function() {
+            done();
+        });
+}));
+
+/**
+ * Load the sample in src/app/index
+ */
+gulp.task('start', gulp.series('compile', function(done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: ['./src', './']
+        },
+        ui: false
+    };
+    bs.init(options, done);
+
+    /**
+    * Watching typescript file changes
+    */
+    gulp.watch('src/**/*.ts', gulp.series('compile', bs.reload)).on('change', reportChanges);
+}));
+
+
+
+function reportChanges(event) {
+    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+}
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function(done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './src/app/',
+                './src/resource/',
+                './node_modules/@syncfusion/ej2/'
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function() {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function(e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function() {
+                done();
+                process.exit(0);
+            });
+    });
+}));
diff --git a/How to/customize existing toolbar/license b/How to/customize existing toolbar/license
@@ -0,0 +1,10 @@
+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.
+
+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. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+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. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
diff --git a/How to/customize existing toolbar/package.json b/How to/customize existing toolbar/package.json
@@ -0,0 +1,29 @@
+{
+    "name": "ej2-quickstart",
+    "version": "0.0.1",
+    "description": "Essential JS 2 typescript quick start application",
+    "author": "Syncfusion Inc.",
+    "license": "SEE LICENSE IN license",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/syncfusion/ej2-quickstart.git"
+    },
+    "dependencies": {
+        "@syncfusion/ej2": "*"
+    },
+    "devDependencies": {
+        "browser-sync": "^2.18.12",
+        "gulp": "*",
+        "gulp-protractor": "*",
+        "gulp-typescript": "*",
+        "jasmine": "^2.6.0",
+        "systemjs": "^0.20.14",
+        "typescript": "*"
+    },
+    "scripts": {
+        "start": "gulp start",
+        "serve": "gulp e2e-serve",
+        "test": "gulp e2e-test",
+        "update-webdriver": "gulp e2e-webdriver-update"
+    }
+}
diff --git a/How to/customize existing toolbar/src/app/app.ts b/How to/customize existing toolbar/src/app/app.ts
@@ -0,0 +1,30 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
+    TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, CustomToolbarItemModel} from "../src/index";
+
+    PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
+    TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);
+    let toolItem: CustomToolbarItemModel = {
+        prefixIcon: 'e-icons e-paste',
+        id: 'print',
+        tooltipText: 'Custom toolbar item',
+        align: 'left'
+    };
+
+    //Initialize EJ2 Pdfviewer Container component with custom toolbar item.
+    let viewer: PdfViewer = new PdfViewer();
+
+    viewer.toolbarSettings = { toolbarItems: [toolItem, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
+    viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+    viewer.resourceUrl="https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+    // 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'
+    viewer.appendTo("#pdfViewer");
+
+    //To handle custom toolbar click event.
+       viewer.toolbarClick = function (args) {
+        if (args.item && args.item.id === 'print') {
+            viewer.printModule.print();
+        }
+        else if (args.item && args.item.id === 'download') {
+            viewer.download();
+        }
+    };
diff --git a/How to/customize existing toolbar/src/index.html b/How to/customize existing toolbar/src/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+
+    <!--style reference from app-->
+    <link href="/styles/styles.css" rel="stylesheet" />
+
+    <!--system js reference and configuration-->
+    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
+    <script src="system.config.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <!--Element which will render as PdfViewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>
diff --git a/How to/customize existing toolbar/src/resources/favicon.ico b/How to/customize existing toolbar/src/resources/favicon.ico
diff --git a/How to/customize existing toolbar/src/styles/styles.css b/How to/customize existing toolbar/src/styles/styles.css
@@ -0,0 +1,8 @@
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
diff --git a/How to/customize existing toolbar/src/system.config.js b/How to/customize existing toolbar/src/system.config.js
@@ -0,0 +1,37 @@
+System.config({
+    paths: {
+        'syncfusion:': './node_modules/@syncfusion/',
+    },
+    map: {
+        app: 'app',
+
+        //Syncfusion packages mapping
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-inplace-editor": "syncfusion:ej2-inplace-editor/dist/ej2-inplace-editor.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-pdfviewer": "syncfusion:ej2-pdfviewer/dist/ej2-pdfviewer.umd.min.js",
+        "@syncfusion/ej2-drawings": "syncfusion:ej2-drawings/dist/ej2-drawings.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js",
+        "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
+        "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js"
+    },
+    packages: {
+        'app': { main: 'app', defaultExtension: 'js' }
+    }
+});
+
+System.import('app');
diff --git a/How to/customize existing toolbar/tsconfig.json b/How to/customize existing toolbar/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "amd",
+        "removeComments": true,
+        "noLib": false,
+        "sourceMap": true,
+        "pretty": true,
+        "allowUnreachableCode": false,
+        "allowUnusedLabels": false,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitUseStrict": false,
+        "noFallthroughCasesInSwitch": true,
+        "allowJs": false,
+        "noEmitOnError": true,
+        "forceConsistentCasingInFileNames": true,
+        "moduleResolution": "node",
+        "suppressImplicitAnyIndexErrors": true,
+        "lib": ["es6", "dom"]
+    },
+    "compileOnSave": false
+}