refactor: Attribute -> dataset

4 files changed, 33 insertions, 30 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index c5276b4..5236475 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -64,7 +64,7 @@ export class SideBySide extends Layout {
       resizeByLeft(pos.left)
     }
     draggable.onDragEnd = _ => {
-      handle.removeAttribute('style')
+      handle.style.cssText = ''
     }
 
     onRemove(bar, () => draggable.remove())
@@ -98,8 +98,8 @@ export class Overlay extends Layout {
    */
   saveLeftTopAsData = element => {
     const { left, top } = element.getBoundingClientRect()
-    element.setAttribute('data-left', left)
-    element.setAttribute('data-top', top)
+    element.dataset.left = left
+    element.dataset.top = top
   }
 
   /**
@@ -178,8 +178,8 @@ export class Overlay extends Layout {
     // Create draggable blocks and set each position by previous one
     let [left, top] = [20, 20]
     blocks.forEach(block => {
-      const originLeft = Number(block.getAttribute('data-left'))
-      const originTop = Number(block.getAttribute('data-top'))
+      const originLeft = Number(block.dataset.left)
+      const originTop = Number(block.dataset.top)
 
       // Create draggable block
       const wrapper = document.createElement('div')
@@ -229,13 +229,13 @@ export class Overlay extends Layout {
       }
       utils.onmouseout = () => {
         wrapper.appendChild(utils)
-        utils.removeAttribute('style')
+        utils.style.cssText = ''
       }
 
       // Close button
       wrapper.querySelector('#close').onclick = () => {
         block.classList.remove('focus')
-        utils.removeAttribute('style')
+        utils.style.cssText = ''
       }
       // Plus/Minus font-size of content
       wrapper.querySelector('#plus-font-size').onclick = () => {
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index fde4dae..83d24c0 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -67,7 +67,7 @@ export function focusDelay () {
  */
 export function switchToNextLayout (reverse = false) {
   const layouts = this.layouts
-  const currentLayoutName = this.container.getAttribute('data-layout')
+  const currentLayoutName = this.container.dataset.layout
   const currentIndex = layouts.map(l => l.name).indexOf(currentLayoutName)
   const padding = reverse ? -1 : 1
   const nextIndex =
@@ -75,7 +75,7 @@ export function switchToNextLayout (reverse = false) {
       ? 0
       : (currentIndex + padding + layouts.length) % layouts.length
   const nextLayout = layouts[nextIndex]
-  this.container.setAttribute('data-layout', nextLayout.name)
+  this.container.dataset.layout = nextLayout.name
 }
 
 /**
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 906d9b2..0c7ff02 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -56,7 +56,7 @@ export const markdown2HTML = (container, mdContent) => {
   const coordinateRegex = /^(\D*)(-?\d+\.?\d*)\s*([,\x2F\uFF0C])\s*(-?\d+\.?\d*)/
   const coordinateValue = {
     validate: coordinateRegex,
-    normalize: function(match) {
+    normalize: function (match) {
       const [, , x, sep, y] = match.text.match(coordinateRegex)
       match.url = `geo:${y},${x}?xy=${x},${y}`
       match.text = `${x}${sep} ${y}`
@@ -99,7 +99,7 @@ export const markdown2HTML = (container, mdContent) => {
   const blocks = htmlHolder.querySelectorAll(':scope > div:not(:has(nav))')
   blocks.forEach(b => {
     b.classList.add('dumby-block')
-    b.setAttribute('data-total', blocks.length)
+    b.dataset.total = blocks.length
   })
 
   return container
@@ -113,11 +113,10 @@ export const markdown2HTML = (container, mdContent) => {
  * @return {Object} dumbymap -- Include and Elements and Methods about managing contents
  */
 export const generateMaps = (container, { layouts = [], delay, renderCallback } = {}) => {
-
   /** Prepare Contaner/HTML Holder/Showcase */
   container.classList.add('Dumby')
-  container.removeAttribute('data-layout')
-  container.setAttribute('data-layout', defaultLayouts[0].name)
+  delete container.dataset.layout
+  container.dataset.layout = defaultLayouts[0].name
   const htmlHolder = container.querySelector('.SemanticHtml') ?? container
   const blocks = Array.from(htmlHolder.querySelectorAll('.dumby-block'))
   const showcase = document.createElement('div')
@@ -197,7 +196,7 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
 
         // Placeholder for map in Showcase, it should has the same DOMRect
         const placeholder = target.cloneNode(true)
-        placeholder.removeAttribute('id')
+        delete placeholder.id
         placeholder.className = ''
 
         const parent = target.parentElement
@@ -212,10 +211,10 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
         // To make sure the original height of placeholder is applied, DOM changes seems needed
         // then set data-attribute for CSS selector to change height to 0
         placeholder.getBoundingClientRect()
-        placeholder.setAttribute('data-placeholder', target.id)
+        placeholder.dataset.placeholder = target.id
 
         // To fit showcase, remove all inline style
-        target.removeAttribute('style')
+        target.style.cssText = ''
         target.style.order = placeholder.style.order
         showcase.appendChild(target)
 
@@ -248,7 +247,7 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
   const layoutObserver = new window.MutationObserver(mutations => {
     const mutation = mutations.at(-1)
     const oldLayout = mutation.oldValue
-    const newLayout = container.getAttribute(mutation.attributeName)
+    const newLayout = container.dataset.layout
 
     // Apply handler for leaving/entering layouts
     if (oldLayout) {
@@ -260,7 +259,7 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
     Object.values(dumbymap)
       .flat()
       .filter(ele => ele instanceof window.HTMLElement)
-      .forEach(ele => ele.removeAttribute('style'))
+      .forEach(ele => { ele.style.cssText = '' })
 
     if (newLayout) {
       dumbymap.layouts
@@ -293,8 +292,8 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
     const mapElement = renderer.target
     // FIXME
     mapElement.renderer = renderer
-    mapElement.setAttribute('tabindex', '-1')
-    if (mapElement.getAttribute('data-render') === 'fulfilled') {
+    mapElement.tabindex = -1
+    if (mapElement.dataset.render === 'fulfilled') {
       mapCache[mapElement.id] ??= renderer
     } else {
       return
@@ -354,9 +353,9 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
     target.animations = target.animations.then(async () => {
       await new Promise(resolve => setTimeout(resolve, 100))
       if (final) passNum += '\x20'
-      target.setAttribute('data-report', passNum)
+      target.dataset.report = passNum
 
-      if (final) setTimeout(() => target.removeAttribute('data-report'), 100)
+      if (final) setTimeout(() => delete target.dataset.report, 100)
     })
   }
   /**
diff --git a/src/editor.mjs b/src/editor.mjs
index a8cccf2..ed63f9c 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -34,10 +34,10 @@ const appendRefLink = ({ cm, ref, link }) => {
  * and the layout is not 'normal', it sets the layout to 'normal' and switch to editing mode
  */
 new window.MutationObserver(() => {
-  const mode = context.getAttribute('data-mode')
-  const layout = dumbyContainer.getAttribute('data-layout')
+  const mode = context.dataset.mode
+  const layout = dumbyContainer.dataset.layout
   if (mode === 'editing' && layout !== 'normal') {
-    dumbyContainer.setAttribute('data-layout', 'normal')
+    dumbyContainer.dataset.layout = 'normal'
   }
 }).observe(context, {
   attributes: true,
@@ -48,8 +48,12 @@ new window.MutationObserver(() => {
  * toggleEditing: toggle editing mode
  */
 const toggleEditing = () => {
-  const mode = context.getAttribute('data-mode')
-  context.setAttribute('data-mode', mode === 'editing' ? '' : 'editing')
+  const mode = context.dataset.mode
+  if (mode === 'editing') {
+    delete context.dataset.mode
+  } else {
+    context.dataset.mode = 'editing'
+  }
 }
 // }}}
 // Set up EasyMDE {{{
@@ -949,9 +953,9 @@ document.onkeydown = e => {
 // Layout Switch {{{
 new window.MutationObserver(mutaions => {
   const mutation = mutaions.at(-1)
-  const layout = dumbyContainer.getAttribute('data-layout')
+  const layout = dumbyContainer.dataset.layout
   if (layout !== 'normal' || mutation.oldValue === 'normal') {
-    context.setAttribute('data-mode', '')
+    delete context.dataset.mode
   }
 }).observe(dumbyContainer, {
   attributes: true,