From 0a29d7ad8cfcf0dfa55cbebd128180dbb7a5505f Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <tabletmeowcat@gmail.com>
Date: Sat, 10 Sep 2022 00:01:49 -0500
Subject: [PATCH] Changed poplight behavior when hitting edge.

---
 index.html       | 21 +++++++++++++++++++--
 styles/style.css | 14 +++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index d16f3f5..354e944 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,7 @@
       </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>
+      <button class="hide material-symbols-outlined" data-title="Toggle Poplight Size" onclick="checkHeight(this.parentElement)">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>
@@ -198,9 +198,26 @@
     <script>
 $(".poplight").draggable({
   containment: $("#backconstrain"),
-  handle: "div.drag"
+  handle: "div.drag",
+  drag: (e, u) => {
+    var bottom = ($(window).height() - u.position.top);
+    if ((bottom < 210 && bottom >= 78) && !u.helper[0].classList.contains("hidden")) {
+      u.position.top = ($(window).height() - 210);
+    } else if (bottom < 78) {
+      u.helper[0].classList.add("hidden");
+    }
+  }
 });
 
+function checkHeight(el) {
+  var bottom = ($(window).height() - el.getBoundingClientRect().top);
+  if (bottom < 210) {
+    el.classList.add('hidden');
+  } else {
+    el.classList.toggle('hidden');
+  }
+}
+
 var elem = document.documentElement;
 
 function openFullscreen() {
diff --git a/styles/style.css b/styles/style.css
index e7fcc2a..3c7e602 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -20,7 +20,7 @@ body {
 
 #backconstrain {
   position: fixed;
-  height: calc(100vh - 80px);
+  height: calc(100vh + 128px);
   width: calc(100vw - 36px);
   left: 20px;
   top: 64px;
@@ -242,22 +242,26 @@ sep {
   overflow: hidden;
 }
 
-.poplight button.hide:hover::after {
+.poplight button.hide:not(:disabled):hover::after {
   background-color: #202020;
   color: #FFFFFF;
   width: initial;
   padding: 8px;
 }
 
-.poplight button.hide:focus {
+.poplight button.hide:not(:disabled):focus {
   background-color: #FFFFFF20;
 }
 
-.poplight button.hide:hover {
+.poplight button.hide:disabled {
+  color: #808080;
+}
+
+.poplight button.hide:not(:disabled):hover {
   background-color: #FFFFFF40;
 }
 
-.poplight button.hide:active {
+.poplight button.hide:not(:disabled):active {
   background-color: #FFFFFF80;
 }