Various updates

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.github/workflows/discourse-theme.yml

@@ -0,0 +1,11 @@
+name: Discourse Theme
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

.gitignore

@@ -1,2 +1,2 @@
-*.swp
-*.swo
+node_modules
+.discourse-site

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

README.md

@@ -17,13 +17,13 @@ Tabs are:
 
 ### Screenshots:
 
-<img src="demo-bright-1.png" height="500">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/3a5d64c2-7ffb-45a3-bdf3-c9db39c52d7c" height="500">
 
-<img src="demo-bright-2.png" height="300">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/f5fcbc64-f88d-448b-9c84-3b2f18a4cc1d" height="300">
 
-<img src="demo-dark-1.png" height="300">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/a3548b72-7cd5-4698-b324-600c3bd11630" height="300">
 
-<img src="demo-dark-2.png" height="500">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/9028589b-45ff-44aa-8bb9-c6b4cad219fb" height="500">
 
 ### Installation
 

javascripts/d-tab-bar/initializers/init-tab-bar.js

@@ -1,6 +1,7 @@
+/* eslint ember/no-private-routing-service: 0 */
+
 import { withPluginApi } from "discourse/lib/plugin-api";
-import discourseComputed from "discourse-common/utils/decorators";
-import discourseURL from "discourse/lib/url";
+import { parseTabsSettings, routeToURL } from "../lib/helpers";
 
 function highlight(destination) {
   const tabs = document.querySelectorAll(".d-tab-bar .tab");
@@ -14,30 +15,17 @@ function highlight(destination) {
 }
 
 function compareURLs(url1, url2) {
-  if (url1 === decodeURI(url2)) return true;
+  if (url1 === decodeURI(url2)) {
+    return true;
+  }
   if (!settings.match_url_params) {
     return (
       url1 &&
       url2 &&
       url1.replace(/(\?|#).*/g, "") === url2.replace(/(\?|#).*/g, "")
     );
   }
-  return false
-}
-
-function routeToURL(router, route, user) {
-  const needParams = router._routerMicrolib.recognizer.names[
-    route
-  ].handlers.some((handler) => handler.names.length > 0);
-  let url;
-  if (needParams) {
-    // assume the param it needs is username... very difficult to guess
-    // the params correctly let alone passing the correct data
-    url = router.generate(route, { username: user.username });
-  } else {
-    url = router.generate(route);
-  }
-  return url;
+  return false;
 }
 
 export default {
@@ -46,31 +34,26 @@ export default {
   initialize() {
     withPluginApi("0.8.13", (api) => {
       const site = api.container.lookup("site:main");
-      if (!site.mobileView) return;
-      const tabs = [];
-      const router = api.container.lookup("router:main");
-      [
-        settings.tab_1_settings,
-        settings.tab_2_settings,
-        settings.tab_3_settings,
-        settings.tab_4_settings,
-        settings.tab_5_settings,
-        settings.tab_6_settings,
-      ].forEach((setting) => {
-        const props = setting.split(",").map((s) => s.trim());
-        if (props.length >= 3 && props[3] !== "false") {
-          tabs.push({
-            title: props[0],
-            icon: props[1],
-            destination: props[2],
-          });
-        }
-      });
+      if (!site.mobileView) {
+        return;
+      }
 
       const user = api.getCurrentUser();
+      if (!user) {
+        return;
+      }
+
+      const tabs = parseTabsSettings();
+      if (tabs.length === 0) {
+        return;
+      }
+
+      const router = api.container.lookup("router:main");
+
       tabs.forEach((tab) => {
-        if (!user) return;
-        if (tab.destination.indexOf("/") !== -1) return;
+        if (tab.destination.indexOf("/") !== -1) {
+          return;
+        }
         // we need this to highlight tab when you navigate to
         // a subroute of a tab's route
         api.container.lookup(`route:${tab.destination}`).reopen({
@@ -86,8 +69,9 @@ export default {
               );
               if (usernameParam) {
                 const target = this.modelFor("user");
-                if (target && user && target.username === user.username)
+                if (target?.username === user.username) {
                   highlight(tab.destination);
+                }
               } else {
                 highlight(tab.destination);
               }
@@ -99,82 +83,20 @@ export default {
       });
 
       api.onAppEvent("page:changed", (data) => {
-        const tab = tabs.find((tab) => {
-          return !router.hasRoute(tab.destination)
-            ? compareURLs(tab.destination, data.url)
-            : tab.destination === data.currentRouteName &&
-                compareURLs(
-                  routeToURL(router, tab.destination, user),
-                  data.url
-                );
+        const match = tabs.find((tab) => {
+          if (!router.hasRoute(tab.destination)) {
+            return compareURLs(tab.destination, data.url);
+          } else {
+            return (
+              tab.destination === data.currentRouteName &&
+              compareURLs(routeToURL(router, tab.destination, user), data.url)
+            );
+          }
         });
-        if (tab) {
-          highlight(tab.destination);
+        if (match) {
+          highlight(match.destination);
         }
       });
-
-      api.registerConnectorClass("above-footer", "d-tab-bar", {
-        shouldRender() {
-          return !Ember.isEmpty(user);
-        },
-
-        setupComponent() {
-          let lastScrollTop = 0;
-          const scrollMax = 30;
-          const hiddenTabBarClass = "tab-bar-hidden";
-          const scrollCallback = (() => {
-            const scrollTop = window.scrollY;
-            const body = document.body;
-            if (
-              lastScrollTop < scrollTop &&
-              scrollTop > scrollMax &&
-              !body.classList.contains(hiddenTabBarClass)
-            ) {
-              body.classList.add(hiddenTabBarClass);
-            } else if (
-              lastScrollTop > scrollTop &&
-              body.classList.contains(hiddenTabBarClass)
-            ) {
-              body.classList.remove(hiddenTabBarClass);
-            }
-            lastScrollTop = scrollTop;
-          }).bind(this);
-
-          this.reopen({
-            tabs,
-
-            @discourseComputed("tabs")
-            width(tabs) {
-              if (tabs) {
-                const length = tabs.length;
-                const percentage = length ? 100 / length : length;
-                return Ember.String.htmlSafe(`width: ${percentage}%;`);
-              }
-            },
-
-            didInsertElement() {
-              this._super(...arguments);
-              document.addEventListener("scroll", scrollCallback);
-            },
-
-            willDestroyElement() {
-              this._super(...arguments);
-              document.removeEventListener("scroll", scrollCallback);
-            },
-          });
-        },
-
-        actions: {
-          navigate(tab) {
-            const destination = tab.destination;
-            let url = destination;
-            if (router.hasRoute(destination)) {
-              url = routeToURL(router, destination, user);
-            }
-            discourseURL.routeTo(url);
-          },
-        },
-      });
     });
   },
 };

javascripts/d-tab-bar/lib/helpers.js

@@ -0,0 +1,38 @@
+/* eslint ember/no-private-routing-service: 0 */
+
+export function parseTabsSettings() {
+  const list = [];
+  [
+    settings.tab_1_settings,
+    settings.tab_2_settings,
+    settings.tab_3_settings,
+    settings.tab_4_settings,
+    settings.tab_5_settings,
+    settings.tab_6_settings,
+  ].forEach((setting) => {
+    const props = setting.split(",").map((s) => s.trim());
+    if (props.length >= 3 && props[3] !== "false") {
+      list.push({
+        title: props[0],
+        icon: props[1],
+        destination: props[2],
+      });
+    }
+  });
+  return list;
+}
+
+export function routeToURL(router, route, user) {
+  const needParams = router._routerMicrolib.recognizer.names[
+    route
+  ].handlers.some((handler) => handler.names.length > 0);
+  let url;
+  if (needParams) {
+    // assume the param it needs is username... very difficult to guess
+    // the params correctly let alone passing the correct data
+    url = router.generate(route, { username: user.username });
+  } else {
+    url = router.generate(route);
+  }
+  return url;
+}

javascripts/discourse/connectors/above-footer/d-tab-bar.gjs

@@ -0,0 +1,94 @@
+/* eslint ember/no-private-routing-service: 0 */
+
+import Component from "@ember/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import discourseURL from "discourse/lib/url";
+import dIcon from "discourse-common/helpers/d-icon";
+import and from "truth-helpers/helpers/and";
+import { parseTabsSettings, routeToURL } from "../../../d-tab-bar/lib/helpers";
+
+const SCROLL_MAX = 30;
+const HIDDEN_TAB_BAR_CLASS = "tab-bar-hidden";
+
+export default class DTabBar extends Component {
+  @service router;
+  @service currentUser;
+
+  tabs = parseTabsSettings();
+  lastScrollTop = 0;
+
+  get width() {
+    const length = this.tabs.length;
+    const percentage = length ? 100 / length : length;
+    return htmlSafe(`width: ${percentage}%;`);
+  }
+
+  scrollListener() {
+    const scrollTop = window.scrollY;
+    const body = document.body;
+    if (
+      this.lastScrollTop < scrollTop &&
+      scrollTop > SCROLL_MAX &&
+      !body.classList.contains(HIDDEN_TAB_BAR_CLASS)
+    ) {
+      body.classList.add(HIDDEN_TAB_BAR_CLASS);
+    } else if (
+      this.lastScrollTop > scrollTop &&
+      body.classList.contains(HIDDEN_TAB_BAR_CLASS)
+    ) {
+      body.classList.remove(HIDDEN_TAB_BAR_CLASS);
+    }
+    this.lastScrollTop = scrollTop;
+  }
+
+  @action
+  navigate(tab) {
+    const destination = tab.destination;
+    let url = destination;
+    if (this.router._router.hasRoute(destination)) {
+      url = routeToURL(this.router._router, destination, this.currentUser);
+    }
+    discourseURL.routeTo(url);
+  }
+
+  @action
+  setupScrollListener() {
+    document.addEventListener("scroll", this.scrollListener);
+  }
+
+  @action
+  removeScrollListener() {
+    document.removeEventListener("scroll", this.scrollListener);
+  }
+
+  <template>
+    {{#if (and this.currentUser this.tabs.length)}}
+      <div
+        class="d-tab-bar"
+        {{didInsert this.setupScrollListener}}
+        {{willDestroy this.removeScrollListener}}
+      >
+        {{#each this.tabs as |tab|}}
+          <div
+            role="link"
+            style={{this.width}}
+            class="tab"
+            data-destination={{tab.destination}}
+            {{on "click" (fn this.navigate tab)}}
+          >
+            {{dIcon tab.icon}}
+            {{#if settings.display_icon_titles}}
+              <p class="title">{{tab.title}}</p>
+            {{/if}}
+          </div>
+        {{/each}}
+      </div>
+    {{/if}}
+  </template>
+}

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "discourse-tab-bar",
+  "version": "0.0.1",
+  "repository": "https://github.com/OsamaSayegh/discourse-tab-bar-theme",
+  "author": "Osama Sayegh",
+  "license": "MIT",
+  "devDependencies": {
+    "@discourse/lint-configs": "^1.3.1",
+    "ember-template-lint": "^5.13.0",
+    "eslint": "^8.55.0",
+    "prettier": "^2.8.8"
+  }
+}