REFACTOR: move widget to an ember component (#34)

javascripts/discourse/components/custom-header-links.hbs

@@ -0,0 +1,25 @@
+{{#if this.shouldShow}}
+  <ul
+    class="custom-header-links
+      {{if @scrolledTopic 'custom-header-links--hide-links'}}"
+  >
+    {{#each this.links as |link|}}
+      <li
+        class="headerLink
+          {{link.device}}
+          {{link.keepOnScrollClass}}
+          {{link.locale}}
+          {{link.linkClass}}
+          {{link.keepOnScroll}}"
+      >
+        <a
+          title={{link.anchorAttributes.title}}
+          href={{link.anchorAttributes.href}}
+          target={{link.anchorAttributes.target}}
+        >
+          {{link.linkText}}
+        </a>
+      </li>
+    {{/each}}
+  </ul>
+{{/if}}

javascripts/discourse/components/custom-header-links.js

@@ -0,0 +1,45 @@
+import Component from "@glimmer/component";
+import { dasherize } from "@ember/string";
+
+export default class CustomHeaderLinks extends Component {
+  get shouldShow() {
+    return settings.Custom_header_links?.length > 0;
+  }
+
+  get links() {
+    return settings.Custom_header_links.split("|").reduce((result, item) => {
+      let [
+        linkText,
+        linkTitle,
+        linkHref,
+        device,
+        target = "",
+        keepOnScroll,
+        locale,
+      ] = item.split(",").map((s) => s.trim());
+
+      if (!linkText || (locale && document.documentElement.lang !== locale)) {
+        return result;
+      }
+
+      const linkClass = `${dasherize(linkText)}-custom-header-links`; // legacy name
+
+      const anchorAttributes = {
+        title: linkTitle,
+        href: linkHref,
+        target: target === "self" ? "" : "_blank",
+      };
+
+      result.push({
+        device: `headerLink--${device}`,
+        keepOnScroll: `headerLink--${keepOnScroll}`,
+        locale: `headerLink--${locale}`,
+        linkClass,
+        anchorAttributes,
+        linkText,
+      });
+
+      return result;
+    }, []);
+  }
+}

javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs

@@ -0,0 +1 @@
+<CustomHeaderLinks @scrolledTopic={{@outletArgs.attrs.topic}} />

javascripts/discourse/initializers/discourse-custom-header-links.js

@@ -1,111 +0,0 @@
-import { h } from "virtual-dom";
-import { withPluginApi } from "discourse/lib/plugin-api";
-import { wantsNewWindow } from "discourse/lib/intercept-click";
-import DiscourseURL from "discourse/lib/url";
-
-export default {
-  name: "discourse-custom-header-links",
-
-  initialize() {
-    withPluginApi("0.8.20", (api) => {
-      const customHeaderLinks = settings.Custom_header_links;
-      if (!customHeaderLinks.length) {
-        return;
-      }
-
-      const linksPosition =
-        settings.links_position === "right"
-          ? "header-buttons:before"
-          : "home-logo:after";
-
-      const headerLinks = [];
-
-      customHeaderLinks
-        .split("|")
-        .filter(Boolean)
-        .map((customHeaderLinksArray) => {
-          const [
-            linkText,
-            linkTitle,
-            linkHref,
-            device,
-            target,
-            keepOnScroll,
-            locale,
-          ] = customHeaderLinksArray
-            .split(",")
-            .filter(Boolean)
-            .map((x) => x.trim());
-
-          const deviceClass = `.${device}`;
-          const linkTarget = target === "self" ? "" : "_blank";
-          const keepOnScrollClass = keepOnScroll === "keep" ? ".keep" : "";
-          const linkClass = `.${linkText
-            .toLowerCase()
-            .replace(/\s/gi, "-")}-custom-header-links`;
-
-          const localeClass = locale === undefined ? "" : `.${locale}`;
-
-          const anchorAttributes = {
-            title: linkTitle,
-            href: linkHref,
-          };
-          if (linkTarget) {
-            anchorAttributes.target = linkTarget;
-          }
-
-          if (
-            locale !== undefined &&
-            document.documentElement.lang &&
-            document.documentElement.lang !== locale
-          ) {
-            return;
-          }
-
-          headerLinks.push(
-            h(
-              `li.headerLink${deviceClass}${keepOnScrollClass}${localeClass}${linkClass}`,
-              h("a", anchorAttributes, linkText)
-            )
-          );
-        });
-
-      api.decorateWidget(linksPosition, (helper) => {
-        return helper.h("ul.custom-header-links", headerLinks);
-      });
-
-      api.decorateWidget("home-logo:after", (helper) => {
-        const dHeader = document.querySelector(".d-header");
-
-        if (!dHeader) {
-          return;
-        }
-
-        const isTitleVisible = helper.attrs.minimized;
-        if (isTitleVisible) {
-          dHeader.classList.add("hide-menus");
-        } else {
-          dHeader.classList.remove("hide-menus");
-        }
-      });
-
-      if (settings.links_position === "left") {
-        // if links are aligned left, we need to be able to open in a new tab
-        api.reopenWidget("home-logo", {
-          click(e) {
-            if (e.target.id === "site-logo") {
-              if (wantsNewWindow(e)) {
-                return false;
-              }
-              e.preventDefault();
-
-              DiscourseURL.routeToTag($(e.target).closest("a")[0]);
-
-              return false;
-            }
-          },
-        });
-      }
-    });
-  },
-};