From 1c7e77b8546ac32b8176ab54dd06ede6ba7deb55 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Wed, 2 Oct 2024 10:12:46 +0800 Subject: style: switch to standardjs --- src/Layout.mjs | 231 +++++++++++++++++++++++++++++---------------------------- 1 file changed, 116 insertions(+), 115 deletions(-) (limited to 'src/Layout.mjs') diff --git a/src/Layout.mjs b/src/Layout.mjs index 3a835c9..89a48ae 100644 --- a/src/Layout.mjs +++ b/src/Layout.mjs @@ -1,208 +1,209 @@ -import PlainDraggable from 'plain-draggable'; -import { onRemove, animateRectTransition } from './utils'; +import PlainDraggable from 'plain-draggable' +import { onRemove, animateRectTransition } from './utils' export class Layout { - constructor(options = {}) { - if (!options.name) throw Error('Layout name is not given'); - this.name = options.name; - this.enterHandler = options.enterHandler; - this.leaveHandler = options.leaveHandler; + constructor (options = {}) { + if (!options.name) throw Error('Layout name is not given') + this.name = options.name + this.enterHandler = options.enterHandler + this.leaveHandler = options.leaveHandler } - valueOf = () => this.name; + + valueOf = () => this.name } export class SideBySide extends Layout { - name = 'side-by-side'; + name = 'side-by-side' enterHandler = ({ container, htmlHolder, showcase }) => { - const bar = document.createElement('div'); - bar.className = 'bar'; - bar.innerHTML = '
'; - const handle = bar.querySelector('.bar-handle'); - container.appendChild(bar); + const bar = document.createElement('div') + bar.className = 'bar' + bar.innerHTML = '
' + const handle = bar.querySelector('.bar-handle') + container.appendChild(bar) // Resize views by value const resizeByLeft = left => { - htmlHolder.style.width = left + 'px'; + htmlHolder.style.width = left + 'px' showcase.style.width = - parseFloat(getComputedStyle(container).width) - left + 'px'; - }; + parseFloat(window.getComputedStyle(container).width) - left + 'px' + } const draggable = new PlainDraggable(bar, { - handle: handle, - containment: { left: '25%', top: 0, right: '75%', height: 0 }, - }); - draggable.draggableCursor = 'grab'; + handle, + containment: { left: '25%', top: 0, right: '75%', height: 0 } + }) + draggable.draggableCursor = 'grab' draggable.onDrag = pos => { - handle.style.transform = 'unset'; - resizeByLeft(pos.left); - }; + handle.style.transform = 'unset' + resizeByLeft(pos.left) + } draggable.onDragEnd = _ => { - handle.removeAttribute('style'); - }; + handle.removeAttribute('style') + } - onRemove(bar, () => draggable.remove()); - }; + onRemove(bar, () => draggable.remove()) + } leaveHandler = ({ container }) => { - container.querySelector('.bar')?.remove(); - }; + container.querySelector('.bar')?.remove() + } } export class Overlay extends Layout { - name = 'overlay'; + name = 'overlay' saveLeftTopAsData = element => { - const { left, top } = element.getBoundingClientRect(); - element.setAttribute('data-left', left); - element.setAttribute('data-top', top); - }; + const { left, top } = element.getBoundingClientRect() + element.setAttribute('data-left', left) + element.setAttribute('data-top', top) + } addDraggable = element => { // Make sure current element always on top const siblings = Array.from( - element.parentElement?.querySelectorAll(':scope > *') ?? [], - ); - let popTimer = null; + element.parentElement?.querySelectorAll(':scope > *') ?? [] + ) + let popTimer = null element.onmouseover = () => { popTimer = setTimeout(() => { - siblings.forEach(e => e.style.removeProperty('z-index')); - element.style.zIndex = '9001'; - }, 200); - }; + siblings.forEach(e => e.style.removeProperty('z-index')) + element.style.zIndex = '9001' + }, 200) + } element.onmouseout = () => { - clearTimeout(popTimer); - }; + clearTimeout(popTimer) + } // Add draggable part - const draggablePart = document.createElement('div'); - element.appendChild(draggablePart); - draggablePart.className = 'draggable-part'; - draggablePart.innerHTML = '
\u2630
'; + const draggablePart = document.createElement('div') + element.appendChild(draggablePart) + draggablePart.className = 'draggable-part' + draggablePart.innerHTML = '
\u2630
' // Add draggable instance - const { left, top } = element.getBoundingClientRect(); + const { left, top } = element.getBoundingClientRect() const draggable = new PlainDraggable(element, { - top: top, - left: left, + top, + left, handle: draggablePart, - snap: { x: { step: 20 }, y: { step: 20 } }, - }); + snap: { x: { step: 20 }, y: { step: 20 } } + }) // FIXME use pure CSS to hide utils - const utils = element.querySelector('.utils'); + const utils = element.querySelector('.utils') draggable.onDragStart = () => { - utils.style.display = 'none'; - element.classList.add('drag'); - }; + utils.style.display = 'none' + element.classList.add('drag') + } draggable.onDragEnd = () => { - utils.style = ''; - element.classList.remove('drag'); - element.style.zIndex = '9000'; - }; + utils.style = '' + element.classList.remove('drag') + element.style.zIndex = '9000' + } // Reposition draggable instance when resized - new ResizeObserver(() => { + new window.ResizeObserver(() => { try { - draggable.position(); - } catch (_) { - null; + draggable.position() + } catch (err) { + console.warn(err) } - }).observe(element); + }).observe(element) // Callback for remove onRemove(element, () => { - draggable.remove(); - }); - }; + draggable.remove() + }) + } enterHandler = ({ htmlHolder, blocks }) => { // FIXME It is weird rect from this method and this scope are different... - blocks.forEach(this.saveLeftTopAsData); + blocks.forEach(this.saveLeftTopAsData) // Create draggable blocks and set each position by previous one - let [left, top] = [20, 20]; + 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.getAttribute('data-left')) + const originTop = Number(block.getAttribute('data-top')) // Create draggable block - const wrapper = document.createElement('div'); - wrapper.classList.add('draggable-block'); + const wrapper = document.createElement('div') + wrapper.classList.add('draggable-block') wrapper.innerHTML = `
\u274C
\u2795
\u2796
- `; - wrapper.title = 'Middle-click to hide block'; + ` + wrapper.title = 'Middle-click to hide block' wrapper.onmouseup = e => { // Hide block with middle click if (e.button === 1) { - wrapper.classList.add('hide'); + wrapper.classList.add('hide') } - }; + } // Set DOMRect for wrapper - wrapper.appendChild(block); - wrapper.style.left = left + 'px'; - wrapper.style.top = top + 'px'; - htmlHolder.appendChild(wrapper); - const { width } = wrapper.getBoundingClientRect(); - left += width + 30; + wrapper.appendChild(block) + wrapper.style.left = left + 'px' + wrapper.style.top = top + 'px' + htmlHolder.appendChild(wrapper) + const { width } = wrapper.getBoundingClientRect() + left += width + 30 if (left > window.innerWidth) { - top += 200; - left = left % window.innerWidth; + top += 200 + left = left % window.innerWidth } // Animation for DOMRect animateRectTransition( wrapper, { left: originLeft, top: originTop }, - { resume: true, duration: 300 }, - ).finished.finally(() => this.addDraggable(wrapper)); + { resume: true, duration: 300 } + ).finished.finally(() => this.addDraggable(wrapper)) // Trivial case: // This hack make sure utils remains at the same place even when wrapper resized // Prevent DOMRect changes when user clicking plus/minus button many times - const utils = wrapper.querySelector('.utils'); + const utils = wrapper.querySelector('.utils') utils.onmouseover = () => { - const { left, top } = utils.getBoundingClientRect(); - utils.style.cssText = `visibility: visible; z-index: 9000; position: fixed; transition: unset; left: ${left}px; top: ${top}px;`; - document.body.appendChild(utils); - }; + const { left, top } = utils.getBoundingClientRect() + utils.style.cssText = `visibility: visible; z-index: 9000; position: fixed; transition: unset; left: ${left}px; top: ${top}px;` + document.body.appendChild(utils) + } utils.onmouseout = () => { - wrapper.appendChild(utils); - utils.removeAttribute('style'); - }; + wrapper.appendChild(utils) + utils.removeAttribute('style') + } // Close button wrapper.querySelector('#close').onclick = () => { - wrapper.classList.add('hide'); - utils.removeAttribute('style'); - }; + wrapper.classList.add('hide') + utils.removeAttribute('style') + } // Plus/Minus font-size of content wrapper.querySelector('#plus-font-size').onclick = () => { - const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16; - block.style.fontSize = `${fontSize + 0.2}rem`; - }; + const fontSize = parseFloat(window.getComputedStyle(block).fontSize) / 16 + block.style.fontSize = `${fontSize + 0.2}rem` + } wrapper.querySelector('#minus-font-size').onclick = () => { - const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16; - block.style.fontSize = `${fontSize - 0.2}rem`; - }; - }); - }; + const fontSize = parseFloat(window.getComputedStyle(block).fontSize) / 16 + block.style.fontSize = `${fontSize - 0.2}rem` + } + }) + } leaveHandler = ({ htmlHolder, blocks }) => { const resumeFromDraggable = block => { - const draggableContainer = block.closest('.draggable-block'); - if (!draggableContainer) return; - htmlHolder.appendChild(block); - draggableContainer.remove(); - }; - blocks.forEach(resumeFromDraggable); - }; + const draggableContainer = block.closest('.draggable-block') + if (!draggableContainer) return + htmlHolder.appendChild(block) + draggableContainer.remove() + } + blocks.forEach(resumeFromDraggable) + } } -- cgit v1.2.3-70-g09d2