From 1234132a359c9544eaac5bc99012f2426664edc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ton=C4=87i=20Vatavuk?= <tonci@sistemi.hr>
Date: Fri, 6 Dec 2024 22:02:23 +0100
Subject: [PATCH] replace fancybox cdn with import node_modules package

---
 .../templates/2sxc - x/partials/head.tmpl.partial    |  3 ---
 .../templates/2sxc - x/partials/scripts.tmpl.partial |  3 ---
 docs-src/templates/2sxc/layout/_master.tmpl          | 12 +-----------
 docs-src/templates/2sxc/src/main.scss                |  2 ++
 docs-src/templates/2sxc/src/main.ts                  |  1 -
 .../src/scripts/context-illustrations.ts             |  3 ++-
 .../templates/shared-global/src/scripts/images.ts    |  3 ++-
 .../templates/shared-global/src/scripts/index.d.ts   | 10 +++++-----
 .../templates/shared-global/src/styles/style.scss    |  1 +
 9 files changed, 13 insertions(+), 25 deletions(-)
 create mode 100644 docs-src/templates/shared-global/src/styles/style.scss

diff --git a/docs-src/templates/2sxc - x/partials/head.tmpl.partial b/docs-src/templates/2sxc - x/partials/head.tmpl.partial
index e81ad2c5b..0a0d38a06 100644
--- a/docs-src/templates/2sxc - x/partials/head.tmpl.partial	
+++ b/docs-src/templates/2sxc - x/partials/head.tmpl.partial	
@@ -31,7 +31,4 @@
 
   <!-- overwrite the built in highlightJs with a newer version -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css">
-
-  <!-- fancybox -->
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
 </head>
diff --git a/docs-src/templates/2sxc - x/partials/scripts.tmpl.partial b/docs-src/templates/2sxc - x/partials/scripts.tmpl.partial
index 5b2bf0470..9ab381995 100644
--- a/docs-src/templates/2sxc - x/partials/scripts.tmpl.partial	
+++ b/docs-src/templates/2sxc - x/partials/scripts.tmpl.partial	
@@ -14,6 +14,3 @@
 <script type="text/javascript" src="{{_rel}}styles/main.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" src="{{_rel}}styles/2sxc-scripts.js"></script>
-
-<!-- fancybox -->
-<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
diff --git a/docs-src/templates/2sxc/layout/_master.tmpl b/docs-src/templates/2sxc/layout/_master.tmpl
index 6c42d75bb..5e47db0ba 100644
--- a/docs-src/templates/2sxc/layout/_master.tmpl
+++ b/docs-src/templates/2sxc/layout/_master.tmpl
@@ -37,17 +37,7 @@
       <meta name="loc:themeAuto" content="{{__global.themeAuto}}">
       <meta name="loc:changeTheme" content="{{__global.changeTheme}}">
       <meta name="loc:copy" content="{{__global.copy}}">
-      <meta name="loc:downloadPdf" content="{{__global.downloadPdf}}">
-
-      {{!2sxc added fancybox - TODO: PROBABLY update once it works }}
-      {{! <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> }}
-      <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
-      <link
-        rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
-      />
-      
-      
+      <meta name="loc:downloadPdf" content="{{__global.downloadPdf}}">      
     {{/redirect_url}}
   </head>
 
diff --git a/docs-src/templates/2sxc/src/main.scss b/docs-src/templates/2sxc/src/main.scss
index 6c701d397..b8e2a2b2d 100644
--- a/docs-src/templates/2sxc/src/main.scss
+++ b/docs-src/templates/2sxc/src/main.scss
@@ -1,3 +1,5 @@
+@import "../../shared-global/src/styles/style.scss";
+
 /* Layout Styles */
 
 /* Change Search input to be less wide to allow for version */
diff --git a/docs-src/templates/2sxc/src/main.ts b/docs-src/templates/2sxc/src/main.ts
index 6278c3a84..f98c99caf 100644
--- a/docs-src/templates/2sxc/src/main.ts
+++ b/docs-src/templates/2sxc/src/main.ts
@@ -4,7 +4,6 @@ import { docReady } from '../../shared-global/src/scripts/utils/docready';
 import { configureLightboxes } from '../../shared-global/src/scripts/images';
 import { setVersionButtonLink } from '../../shared-global/src/scripts/versions';
 import version from '../../../package.json';
-import { Html } from '@fancyapps/ui';
 import { lightboxForContextIllustration } from '../../shared-global/src/scripts/context-illustrations';
 import "./main.scss";
 
diff --git a/docs-src/templates/shared-global/src/scripts/context-illustrations.ts b/docs-src/templates/shared-global/src/scripts/context-illustrations.ts
index 4e1bb2be4..830f33086 100644
--- a/docs-src/templates/shared-global/src/scripts/context-illustrations.ts
+++ b/docs-src/templates/shared-global/src/scripts/context-illustrations.ts
@@ -1,3 +1,4 @@
+import { Fancybox } from '@fancyapps/ui';
 import packageJson from '../../../../package.json';
 const { enableDebug } = packageJson; 
 
@@ -35,7 +36,7 @@ export function lightboxForContextIllustration() {
   };
 
   // attach fancybox to all
-  (Fancybox as any).bind("[data-fancybox]");
+  Fancybox.bind("[data-fancybox]");
 }
 
 function createPopupDiv(original: HTMLElement, newName: string) {
diff --git a/docs-src/templates/shared-global/src/scripts/images.ts b/docs-src/templates/shared-global/src/scripts/images.ts
index 990bf2316..5ae860756 100644
--- a/docs-src/templates/shared-global/src/scripts/images.ts
+++ b/docs-src/templates/shared-global/src/scripts/images.ts
@@ -1,3 +1,4 @@
+import { Fancybox } from '@fancyapps/ui';
 import packageJson from '../../../../package.json';
 const { enableDebug } = packageJson; 
 
@@ -44,5 +45,5 @@ export function configureLightboxes() {
   });
 
   // Attach Fancybox to all these images
-  (window.Fancybox as any).bind(imgSelector);
+  Fancybox.bind(imgSelector);
 }
diff --git a/docs-src/templates/shared-global/src/scripts/index.d.ts b/docs-src/templates/shared-global/src/scripts/index.d.ts
index 5d7697f72..b7dc5a8b9 100644
--- a/docs-src/templates/shared-global/src/scripts/index.d.ts
+++ b/docs-src/templates/shared-global/src/scripts/index.d.ts
@@ -1,8 +1,8 @@
 // declare module 'highlightjs-cshtml-razor';
 
-import { Fancybox } from '@fancyapps/ui';
+// import { Fancybox } from '@fancyapps/ui';
 
-// note: this doesn't work ATM
-declare global {
-  var Fancybox: Fancybox;
-}
\ No newline at end of file
+// // note: this doesn't work ATM
+// declare global {
+//   var Fancybox: Fancybox;
+// }
\ No newline at end of file
diff --git a/docs-src/templates/shared-global/src/styles/style.scss b/docs-src/templates/shared-global/src/styles/style.scss
new file mode 100644
index 000000000..e35f272ec
--- /dev/null
+++ b/docs-src/templates/shared-global/src/styles/style.scss
@@ -0,0 +1 @@
+@import "~@fancyapps/ui/dist/fancybox/fancybox.css";