Improved account images navigation (not yet 100% rock-solid)

src/routes/_components/status/Status.html

@@ -126,7 +126,8 @@
       const { elementId, showContent } = this.get()
       const { disableTapOnStatus } = this.store.get()
       if (typeof window !== "undefined") {
-        if (!window.location.pathname.startsWith('/statuses/')) {
+        if (!window.location.pathname.startsWith('/statuses/') &&
+          !window.location.pathname.startsWith('/accounts')) {
           registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
         }
       }

src/scss/themes/ozark.scss

@@ -19,6 +19,9 @@ $nav-a-bg-hover: lighten($nav-bg, 25%);
 $nav-a-border: #ffa700;
 $nav-a-border-hover: #fff;
 $nav-active-bg: lighten($nav-a-selected-bg-hover, 15%);
+$button-primary: #ff1b3b;
+$button-primary-hover: lighten($button-primary, 25%);
+$button-primary-active: lighten($button-primary, 10%);
 $main-border: #ececec;
 $article-bg: #fff;
 $deemphasized-text-color: #939393;
@@ -32,9 +35,9 @@ $deemphasized-text-color: #939393;
     --banner-fill: #{$nav-bg};
     --action-button-fill-color: #000;
     --button-primary-border: transparent;
-    --button-primary-bg: #{$nav-bg};
+    --button-primary-bg: #{$button-primary};
-    --button-primary-bg-hover: #{$nav-a-bg-hover};
+    --button-primary-bg-hover: #{$button-primary-hover};
-    --button-primary-bg-active: #{$nav-a-selected-bg};
+    --button-primary-bg-active: #{$button-primary-active};
     --main-bg: #{$main-bg-color};
     --nav-bg: #{$nav-bg};
     --nav-text-color: #{$nav-text-color};
@@ -63,6 +66,16 @@ nav#main-nav > ul.main-nav-ul {
     color: #fff !important;
   }
 
+  span.nav-link-badge {
+    width: .8em;
+    height: .8em;
+    background: red;
+    position: relative;
+    top: -1.2em;
+    left: .5em;
+    border: none !important;
+  }
+
   svg.nav-link-svg.active {
     fill: var(--nav-svg-fill-hover) !important;
   }
@@ -148,18 +161,18 @@ body.meet, body.account {
       }
 
       div#prev {
-        padding-right: 20%;
+        padding-right: 10%;
 
         svg {
           left: -.8em;
         }
       }
       div#prev:focus, div#prev:active {
-        background-image: linear-gradient(to right, #fdfdfd1f, transparent);
+        background-image: linear-gradient(to right, #7574744a, transparent);
       }
 
       div#next {
-        padding-left: 20%;
+        padding-left: 10%;
         right: 0;
 
         svg {
@@ -168,7 +181,7 @@ body.meet, body.account {
         }
       }
       div#next:focus, div#next:active {
-        background-image: linear-gradient(to right, transparent, #fdfdfd1f);
+        background-image: linear-gradient(to right, transparent, #7574744a);
       }
 
     }

static/fedilove-no-react.js

@@ -61,37 +61,74 @@ function api_send_message() {
 
 var fediloveUI = {
     registerSwipeOnElement: function(selector, cbackFunc) {
-        var touchsurface = document.querySelector(selector),startX,startY,dist,threshold = 150,allowedTime = 200,elapsedTime,startTime;
+        var touchsurface;
+        if (typeof selector == "string")
+            touchsurface = document.querySelector(selector);
+        else if (typeof selector == "object")
+            touchsurface = selector;
+        else return true;
+        var startX,startY,dist,threshold = 30,allowedTime = 200,elapsedTime,startTime;
         touchsurface.addEventListener('touchstart', function(e){
-            var touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY;
+            const touchobj = e.changedTouches[0]; dist = 0; startX = touchobj.pageX; startY = touchobj.pageY;
             startTime = new Date().getTime(); e.preventDefault();
         }, false);
         touchsurface.addEventListener('touchmove', function(e){ e.preventDefault() }, false);
         touchsurface.addEventListener('touchend', function(e){
-            var touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
+            const touchobj = e.changedTouches[0]; dist = touchobj.pageX - startX; elapsedTime = new Date().getTime() - startTime;
-            var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100);
+            if (Math.abs(dist) < 20) { return e.preventDefault(); }
+            const swiperightBol = (elapsedTime <= allowedTime && dist >= threshold);
             cbackFunc(swiperightBol); e.preventDefault();
         }, false);
     },
     meetAccountImageDirection: function(direction) {
+        if (fediloveUI.meetAccountImageLocked) return;
+        fediloveUI.meetAccountImageLocked = true;
+
+        var dontMove = false;
         if (direction === 'prev')
             fediloveData.meetAccountCurrentImg -= 1;
         else if (direction === 'next')
             fediloveData.meetAccountCurrentImg += 1;
-        const last = $('div.virtual-list > div.virtual-list-item').length - 1;
+        else
-        if (fediloveData.meetAccountCurrentImg > last)
+            dontMove = true;
-            fediloveData.meetAccountCurrentImg = last;
-        else if (fediloveData.meetAccountCurrentImg < 0)
-            fediloveData.meetAccountCurrentImg = 0;
 
+        const last = $('div.virtual-list > div.virtual-list-item').length - 1;
+        if (fediloveData.meetAccountCurrentImg > last) {
+            fediloveData.meetAccountCurrentImg = last > 0 ? last : 0;
+            dontMove = true;
+        } else if (fediloveData.meetAccountCurrentImg < 0) {
+            fediloveData.meetAccountCurrentImg = 0;
+            dontMove = true;
+        }
+
+        document.querySelector('#meet-navigation > #profile-nav > #next').style = '';
+        document.querySelector('#meet-navigation > #profile-nav > #prev').style = '';
         if (fediloveData.meetAccountCurrentImg === last)
             document.querySelector('#meet-navigation > #profile-nav > #next').style = 'display: none';
         else if (fediloveData.meetAccountCurrentImg === 0)
             document.querySelector('#meet-navigation > #profile-nav > #prev').style = 'display: none';
-        else {
+
-            document.querySelector('#meet-navigation > #profile-nav > #next').style = '';
+        const _setSelectedVisible = function() {
-            document.querySelector('#meet-navigation > #profile-nav > #prev').style = '';
+            if ($('div.virtual-list > div.virtual-list-item')[fediloveData.meetAccountCurrentImg] !== undefined) {
-        }
+                $('div.virtual-list > div.virtual-list-item').attr('style', 'display: none');
+                $('div.virtual-list > div.virtual-list-item')[fediloveData.meetAccountCurrentImg].style = '';
+            }
+            fediloveUI.meetAccountImageLocked = false;
+        };
+
+        if (dontMove === false) {
+            if (direction === 'next')
+                $('div.virtual-list')[0].style.animation = 'dismissMeet .25s linear 1';
+            else if (direction === 'prev')
+                $('div.virtual-list')[0].style.animation = 'acceptMeet .25s linear 1';
+            setTimeout(function() {
+                if ($('div.virtual-list')[0] !== undefined) {
+                    $('div.virtual-list')[0].style.animation = '';
+                    _setSelectedVisible();
+                }
+            }, 220);
+        } else { _setSelectedVisible() }
+
     },
     meetPageGoToCurrentAccount: function(isRightSwipe) { 
         isRightSwipe = isRightSwipe || false;
@@ -191,6 +228,7 @@ var fediloveFunctions = {
 var fediloveData = {
     chatAvatarCache: undefined,
     meetAccountCurrentImg: 0,
+    meetAccountImageLocked: false,
     gotEmojifyTextFunction: false,
     composeTxtKeypressEvent: false
 };
@@ -420,6 +458,12 @@ function fedilove_customization() {
         };
         cloneBackSvg('#meet-navigation > #profile-nav > #prev');
         cloneBackSvg('#meet-navigation > #profile-nav > #next');
+        fediloveUI.meetAccountImageDirection(null);
+        fediloveUI.registerSwipeOnElement('main.infinite-scroll-page', function(isRightSwipe) {
+            if (isRightSwipe)
+                fediloveUI.meetAccountImageDirection('prev');
+            else fediloveUI.meetAccountImageDirection('next');
+        });
     }
     else if (window.location.pathname == '/federated')
     {