From 1873a23afddc15cc69a5048f8a65b3eaa8223a6b Mon Sep 17 00:00:00 2001 From: DavidEGutierrez Date: Fri, 13 Sep 2024 16:53:52 -0400 Subject: [PATCH 1/2] Corrected compile errors 1. `app\components.js` updated calls to members that were missing the 'UI', 'Core', and changed docViewer.on( to .docViewer.addEventListener, and console output for debugging, updated indentation styles. 2. `package.json` Server script does not work with forward slaches for package location, changed to double backslashes. Also updated the package versions to use latest. 3. `README.MD` updated to use Apryse links, and added sections to link up to documentation and showcase sample. 4. `LICENSE` updated to use similar statement as in recent edits to other projects. --- LICENSE | 4 ++-- README.md | 36 +++++++++++++++++++++++------------- app/components.js | 23 ++++++++++++----------- package.json | 17 ++++++++++------- 4 files changed, 47 insertions(+), 33 deletions(-) diff --git a/LICENSE b/LICENSE index 16ee40d..587dc24 100755 --- a/LICENSE +++ b/LICENSE @@ -1,2 +1,2 @@ -Copyright 2018 PDFTron Systems Inc. All rights reserved. -WebViewer React UI project/codebase or any derived works is only permitted in solutions with an active commercial PDFTron WebViewer license. For exact licensing terms please refer to your commercial WebViewer license. For use in other scenario, please contact sales@pdftron.com \ No newline at end of file +Copyright 2023 Apryse Software Inc. All rights reserved. +WebViewer React UI project/codebase or any derived works is only permitted in solutions with an active commercial Apryse WebViewer license. For exact licensing terms refer to your commercial WebViewer license. For use in other scenario, contact sales@apryse.com. diff --git a/README.md b/README.md index 5ee61be..aa9267d 100755 --- a/README.md +++ b/README.md @@ -1,19 +1,24 @@ # WebViewer - AngularJS sample -[WebViewer](https://www.pdftron.com/webviewer) is a powerful JavaScript-based PDF Library that's part of the [PDFTron PDF SDK](https://www.pdftron.com). It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project. +[WebViewer](https://www.pdftron.com/webviewer) is a powerful JavaScript-based PDF Library that is part of the [Apryse SDK](https://www.pdftron.com). It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate, and manipulate PDFs that can be embedded into any web project. ![WebViewer UI](https://www.pdftron.com/downloads/pl/webviewer-ui.png) -This repo is specifically designed for any users interested in integrating WebViewer into AngularJS project. See [AngularJS.org](https://angularjs.org) for more information. +This repo is specifically designed for any users interested in integrating WebViewer into [AngularJS](https://angularjs.org). ## Initial setup -Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/). +Before you begin, make sure your development environment includes: + +1. [Node.js](https://nodejs.org/en). +2. IDE used in this sample is Visual Studio Code. +3. [GitHub command line](https://github.com/git-guides/install-git) `git`. +4. Angular CLI: `npm install -g @angular/cli`. If an unsupported engine message appears, make sure to install a compatible NodeJS versions. ## Install ``` -git clone https://github.com/PDFTron/webviewer-angularjs-sample.git +gh repo clone ApryseSDK/webviewer-angularjs-sample cd webviewer-angularjs-sample npm install ``` @@ -26,13 +31,9 @@ npm start Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files. -## WebViewer APIs - -See [API documentation](https://www.pdftron.com/documentation/web/guides/ui/apis). - ## Enabling full API -PDFNetJS Full is a complete browser side PDF SDK, unlocking viewing, parsing and editing of PDF files. To enable full API, you can modify constructor in components.js: +Webviewer Full is a complete browser side PDF SDK, unlocking viewing, parsing and editing of PDF files. To enable full API, you can modify constructor in components.js: ```diff WebViewer({ @@ -42,13 +43,22 @@ WebViewer({ }, document.getElementById('viewer')) ``` -You can refer to this [guide for more information](https://www.pdftron.com/documentation/web/guides/full-api) +Visit Apryse's [WebViewer](https://docs.apryse.com/documentation/web/) page to see what else you can do with the WebViewer. + +## WebViewer APIs + +* [@pdftron/webviewer API documentation](https://docs.apryse.com/api/web/global.html#WebViewer__anchor) +* [@pdftron/webviewer-angularjs](https://github.com/ApryseSDK/webviewer-angularjs-sample) + +## Showcase + +Refer to a running sample on Apryse SDK [showcase page](https://showcase.apryse.com/). ## Contributing -See [contributing](./CONTRIBUTING.md). +Any submission to this repo is governed by these [guidelines](/CONTRIBUTING.md). + ## License -See [license](./LICENSE). -![](https://onepixel.pdftron.com/webviewer-angularjs-sample) +For licensing, refer to [License](LICENSE). \ No newline at end of file diff --git a/app/components.js b/app/components.js index c5eba1b..a893434 100644 --- a/app/components.js +++ b/app/components.js @@ -12,22 +12,23 @@ angular.module('components', []) initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf', // initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server }, document.getElementById('viewer')) - .then(function(instance) { - var docViewer = instance.docViewer; - var annotManager = instance.annotManager; - // call methods from instance, docViewer and annotManager as needed + .then(function(instance) { + var docViewer = instance.Core.documentViewer; + var annotManager = instance.Core.annotationManager; + // call methods from instance, docViewer and annotManager as needed - // you can also access major namespaces from the instance as follows: - // var Tools = instance.Tools; - // var Annotations = instance.Annotations; + // you can also access major namespaces from the instance as follows: + var Tools = instance.Core.Tools; + var Annotations = instance.Core.Annotations; - // change to dark theme - instance.setTheme('dark'); + // change to dark theme + instance.UI.setTheme('dark'); - docViewer.on('documentLoaded', function() { // call methods relating to the loaded document + docViewer.addEventListener('documentLoaded', function () { + console.log("Document is loaded."); + }); }); - }); }, template: "
", replace: true diff --git a/package.json b/package.json index 912eed1..7f8fa36 100644 --- a/package.json +++ b/package.json @@ -3,21 +3,24 @@ "version": "1.0.0", "scripts": { "start": "npm run server", - "server": "./node_modules/.bin/supervisor -k -e html,js -i .git/,node_modules/ -- server.js", + "server": "node_modules\\.bin\\supervisor -k -e html,js -i .git/,node_modules/ -- server.js", "postinstall": "npm run download-webviewer", "download-webviewer": "npx @pdftron/webviewer-downloader --webviewerLocation app/lib" }, "devDependencies": { - "body-parser": "1.18.3", - "express": "^4.16.3", + "@pdftron/webviewer-downloader": "^1.4.2", + "body-parser": "^1.20.3", + "express": "^4.21.0", "morgan": "^1.9.1", - "opn": "^5.3.0", - "supervisor": "0.12.0", - "@pdftron/webviewer-downloader": "^1.1.0" + "opn": "^6.0.0", + "supervisor": "0.12.0" }, "repository": { "type": "git", "url": "" }, - "author": "PDFTron Systems Inc." + "author": "PDFTron Systems Inc.", + "dependencies": { + "npm": "^10.8.3" + } } From 8876c50a0e39bd02d0b20b779f37b3c43eee956f Mon Sep 17 00:00:00 2001 From: DavidEGutierrez Date: Tue, 17 Sep 2024 10:48:18 -0400 Subject: [PATCH 2/2] Update README.md Corrected typo. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aa9267d..84cf336 100755 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Before you begin, make sure your development environment includes: 1. [Node.js](https://nodejs.org/en). 2. IDE used in this sample is Visual Studio Code. 3. [GitHub command line](https://github.com/git-guides/install-git) `git`. -4. Angular CLI: `npm install -g @angular/cli`. If an unsupported engine message appears, make sure to install a compatible NodeJS versions. +4. Angular CLI: `npm install -g @angular/cli`. If an unsupported engine message appears, make sure to install a compatible NodeJS version. ## Install