Footer navigation for iOS PWAs and DiscourseHub app (#7347)

app/assets/javascripts/discourse/components/discourse-topic.js.es6

@@ -2,12 +2,11 @@ import DiscourseURL from "discourse/lib/url";
 import AddArchetypeClass from "discourse/mixins/add-archetype-class";
 import ClickTrack from "discourse/lib/click-track";
 import Scrolling from "discourse/mixins/scrolling";
+import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction";
 import { selectedText } from "discourse/lib/utilities";
 import { observes } from "ember-addons/ember-computed-decorators";
 
 const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 300;
-// Small buffer so that very tiny scrolls don't trigger mobile header switch
-const MOBILE_SCROLL_TOLERANCE = 5;
 
 function highlight(postNumber) {
   const $contents = $(`#post_${postNumber} .topic-body`);
@@ -16,7 +15,11 @@ function highlight(postNumber) {
   $contents.on("animationend", () => $contents.removeClass("highlighted"));
 }
 
-export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
+export default Ember.Component.extend(
+  AddArchetypeClass,
+  Scrolling,
+  MobileScrollDirection,
+  {
     userFilters: Ember.computed.alias("topic.userFilters"),
     classNameBindings: [
       "multiSelect",
@@ -37,7 +40,6 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
     _lastShowTopic: null,
 
     mobileScrollDirection: null,
-  _mobileLastScroll: null,
 
     @observes("enteredAt")
     _enteredTopic() {
@@ -184,7 +186,7 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
       if (this.site.mobileView && this.hasScrolled) {
         Ember.run.throttle(
           this,
-        this._mobileScrollDirectionCheck,
+          this.calculateDirection,
           offset,
           MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE
         );
@@ -194,37 +196,6 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
       this.appEvents.trigger("topic:scrolled", offset);
     },
 
-  _mobileScrollDirectionCheck(offset) {
-    // Difference between this scroll and the one before it.
-    const delta = Math.floor(offset - this._mobileLastScroll);
-
-    // This is a tiny scroll, so we ignore it.
-    if (delta <= MOBILE_SCROLL_TOLERANCE && delta >= -MOBILE_SCROLL_TOLERANCE)
-      return;
-
-    const prevDirection = this.mobileScrollDirection;
-    const currDirection = delta > 0 ? "down" : "up";
-
-    if (currDirection !== prevDirection) {
-      this.set("mobileScrollDirection", currDirection);
-    }
-
-    // We store this to compare against it the next time the user scrolls
-    this._mobileLastScroll = Math.floor(offset);
-
-    // If the user reaches the very bottom of the topic, we want to reset the
-    // scroll direction in order for the header to switch back.
-    const distanceToTopicBottom = Math.floor(
-      $("body").height() - offset - $(window).height()
-    );
-
-    // Not at the bottom yet
-    if (distanceToTopicBottom > 0) return;
-
-    // We're at the bottom now, so we reset the direction.
-    this.set("mobileScrollDirection", null);
-  },
-
     // We observe the scroll direction on mobile and if it's down, we show the topic
     // in the header, otherwise, we hide it.
     @observes("mobileScrollDirection")
@@ -234,4 +205,5 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
         this.mobileScrollDirection === "down" ? this.get("topic") : null
       );
     }
-});
+  }
+);

app/assets/javascripts/discourse/components/mobile-footer.js.es6

@@ -0,0 +1,128 @@
+import MountWidget from "discourse/components/mount-widget";
+import MobileScrollDirection from "discourse/mixins/mobile-scroll-direction";
+import Scrolling from "discourse/mixins/scrolling";
+import { observes } from "ember-addons/ember-computed-decorators";
+
+const MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE = 150;
+
+const MobileFooterComponent = MountWidget.extend(
+  Scrolling,
+  MobileScrollDirection,
+  {
+    widget: "mobile-footer-nav",
+    mobileScrollDirection: null,
+    scrollEventDisabled: false,
+    classNames: ["mobile-footer", "visible"],
+    routeHistory: [],
+    currentRouteIndex: 0,
+    canGoBack: false,
+    canGoForward: false,
+    backForwardClicked: null,
+
+    buildArgs() {
+      return {
+        canGoBack: this.canGoBack,
+        canGoForward: this.canGoForward
+      };
+    },
+
+    didInsertElement() {
+      this._super(...arguments);
+      this.bindScrolling({ name: "mobile-footer" });
+      $(window).on("resize.mobile-footer-on-scroll", () => this.scrolled());
+      this.appEvents.on("page:changed", this, "_routeChanged");
+      this.appEvents.on("composer:opened", this, "_composerOpened");
+      this.appEvents.on("composer:closed", this, "_composerClosed");
+    },
+
+    willDestroyElement() {
+      this._super(...arguments);
+      this.unbindScrolling("mobile-footer");
+      $(window).unbind("resize.mobile-footer-on-scroll");
+      this.appEvents.off("page:changed", this, "_routeChanged");
+      this.appEvents.off("composer:opened", this, "_composerOpened");
+      this.appEvents.off("composer:closed", this, "_composerClosed");
+    },
+
+    // The user has scrolled the window, or it is finished rendering and ready for processing.
+    scrolled() {
+      if (
+        this.isDestroyed ||
+        this.isDestroying ||
+        this._state !== "inDOM" ||
+        this.scrollEventDisabled
+      ) {
+        return;
+      }
+
+      const offset = window.pageYOffset || $("html").scrollTop();
+
+      Ember.run.throttle(
+        this,
+        this.calculateDirection,
+        offset,
+        MOBILE_SCROLL_DIRECTION_CHECK_THROTTLE
+      );
+    },
+
+    // We observe the scroll direction on mobile and if it's down, we show the topic
+    // in the header, otherwise, we hide it.
+    @observes("mobileScrollDirection")
+    toggleMobileFooter() {
+      this.$().toggleClass(
+        "visible",
+        this.mobileScrollDirection === null ? true : false
+      );
+      // body class used to adjust positioning of #topic-progress-wrapper
+      $("body").toggleClass(
+        "mobile-footer-nav-visible",
+        this.mobileScrollDirection === null ? true : false
+      );
+    },
+
+    _routeChanged(route) {
+      // only update route history if not using back/forward nav
+      if (this.backForwardClicked) {
+        this.backForwardClicked = null;
+        return;
+      }
+
+      this.routeHistory.push(route.url);
+      this.set("currentRouteIndex", this.routeHistory.length);
+
+      this.queueRerender();
+    },
+
+    _composerOpened() {
+      this.set("mobileScrollDirection", "down");
+      this.set("scrollEventDisabled", true);
+    },
+
+    _composerClosed() {
+      this.set("mobileScrollDirection", null);
+      this.set("scrollEventDisabled", false);
+    },
+
+    goBack() {
+      this.set("currentRouteIndex", this.get("currentRouteIndex") - 1);
+      this.backForwardClicked = true;
+      window.history.back();
+    },
+
+    goForward() {
+      this.set("currentRouteIndex", this.get("currentRouteIndex") + 1);
+      this.backForwardClicked = true;
+      window.history.forward();
+    },
+
+    @observes("currentRouteIndex")
+    setBackForward() {
+      let index = this.get("currentRouteIndex");
+
+      this.set("canGoBack", index > 1 ? true : false);
+      this.set("canGoForward", index < this.routeHistory.length ? true : false);
+    }
+  }
+);
+
+export default MobileFooterComponent;

app/assets/javascripts/discourse/controllers/application.js.es6

@@ -1,4 +1,5 @@
 import computed from "ember-addons/ember-computed-decorators";
+import { isAppWebview, isiOSPWA } from "discourse/lib/utilities";
 
 export default Ember.Controller.extend({
   showTop: true,
@@ -16,5 +17,10 @@ export default Ember.Controller.extend({
   @computed
   loginRequired() {
     return Discourse.SiteSettings.login_required && !Discourse.User.current();
+  },
+
+  @computed
+  showMobileFooterNav() {
+    return isAppWebview() || isiOSPWA();
   }
 });

app/assets/javascripts/discourse/initializers/mobile.js.es6

@@ -14,5 +14,14 @@ export default {
     site.set("isMobileDevice", Mobile.isMobileDevice);
 
     setResolverOption("mobileView", Mobile.mobileView);
+
+    if (window.ReactNativeWebView) {
+      Ember.run.later(() => {
+        let headerBg = $(".d-header").css("background-color");
+        window.ReactNativeWebView.postMessage(
+          JSON.stringify({ headerBg: headerBg })
+        );
+      }, 500);
+    }
   }
 };

app/assets/javascripts/discourse/lib/utilities.js.es6

@@ -643,5 +643,15 @@ export function areCookiesEnabled() {
   }
 }
 
+export function isiOSPWA() {
+  return (
+    window.matchMedia("(display-mode: standalone)").matches &&
+    navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
+  );
+}
+
+export function isAppWebview() {
+  return window.ReactNativeWebView !== undefined;
+}
 // This prevents a mini racer crash
 export default {};

app/assets/javascripts/discourse/mixins/mobile-scroll-direction.js.es6

@@ -0,0 +1,40 @@
+// Small buffer so that very tiny scrolls don't trigger mobile header switch
+const MOBILE_SCROLL_TOLERANCE = 5;
+
+export default Ember.Mixin.create({
+  _mobileLastScroll: null,
+
+  calculateDirection(offset) {
+    // Difference between this scroll and the one before it.
+    const delta = Math.floor(offset - this._mobileLastScroll);
+
+    // This is a tiny scroll, so we ignore it.
+    if (delta <= MOBILE_SCROLL_TOLERANCE && delta >= -MOBILE_SCROLL_TOLERANCE)
+      return;
+
+    const prevDirection = this.mobileScrollDirection;
+    const currDirection = delta > 0 ? "down" : null;
+
+    // Handle Safari overscroll first
+    if (offset < 0) {
+      this.set("mobileScrollDirection", null);
+    } else if (currDirection !== prevDirection) {
+      this.set("mobileScrollDirection", currDirection);
+    }
+
+    // We store this to compare against it the next time the user scrolls
+    this._mobileLastScroll = Math.floor(offset);
+
+    // If the user reaches the very bottom of the topic, we want to reset the
+    // scroll direction in order for the header to switch back.
+    const distanceToBottom = Math.floor(
+      $("body").height() - offset - $(window).height()
+    );
+
+    // Not at the bottom yet
+    if (distanceToBottom > 0) return;
+
+    // We're at the bottom now, so we reset the direction.
+    this.set("mobileScrollDirection", null);
+  }
+});

app/assets/javascripts/discourse/templates/application.hbs

@@ -33,3 +33,7 @@
 {{outlet "modal"}}
 {{topic-entrance}}
 {{outlet "composer"}}
+
+{{#if showMobileFooterNav}}
+  {{mobile-footer}}
+{{/if}}

app/assets/javascripts/discourse/widgets/mobile-footer-nav.js.es6

@@ -0,0 +1,58 @@
+import { createWidget } from "discourse/widgets/widget";
+import { isAppWebview } from "discourse/lib/utilities";
+
+createWidget("mobile-footer-nav", {
+  tagName: "div.mobile-footer-nav",
+
+  html(attrs) {
+    const buttons = [];
+
+    buttons.push(
+      this.attach("flat-button", {
+        action: "goBack",
+        icon: "chevron-left",
+        className: "btn-large",
+        disabled: !attrs.canGoBack
+      })
+    );
+
+    buttons.push(
+      this.attach("flat-button", {
+        action: "goForward",
+        icon: "chevron-right",
+        className: "btn-large",
+        disabled: !attrs.canGoForward
+      })
+    );
+
+    if (isAppWebview()) {
+      buttons.push(
+        this.attach("flat-button", {
+          action: "share",
+          icon: "link",
+          className: "btn-large"
+        })
+      );
+
+      buttons.push(
+        this.attach("flat-button", {
+          action: "dismiss",
+          icon: "chevron-down",
+          className: "btn-large"
+        })
+      );
+    }
+
+    return buttons;
+  },
+
+  dismiss() {
+    window.ReactNativeWebView.postMessage(JSON.stringify({ dismiss: true }));
+  },
+
+  share() {
+    window.ReactNativeWebView.postMessage(
+      JSON.stringify({ shareUrl: window.location.href })
+    );
+  }
+});

app/assets/stylesheets/common/foundation/variables.scss

@@ -80,6 +80,7 @@ $z-layers: (
     "overlay": 1200
   ),
   "fullscreen": 1150,
+  "mobile-footer": 1140,
   "mobile-composer": 1100,
   "header": 1000,
   "tooltip": 600,
@@ -129,6 +130,7 @@ $box-shadow: (
   "card": 0 4px 14px rgba(0, 0, 0, 0.15),
   "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
   "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
+  "mobile-footer": 0 2px 4px 1px rgba(0, 0, 0, 0.25),
   "kbd": (
     0 2px 0 rgba(0, 0, 0, 0.2),
     0 0 0 1px dark-light-choose(#fff, #000) inset

app/assets/stylesheets/mobile.scss

@@ -30,6 +30,7 @@
 @import "mobile/admin_report_counters";
 @import "mobile/menu-panel";
 @import "mobile/reviewables";
+@import "mobile/footer";
 
 // Import all component-specific files
 @import "mobile/components/*";

app/assets/stylesheets/mobile/compose.scss

@@ -10,6 +10,7 @@
   z-index: z("mobile-composer");
   .reply-area {
     padding: 0 10px;
+    padding-bottom: env(safe-area-inset-bottom);
     @media screen and (max-width: 374px) {
       padding: 0 5px;
     }
@@ -38,6 +39,8 @@
   }
 
   &.draft {
+    padding-bottom: env(safe-area-inset-bottom);
+
     .toggle-toolbar,
     .toggler {
       top: 8px;

app/assets/stylesheets/mobile/footer.scss

@@ -0,0 +1,47 @@
+// --------------------------------------------------
+// Mobile footer (displayed in DiscourseHub app and PWAs)
+// --------------------------------------------------
+
+$footer-nav-height: 55px;
+
+body.mobile-footer-nav-visible {
+  padding-bottom: $footer-nav-height + 15;
+  #topic-progress-wrapper,
+  #reply-control.draft {
+    bottom: $footer-nav-height;
+  }
+}
+
+.mobile-footer {
+  background-color: $header_background;
+  box-shadow: shadow("mobile-footer");
+  height: $footer-nav-height;
+  position: fixed;
+  bottom: -$footer-nav-height;
+  left: 0;
+  width: 100%;
+  z-index: z("mobile-footer");
+  transition: all linear 0.15s;
+
+  .d-icon {
+    color: $header_primary-low-mid;
+  }
+
+  &.visible {
+    bottom: 0px;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .mobile-footer-nav {
+    display: flex;
+    justify-content: "space-evenly";
+    @include unselectable;
+    button {
+      flex: 1;
+      margin: 12px;
+      &:disabled {
+        opacity: 0.6;
+      }
+    }
+  }
+}

app/assets/stylesheets/mobile/topic.scss

@@ -51,6 +51,7 @@
   bottom: 0;
   z-index: z("timeline");
   margin-right: 148px;
+  margin-bottom: env(safe-area-inset-bottom);
   .topic-admin-menu-button-container .toggle-admin-menu {
     height: 43px;
   }
@@ -105,7 +106,6 @@
   background-color: $secondary;
   color: $tertiary;
   border: 1px solid $tertiary-low;
-  border-bottom: none;
   width: 145px;
   height: 42px;
 

app/views/layouts/_head.html.erb

@@ -9,7 +9,7 @@
 <%- end %>
 <meta name="theme-color" content="#<%= ColorScheme.hex_for_name('header_background', scheme_id) %>">
 <% if mobile_view? %>
-<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
 <% else %>
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
 <% end %>

lib/svg_sprite/svg_sprite.rb

@@ -42,6 +42,7 @@ module SvgSprite
     "check-circle",
     "check-square",
     "chevron-down",
+    "chevron-left",
     "chevron-right",
     "chevron-up",
     "circle",