Add a context menu with a reset progress item and a bar color picker …

…item
do0ori · Dec 19, 2023 · 8a7df2a · 8a7df2a
1 parent d6267bc
commit 8a7df2a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -13,5 +13,15 @@
         </div>
         <input type="number" min="1" id="total-input" placeholder="Total" />
     </div>
+    <div id="context-menu">
+        <div class="context-menu-item" id="reset-progress">Reset progress to 0</div>
+        <div class="context-menu-item">
+            <label for="bar-color-picker">Bar color</label>
+            <input type="color" id="bar-color-picker">
+            <button id="bar-color-reset-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 512 512"><path fill="#000000" d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"/></svg>
+            </button>
+        </div>
+    </div>
     <script src="progressbar.js"></script>
 </body>
diff --git a/progressbar.js b/progressbar.js
@@ -1,23 +1,30 @@
 const totalKey = "total";
 const progressKey = "progress";
+const barColorKey = "barColor"
 
 document.addEventListener("DOMContentLoaded", function () {
     let total = parseInt(localStorage.getItem(totalKey)) || 1;
     let progress = parseInt(localStorage.getItem(progressKey)) || 0;
+    let barColor = localStorage.getItem(barColorKey) || "#4CAF50"
+    const progressContainer = document.getElementById("progress-container");
+    const progressBar = document.getElementById("progress-bar");
+    const countDisplay = document.getElementById("count-display");
+    const totalInput = document.getElementById("total-input");
+    const contextMenu = document.getElementById("context-menu");
+    const barColorPicker = document.getElementById("bar-color-picker");
 
     const updateProgressBar = () => {
-        const progressBar = document.getElementById("progress-bar");
         const progressPercentage = (progress / total) * 100;
         progressBar.style.width = progressPercentage + "%";
     }
 
     const updateCountDisplay = () => {
-        const countDisplay = document.getElementById("count-display");
         countDisplay.textContent = progress + " / " + total;
     }
 
+    const updateBarColor = () => progressBar.style.backgroundColor = barColor;
+
     const resetProgress = () => {
-        const totalInput = document.getElementById("total-input");
         const userInput = totalInput.value.trim();
         const newTotal = parseInt(userInput);
 
@@ -33,6 +40,12 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     }
 
+    const resetBarColor = () => {
+        barColor = barColorPicker.value = "#4CAF50";
+        localStorage.setItem(barColorKey, barColor);
+        updateBarColor();
+    }
+
     const decreaseProgress = () => {
         if (progress > 0) {
             progress--;
@@ -52,7 +65,6 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     const handleClick = (event) => {
-        const progressContainer = document.getElementById("progress-container");
         const clickPosition = event.clientX - progressContainer.offsetLeft;
         const third = progressContainer.clientWidth / 3;
 
@@ -64,20 +76,44 @@ document.addEventListener("DOMContentLoaded", function () {
             increaseProgress();
         } else {
             // click middle of the progress bar
-            const totalInput = document.getElementById("total-input");
             totalInput.style.display = "block";
             totalInput.focus();
         }
     }
 
+    const handleRightClick = (event) => {
+        event.preventDefault(); // prevent default right click menu
+        contextMenu.style.display = "block";
+        contextMenu.style.left = event.pageX + "px";
+        contextMenu.style.top = event.pageY + "px";
+    }
+
+    const handlBarColor = () => {
+        barColor = barColorPicker.value;
+        localStorage.setItem(barColorKey, barColor);
+        updateBarColor();
+    }
+
     // Attach event listeners
-    document.getElementById("progress-container").addEventListener("click", handleClick);
-    document.getElementById("total-input").addEventListener("blur", function () {
+    progressContainer.addEventListener("click", handleClick);
+    progressContainer.addEventListener("contextmenu", handleRightClick);
+    document.addEventListener("click", (event) => contextMenu.style.display = "none");
+    totalInput.addEventListener("blur", function () {
         resetProgress();
         this.style.display = "none";
     });
+    document.getElementById("reset-progress").addEventListener("click", () => {
+        progress = 0;
+        localStorage.setItem(progressKey, progress);
+        updateProgressBar();
+        updateCountDisplay();
+    })
+    barColorPicker.addEventListener("change", handlBarColor);
+    document.getElementById("bar-color-reset-btn").addEventListener("click", resetBarColor)
 
     // Initialize display
     updateProgressBar();
     updateCountDisplay();
+    updateBarColor();
+    barColorPicker.value = barColor;
 });
diff --git a/style.css b/style.css
@@ -51,4 +51,30 @@ body {
 
 #progress-container:hover #count-display {
     display: block;
+}
+
+#context-menu {
+    display : none;
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #aaa;
+    /* padding: 10px; */
+}
+
+.context-menu-item {
+    display: flex;
+    height: 40px;
+    align-items: center;
+    gap: 5px;
+    padding: 0 10px;
+}
+
+.context-menu-item:hover {
+    background-color: #ccc;
+}
+
+#bar-color-reset-btn {
+    border: none;
+    background: none;
+    cursor: pointer;
 }