Merge pull request #1265 from gebederry/dev-14

Add a draggable back-to-top button on side menu

assets/css/styles.css

@@ -1626,6 +1626,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 {

assets/js/language.js

@@ -143,6 +143,7 @@ const Language = {
       '↓': '<kbd class="hotkey">↓</kbd>',
       'Enter': '<kbd class="hotkey">Enter</kbd>'
     });
+    backToTop.setAttribute('title', Language.get('menu.back_to_top'));
 
     FME.update();
     this.updateProgress();

assets/js/map.js

@@ -367,9 +367,6 @@ const MapBase = {
     uniqueSearchMarkers = MapBase.markers;
     MapBase.initFuse();
 
-    document.querySelectorAll('#weekly-container .header, #weekly-container p')
-      .forEach((el) => el.classList.remove('blurred'));
-
     // Preview mode.
     const previewParam = getParameterByName('q');
     if (previewParam) {

assets/js/scripts.js

@@ -400,14 +400,32 @@ function clockTick() {
   - only hope: user does not do anything until that happens
 - please move them out of here to their respective owners
 */
-document.querySelector('.side-menu').addEventListener('scroll', function () {
+const sideMenu = document.querySelector('.side-menu');
+const backToTop = document.getElementById('back-to-top');
+const draggableBackToTop = draggify(backToTop, { storageKey: 'rdr2collector.backToTopPosition' });
+let lastScrollY = sideMenu.scrollTop;
+
+sideMenu.addEventListener('scroll', function () {
   // These are not equality checks because of mobile weirdness.
   const atTop = this.scrollTop <= 0;
   const atBottom = this.scrollTop + this.clientHeight >= this.scrollHeight;
   document.querySelector('.scroller-line-tp').style.display = atTop ? '' : 'none';
   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' });
+  }
 });
 
 document.querySelectorAll('.top-widget > p').forEach((p) => {
@@ -1268,17 +1286,18 @@ function filterMapMarkers() {
   uniqueSearchMarkers = [];
   let filterType = () => true;
   let enableMainCategory = true;
+  const searchInputVal = document.getElementById('search').value;
 
   if (Settings.filterType === 'none') {
     const searchSet = new Set(
-      (searchInput.value || '')
+      (searchInputVal || '')
         .replace(/^[;\s]+|[;\s]+$/g, '')
         .split(';')
         .filter(Boolean)
     );
 
     if (searchSet.size)
-      MapBase.onSearch(searchInput.value, true);
+      MapBase.onSearch(searchInputVal, true);
     else
       uniqueSearchMarkers = MapBase.markers;
 
@@ -1470,4 +1489,91 @@ function placeholdersToHtml(el, placeholders) {
     ([key, value]) => (html = html.split(`{${key}}`).join(value))
   );
   el.innerHTML = html;
+}
+
+/**
+ * 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)
+  };
 }

index.html

@@ -45,11 +45,11 @@
 
   <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=1588" />
-  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1588" />
+  <link rel="stylesheet" href="assets/css/styles.css?nocache=1589" />
+  <link rel="stylesheet" href="assets/css/tippy.css?nocache=1589" />
 
   <script>
-    const nocache = 1588;
+    const nocache = 1589;
   </script>
 </head>
 
@@ -1037,6 +1037,10 @@ <h4 class="no-margin-top" data-text="menu.sponsors">Sponsors</h4>
         </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>
 
@@ -1365,7 +1369,7 @@ <h4 class="modal-title" id="import-rdo-inventory-modal-title" data-text="menu.mo
   <script src="https://js.sentry-cdn.com/8bb034d026aa4fb38d3428be80b9f776.min.js" crossorigin="anonymous" data-lazy="no"></script>
   <script src="assets/js/lib/fuse.min.js"></script>
   <script src="assets/js/lib/bootstrap.min.js"></script>
-  <script src="assets/js/loader.js?nocache=1588"></script>
+  <script src="assets/js/loader.js?nocache=1589"></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>
@@ -1376,26 +1380,26 @@ <h4 class="modal-title" id="import-rdo-inventory-modal-title" data-text="menu.mo
   <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=1588"></script>
-  <script src="assets/js/settings.js?nocache=1588"></script>
-  <script src="assets/js/mapping.js?nocache=1588"></script>
-  <script src="assets/js/nazar.js?nocache=1588"></script>
-  <script src="assets/js/fme.js?nocache=1588"></script>
-  <script src="assets/js/cycles.js?nocache=1588"></script>
-  <script src="assets/js/marker.js?nocache=1588"></script>
-  <script src="assets/js/inventory.js?nocache=1588"></script>
-  <script src="assets/js/treasures.js?nocache=1588"></script>
-  <script src="assets/js/legendary.js?nocache=1588"></script>
-  <script src="assets/js/pins.js?nocache=1588"></script>
-  <script src="assets/js/map.js?nocache=1588"></script>
-  <script src="assets/js/language.js?nocache=1588"></script>
-  <script src="assets/js/menu.js?nocache=1588"></script>
-  <script src="assets/js/items.js?nocache=1588"></script>
-  <script src="assets/js/category-collection.js?nocache=1588"></script>
-  <script src="assets/js/routes.js?nocache=1588"></script>
-  <script src="assets/js/pathfinder.main.js?nocache=1588"></script>
-  <script src="assets/js/updates.js?nocache=1588"></script>
-  <script src="assets/js/scripts.js?nocache=1588"></script>
+  <script src="assets/js/layers.js?nocache=1589"></script>
+  <script src="assets/js/settings.js?nocache=1589"></script>
+  <script src="assets/js/mapping.js?nocache=1589"></script>
+  <script src="assets/js/nazar.js?nocache=1589"></script>
+  <script src="assets/js/fme.js?nocache=1589"></script>
+  <script src="assets/js/cycles.js?nocache=1589"></script>
+  <script src="assets/js/marker.js?nocache=1589"></script>
+  <script src="assets/js/inventory.js?nocache=1589"></script>
+  <script src="assets/js/treasures.js?nocache=1589"></script>
+  <script src="assets/js/legendary.js?nocache=1589"></script>
+  <script src="assets/js/pins.js?nocache=1589"></script>
+  <script src="assets/js/map.js?nocache=1589"></script>
+  <script src="assets/js/language.js?nocache=1589"></script>
+  <script src="assets/js/menu.js?nocache=1589"></script>
+  <script src="assets/js/items.js?nocache=1589"></script>
+  <script src="assets/js/category-collection.js?nocache=1589"></script>
+  <script src="assets/js/routes.js?nocache=1589"></script>
+  <script src="assets/js/pathfinder.main.js?nocache=1589"></script>
+  <script src="assets/js/updates.js?nocache=1589"></script>
+  <script src="assets/js/scripts.js?nocache=1589"></script>
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-39999584-4"></script>

langs/en.json

@@ -1449,6 +1449,7 @@
     "menu.search_placeholder": "Search items. Separated by ;",
     "menu.query_suggestions_hotkey": "Search in suggestions, Press {↑} {↓} {Enter} for general search.",
     "menu.auto_enable_sold_items": "Automatically enable sold items",
+    "menu.back_to_top": "Scroll back to top (Draggable)",
     "map.remove_add": "Remove/Add from map",
     "map.remove": "Remove from map",
     "map.copy_link": "Copy link",