feat(CSS): use class name to hide draggable block

2 files changed, 5 insertions, 5 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index 0c992d7..2deef01 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -91,7 +91,7 @@ export class Overlay extends Layout {
 
       // Close button
       draggableBlock.querySelector('#close').onclick = () => {
-        draggableBlock.setAttribute("data-state", "hide")
+        draggableBlock.classList.add('hide')
       }
       // Plus/Minus font-size of content
       draggableBlock.querySelector('#plus-font-size').onclick = () => {
@@ -107,11 +107,11 @@ export class Overlay extends Layout {
       const utils = draggableBlock.querySelector('.utils')
       draggableInstance.onDragStart = () => {
         utils.style.opacity = 0
-        draggableBlock.setAttribute('data-state', 'on-drag')
+        draggableBlock.classList.add('drag')
       }
       draggableInstance.onDragEnd = () => {
         utils.style = ''
-        draggableBlock.removeAttribute('data-state')
+        draggableBlock.classList.remove('drag')
       }
 
       // Reposition draggable instance when resized
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index fb3b76e..e04b6bc 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -330,7 +330,7 @@
     display: none;
   }
 
-  &[data-state="hide"] {
+  &.hide {
     animation: fade-out 0.3s;
 
     opacity: 0;
@@ -338,7 +338,7 @@
   }
 
   &:has(.draggable:hover, .utils:hover),
-  &[data-state="on-drag"] {
+  &.drag {
     .dumby-block {
       color: gray;