style: prettier

1 files changed, 120 insertions, 120 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index abefd4d..9cf2ab9 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -1,208 +1,208 @@
-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
+    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 = '<div class="bar-handle"></div>'
-    const handle = bar.querySelector('.bar-handle')
-    container.appendChild(bar)
+    const bar = document.createElement("div");
+    bar.className = "bar";
+    bar.innerHTML = '<div class="bar-handle"></div>';
+    const handle = bar.querySelector(".bar-handle");
+    container.appendChild(bar);
 
     // Resize views by value
-    const resizeByLeft = (left) => {
-      htmlHolder.style.width = (left) + "px"
-      showcase.style.width = (parseFloat(getComputedStyle(container).width) - left) + "px"
-    }
+    const resizeByLeft = left => {
+      htmlHolder.style.width = left + "px";
+      showcase.style.width =
+        parseFloat(getComputedStyle(container).width) - left + "px";
+    };
 
     const draggable = new PlainDraggable(bar, {
       handle: handle,
-      containment: { left: '25%', top: 0, right: '75%', height: 0 },
-    })
-    draggable.draggableCursor = "grab"
-
-    draggable.onDrag = (pos) => {
-      handle.style.transform = 'unset'
-      resizeByLeft(pos.left)
-    }
-    draggable.onDragEnd = (_) => {
-      handle.removeAttribute('style')
-    }
-
-    onRemove(bar, () => draggable.remove())
-  }
+      containment: { left: "25%", top: 0, right: "75%", height: 0 },
+    });
+    draggable.draggableCursor = "grab";
+
+    draggable.onDrag = pos => {
+      handle.style.transform = "unset";
+      resizeByLeft(pos.left);
+    };
+    draggable.onDragEnd = _ => {
+      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)
-  }
+  saveLeftTopAsData = element => {
+    const { left, top } = element.getBoundingClientRect();
+    element.setAttribute("data-left", left);
+    element.setAttribute("data-top", top);
+  };
 
-  addDraggable = (element) => {
+  addDraggable = element => {
     // Make sure current element always on top
-    const siblings = Array.from(element.parentElement?.querySelectorAll(':scope > *') ?? [])
-    let popTimer = null
+    const siblings = Array.from(
+      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 = '<div class="handle">\u2630</div>'
+    const draggablePart = document.createElement("div");
+    element.appendChild(draggablePart);
+    draggablePart.className = "draggable-part";
+    draggablePart.innerHTML = '<div class="handle">\u2630</div>';
 
     // Add draggable instance
-    const { left, top } = element.getBoundingClientRect()
+    const { left, top } = element.getBoundingClientRect();
     const draggable = new PlainDraggable(element, {
       top: top,
       left: left,
       handle: draggablePart,
       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(() => {
       try {
         draggable.position();
       } catch (_) {
-        null
+        null;
       }
     }).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 = `
         <div class="utils">
           <div id="close">\u274C</div>
           <div id="plus-font-size" ">\u2795</div>
           <div id="minus-font-size">\u2796</div>
         </div>
-      `
-      wrapper.title = 'Middle-click to hide block'
-      wrapper.onmouseup = (e) => {
+      `;
+      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.querySelector("#close").onclick = () => {
+        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`
-      }
-      wrapper.querySelector('#minus-font-size').onclick = () => {
-        const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
-        block.style.fontSize = `${fontSize - 0.2}rem`
-      }
-    })
-  }
+      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 = () => {
+        const fontSize = parseFloat(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 resumeFromDraggable = block => {
+      const draggableContainer = block.closest(".draggable-block");
+      if (!draggableContainer) return;
+      htmlHolder.appendChild(block);
+      draggableContainer.remove();
+    };
+    blocks.forEach(resumeFromDraggable);
+  };
 }
-