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 {
|
||||
&.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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