Merge pull request #146 from gebederry/dev-7

Add a draggable back-to-top button on side menu
jeanropke · Aug 8, 2024 · 1b6842a · 1b6842a
2 parents 41616fb + 4b661fd
commit 1b6842a
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 31 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1409,6 +1409,54 @@ a.no-style:visited {
     padding: 15px 25px;
 }
 
+#back-to-top {
+    position: fixed;
+    display: none;
+    z-index: 1000;
+    left: 18em;
+    bottom: 7em;
+    width: 46px;
+    height: 46px;
+    border: none;
+    border-radius: 50%;
+    background-color: #eee;
+    box-shadow: rgba(14, 15, 15, .3) 0px 2px 10px 0px;
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transform: translateY(15px);
+    transform: translateY(15px);
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
+    cursor: pointer;
+}
+
+#back-to-top:hover {
+    background-color: #ded2fc;
+}
+
+.side-menu.menu-opened #back-to-top {
+    display: block;
+}
+
+#back-to-top img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    height: 50%;
+    width: 50%;
+    filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(10deg);
+    pointer-events: none;
+}
+
+#back-to-top.is-visible {
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+}
+
 /* Pathfinder styling */
 
 .pathfinder-control {

diff --git a/assets/images/selection_arrow_up.png b/assets/images/selection_arrow_up.png
diff --git a/assets/js/language.js b/assets/js/language.js
@@ -145,6 +145,8 @@ const Language = {
 
     this.translateDom();
 
+    document.getElementById('back-to-top').setAttribute('title', Language.get('menu.back_to_top'));
+
     FME.update();
     this.updateProgress();
   },

diff --git a/assets/js/scripts.js b/assets/js/scripts.js
@@ -224,6 +224,9 @@ function clockTick() {
 }
 
 const sideMenu = document.querySelector('.side-menu');
+const backToTop = document.getElementById('back-to-top');
+const draggableBackToTop = draggify(backToTop, { storageKey: 'rdo.backToTopPosition' });
+let lastScrollY = sideMenu.scrollTop;
 
 sideMenu.addEventListener('scroll', function () {
   // These are not equality checks because of mobile weirdness.
@@ -233,6 +236,19 @@ sideMenu.addEventListener('scroll', function () {
   document.querySelector('.scroller-arrow-tp').style.display = atTop ? 'none' : '';
   document.querySelector('.scroller-line-bt').style.display = atBottom ? '' : 'none';
   document.querySelector('.scroller-arrow-bt').style.display = atBottom ? 'none' : '';
+
+  if (this.scrollTop !== 0 && this.scrollTop < lastScrollY) {
+    backToTop.classList.add('is-visible');
+  } else if (this.scrollTop === 0 || this.scrollTop > lastScrollY) {
+    backToTop.classList.remove('is-visible');
+  }
+  lastScrollY = this.scrollTop;
+});
+
+backToTop.addEventListener('click', () => {
+  if (draggableBackToTop.getDistanceMoved() < 5) {
+    sideMenu.scrollTo({ top: 0, behavior: 'smooth' });
+  }
 });
 
 sideMenu.addEventListener('touchend', e => {
@@ -691,3 +707,90 @@ function loadFont(name, urls = {}) {
     return fontFace;
   });
 }
+
+/**
+ * Makes an element draggable.
+ *
+ * @param {HTMLElement} el - The element to make draggable.
+ * @param {Object} options - Configuration options for the draggable functionality.
+ * @param {string} options.storageKey - The key used to save the element's position in localStorage.
+ * @returns {Object} An object containing:
+ *  - `isDragging`: A function that returns a boolean indicating if the element is being dragged.
+ *  - `getDistanceMoved`: A function that returns the distance moved since the drag started.
+ */
+function draggify(el, { storageKey }) {
+  if (!el) {
+    console.error('Element not found');
+    return;
+  }
+
+  let isDragging = false;
+  let startX, startY, initialX, initialY;
+  let currentX = 0, currentY = 0;
+
+  const savePosition = () => {
+    const position = { x: currentX, y: currentY };
+    localStorage.setItem(storageKey, JSON.stringify(position));
+  };
+
+  const restorePosition = () => {
+    const savedPosition = localStorage.getItem(storageKey);
+    if (savedPosition) {
+      const { x, y } = JSON.parse(savedPosition);
+      currentX = x;
+      currentY = y;
+      el.style.transform = `translate(${x}px, ${y}px)`;
+    }
+  };
+
+  const onDragStart = (e) => {
+    isDragging = true;
+    startX = e.clientX || e.touches[0].clientX;
+    startY = e.clientY || e.touches[0].clientY;
+    initialX = currentX;
+    initialY = currentY;
+    el.style.transition = 'none';
+    el.style.cursor = 'grabbing';
+    requestAnimationFrame(updatePosition);
+  };
+
+  const onDragMove = (e) => {
+    if (!isDragging) return;
+    const clientX = e.clientX || e.touches[0].clientX;
+    const clientY = e.clientY || e.touches[0].clientY;
+    currentX = initialX + (clientX - startX);
+    currentY = initialY + (clientY - startY);
+  };
+
+  const onDragEnd = () => {
+    isDragging = false;
+    el.style.transition = '0.2s all';
+    el.style.cursor = 'grab';
+    savePosition();
+  };
+
+  const updatePosition = () => {
+    if (isDragging) {
+      el.style.transform = `translate(${currentX}px, ${currentY}px)`;
+      requestAnimationFrame(updatePosition);
+    }
+  };
+
+  el.addEventListener('pointerdown', onDragStart);
+  document.addEventListener('pointermove', onDragMove);
+  document.addEventListener('pointerup', onDragEnd);
+  document.addEventListener('pointercancel', onDragEnd);
+
+  el.addEventListener('touchstart', onDragStart);
+  document.addEventListener('touchmove', onDragMove);
+  document.addEventListener('touchend', onDragEnd);
+  document.addEventListener('touchcancel', onDragEnd);
+
+  restorePosition();
+
+  return {
+    isDragging: () => isDragging,
+    getDistanceMoved: () =>
+      Math.sqrt((currentX - initialX) ** 2 + (currentY - initialY) ** 2)
+  };
+}
diff --git a/index.html b/index.html
@@ -45,16 +45,16 @@
 
   <link rel="stylesheet" href="assets/css/leaflet.css" />
   <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
-  <link rel="stylesheet" href="assets/css/styles.css?nocache=1546" />
-  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1546" />
+  <link rel="stylesheet" href="assets/css/styles.css?nocache=1547" />
+  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1547" />
 
   <script>
-    var nocache = 1546;
+    var nocache = 1547;
   </script>
 </head>
 
 <body>
-  <div class="side-menu">
+  <aside class="side-menu">
     <div id="top-sticky">
       <div class="sticky-container">
         <h2 id="main-header">
@@ -1038,7 +1038,11 @@ <h4 class="no-margin-top" data-text="menu.sponsors">Sponsors</h4>
         </div>
       </div>
     </div>
-  </div>
+
+    <button id="back-to-top" title="Scroll back to top (Draggable)">
+      <img src="./assets/images/selection_arrow_up.png" alt="">
+    </button>
+  </aside>
   <div class="menu-toggle">></div>
 
   <div class="top-widget">
@@ -1156,7 +1160,7 @@ <h4 class="modal-title" id="remove-all-pins-title" data-text="menu.modal_remove_
 
   <script src='https://js.sentry-cdn.com/a130f51c41c747c5b3ff6d39a6a31e41.min.js' crossorigin="anonymous" data-lazy="no"></script>
   <script src="assets/js/lib/bootstrap.min.js"></script>
-  <script src="assets/js/loader.js?nocache=1546"></script>
+  <script src="assets/js/loader.js?nocache=1547"></script>
   <script src="assets/js/lib/popper.min.js"></script>
   <script src="assets/js/lib/tippy.min.js"></script>
   <script src="assets/js/lib/leaflet.js"></script>
@@ -1168,31 +1172,31 @@ <h4 class="modal-title" id="remove-all-pins-title" data-text="menu.modal_remove_
   <script>var module = {};</script>
   <script src="assets/js/lib/leaflet.canvas-markers.js"></script>
   <script>module.exports(L);</script>
-  <script src="assets/js/layers.js?nocache=1546"></script>
-  <script src="assets/js/settings.js?nocache=1546"></script>
-  <script src="assets/js/nazar.js?nocache=1546"></script>
-  <script src="assets/js/marker.js?nocache=1546"></script>
-  <script src="assets/js/treasures.js?nocache=1546"></script>
-  <script src="assets/js/bounties.js?nocache=1546"></script>
-  <script src="assets/js/legendary.js?nocache=1546"></script>
-  <script src="assets/js/encounters.js?nocache=1546"></script>
-  <script src="assets/js/locations.js?nocache=1546"></script>
-  <script src="assets/js/plants.js?nocache=1546"></script>
-  <script src="assets/js/camps.js?nocache=1546"></script>
-  <script src="assets/js/shops.js?nocache=1546"></script>
-  <script src="assets/js/singleplayer.js?nocache=1546"></script>
-  <script src="assets/js/gfh.js?nocache=1546"></script>
-  <script src="assets/js/events.js?nocache=1546"></script>
-  <script src="assets/js/animals.js?nocache=1546"></script>
-  <script src="assets/js/discoverables.js?nocache=1546"></script>
-  <script src="assets/js/overlays.js?nocache=1546"></script>
-  <script src="assets/js/pins.js?nocache=1546"></script>
-  <script src="assets/js/map.js?nocache=1546"></script>
-  <script src="assets/js/language.js?nocache=1546"></script>
-  <script src="assets/js/menu.js?nocache=1546"></script>
-  <script src="assets/js/dailies.js?nocache=1546"></script>
-  <script src="assets/js/scripts.js?nocache=1546"></script>
-  <script src="assets/js/fme.js?nocache=1546"></script>
+  <script src="assets/js/layers.js?nocache=1547"></script>
+  <script src="assets/js/settings.js?nocache=1547"></script>
+  <script src="assets/js/nazar.js?nocache=1547"></script>
+  <script src="assets/js/marker.js?nocache=1547"></script>
+  <script src="assets/js/treasures.js?nocache=1547"></script>
+  <script src="assets/js/bounties.js?nocache=1547"></script>
+  <script src="assets/js/legendary.js?nocache=1547"></script>
+  <script src="assets/js/encounters.js?nocache=1547"></script>
+  <script src="assets/js/locations.js?nocache=1547"></script>
+  <script src="assets/js/plants.js?nocache=1547"></script>
+  <script src="assets/js/camps.js?nocache=1547"></script>
+  <script src="assets/js/shops.js?nocache=1547"></script>
+  <script src="assets/js/singleplayer.js?nocache=1547"></script>
+  <script src="assets/js/gfh.js?nocache=1547"></script>
+  <script src="assets/js/events.js?nocache=1547"></script>
+  <script src="assets/js/animals.js?nocache=1547"></script>
+  <script src="assets/js/discoverables.js?nocache=1547"></script>
+  <script src="assets/js/overlays.js?nocache=1547"></script>
+  <script src="assets/js/pins.js?nocache=1547"></script>
+  <script src="assets/js/map.js?nocache=1547"></script>
+  <script src="assets/js/language.js?nocache=1547"></script>
+  <script src="assets/js/menu.js?nocache=1547"></script>
+  <script src="assets/js/dailies.js?nocache=1547"></script>
+  <script src="assets/js/scripts.js?nocache=1547"></script>
+  <script src="assets/js/fme.js?nocache=1547"></script>
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39999584-5"></script>

diff --git a/langs/en.json b/langs/en.json
@@ -88,6 +88,7 @@
   "menu.sightseeing": "Sightseeing",
   "menu.dailies": "Daily Challenges",
   "menu.condor_egg": "Condor Egg",
+  "menu.back_to_top": "Scroll back to top (Draggable)",
   "help.clear_important_items": "Clears the highlight from all markers marked as important.",
   "help.collector_map": "Opens a new tab with the other map by Jean, where you can browse markers related to the Collector role.",
   "help.cookie_export": "Exports your settings to a file.",