From 71c9104e4885e0b9986e69aae3882f112e7f08ce Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 3 Aug 2023 12:05:58 -0400 Subject: [PATCH] REFACTOR: move widget to an ember component (#34) --- .discourse-compatibility | 1 + common/common.scss | 41 ++++--- .../components/custom-header-links.hbs | 25 ++++ .../components/custom-header-links.js | 45 +++++++ .../custom-header-link-connector.hbs | 1 + .../discourse-custom-header-links.js | 111 ------------------ 6 files changed, 94 insertions(+), 130 deletions(-) create mode 100644 .discourse-compatibility create mode 100644 javascripts/discourse/components/custom-header-links.hbs create mode 100644 javascripts/discourse/components/custom-header-links.js create mode 100644 javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs delete mode 100644 javascripts/discourse/initializers/discourse-custom-header-links.js diff --git a/.discourse-compatibility b/.discourse-compatibility new file mode 100644 index 0000000..8b93f2d --- /dev/null +++ b/.discourse-compatibility @@ -0,0 +1 @@ +< 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13 \ No newline at end of file diff --git a/common/common.scss b/common/common.scss index 3a73ba9..6ed5ad8 100644 --- a/common/common.scss +++ b/common/common.scss @@ -1,7 +1,8 @@ -.d-header { - &.hide-menus { - .headerLink:not(.keep) { - display: none; +@if $links_position == "right" { + .before-header-panel-outlet { + margin-left: auto; + + .panel { + margin-left: 0; } } } @@ -9,29 +10,31 @@ .custom-header-links { display: inline-flex; align-items: center; - margin: 0; + margin-left: auto; + @if $links_position == "left" { + margin-left: 1em; + &--hide-links { + display: none; + } + } + .headerLink { list-style: none; a { - padding: 6px 10px; + padding: 0.35em 0.6em; color: var(--header_primary); - font-size: $font-up-1; + font-size: var(--font-up-1); } } -} -.desktop-view .vmo, -.mobile-view .vdo { - display: none !important; -} - -@if $links_position == left { - .custom-header-links { - margin-left: 1em; - } - .hide-menus { - .custom-header-links { + &--hide-links { + .headerLink:not(.headerLink--keep) { display: none; } } } + +.desktop-view .headerLink--vmo, +.mobile-view .headerLink--vdo { + display: none; +} diff --git a/javascripts/discourse/components/custom-header-links.hbs b/javascripts/discourse/components/custom-header-links.hbs new file mode 100644 index 0000000..4038329 --- /dev/null +++ b/javascripts/discourse/components/custom-header-links.hbs @@ -0,0 +1,25 @@ +{{#if this.shouldShow}} + +{{/if}} \ No newline at end of file diff --git a/javascripts/discourse/components/custom-header-links.js b/javascripts/discourse/components/custom-header-links.js new file mode 100644 index 0000000..934559f --- /dev/null +++ b/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; + }, []); + } +} diff --git a/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs b/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs new file mode 100644 index 0000000..e006e1b --- /dev/null +++ b/javascripts/discourse/connectors/before-header-panel/custom-header-link-connector.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/javascripts/discourse/initializers/discourse-custom-header-links.js b/javascripts/discourse/initializers/discourse-custom-header-links.js deleted file mode 100644 index 25cc9d9..0000000 --- a/javascripts/discourse/initializers/discourse-custom-header-links.js +++ /dev/null @@ -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; - } - }, - }); - } - }); - }, -};