Skip to content

Commit 52e9629

Browse files
sashamilenkovicsashamilenkovic
committed
refactor: adds angular and svelte examples to frameworks
1 parent 49ab949 commit 52e9629

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+2565
-529
lines changed

‎frameworks/angular/TS/angular.json‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"nutrient-angular-app": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "css"
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/nutrient-angular-app",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": [],
24+
"tsConfig": "tsconfig.app.json",
25+
"assets": ["src/favicon.ico"],
26+
"styles": ["src/styles.css"],
27+
"scripts": [
28+
"https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"
29+
]
30+
},
31+
"configurations": {
32+
"production": {
33+
"budgets": [
34+
{
35+
"type": "initial",
36+
"maximumWarning": "500kb",
37+
"maximumError": "1mb"
38+
},
39+
{
40+
"type": "anyComponentStyle",
41+
"maximumWarning": "2kb",
42+
"maximumError": "4kb"
43+
}
44+
],
45+
"outputHashing": "all"
46+
},
47+
"development": {
48+
"buildOptimizer": false,
49+
"optimization": false,
50+
"vendorChunk": true,
51+
"extractLicenses": false,
52+
"sourceMap": true,
53+
"namedChunks": true
54+
}
55+
},
56+
"defaultConfiguration": "production"
57+
},
58+
"serve": {
59+
"builder": "@angular-devkit/build-angular:dev-server",
60+
"configurations": {
61+
"production": {
62+
"buildTarget": "nutrient-angular-app:build:production"
63+
},
64+
"development": {
65+
"buildTarget": "nutrient-angular-app:build:development"
66+
}
67+
},
68+
"defaultConfiguration": "development"
69+
}
70+
}
71+
}
72+
}
73+
}

‎frameworks/angular/TS/package.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "nutrient-web-framework-angular-ts",
3+
"version": "1.0.0",
4+
"description": "Angular TypeScript demo app with Nutrient Web SDK examples and routing",
5+
"private": true,
6+
"keywords": [
7+
"nutrient",
8+
"pdf",
9+
"viewer",
10+
"angular",
11+
"typescript",
12+
"demo-app",
13+
"routing"
14+
],
15+
"scripts": {
16+
"ng": "ng",
17+
"start": "ng serve --port 3000",
18+
"build": "ng build",
19+
"dev": "ng serve --port 3000"
20+
},
21+
"dependencies": {
22+
"@angular/animations": "^17.0.0",
23+
"@angular/common": "^17.0.0",
24+
"@angular/compiler": "^17.0.0",
25+
"@angular/core": "^17.0.0",
26+
"@angular/forms": "^17.0.0",
27+
"@angular/platform-browser": "^17.0.0",
28+
"@angular/platform-browser-dynamic": "^17.0.0",
29+
"@angular/router": "^17.0.0",
30+
"@nutrient-sdk/viewer": "^1.7.0",
31+
"rxjs": "~7.8.0",
32+
"tslib": "^2.3.0",
33+
"zone.js": "~0.14.0"
34+
},
35+
"devDependencies": {
36+
"@angular-devkit/build-angular": "^17.0.0",
37+
"@angular/cli": "^17.0.0",
38+
"@angular/compiler-cli": "^17.0.0",
39+
"typescript": "~5.2.0"
40+
}
41+
}

‎frameworks/nextjs/JS/app/basic-viewer/BasicViewerPage.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.basic-viewer-container {
2+
height: 100vh;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
.basic-viewer-nav {
8+
padding: 1rem;
9+
background-color: #f5f5f5;
10+
border-bottom: 1px solid #ddd;
11+
display: flex;
12+
align-items: center;
13+
gap: 1rem;
14+
}
15+
16+
.basic-viewer-back-link {
17+
text-decoration: none;
18+
color: #4a8fed;
19+
font-size: 0.9rem;
20+
}
21+
22+
.basic-viewer-title {
23+
margin: 0;
24+
font-size: 1.1rem;
25+
}
26+
27+
.basic-viewer-subtitle {
28+
font-size: 0.9rem;
29+
color: #666;
30+
}
31+
32+
.basic-viewer-content {
33+
flex: 1;
34+
width: 100%;
35+
position: relative;
36+
min-height: 400px;
37+
}

‎frameworks/nextjs/JS/app/basic-viewer/page.jsx‎

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

33
import Link from "next/link";
44
import { useEffect, useRef } from "react";
5-
import {
6-
loadBasicViewer,
7-
unloadBasicViewer,
8-
} from "../../../examples/js/basic-viewer/implementation.js";
5+
import { loadNutrientViewer } from "../utils/loadNutrientViewer.js";
6+
import "./BasicViewerPage.css";
97

108
export default function BasicViewerPage() {
119
const containerRef = useRef(null);
1210

1311
useEffect(() => {
1412
const container = containerRef.current;
15-
const { NutrientViewer } = window;
13+
if (!container) return;
1614

17-
if (container && NutrientViewer) {
18-
loadBasicViewer(NutrientViewer, container);
19-
}
15+
let nutrientViewer = null;
16+
17+
const initViewer = async () => {
18+
try {
19+
nutrientViewer = await loadNutrientViewer();
20+
21+
// Unload any existing instance
22+
nutrientViewer.unload(container);
23+
24+
// Load the viewer with basic configuration
25+
await nutrientViewer.load({
26+
container,
27+
document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
28+
});
29+
} catch (error) {
30+
console.error("Failed to load Nutrient Viewer:", error);
31+
}
32+
};
33+
34+
initViewer();
2035

2136
return () => {
22-
if (NutrientViewer) {
23-
unloadBasicViewer(NutrientViewer, container);
37+
if (nutrientViewer && container) {
38+
// Use synchronous unload like the working example
39+
nutrientViewer.unload(container);
2440
}
2541
};
2642
}, []);
2743

2844
return (
29-
<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
30-
<nav
31-
style={{
32-
padding: "1rem",
33-
backgroundColor: "#f5f5f5",
34-
borderBottom: "1px solid #ddd",
35-
display: "flex",
36-
alignItems: "center",
37-
gap: "1rem",
38-
}}
39-
>
40-
<Link
41-
href="/"
42-
style={{
43-
textDecoration: "none",
44-
color: "#4A8FED",
45-
fontSize: "0.9rem",
46-
}}
47-
>
45+
<div className="basic-viewer-container">
46+
<nav className="basic-viewer-nav">
47+
<Link href="/" className="basic-viewer-back-link">
4848
← Back to Examples
4949
</Link>
50-
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Basic Viewer</h2>
51-
<span style={{ fontSize: "0.9rem", color: "#666" }}>
50+
<h2 className="basic-viewer-title">Basic Viewer</h2>
51+
<span className="basic-viewer-subtitle">
5252
Simple PDF viewing with standard controls
5353
</span>
5454
</nav>
5555

56-
<div ref={containerRef} style={{ flex: 1, width: "100%" }} />
56+
<div ref={containerRef} className="basic-viewer-content" />
5757
</div>
5858
);
5959
}

0 commit comments

Comments
 (0)