From e6f50c841924ed967070d628a6e4734b069128a6 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Wed, 9 Oct 2024 20:49:08 +0800 Subject: refactor: Attribute -> dataset --- src/Layout.mjs | 14 +++++++------- src/dumbyUtils.mjs | 4 ++-- src/dumbymap.mjs | 27 +++++++++++++-------------- src/editor.mjs | 18 +++++++++++------- 4 files changed, 33 insertions(+), 30 deletions(-) (limited to 'src') 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, -- cgit v1.2.3-70-g09d2