mobile adaptation 3

lubinpappalardo · Oct 3, 2023 · fa312d9 · fa312d9
1 parent f876080
commit fa312d9
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/assets/board.css b/assets/board.css
@@ -57,7 +57,7 @@
 
     padding: 10px;
 
-    rotate: 0deg;
+    transform: rotate(0deg);
   }
 
   .component::after {

diff --git a/assets/panel.css b/assets/panel.css
@@ -267,10 +267,10 @@
   }
 
   @keyframes pulse {
-    0% { scale: 1 }
-    50% { scale: 1.1 }
-    90% { scale: 0.95 }
-    100% { scale: 1 }
+    0% { transform: scale(1) }
+    50% { transform: scale(1.1) }
+    90% { transform: scale(0.95) }
+    100% { transform: scale(1) }
   }
 
   /* Clock frequency */

diff --git a/assets/scripts/board-controls.js b/assets/scripts/board-controls.js
@@ -50,7 +50,7 @@ $(document).on('mousemove', function (e) {
       x: BoardLastDraggingDistance.x + distanceX, 
       y: BoardLastDraggingDistance.y + distanceY, 
     }
-    $('.board-container').css('transform', `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px)`);
+    $('.board-container').css('transform', `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px) scale(${scale})`);
   }
 });
 
@@ -66,7 +66,7 @@ $(document).on('touchmove', function (e) {
       x: BoardLastDraggingDistance.x + distanceX, 
       y: BoardLastDraggingDistance.y + distanceY, 
     }
-    $('.board-container').css('transform', `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px)`);
+    $('.board-container').css('transform', `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px) scale(${scale})`);
   }
 });
 
@@ -80,7 +80,7 @@ $(document).on('touchmove', function (e) {
     scale += ZoomSensivity;
     scale = Math.round(scale * 10) / 10; // Round to 1 decimal after point
     if (scale > 0.2 && scale < 4) {
-      $('.board-container').css('scale', `${scale}`);
+      $('.board-container').css('transform', `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px) scale(${scale})`);
     }
   }
 
@@ -89,7 +89,7 @@ $(document).on('touchmove', function (e) {
     scale -= ZoomSensivity;
     scale = Math.round(scale * 10) / 10; // Round to 1 decimal after point
     if (scale > 0.2 && scale < 4) {
-      $('.board-container').css('scale', `${scale}`);
+      $('.board-container').css('transform', `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px) scale(${scale})`);
     }
   }
 
@@ -105,15 +105,15 @@ $(document).on('touchmove', function (e) {
 
   function resetWorkspace() {
     BoardLastDraggingDistance = {x: 0, y: 0};
-    $('.board-container').css({'scale': '1', 'transform': 'translate(0px, 0px)', 'transition': 'scale .5s, transform .5s'}).delay(500).queue(function(next) {
+    $('.board-container').css({'transform': 'translate(0px, 0px) scale(1)', 'transition': 'scale .5s, transform .5s'}).delay(500).queue(function(next) {
       $(this).css('transition', 'none');
       next();
     });
   }
 
   $('.board-container').dblclick(function(e) {
     if (!$(e.target).hasClass('switch')) {
-      $('.board-container').css({'scale': '1', 'transition': 'scale .5s'}).delay(500).queue(function(next) {
+      $('.board-container').css({'transform': `translate(${BoardDraggingDistance.x}px, ${BoardDraggingDistance.y}px) scale(1)`, 'transition': 'scale .5s'}).delay(500).queue(function(next) {
         $(this).css('transition', 'none');
         next();
       });

diff --git a/assets/scripts/components-control.js b/assets/scripts/components-control.js
@@ -95,7 +95,7 @@ function rotateComponent() {
     }
     angle += 90;
     SelectedComponent.find('.tooltip').css('transform', `translateY(120%) rotate(${360 - angle}deg)`);
-    SelectedComponent.css('rotate', `${angle}deg`);
+    SelectedComponent.css('transform', `rotate(${angle}deg)`);
     diagram[id].rotation = angle;
     autoSave();
 };

diff --git a/assets/scripts/script.js b/assets/scripts/script.js
@@ -181,6 +181,11 @@ function deleteCookies() {
   }
 }
 
+function deleteCookie(cookieName) {
+  // get the cookie with name = cookieName and delete it
+  document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
+}
+
 // get a cookie
 function getCookie(cname) {
   let name = cname + "=";
@@ -224,6 +229,7 @@ function getAllCookies() {
 
 
 function autoSave() {
+  const saves = getAllCookies();
   $('#board-saved').addClass('opened').delay(1000).queue(function(next) {
     $(this).removeClass('opened');
     next();
@@ -233,6 +239,10 @@ function autoSave() {
   for (let i = 0; i < str.length; i += 2500) {
     chunks.push(str.substr(i, 2500));
   }
+  // delete cookies whose index (saveN with 'N' the index) is above the number of chunks
+  for (let i = chunks.length; i < getAllCookies().length; i++) {
+    deleteCookie(`save ${i}`);
+  }
   for (let i = 0; i < chunks.length; i++) {
     setCookie(`save ${i}`, chunks[i]);
   }
@@ -245,11 +255,14 @@ $(document).ready(function() {
 
   if (autosave === "") { return; }
 
-  JsonData = JSON.parse(autosave);
+  try {
+    JsonData = JSON.parse(autosave);
+  } catch (e) {
+    console.log(e);
+    return;
+  }
 
   if (Object.keys(JsonData).length === 0) { return; }  
-
-  // console.log(autosave);
 
   loadDiagram(JsonData);
 });

diff --git a/assets/scripts/ui-animations.js b/assets/scripts/ui-animations.js
@@ -124,4 +124,8 @@ document.getElementById('panel').addEventListener('touchend', function(e) {
     scroll();  // Start the animation
 }, false);
 
+window.addEventListener('resize', () => {
+  const browserZoomLevel = Math.round(window.devicePixelRatio * 100);
+  console.log(browserZoomLevel)
+})