From e015aeb2c13903871da306d3aa840c25c7a3597f Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Sat, 21 Sep 2024 14:49:37 +0800
Subject: feat: add font-size plus/minus button

* When draggable handle is on hover, they appears
* Hide when drag start, show when drag end
---
 src/OverlayLayout.mjs | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

(limited to 'src/OverlayLayout.mjs')

diff --git a/src/OverlayLayout.mjs b/src/OverlayLayout.mjs
index c87033b..8b4e073 100644
--- a/src/OverlayLayout.mjs
+++ b/src/OverlayLayout.mjs
@@ -10,11 +10,18 @@ export class OverlayLayout {
       // Create draggable block
       const draggableBlock = document.createElement('div')
       draggableBlock.classList.add('draggable-block')
+      draggableBlock.innerHTML = `
+        <div class="draggable">
+          <div class="handle">\u2630</div>
+        </div>
+        <div class="utils">
+          <div id="plus-font-size" ">\u2795</div>
+          <div id="minus-font-size">\u2796</div>
+        </div>
+      `
 
       // Add draggable part
-      const draggablePart = document.createElement('div');
-      draggablePart.classList.add('draggable')
-      draggablePart.textContent = '☰'
+      const draggablePart = draggableBlock.querySelector('.draggable')
       draggablePart.title = 'Use middle-click to remove block'
       draggablePart.onmouseup = (e) => {
         if (e.button === 1) {
@@ -34,6 +41,26 @@ export class OverlayLayout {
         snap: { x: { step: 20 }, y: { step: 20 } },
       })
 
+      // Plus/Minus font-size of content
+      const plusButton = draggableBlock.querySelector('#plus-font-size')
+      plusButton.onclick = () => {
+        const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
+        block.style.fontSize = `${fontSize + 0.1}rem`
+      }
+      const minusButton = draggableBlock.querySelector('#minus-font-size')
+      minusButton.onclick = () => {
+        const fontSize = parseFloat(getComputedStyle(block).fontSize) / 16
+        block.style.fontSize = `${fontSize - 0.1}rem`
+      }
+      draggableInstance.onDragStart = () => {
+        plusButton.style.opacity = '0'
+        minusButton.style.opacity = '0'
+      }
+      draggableInstance.onDragEnd = () => {
+        plusButton.style = ''
+        minusButton.style = ''
+      }
+
       // Reposition draggable instance when resized
       new ResizeObserver(() => {
         try {
-- 
cgit v1.2.3-70-g09d2