From f598dcbf6283f2c2b81a63d315548c6bc4e943fb Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Sun, 29 Sep 2024 15:06:59 +0800 Subject: style: prettier --- src/Layout.mjs | 88 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 44 insertions(+), 44 deletions(-) (limited to 'src/Layout.mjs') diff --git a/src/Layout.mjs b/src/Layout.mjs index 9cf2ab9..3a835c9 100644 --- a/src/Layout.mjs +++ b/src/Layout.mjs @@ -1,9 +1,9 @@ -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"); + if (!options.name) throw Error('Layout name is not given'); this.name = options.name; this.enterHandler = options.enterHandler; this.leaveHandler = options.leaveHandler; @@ -12,63 +12,63 @@ export class Layout { } 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"; + const bar = document.createElement('div'); + bar.className = 'bar'; bar.innerHTML = '
'; - const handle = bar.querySelector(".bar-handle"); + 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(getComputedStyle(container).width) - left + 'px'; }; const draggable = new PlainDraggable(bar, { handle: handle, - containment: { left: "25%", top: 0, right: "75%", height: 0 }, + containment: { left: '25%', top: 0, right: '75%', height: 0 }, }); - draggable.draggableCursor = "grab"; + draggable.draggableCursor = 'grab'; draggable.onDrag = pos => { - handle.style.transform = "unset"; + handle.style.transform = 'unset'; resizeByLeft(pos.left); }; draggable.onDragEnd = _ => { - handle.removeAttribute("style"); + handle.removeAttribute('style'); }; 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); + 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 > *") ?? [], + element.parentElement?.querySelectorAll(':scope > *') ?? [], ); let popTimer = null; element.onmouseover = () => { popTimer = setTimeout(() => { - siblings.forEach(e => e.style.removeProperty("z-index")); - element.style.zIndex = "9001"; + siblings.forEach(e => e.style.removeProperty('z-index')); + element.style.zIndex = '9001'; }, 200); }; element.onmouseout = () => { @@ -76,9 +76,9 @@ export class Overlay extends Layout { }; // Add draggable part - const draggablePart = document.createElement("div"); + const draggablePart = document.createElement('div'); element.appendChild(draggablePart); - draggablePart.className = "draggable-part"; + draggablePart.className = 'draggable-part'; draggablePart.innerHTML = '
\u2630
'; // Add draggable instance @@ -91,16 +91,16 @@ export class Overlay extends Layout { }); // 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 @@ -125,12 +125,12 @@ 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.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
@@ -138,18 +138,18 @@ export class Overlay extends Layout {
\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"; + wrapper.style.left = left + 'px'; + wrapper.style.top = top + 'px'; htmlHolder.appendChild(wrapper); const { width } = wrapper.getBoundingClientRect(); left += width + 30; @@ -168,7 +168,7 @@ export class Overlay extends Layout { // 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;`; @@ -176,20 +176,20 @@ export class Overlay extends Layout { }; utils.onmouseout = () => { wrapper.appendChild(utils); - utils.removeAttribute("style"); + utils.removeAttribute('style'); }; // Close button - wrapper.querySelector("#close").onclick = () => { - wrapper.classList.add("hide"); - utils.removeAttribute("style"); + wrapper.querySelector('#close').onclick = () => { + wrapper.classList.add('hide'); + utils.removeAttribute('style'); }; // Plus/Minus font-size of content - wrapper.querySelector("#plus-font-size").onclick = () => { + wrapper.querySelector('#plus-font-size').onclick = () => { const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16; block.style.fontSize = `${fontSize + 0.2}rem`; }; - wrapper.querySelector("#minus-font-size").onclick = () => { + wrapper.querySelector('#minus-font-size').onclick = () => { const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16; block.style.fontSize = `${fontSize - 0.2}rem`; }; @@ -198,7 +198,7 @@ export class Overlay extends Layout { leaveHandler = ({ htmlHolder, blocks }) => { const resumeFromDraggable = block => { - const draggableContainer = block.closest(".draggable-block"); + const draggableContainer = block.closest('.draggable-block'); if (!draggableContainer) return; htmlHolder.appendChild(block); draggableContainer.remove(); -- cgit v1.2.3-70-g09d2