Add elevator button for quick page navigation

ReinforceZwei · Sep 6, 2023 · f13a0c1 · f13a0c1
1 parent 28d665b
commit f13a0c1
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 3 deletions.
diff --git a/animeList/static/css/main.css b/animeList/static/css/main.css
@@ -191,6 +191,23 @@ td {
     height: 100%;
     cursor: pointer;
 }
+#elevator-float {
+    position: fixed;
+    color: rgba(18, 18, 18, 0.4);
+    background-color: rgba(158, 158, 158, 0.3);
+    border-radius: 5px;
+    width: 25px;
+    top: 50%;
+    right: 1px;
+    transform: translateY(-50%);
+    text-align: center;
+    vertical-align: middle;
+    margin: 10px;
+    cursor: pointer;
+}
+#elevator-float div:hover {
+    color: rgba(18, 18, 18, 0.7);
+}
 
 /* search bar template */
 .search {

diff --git a/animeList/static/js/main.js b/animeList/static/js/main.js
@@ -498,6 +498,46 @@ function toggleDropdown() {
 function openSettingModal() {
     $('#settings').modal()
 }
+function elevatorDown() {
+    let currentViewport = $(window).scrollTop()
+    let markers = $('.elevator-marker')
+    for (let i = 0; i < markers.length; i++){
+        let el = $(markers[i])
+        // If element is visible, skip it
+        if (el.isInViewport())
+            continue
+        if (el.offset().top > currentViewport){
+            $([document.documentElement, document.body]).animate({
+                scrollTop: el.offset().top
+            }, 1000)
+            break
+        }
+    }
+}
+function elevatorUp() {
+    let currentViewport = $(window).scrollTop()
+    let markers = $('.elevator-marker')
+    // Reverse looping
+    for (let i = markers.length - 1; i >= 0; i--){
+        let el = $(markers[i])
+        // If element is visible, skip it
+        if (el.isInViewport())
+            continue
+        if (el.offset().top < currentViewport){
+            $([document.documentElement, document.body]).animate({
+                scrollTop: el.offset().top
+            }, 1000)
+            break
+        }
+    }
+}
+$.fn.isInViewport = function () {
+    let elementTop = $(this).offset().top;
+    let elementBottom = elementTop + $(this).outerHeight();
+    let viewportTop = $(window).scrollTop();
+    let viewportBottom = viewportTop + $(window).height();
+    return elementBottom > viewportTop && elementTop < viewportBottom;
+};
 
 function copyNameToClipboard() {
     var copyText = document.getElementById("animeName");

diff --git a/animeList/templates/index.html b/animeList/templates/index.html
@@ -86,28 +86,32 @@
         <div>
             <div id="animeListContainer">
                 <h1>{{title}}</h1>
-                <div class="subtitle">{{title_watched}}</div>
+                <div class="subtitle elevator-marker">{{title_watched}}</div>
                 <ol class="animeList" id="list-watched">
                     {% for a in watched %}
                     <li>
                         <a onclick="getInfo(event, {{a.id}})" class="watched {{a._css_class}}" id="id-{{a.id}}" data-watched-time="{{a.watched_time}}">{{a.name}}<span class="remark">{{a.remark if a.remark}}</span></a>
                     </li>
                     {% endfor %}
                 </ol>
-                <div class="subtitle">{{title_unwatched}}</div>
+                <div class="subtitle elevator-marker">{{title_unwatched}}</div>
                 <ol class="animeList" id="list-unwatched">
                     {% for a in unwatched %}
                     <li>
                         <a onclick="getInfo(event, {{a.id}})" class="{{a._css_class}}" id="id-{{a.id}}">{{a.name}}<span class="remark">{{a.remark if a.remark}}</span></a>
                     </li>
                     {% endfor %}
-                    <a id="addAnime" onclick="_addAnime()">加新動漫</a>
+                    <a id="addAnime" class="elevator-marker" onclick="_addAnime()">加新動漫</a>
                 </ol>
             </div>
         </div>
         <div id="addAnimeFloat" onclick="_addAnime()">
             <div class="plus">+</div>
         </div>
+        <div id="elevator-float">
+            <div onclick="elevatorUp()"><i class="icon-up-big"></i></div>
+            <div onclick="elevatorDown()"><i class="icon-down-big"></i></div>
+        </div>
         <div class="dropdown">
             <div class="dropdown__content">
                 <div class="dropdown__trigger dropdown__button" onclick="toggleDropdown()">