reworked slideshow url

digirati-co-uk · Mar 25, 2021 · ec825f5 · ec825f5
1 parent 735b6e7
commit ec825f5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 49 deletions.
diff --git a/demo.html b/demo.html
@@ -9,13 +9,18 @@
 <script crossorigin src="https://unpkg.com/openseadragon"></script>
 <script src="./dist/umd/@digirati/vam-viewer.js"></script>
 <link rel="stylesheet" href="./dist/assets/app.css" />
-<div id="test"></div>
+<div style="">
+  <div id="test"></div>
+</div>
 <script>
   console.log(OpenSeadragon);
   console.log(
     VAMViewer.createSlideShow(
       document.getElementById('test'),
-      'https://raw.githubusercontent.com/4d4mm/adam-digirati.github.io/master/balenciaga1-behaviors.json'
+      'https://raw.githubusercontent.com/4d4mm/adam-digirati.github.io/master/balenciaga1-behaviors.json',
+      true,
+      'white',
+      'test'
     )
   );
 </script>
diff --git a/src/ui-components/CanvasNavigation/CanvasNavigation.tsx b/src/ui-components/CanvasNavigation/CanvasNavigation.tsx
@@ -38,66 +38,41 @@ const CanvasNavigation: React.FC<CanvasNavigationProps> = ({
   const goToSlide = (index: number | string) => {
     index = index + '';
     if (addressable) {
-      const qParam = queryString.parse(window.location.hash);
-      if (
-        qParam.slideshow &&
-        Array.isArray(qParam.slideshow) &&
-        qParam.slide &&
-        Array.isArray(qParam.slide)
-      ) {
-        const indexOfQueryId = qParam.slideshow.find(query => parseInt(query) === id);
-        if (indexOfQueryId) {
-          qParam.slide[parseInt(indexOfQueryId)] = currentIndex + '';
-          document.location.hash = queryString.stringify(qParam);
-        }
-      } else {
-        if (typeof qParam.slideshow === 'string' && parseInt(qParam.slideshow) !== id) {
-          document.location.hash =
-            document.location.hash + `&${buildId(currentIndex)}`;
-        } else {
-          document.location.hash = `#${buildId(currentIndex)}`;
-        }
+      const searchParams = new URLSearchParams(document.location.search);
+      const slideShowID = document.location.hash.slice(1);
+
+      if (!slideShowID || (id !== slideShowID)) {
+        history.pushState(null, '', `#${String(id)}`);
       }
+      searchParams.set('slide', index);
+      const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + "?" + searchParams.toString() + window.location.hash;
+      history.pushState(null, '', newUrl);
     }
   };
 
-  const buildId = (index: number | string) => {
-    return `slideshow=${id}&slide=${index}`;
-  };
-
   const getSlideByID = () => {
-    const qParam = queryString.parse(window.location.hash);
-    let slideshow: any;
-    if (
-      qParam.slideshow &&
-      Array.isArray(qParam.slideshow) &&
-      qParam.slide &&
-      Array.isArray(qParam.slide)
-    ) {
-      const indexOfQueryId = qParam.slideshow.find(
-        (query: string) => parseInt(query) === id
-      );
-      if (indexOfQueryId)
-        slideshow = qParam.slide[parseInt(indexOfQueryId)];
-      if (!slideshow || slideshow < 0 || slideshow >= canvasList.length)
-        slideshow = '0';
+    const searchParams = new URLSearchParams(window.location.search);
+    if (String(searchParams.get('slide')) !== "null") {
+      return parseInt(String(searchParams.get('slide')));
     } else {
-      slideshow = qParam.slide;
+      return 0;
     }
-    if (!slideshow) slideshow = '0';
-    return parseInt(slideshow);
   };
 
   useEffect(() => {
-    if (addressable && hash) {
-      if (typeof hash.slide === 'string') {
-        let slideId = hash.slide;
+    const searchParams = new URLSearchParams(document.location.search);
+    const hashToSlide = {
+        slide: String(searchParams.get('slide'))
+    };
+    if (addressable && hashToSlide) {
+      if (typeof hashToSlide.slide === 'string') {
+        let slideId = hashToSlide.slide;
         if (slideId) {
           parseInt(slideId);
         }
         let intSlideId = slideId ? parseInt(slideId) : 0;
         if (
-          !hash ||
+          !hashToSlide ||
           !intSlideId ||
           intSlideId < 0 ||
           intSlideId >= canvasList.length
@@ -114,7 +89,7 @@ const CanvasNavigation: React.FC<CanvasNavigationProps> = ({
   }, []);
 
   useEffect(() => {
-    goToSlide(getSlideByID());
+    goToSlide(currentIndex);
     document.addEventListener('keyup', handleKeyPress);
     return () => {
       document.removeEventListener('keyup', handleKeyPress);

diff --git a/webpack.umd.js b/webpack.umd.js
@@ -4,7 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MetalsmithWebpackPlugin = require('@fesk/plugin-metalsmith');
 
 const fullName = '@digirati/vam-viewer';
-const packageName = 'digiratiVamViewer';
+const packageName = 'VAMViewer';
 
 const plugins = baseConfig.plugins
   .map(plugin => {