1 files changed, 44 insertions, 44 deletions

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 = '<div class="bar-handle"></div>';
-    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 = '<div class="handle">\u2630</div>';
 
     // 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 = `
         <div class="utils">
           <div id="close">\u274C</div>
@@ -138,18 +138,18 @@ export class Overlay extends Layout {
           <div id="minus-font-size">\u2796</div>
         </div>
       `;
-      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();