Skip to content

Commit a042cbf

Browse files
sashamilenkovicsashamilenkovic
committed
feat: adds support solid, solidstart, and vanilla
1 parent 8d3ccb0 commit a042cbf

File tree

127 files changed

+6597
-0
lines changed

Some content is hidden

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

127 files changed

+6597
-0
lines changed

‎frameworks/solid/js/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Nutrient Web SDK - SolidJS JavaScript Demo</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
12+
<!-- Nutrient Web SDK CDN -->
13+
<script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>
14+
15+
<script type="module" src="/src/main.jsx"></script>
16+
</body>
17+
</html>
18+

‎frameworks/solid/js/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "nutrient-web-framework-solid-js",
3+
"version": "1.0.0",
4+
"description": "SolidJS JavaScript demo app with Nutrient Web SDK examples and routing",
5+
"private": true,
6+
"type": "module",
7+
"keywords": [
8+
"nutrient",
9+
"pdf",
10+
"viewer",
11+
"solidjs",
12+
"javascript",
13+
"demo-app",
14+
"routing"
15+
],
16+
"scripts": {
17+
"dev": "vite",
18+
"build": "vite build",
19+
"preview": "vite preview"
20+
},
21+
"dependencies": {
22+
"@nutrient-sdk/viewer": "^1.7.0",
23+
"@solidjs/router": "^0.15.0",
24+
"solid-js": "^1.9.0"
25+
},
26+
"devDependencies": {
27+
"vite": "^5.0.0",
28+
"vite-plugin-solid": "^2.10.0"
29+
}
30+
}

‎frameworks/solid/js/src/App.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Route, Router } from "@solidjs/router";
2+
import BasicViewerPage from "./pages/BasicViewerPage";
3+
import CustomOverlaysPage from "./pages/CustomOverlaysPage";
4+
import HomePage from "./pages/HomePage";
5+
import MagazineModePage from "./pages/MagazineModePage";
6+
7+
function App() {
8+
return (
9+
<Router>
10+
<Route path="/" component={HomePage} />
11+
<Route path="/basic-viewer" component={BasicViewerPage} />
12+
<Route path="/magazine-mode" component={MagazineModePage} />
13+
<Route path="/custom-overlays" component={CustomOverlaysPage} />
14+
</Router>
15+
);
16+
}
17+
18+
export default App;

‎frameworks/solid/js/src/components/logos/NutrientLogo.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const NutrientLogo = () => (
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 50 36"
5+
fill="none"
6+
aria-label="Nutrient Logo"
7+
role="img"
8+
>
9+
<path
10+
d="M4.1524 22.1521C1.8582 22.1521 0 20.2939 0 17.9997C0 15.7055 1.8582 13.8473 4.1524 13.8473C6.44659 13.8473 8.30479 15.7055 8.30479 17.9997C8.30479 20.2939 6.44659 22.1521 4.1524 22.1521ZM45.6763 13.8473C43.3821 13.8473 41.524 15.7055 41.524 17.9997C41.524 20.2939 43.3821 22.1521 45.6763 22.1521C47.9705 22.1521 49.8287 20.2939 49.8287 17.9997C49.8287 15.7055 47.9705 13.8473 45.6763 13.8473ZM6.34071 28.1647C4.58424 29.6388 4.35379 32.259 5.82789 34.0154C7.30199 35.7719 9.92215 36.0024 11.6786 34.5283C13.4351 33.0542 13.6655 30.434 12.1914 28.6775C10.7173 26.9211 8.09717 26.6906 6.34071 28.1647ZM43.488 7.8346C45.2445 6.3605 45.475 3.74033 44.0009 1.98387C42.5268 0.227407 39.9066 -0.0030509 38.1501 1.47105C36.3937 2.94515 36.1632 5.56531 37.6373 7.32177C39.1114 9.07824 41.7316 9.3087 43.488 7.8346ZM11.6786 1.47313C9.92215 -0.000974749 7.30199 0.227407 5.82789 1.98595C4.35379 3.74449 4.58217 6.36257 6.34071 7.83667C8.09925 9.31077 10.7173 9.08239 12.1914 7.32385C13.6655 5.56531 13.4372 2.94723 11.6786 1.47313ZM43.488 28.1647C41.7316 26.6906 39.1114 26.919 37.6373 28.6775C36.1632 30.434 36.3916 33.0542 38.1501 34.5283C39.9066 36.0024 42.5268 35.774 44.0009 34.0154C45.475 32.259 45.2466 29.6388 43.488 28.1647ZM32.8849 19.2661C31.1284 17.792 28.5083 18.0204 27.0342 19.779C25.5601 21.5375 25.7884 24.1556 27.547 25.6297C29.3055 27.1038 31.9236 26.8754 33.3977 25.1169C34.8718 23.3583 34.6434 20.7402 32.8849 19.2661ZM22.2818 10.3696C20.5253 8.89553 17.9051 9.12391 16.431 10.8825C14.9569 12.641 15.1853 15.2591 16.9438 16.7332C18.7024 18.2073 21.3205 17.9789 22.7946 16.2204C24.2687 14.4618 24.0403 11.8437 22.2818 10.3696Z"
11+
fill="currentColor"
12+
/>
13+
</svg>
14+
);
15+
16+
export default NutrientLogo;

‎frameworks/solid/js/src/components/logos/SolidLogo.jsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
const SolidLogo = () => (
2+
<svg
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 166 155.3"
5+
role="img"
6+
aria-label="SolidJS logo"
7+
>
8+
<defs>
9+
<linearGradient
10+
id="a"
11+
gradientUnits="userSpaceOnUse"
12+
x1="27.5"
13+
y1="3"
14+
x2="152"
15+
y2="63.5"
16+
>
17+
<stop offset=".1" stop-color="#76b3e1" />
18+
<stop offset=".3" stop-color="#dcf2fd" />
19+
<stop offset="1" stop-color="#76b3e1" />
20+
</linearGradient>
21+
<linearGradient
22+
id="b"
23+
gradientUnits="userSpaceOnUse"
24+
x1="95.8"
25+
y1="32.6"
26+
x2="74"
27+
y2="105.2"
28+
>
29+
<stop offset="0" stop-color="#76b3e1" />
30+
<stop offset=".5" stop-color="#4377bb" />
31+
<stop offset="1" stop-color="#1f3b77" />
32+
</linearGradient>
33+
<linearGradient
34+
id="c"
35+
gradientUnits="userSpaceOnUse"
36+
x1="18.4"
37+
y1="64.2"
38+
x2="144.3"
39+
y2="149.8"
40+
>
41+
<stop offset="0" stop-color="#315aa9" />
42+
<stop offset=".5" stop-color="#518ac8" />
43+
<stop offset="1" stop-color="#315aa9" />
44+
</linearGradient>
45+
<linearGradient
46+
id="d"
47+
gradientUnits="userSpaceOnUse"
48+
x1="75.2"
49+
y1="74.5"
50+
x2="24.4"
51+
y2="260.8"
52+
>
53+
<stop offset="0" stop-color="#4377bb" />
54+
<stop offset=".5" stop-color="#1a336b" />
55+
<stop offset="1" stop-color="#1a336b" />
56+
</linearGradient>
57+
</defs>
58+
<path
59+
d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z"
60+
fill="#76b3e1"
61+
/>
62+
<path
63+
d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z"
64+
opacity=".3"
65+
fill="url(#a)"
66+
/>
67+
<path
68+
d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z"
69+
fill="#518ac8"
70+
/>
71+
<path
72+
d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z"
73+
opacity=".3"
74+
fill="url(#b)"
75+
/>
76+
<path
77+
d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z"
78+
fill="url(#c)"
79+
/>
80+
<path
81+
d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z"
82+
fill="url(#d)"
83+
/>
84+
</svg>
85+
);
86+
87+
export default SolidLogo;

‎frameworks/solid/js/src/index.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
#root {
11+
height: 100vh;
12+
width: 100vw;
13+
}

‎frameworks/solid/js/src/main.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { render } from "solid-js/web";
2+
import App from "./App";
3+
import "./index.css";
4+
5+
render(() => <App />, document.getElementById("root"));

‎frameworks/solid/js/src/nutrient/basic-viewer/implementation.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Basic Nutrient Viewer Implementation for SolidJS (JavaScript)
3+
*
4+
* This is the simplest way to load a PDF document with Nutrient Web SDK.
5+
*/
6+
7+
import { nutrientConfig } from "../nutrient-config.js";
8+
9+
/**
10+
* Load a basic PDF viewer
11+
* @param nutrientViewer - The NutrientViewer object (from CDN or package)
12+
* @param container - The container element to mount the viewer
13+
* @param document - URL to the PDF document
14+
* @returns Promise that resolves when the viewer is loaded
15+
*/
16+
export function loadBasicViewer(
17+
nutrientViewer,
18+
container,
19+
document = nutrientConfig.documentUrl,
20+
) {
21+
const config = {
22+
container,
23+
document,
24+
...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
25+
};
26+
27+
return nutrientViewer.load(config);
28+
}
29+
30+
/**
31+
* Unload the viewer from a container
32+
* @param nutrientViewer - The nutrientViewer object (from CDN)
33+
* @param container - The container element
34+
*/
35+
export function unloadBasicViewer(nutrientViewer, container) {
36+
nutrientViewer.unload(container);
37+
}

‎frameworks/solid/js/src/nutrient/custom-overlays/implementation.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/**
2+
* Custom Overlays Implementation for SolidJS (JavaScript)
3+
*
4+
* Demonstrates interactive overlays that appear on page clicks
5+
*/
6+
7+
import { nutrientConfig } from "../nutrient-config.js";
8+
9+
/**
10+
* Load the viewer with custom overlay functionality
11+
* @param nutrientViewer - The NutrientViewer object
12+
* @param container - The container element
13+
* @param document - URL to the PDF document
14+
*/
15+
export async function loadCustomOverlaysViewer(
16+
nutrientViewer,
17+
container,
18+
document = nutrientConfig.documentUrl,
19+
) {
20+
const config = {
21+
container,
22+
document,
23+
...(nutrientConfig.baseUrl && { baseUrl: nutrientConfig.baseUrl }),
24+
};
25+
26+
const instance = await nutrientViewer.load(config);
27+
28+
// Add click event listener for custom overlays
29+
instance.addEventListener("page.click", (event) => {
30+
const { pageIndex, point } = event;
31+
32+
// Create overlay content
33+
const overlayElement = document.createElement("div");
34+
overlayElement.innerHTML = `
35+
<div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
36+
<h3 style="margin: 0 0 10px 0;">Page ${pageIndex + 1}</h3>
37+
<p style="margin: 0;">Clicked at: (${Math.round(point.x)}, ${Math.round(point.y)})</p>
38+
<button id="close-overlay" style="margin-top: 10px; padding: 5px 10px;">Close</button>
39+
</div>
40+
`;
41+
42+
// Add overlay to the instance
43+
const overlay = new nutrientViewer.Overlay({
44+
element: overlayElement,
45+
pageIndex,
46+
position: point,
47+
onDisappear: () => overlay.remove(),
48+
});
49+
50+
// Close button handler
51+
overlayElement
52+
.querySelector("#close-overlay")
53+
.addEventListener("click", () => {
54+
overlay.remove();
55+
});
56+
57+
instance.setCustomOverlayItem(overlay);
58+
});
59+
60+
return instance;
61+
}
62+
63+
/**
64+
* Unload the viewer from a container
65+
* @param nutrientViewer - The NutrientViewer object
66+
* @param container - The container element
67+
*/
68+
export function unloadCustomOverlaysViewer(nutrientViewer, container) {
69+
nutrientViewer.unload(container);
70+
}

‎frameworks/solid/js/src/nutrient/loadNutrientViewer.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export async function loadNutrientViewer() {
2+
if (!window.NutrientViewer) {
3+
throw new Error("NutrientViewer not found on window object");
4+
}
5+
6+
return window.NutrientViewer;
7+
}

0 commit comments

Comments
 (0)