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

This commit is contained in:
Kris 2023-08-03 12:05:58 -04:00 committed by GitHub
parent c344d0f519
commit 71c9104e48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 130 deletions

1
.discourse-compatibility Normal file
View File

@ -0,0 +1 @@
< 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13

View File

@ -1,7 +1,8 @@
.d-header { @if $links_position == "right" {
&.hide-menus { .before-header-panel-outlet {
.headerLink:not(.keep) { margin-left: auto;
display: none; + .panel {
margin-left: 0;
} }
} }
} }
@ -9,29 +10,31 @@
.custom-header-links { .custom-header-links {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin: 0; margin-left: auto;
@if $links_position == "left" {
margin-left: 1em;
&--hide-links {
display: none;
}
}
.headerLink { .headerLink {
list-style: none; list-style: none;
a { a {
padding: 6px 10px; padding: 0.35em 0.6em;
color: var(--header_primary); color: var(--header_primary);
font-size: $font-up-1; font-size: var(--font-up-1);
} }
} }
}
.desktop-view .vmo, &--hide-links {
.mobile-view .vdo { .headerLink:not(.headerLink--keep) {
display: none !important;
}
@if $links_position == left {
.custom-header-links {
margin-left: 1em;
}
.hide-menus {
.custom-header-links {
display: none; display: none;
} }
} }
} }
.desktop-view .headerLink--vmo,
.mobile-view .headerLink--vdo {
display: none;
}

View File

@ -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}}

View File

@ -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;
}, []);
}
}

View File

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

View File

@ -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;
}
},
});
}
});
},
};