Huge QOL upgrade. Added more widgets, small fixes, and timer tones.

2022-09-09 17:57:19 -05:00 · 2022-09-09 17:57:19 -05:00 · f782236bf8
commit f782236bf8
parent 726ed7c23b
14 changed files with 173 additions and 40 deletions
--- a/assets/tones/beethoven.mp3
+++ b/assets/tones/beethoven.mp3
--- a/assets/tones/megalo.mp3
+++ b/assets/tones/megalo.mp3
--- a/assets/tones/none.mp3
+++ b/assets/tones/none.mp3
--- a/assets/tones/ringer.mp3
+++ b/assets/tones/ringer.mp3
--- a/assets/tones/sweet.mp3
+++ b/assets/tones/sweet.mp3
--- a/assets/tones/tone.mp3
+++ b/assets/tones/tone.mp3
--- a/assets/tones/twinkle.mp3
+++ b/assets/tones/twinkle.mp3
--- a/assets/tones/violin.mp3
+++ b/assets/tones/violin.mp3
--- a/canvas.js
+++ b/canvas.js
@ -1,4 +1,4 @@
-var tone = new Audio("./assets/tone.mp3");
+var tone = new Audio();

 document.querySelectorAll(".clock").forEach((clock) => {
  var canvas = clock.querySelector("canvas");
@ -130,11 +130,19 @@ function updateTimer() {
 setInterval(() => {
  document.querySelectorAll(".timer-enabled:not(.timer-paused)").forEach((clock, i) => {
    var timer = clock.dataset.time;
+    var bool = clock.dataset.ctp == "true";
    clock.dataset.time--;
+    if (bool) {
+      document.querySelector(".poplight .press").classList.remove("popped");
+    }
    if (timer <= 0) {
      clock.classList.remove("timer-enabled");
+      tone.src = "./assets/tones/" + clock.dataset.tone + ".mp3";
      tone.currentTime = 0;
      tone.play();
+      if (bool) {
+        document.querySelector(".poplight .press").classList.add("popped");
+      }
    }
  });
  updateTimer();
--- a/index.html
+++ b/index.html
@ -6,27 +6,32 @@
 <html>
  <head>
    <meta charset="utf-8">
-    <title>Clock</title>
+    <title>FunnyClock²</title>
    <link rel="stylesheet" href="./styles/root.css">
    <link rel="stylesheet" href="./styles/clock.css">
    <link rel="stylesheet" href="./styles/style.css">
    <link rel="stylesheet" href="./styles/dialog.css">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
+    <script src="jqtp.js"></script>
  </head>
  <body>
    <div id="back"></div>
+    <div id="backconstrain"></div>
    <div class="header">
      <div>
        <button class="material-symbols-outlined hiw" data-title="Menu" onclick="this.parentElement.parentElement.classList.toggle('wide')">menu</button>
        <sep></sep>
-        <button class="material-symbols-outlined" data-title="Add World Clock" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timezone--').classList.add('open');">add_circle</button>
+        <button class="material-symbols-outlined" data-title="Add World Clock" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timezone--').classList.add('open');">schedule</button>
        <button class="material-symbols-outlined" data-title="Add Timer" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-timer--').classList.add('open');">timer</button>
+        <button class="material-symbols-outlined" data-title="Add Note" onclick="addNote();">description</button>
+        <button class="material-symbols-outlined" data-title="Add Checklist" onclick="addChecklist();">checklist</button>
      </div>
      <div>
        <button class="material-symbols-outlined" data-title="Customize Color" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-dialog--').classList.add('open');">palette</button>
        <button class="material-symbols-outlined" data-title="Open Fullscreen" onclick="openFullscreen();">fullscreen</button>
-        <button class="material-symbols-outlined" data-title="About" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-about--').classList.add('open');">info</button>
+        <button class="material-symbols-outlined" data-title="About FunnyClock²" onclick="document.querySelector('.header').classList.remove('wide');document.querySelector('.scr-about--').classList.add('open');">info</button>
      </div>
    </div>
    <div class="body">
@ -35,14 +40,13 @@
        --><div class="labels">
          <h1 class="title">Loading...</h1><br />
          <p class="timezone">Loading...</p>
-        </div>
-        <h1>Welcome!</h1>
-        <span>Feel free to take some notes.</span><br />
-        <textarea class="txt" title="Notes" placeholder="Type here." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
+        </div><br />
+        <textarea class="txt" title="Notes" placeholder="Take some notes..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
      </div>
    </div>
    <div class="poplight">
      <button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="this.parentElement.classList.toggle('hidden')">unfold_less</button>
+      <div class="drag material-symbols-outlined" data-title="Drag Poplight">open_with</div>
      <button class="press material-symbols-outlined popped" onclick="this.classList.toggle('popped')"></button>
    </div>
    <div class="scrim-over-- scr-dialog--">
@ -143,7 +147,25 @@
        <p class="dlg-top">Configure Timer</p>
        <form id="timerform">
          <!-- <Peter... the="horse" is h=ere /> -->
-          <input type="number" name="minute" placeholder="05" min="00" value="05" /><span>:</span><input type="number" name="second" placeholder="00" min="00" value="00" max="59" />
+          <input type="number" name="minute" placeholder="05" min="00" value="05" /><span>:</span><input type="number" name="second" placeholder="00" min="00" value="00" max="59" /><br />
+          <input type="checkbox" name="ctp" id="ctp" /> <label for="ctp">Connected To Poplight (running = on, done = off)</label><br />
+          <p class="dlg-top">Configure Tone</p>
+          <input type="radio" name="tone" id="tonebeet" value="beethoven" /><!--
+          --><label for="tonebeet">BEETHOVEN</label><!--
+          --><input type="radio" name="tone" id="tonemegalo" value="megalo" /><!--
+          --><label for="tonemegalo">MEGALO</label><!--
+          --><input type="radio" name="tone" id="toneringer" value="ringer" /><!--
+          --><label for="toneringer">RINGER</label><!--
+          --><input type="radio" name="tone" id="tonesweet" value="sweet" /><!--
+          --><label for="tonesweet">DANCE</label><!--
+          --><input type="radio" name="tone" id="tonetone" value="tone" checked /><!--
+          --><label for="tonetone">DRY</label><!--
+          --><input type="radio" name="tone" id="tonetwinkle" value="twinkle" /><!--
+          --><label for="tonetwinkle">TWINKLE</label><!--
+          --><input type="radio" name="tone" id="toneviolin" value="violin" /><!--
+          --><label for="toneviolin">VIOLIN</label><!--
+          --><input type="radio" name="tone" id="tonenone" value="none" /><!--
+          --><label for="tonenone">NONE</label>
          <div>
            <input type="submit" name="action" value="DONE"/>
          </div>
@ -174,6 +196,11 @@
    </div>
    <div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
    <script>
+$(".poplight").draggable({
+  containment: $("#backconstrain"),
+  handle: "div.drag"
+});
+
 var elem = document.documentElement;

 function openFullscreen() {
@ -230,8 +257,9 @@ document.querySelector("#color").addEventListener("change", (e) => {
 document.querySelector("#timerform").addEventListener("submit", (e) => {
  event.preventDefault();
  const formData = new FormData(e.target);
+  var checked = formData.get("ctp") == "on";
  var time = (parseInt(formData.get("minute")) * 60) + parseInt(formData.get("second"));
-  document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="timer timer-enabled" data-time="${time}" data-orig="${time}">
+  document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="timer timer-enabled" data-time="${time}" data-orig="${time}" data-ctp="${checked}" data-tone="${formData.get("tone")}">
  <canvas width="64" height="64"></canvas><!--
  --><div class="labels">
    <h1 class="time"><span class="mins">00</span>:<span class="seconds">00</span></h1><br />
@ -239,7 +267,10 @@ document.querySelector("#timerform").addEventListener("submit", (e) => {
  <button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
  <button class="normalclock material-symbols-outlined" onclick="this.parentElement.classList.toggle('timer-paused');">pause</button>
  <button class="normalclock material-symbols-outlined" onclick="this.parentElement.dataset.time = this.parentElement.dataset.orig;this.parentElement.classList.add('timer-enabled');updateTimer()">refresh</button>
-      </div>`);
+</div>`);
+  if (checked) {
+    document.querySelector(".poplight .press").classList.remove("popped");
+  }
  updateTimer();
  document.querySelector('.scr-timer--').classList.remove('open');
 })
@ -263,6 +294,33 @@ document.querySelector("#timezone").addEventListener("submit", (e) => {
  update();
  document.querySelector('.scr-timezone--').classList.remove('open');
 })
+
+function addNote() {
+  document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="noteobject">
+  <textarea class="txt" title="Notes" placeholder="Take some notes..." oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
+  <button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
+</div>`);
+}
+
+function addChecklist() {
+  document.querySelector(".body").insertAdjacentHTML( "beforeend", `<div class="noteobject">
+  <div class="lister">
+    <div class="checkobject">
+      <button onclick="this.parentElement.remove();" class="deleteclock material-symbols-outlined">close</button>
+      <input type="text" placeholder="Checklist item" />
+    </div>
+  </div>
+  <button class="deleteclock material-symbols-outlined" onclick="this.parentElement.remove()">close</button>
+  <button class="normalclock material-symbols-outlined" onclick="addCheckbox(this.parentElement.querySelector('.lister'));">add</button>
+</div>`);
+}
+
+function addCheckbox(obj) {
+  obj.insertAdjacentHTML( "beforeend", `<div class="checkobject">
+  <button onclick="this.parentElement.remove();" class="deleteclock material-symbols-outlined">close</button>
+  <input type="text" placeholder="Checklist item" />
+</div>`);
+}
    </script>
    <script src="./canvas.js"></script>
  </body>
--- a/jqtp.js
+++ b/jqtp.js
@ -0,0 +1,11 @@
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
--- a/styles/clock.css
+++ b/styles/clock.css
@ -1,7 +1,7 @@

 .body {
  width: calc(100vw - 64px);
-  height: 100vh;
+  height: 100%;
  position: fixed;
  left: 64px;
  top: 0;
@ -11,7 +11,7 @@
  overflow-y: auto;
 }

-.body .clock, .body .timer {
+.body .clock, .body .timer, .body .noteobject {
  width: 100%;
  min-height: max-content;
  border-radius: 8px;
@ -24,7 +24,7 @@
  zoom: 1.25;
 }

-.body .clock::before, .body .timer::before {
+.body .clock::before, .body .timer::before, .body .noteobject::before {
  content: "";
  background-color: #FFFFFF40;
  position: absolute;
@ -50,7 +50,7 @@



-.body .clock h1, .body .timer h1 {
+.body .clock h1, .body .timer h1, .body .noteobject h1 {
  margin: 0;
  margin-top: 16px;
  padding: 0;
@ -61,12 +61,12 @@



-.body .clock div.labels, .body .timer div.labels {
+.body .clock div.labels, .body .timer div.labels, .body .noteobject div.labels {
  display: inline-block;
  vertical-align: middle;
 }

-.body .clock div.labels *, .body .timer div.labels * {
+.body .clock div.labels *, .body .timer div.labels *, .body .noteobject div.labels * {
  margin: 0;
  padding: 0;
  color: var(--foreground);
@ -75,7 +75,7 @@
  vertical-align: middle;
 }

-.body .clock div.labels .timezone, .body .timer div.labels .timezone {
+.body .clock div.labels .timezone, .body .timer div.labels .timezone, .body .noteobject div.labels .timezone {
  color: #888888;
 }

@ -103,6 +103,7 @@ textarea {

 .deleteclock {
  margin-top: 16px;
+  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
@ -127,6 +128,7 @@ textarea {

 .normalclock {
  margin-top: 16px;
+  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
--- a/styles/dialog.css
+++ b/styles/dialog.css
@ -131,3 +131,34 @@ input[type="radio"]:focus + label {
  background-color: #00000040;
  color: var(--foreground);
 }
+
+.checkobject input[type="text"] {
+  width: 100%;
+  margin: 8px 0;
+  box-sizing: border-box;
+  height: max-content;
+  max-height: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  font-size: 48px;
+  background-color: #00000040;
+  color: var(--foreground);
+}
+
+.checkobject {
+  display: flex;
+  gap: 12px;
+  flex-direction: row;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-content: space-around;
+  align-items: center;
+}
+
+.checkobject .deleteclock {
+  padding: 0;
+  margin: 0;
+}
--- a/styles/style.css
+++ b/styles/style.css
@ -14,17 +14,25 @@ body {
  background-position: center;
  opacity: 0.35;
  position: fixed;
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
+}
+
+#backconstrain {
+  position: fixed;
+  height: calc(100vh - 80px);
+  width: calc(100vw - 36px);
+  left: 20px;
+  top: 64px;
 }

 * {
-  font-family: 'Courier New', Courier, monospace;
+  font-family: monospace;
 }

 .header {
  width: 64px;
-  height: 100vh;
+  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
@ -130,7 +138,7 @@ body {
  position: absolute;
  display: inline-block;
  content: attr(data-title);
-  font-family: 'Courier New', Courier, monospace;
+  font-family: monospace;
  font-size: 12px;
  height: 12px;
  box-sizing: content-box;
@ -191,11 +199,10 @@ sep {
  position: fixed;
  right: 16px;
  bottom: 16px;
-  width: 128px;
-  height: 128px;
+  width: 192px;
+  height: 192px;
  transition: bottom 0.125s;
  z-index: 9;
-  zoom: 1.25;
 }

 .poplight.hidden {
@ -206,7 +213,7 @@ sep {
  position: absolute;
  width: 32px;
  height: 32px;
-  right: -0px;
+  right: 48px;
  top: -48px;
  margin: 0;
  padding: 0;
@ -220,7 +227,7 @@ sep {
  position: absolute;
  display: inline-block;
  content: attr(data-title);
-  font-family: 'Courier New', Courier, monospace;
+  font-family: monospace;
  font-size: 12px;
  height: 12px;
  box-sizing: content-box;
@ -260,20 +267,20 @@ sep {
  right: 0;
  width: 100%;
  height: 100%;
-  border-radius: 64px;
+  border-radius: 96px;
  background-color: #808080;
  overflow: hidden;
  border: none;
-  font-size: 64px;
+  font-size: 96px;
  transition: top 0.125s, right 0.125s, width 0.125s, height 0.125s, background-color 0.125s, color 0.125s, font-size 0.125s;
 }

 .poplight.hidden button.press {
  top: -48px;
-  right: 48px;
+  right: 96px;
  width: 32px;
  height: 32px;
-  border-radius: 64px;
+  border-radius: 128px;
  font-size: 24px;
  color: transparent;
 }
@ -290,7 +297,7 @@ sep {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  border-radius: 64px;
+  border-radius: 128px;
  top: 0;
  left: 0;
  width: 100%;
@ -309,3 +316,19 @@ sep {
 .poplight button.press.popped::after {
  content: "phonelink_off";
 }
+
+.poplight .drag {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  right: 0;
+  top: -48px;
+  margin: 0;
+  padding: 4px;
+  border: none;
+  border-radius: 16px;
+  box-sizing: border-box;
+  user-select: none;
+  background-color: transparent;
+  color: var(--foreground);
+}