diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-22 14:11:34 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-22 14:11:34 +0800 |
| commit | 5d541308928efa5789b6313982357b66ca52f948 (patch) | |
| tree | 3ecf483ce79fce449f1262385407f3fda8927b63 | |
| parent | 5125cc7a08dbeb3d85d17cfaac844b4dc027e91d (diff) | |
refactor: remove inline style anyway when layer switch
| -rw-r--r-- | src/Layout.mjs | 16 | ||||
| -rw-r--r-- | src/dumbymap.mjs | 14 |
2 files changed, 16 insertions, 14 deletions
diff --git a/src/Layout.mjs b/src/Layout.mjs index 746dda2..2f90278 100644 --- a/src/Layout.mjs +++ b/src/Layout.mjs | |||
| @@ -44,10 +44,7 @@ export class SideBySide extends Layout { | |||
| 44 | }).observe(container); | 44 | }).observe(container); |
| 45 | } | 45 | } |
| 46 | 46 | ||
| 47 | leaveHandler = ({ container, htmlHolder, showcase }) => { | 47 | leaveHandler = ({ container }) => { |
| 48 | container.removeAttribute('style') | ||
| 49 | htmlHolder.removeAttribute('style') | ||
| 50 | showcase.removeAttribute('style') | ||
| 51 | container.querySelector('.bar')?.remove() | 48 | container.querySelector('.bar')?.remove() |
| 52 | } | 49 | } |
| 53 | } | 50 | } |
| @@ -95,7 +92,7 @@ export class Overlay extends Layout { | |||
| 95 | 92 | ||
| 96 | // Close button | 93 | // Close button |
| 97 | draggableBlock.querySelector('#close').onclick = () => { | 94 | draggableBlock.querySelector('#close').onclick = () => { |
| 98 | draggableBlock.setAttribute("data-state", "hide") | 95 | draggableBlock.setAttribute("data-state", "hide") |
| 99 | } | 96 | } |
| 100 | // Plus/Minus font-size of content | 97 | // Plus/Minus font-size of content |
| 101 | draggableBlock.querySelector('#plus-font-size').onclick = () => { | 98 | draggableBlock.querySelector('#plus-font-size').onclick = () => { |
| @@ -149,16 +146,15 @@ export class Overlay extends Layout { | |||
| 149 | } | 146 | } |
| 150 | }) | 147 | }) |
| 151 | } | 148 | } |
| 152 | leaveHandler = (dumbymap) => { | 149 | |
| 153 | const container = dumbymap.htmlHolder | 150 | leaveHandler = ({ htmlHolder, blocks }) => { |
| 154 | const resumeFromDraggable = (block) => { | 151 | const resumeFromDraggable = (block) => { |
| 155 | const draggableContainer = block.closest('.draggable-block') | 152 | const draggableContainer = block.closest('.draggable-block') |
| 156 | if (!draggableContainer) return | 153 | if (!draggableContainer) return |
| 157 | container.appendChild(block) | 154 | htmlHolder.appendChild(block) |
| 158 | block.removeAttribute('style') | ||
| 159 | draggableContainer.remove() | 155 | draggableContainer.remove() |
| 160 | } | 156 | } |
| 161 | dumbymap.blocks.forEach(resumeFromDraggable) | 157 | blocks.forEach(resumeFromDraggable) |
| 162 | } | 158 | } |
| 163 | } | 159 | } |
| 164 | 160 | ||
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 7f5c75c..7079286 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
| @@ -140,15 +140,16 @@ export const markdown2HTML = (container, mdContent) => { | |||
| 140 | export const generateMaps = async (container, callback) => { | 140 | export const generateMaps = async (container, callback) => { |
| 141 | container.classList.add('Dumby') | 141 | container.classList.add('Dumby') |
| 142 | const htmlHolder = container.querySelector('.SemanticHtml') ?? container | 142 | const htmlHolder = container.querySelector('.SemanticHtml') ?? container |
| 143 | const blocks = Array.from(htmlHolder.querySelectorAll('.dumby-block')) | ||
| 143 | const showcase = document.createElement('div') | 144 | const showcase = document.createElement('div') |
| 144 | container.appendChild(showcase) | 145 | container.appendChild(showcase) |
| 145 | showcase.classList.add('Showcase') | 146 | showcase.classList.add('Showcase') |
| 146 | 147 | ||
| 147 | const dumbymap = { | 148 | const dumbymap = { |
| 148 | container: container, | 149 | container, |
| 149 | htmlHolder: htmlHolder, | 150 | htmlHolder, |
| 150 | showcase: showcase, | 151 | showcase, |
| 151 | blocks: Array.from(htmlHolder.querySelectorAll('.dumby-block')), | 152 | blocks, |
| 152 | } | 153 | } |
| 153 | 154 | ||
| 154 | // LeaderLine {{{ | 155 | // LeaderLine {{{ |
| @@ -354,6 +355,11 @@ export const generateMaps = async (container, callback) => { | |||
| 354 | ?.leaveHandler | 355 | ?.leaveHandler |
| 355 | ?.call(this, dumbymap) | 356 | ?.call(this, dumbymap) |
| 356 | } | 357 | } |
| 358 | |||
| 359 | Object.values(dumbymap) | ||
| 360 | .flat() | ||
| 361 | .forEach(e => e.removeAttribute('style')) | ||
| 362 | |||
| 357 | if (newLayout) { | 363 | if (newLayout) { |
| 358 | layouts.find(l => l.name === newLayout) | 364 | layouts.find(l => l.name === newLayout) |
| 359 | ?.enterHandler | 365 | ?.enterHandler |