Add Reloading

test_data/src/scripts/accessibility.js

@@ -1,7 +1,44 @@
 
-let isZoomed = false;
+let isZoomed = null;
 let thresholdForButtons = 1080;
 
+
+if (window.sessionStorage.getItem('isZoom') == 'true') {
+    console.log("true")
+    document.body.style.zoom = "150%"
+
+    // Toggle image
+    const img = document.querySelector('#zoom>a>img')
+    img.src = "/src/img/deactivate_bigletter.svg"
+
+
+    // Respond to Zoom Icon
+    if (window.innerWidth < thresholdForButtons){
+        const zoom = document.querySelector("#zoom")
+        const sound = document.querySelector("#sound")
+        zoom.style.right = "5px";
+        sound.style.top = "85px";
+    }
+    isZoomed = true;
+} else {
+    console.log("false")
+    document.body.style.zoom = "100%"
+
+    // Toggle image
+    const img = document.querySelector('#zoom>a>img')
+    img.src = "/src/img/activate_bigletter.svg"
+
+    // Respond to Zoom Icon
+    const zoom = document.querySelector("#zoom")
+    const sound = document.querySelector("#sound")
+    zoom.style.right = "";
+    sound.style.top = "";
+
+    isZoomed = false;
+}
+
+
+
 onresizeAccessibility = () => {
     if (window.innerWidth < thresholdForButtons && isZoomed) {
         const zoom = document.querySelector("#zoom")
@@ -16,42 +53,47 @@ onresizeAccessibility = () => {
     }
 }
 
+
 function toggleZoom(){
-    const isDefault = (document.body.style.zoom == "100%");
 
-    if (isDefault){
-        document.body.style.zoom = "150%"
+    // const isDefault = (document.body.style.zoom == "100%");
 
-        // Toggle image
-        const img = document.querySelector('#zoom>a>img')
-        img.src = "/src/img/deactivate_bigletter.svg"
+    if (isZoomed){
+        window.sessionStorage.setItem('isZoom', false);
+        // document.body.style.zoom = "150%"
+
+        // // Toggle image
+        // const img = document.querySelector('#zoom>a>img')
+        // img.src = "/src/img/deactivate_bigletter.svg"
 
 
-        // Respond to Zoom Icon
-        if (window.innerWidth < thresholdForButtons){
-            const zoom = document.querySelector("#zoom")
-            const sound = document.querySelector("#sound")
-            zoom.style.right = "5px";
-            sound.style.top = "85px";
-        }
+        // // Respond to Zoom Icon
+        // if (window.innerWidth < thresholdForButtons){
+        //     const zoom = document.querySelector("#zoom")
+        //     const sound = document.querySelector("#sound")
+        //     zoom.style.right = "5px";
+        //     sound.style.top = "85px";
+        // }
 
-        isZoomed = true;
         
     }else {
-        document.body.style.zoom = "100%"
+        window.sessionStorage.setItem('isZoom', true);
+        // document.body.style.zoom = "100%"
 
-        // Toggle image
-        const img = document.querySelector('#zoom>a>img')
-        img.src = "/src/img/activate_bigletter.svg"
+        // // Toggle image
+        // const img = document.querySelector('#zoom>a>img')
+        // img.src = "/src/img/activate_bigletter.svg"
+
+        // // Respond to Zoom Icon
+        // const zoom = document.querySelector("#zoom")
+        // const sound = document.querySelector("#sound")
+        // zoom.style.right = "";
+        // sound.style.top = "";
 
-        // Respond to Zoom Icon
-        const zoom = document.querySelector("#zoom")
-        const sound = document.querySelector("#sound")
-        zoom.style.right = "";
-        sound.style.top = "";
         
-        isZoomed = true;
     }
+
+    location.reload()
 }
 
 

test_data/src/scripts/physicsLayout.js

@@ -3,6 +3,28 @@ const THRESHOLD = 0;
 const INIT_DURATION = 300;
 const INIT_RATIO = 0.9;
 
+const canvasWidth = (() => {
+  if (window.sessionStorage.getItem('isZoom') == 'true') {
+    return window.innerWidth * 2 / 3 - 50;
+  } else {
+    return window.innerWidth;
+  }
+})();
+
+// setInterval(() => {
+  
+//   let maxY = 0;
+//   document.getElementById("authors").style.height = window.innerHeight * 5
+// })
+
+// const canvasHeight= (() => {
+//   if (window.sessionStorage.getItem('isZoom') == 'true') {
+//     document.getElementById("authors").style.height = window.innerHeight * 5
+//     return window.innerHeight * 2;
+//   } else {
+//     return window.innerHeight;
+//   }
+// })();
 
 // set-up engine
 var Engine = Matter.Engine,
@@ -18,7 +40,7 @@ var render = Render.create({
                 element: document.body,
                 engine: engine,
                 options: {
-                    width: window.innerWidth,
+                    width: canvasWidth,
                     height: window.innerHeight,
                     wireframes: false,
                 }
@@ -111,7 +133,7 @@ setInterval(()=>{
   maxY = bodies.sort((a, b) => (b.position.y - a.position.y))[0].position.y;
   if (maxY < getDocumentHeight()) return;
 
-  render.canvas.height = Math.max(window.innerHeight, maxY + 200);
+  render.canvas.height = Math.max(window.innerHeight, maxY + 600);
   document.querySelector('#authors').style.height = render.canvas.height;
   
   if(leftWall.position.y+window.innerHeight/2 <getDocumentHeight()){

test_data/src/scripts/updateFragment.js

@@ -28,6 +28,15 @@ const THRESHOLD = 0;
 const INIT_DURATION = 300;
 const INIT_RATIO = 0.9;
 
+
+const canvasWidth = (() => {
+    if (window.sessionStorage.getItem('isZoom') == 'true') {
+      return (window.innerWidth * 2 / 3);
+    } else {
+      return window.innerWidth;
+    }
+  })();
+
 // set-up engine
 var Engine = Matter.Engine,
     Render = Matter.Render,
@@ -42,7 +51,7 @@ var render = Render.create({
                 element: document.body,
                 engine: engine,
                 options: {
-                    width: window.innerWidth,
+                    width: canvasWidth,
                     height: window.innerHeight,
                     wireframes: false,
                 }