diff --git a/test_data/src/scripts/accessibility.js b/test_data/src/scripts/accessibility.js index 69a6060..c280d6f 100644 --- a/test_data/src/scripts/accessibility.js +++ b/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"; - } - - isZoomed = true; + // // 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"; + // } + }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() } diff --git a/test_data/src/scripts/physicsLayout.js b/test_data/src/scripts/physicsLayout.js index 8c2eaeb..585aa5f 100644 --- a/test_data/src/scripts/physicsLayout.js +++ b/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 { + 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, }