Skip to content

Commit

Permalink
refactor theme bar, add extra param, add read from config option
Browse files Browse the repository at this point in the history
  • Loading branch information
@JugglerX
JugglerX committed Nov 12, 2020
1 parent aaef62c commit eb88a29
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 47 deletions.
1 change: 1 addition & 0 deletions src/supporting-files/base.html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ module.exports = `<!doctype html>
<html lang="en">
<head>
{% if stackbit_banner.show_banner %}<link rel="stylesheet" type="text/css" href="{{ "assets/css/stackbit-banner.css" | relative_url }}">{% endif %}
{% if stackbit_banner.show_banner %}<script type="text/javascript" src="/themeBarConfig.js"></script>{% endif %}
{% include "html_head.html" %}
{% if liveReload %}<script type="text/javascript" src={{ "assets/js/live-reload.js" | relative_url }}></script>{% endif %}
</head>
Expand Down
145 changes: 98 additions & 47 deletions src/supporting-files/stackbit-banner.html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = `<div id="theme-bar" class="theme-bar theme-bar-fixed theme-bar
<div class="theme-bar-center">
{% if stackbit_banner.github_url %}
<a
class="theme-bar-button theme-bar-button-outlined theme-bar-fork"
class="theme-bar-button theme-bar-button-outlined theme-bar-fork theme-bar-fork-link"
href="{% if stackbit_banner.github_url %}{{ stackbit_banner.github_url }}{% endif %}"
>
<svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 384 512">
Expand All @@ -16,12 +16,12 @@ module.exports = `<div id="theme-bar" class="theme-bar theme-bar-fixed theme-bar
d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"
></path>
</svg>
<span>Fork</span>
<span class="theme-bar-fork-name">Fork</span>
</a>
{% endif %}
{% if stackbit_banner.create_url %}
<a
class="theme-bar-button theme-bar-button-primary theme-bar-new-site"
class="theme-bar-button theme-bar-button-primary theme-bar-new-site theme-bar-new-site-link"
href="{{ stackbit_banner.create_url }}"
>
<svg fill="currentColor" viewBox="0 0 131 107">
Expand All @@ -33,7 +33,7 @@ module.exports = `<div id="theme-bar" class="theme-bar theme-bar-fixed theme-bar
</defs>
<use fill-rule="evenodd" xlink:href="#a" />
</svg>
<span>New Site</span>
<span class="theme-bar-new-site-name">New Site</span>
</a>
{% endif %}
</div>
Expand All @@ -53,52 +53,103 @@ module.exports = `<div id="theme-bar" class="theme-bar theme-bar-fixed theme-bar
</div>
<script>
var body = document.querySelector("body");
var themebar = document.querySelector("#theme-bar");
var searchParams = window.location.search
.slice(1)
.split('&')
.reduce((res, cur) => {
const [key, value] = cur.split('=');
res[key] = value || true;
return res;
}, {});
var hideThemeBar = sessionStorage.getItem('hideThemeBar') || searchParams.themeBarHidden;
if (searchParams.themeBarTitle) {
themebar.querySelector('.theme-bar-name').textContent = decodeURIComponent(searchParams.themeBarTitle);
}
if (searchParams.themeBarFork) {
var forkButton = themebar.querySelector('.theme-bar-fork');
if (searchParams.themeBarFork === 'false') {
forkButton.style.display = 'none';
} else {
forkButton.querySelector('span').textContent = decodeURIComponent(searchParams.themeBarFork);
}
}
if (searchParams.themeBarNewSite) {
var newSiteButton = themebar.querySelector('.theme-bar-new-site');
if (searchParams.themeBarNewSite === 'false') {
newSiteButton.style.display = 'none';
} else {
newSiteButton.querySelector('span').textContent = decodeURIComponent(searchParams.themeBarNewSite);
}
}
if (searchParams.themeBarUserGroup) {
var newSiteButton = themebar.querySelector('.theme-bar-new-site');
var joiner = newSiteButton.search.length ? '&' : '';
newSiteButton.search += joiner + 'userGroup=' + searchParams.themeBarUserGroup;
}
const body = document.querySelector("body");
const themebar = document.querySelector("#theme-bar");
const searchParams = new URLSearchParams(window.location.search);
// Hide themebar from localstorage
const hideThemeBar = sessionStorage.getItem("hideThemeBar") || searchParams.get("themeBarHidden");
if (body && !hideThemeBar) {
body.classList.add("has-theme-bar");
themebar.classList.remove("theme-bar-hidden");
}
document
.querySelector("#remove-theme-bar")
.addEventListener("click", function(e) {
e.preventDefault();
body.classList.remove("has-theme-bar");
themebar.classList.add("theme-bar-hidden");
sessionStorage.setItem('hideThemeBar', true);
});
const demo = searchParams.get("demo")
let themeBarProperties = {}
// themeBarConfig is loaded from themeBarConfig.js in the <head> of this document. The file is generated seperately in \`stackbit-themes\` repo at build time.
if (demo && themeBarConfig) {
if (themeBarConfig[demo]) {
themeBarProperties = themeBarConfig[demo]
}
} else {
themeBarProperties = {
themeBarTitle: searchParams.get("themeBarTitle"),
themeBarFork: searchParams.get("themeBarFork"),
themeBarNewSite: searchParams.get("themeBarNewSite"),
themeBarNewSiteLink: searchParams.get("themeBarNewSiteLink"),
themeBarNewSiteTheme: searchParams.get("themeBarNewSiteTheme"),
themeBarUserGroup: searchParams.get("themeBarUserGroup")
};
}
updateThemeBar = props => {
const uiThemeBarTitle = themebar.querySelector(".theme-bar-name");
const uiThemeBarForkLink = themebar.querySelector(".theme-bar-fork-link");
const uiThemeBarForkName = themebar.querySelector(".theme-bar-fork-name");
const uiThemeBarNewSiteLink = themebar.querySelector(".theme-bar-new-site-link");
const uiThemeBarNewSiteName = themebar.querySelector(".theme-bar-new-site-name");
// Update Title in top left
if (props.themeBarTitle) {
uiThemeBarTitle.textContent = props.themeBarTitle;
}
// Update fork button title or visibility
if (props.themeBarFork) {
if (props.themeBarFork === "false") {
uiThemeBarForkLink.style.display = "none";
} else {
uiThemeBarForkName.textContent = props.themeBarFork;
}
}
// Update create site button title or visibility
if (props.themeBarNewSite) {
if (props.themeBarNewSite === "false") {
uiThemeBarNewSiteLink.style.display = "none";
} else {
uiThemeBarNewSiteName.textContent = props.themeBarNewSite;
}
}
// Update button links and pass through extra query params
let newForkLink = new URL(uiThemeBarForkLink.href)
let newSiteLink = new URL(uiThemeBarNewSiteLink.href);
if (props.themeBarNewSiteLink) {
newSiteLink = new URL(props.themeBarNewSiteLink);
}
if (props.themeBarForkLink) {
newForkLink = new URL(props.themeBarForkLink);
}
if (props.themeBarUserGroup) {
newSiteLink.searchParams.set('userGroup', props.themeBarUserGroup)
}
if (props.themeBarNewSiteTheme) {
newSiteLink.searchParams.set('theme', props.themeBarNewSiteTheme)
}
if (props.themeBarNewSiteParams) {
for (const [key, value] of Object.entries(props.themeBarNewSiteParams)) {
newSiteLink.searchParams.set(key, value);
}
}
uiThemeBarNewSiteLink.setAttribute("href", newSiteLink.toString());
uiThemeBarForkLink.setAttribute("href", newForkLink.toString());
};
updateThemeBar(themeBarProperties)
document.querySelector("#remove-theme-bar").addEventListener("click", function(e) {
e.preventDefault();
body.classList.remove("has-theme-bar");
themebar.classList.add("theme-bar-hidden");
sessionStorage.setItem("hideThemeBar", true);
});
</script>
`;

0 comments on commit eb88a29

Please sign in to comment.