REFACTOR: move widget to an ember component (#34)
This commit is contained in:
Kris
GitHub
parent
c344d0f519
commit
71c9104e48
|
|
@ -0,0 +1 @@
|
||||||
|
< 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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}}
|
||||||
|
|
@ -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;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<CustomHeaderLinks @scrolledTopic={{@outletArgs.attrs.topic}} />
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue