You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
14 KiB
390 lines
14 KiB
function HSDemo() {
|
|
var settings = {
|
|
headerMain: document.getElementById("headerMain").innerHTML,
|
|
headerFluid: document.getElementById("headerFluid").innerHTML,
|
|
headerDouble: document.getElementById("headerDouble").innerHTML,
|
|
sidebarMain: document.getElementById("sidebarMain").innerHTML,
|
|
sidebarCompact: document.getElementById("sidebarCompact").innerHTML,
|
|
};
|
|
|
|
// Layouts
|
|
var body = document.getElementsByTagName("body")[0],
|
|
header = document.getElementsByClassName("navbar")[0],
|
|
navbarVerticalAside = document.getElementsByClassName(
|
|
"navbar-vertical-aside"
|
|
)[0]; // Radios
|
|
|
|
var radiosSkin = Array.prototype.slice.call(
|
|
document.querySelectorAll(
|
|
'input[type=radio][name="layoutSkinsRadio"]'
|
|
),
|
|
0
|
|
),
|
|
radiosSidebarMode = Array.prototype.slice.call(
|
|
document.querySelectorAll(
|
|
'input[type=radio][name="sidebarLayoutOptions"]'
|
|
),
|
|
0
|
|
),
|
|
radiosHeaderMode = Array.prototype.slice.call(
|
|
document.querySelectorAll(
|
|
'input[type=radio][name="headerLayoutOptions"]'
|
|
),
|
|
0
|
|
); // Local Storage
|
|
|
|
var skin =
|
|
window.localStorage.getItem("hs-builder-skin") === null
|
|
? "default"
|
|
: window.localStorage.getItem("hs-builder-skin"),
|
|
sidebarMode =
|
|
window.localStorage.getItem("hs-builder-sidebar-mode") === null
|
|
? "default"
|
|
: window.localStorage.getItem("hs-builder-sidebar-mode"),
|
|
headerMode =
|
|
window.localStorage.getItem("hs-builder-header-mode") === null
|
|
? "false"
|
|
: window.localStorage.getItem("hs-builder-header-mode");
|
|
|
|
var appendLayout = function appendLayout(str) {
|
|
body.insertAdjacentHTML("afterbegin", str);
|
|
};
|
|
|
|
function addContainer() {
|
|
var style = document.createElement("style");
|
|
document.head.appendChild(style);
|
|
style.textContent =
|
|
" \n .content,\n .footer {\n width: 100%;\n padding-inline-end: 15px !important;\n padding-inline-start: 15px !important;\n margin-inline-end: auto;\n margin-inline-start: auto;\n }\n \n @media (min-width: 1400px) {\n .content,\n .footer {\n max-width: 1320px;\n }\n } \n \n @media (min-width: 1400px) {\n .content,\n .footer {\n max-width: 1320px;\n }\n }\n ";
|
|
}
|
|
|
|
if (sidebarMode !== false || headerMode !== false) {
|
|
body.classList.remove("navbar-vertical-aside-mini-mode");
|
|
}
|
|
|
|
if (headerMode == "false") {
|
|
if (!sidebarMode || sidebarMode === "default") {
|
|
appendLayout(settings.sidebarMain);
|
|
} else if (sidebarMode === "navbar-vertical-aside-compact-mode") {
|
|
appendLayout(settings.sidebarCompact);
|
|
document.body.className +=
|
|
" navbar-vertical-aside-compact-mode navbar-vertical-aside-compact-mini-mode";
|
|
var style = document.createElement("style");
|
|
document.head.appendChild(style);
|
|
style.textContent =
|
|
"\n@media(min-width: 993px) {\n.js-navbar-vertical-aside-toggle-invoker {\ndisplay: none !important;\n}\n}\n";
|
|
} else if (sidebarMode === "navbar-vertical-aside-mini-mode") {
|
|
appendLayout(settings.sidebarMain);
|
|
document.body.className += " navbar-vertical-aside-mini-mode";
|
|
}
|
|
|
|
document.body.className +=
|
|
" footer-offset has-navbar-vertical-aside navbar-vertical-aside-show-xl";
|
|
}
|
|
|
|
if (headerMode === "single") {
|
|
if (skin === "navbar-dark") {
|
|
settings.headerFluid = settings.headerFluid.replace(
|
|
/btn-ghost-secondary/g,
|
|
"btn-ghost-light"
|
|
);
|
|
}
|
|
|
|
appendLayout(settings.headerFluid);
|
|
body.classList.add("footer-offset");
|
|
} else if (headerMode === "single-container") {
|
|
if (skin === "navbar-dark") {
|
|
settings.headerFluid = settings.headerFluid.replace(
|
|
/btn-ghost-secondary/g,
|
|
"btn-ghost-light"
|
|
);
|
|
}
|
|
|
|
appendLayout(settings.headerFluid);
|
|
body.classList.add("footer-offset");
|
|
var _header = document.getElementsByClassName("navbar")[0],
|
|
oldHeaderContent = _header.innerHTML;
|
|
_header.innerHTML =
|
|
'<div class="container">' + oldHeaderContent + "</div>";
|
|
addContainer();
|
|
} else if (headerMode === "double") {
|
|
appendLayout(settings.headerDouble);
|
|
body.classList.add("footer-offset");
|
|
|
|
if ("scrollRestoration" in history) {
|
|
// Back off, browser, I got this...
|
|
history.scrollRestoration = "manual";
|
|
}
|
|
} else if (headerMode === "double-container") {
|
|
appendLayout(settings.headerDouble);
|
|
body.classList.add("footer-offset");
|
|
var _header2 = document.getElementsByClassName("navbar")[0],
|
|
fisrtElement = _header2.firstElementChild;
|
|
fisrtElement.innerHTML =
|
|
'<div class="navbar-dark w-100"> <div class="container">' +
|
|
fisrtElement.firstElementChild.innerHTML +
|
|
"</div> </div>";
|
|
_header2.innerHTML =
|
|
fisrtElement.innerHTML +
|
|
' <div class="container">' +
|
|
_header2.lastElementChild.innerHTML +
|
|
"</div>";
|
|
addContainer();
|
|
|
|
if ("scrollRestoration" in history) {
|
|
// Back off, browser, I got this...
|
|
history.scrollRestoration = "manual";
|
|
}
|
|
} else {
|
|
appendLayout(settings.headerMain);
|
|
}
|
|
|
|
if (skin && headerMode !== "double" && headerMode !== "double-container") {
|
|
var _header3 = document.getElementsByClassName("navbar")[0],
|
|
sidebar = document.getElementsByClassName(
|
|
"navbar-vertical-aside"
|
|
)[0];
|
|
|
|
if (headerMode === "single" || headerMode === "single-container") {
|
|
_header3.classList.add(skin);
|
|
}
|
|
|
|
if (sidebar) {
|
|
sidebar.classList.add(skin);
|
|
}
|
|
|
|
if (skin === "navbar-light") {
|
|
if (_header3) {
|
|
_header3.classList.remove("navbar-bordered");
|
|
}
|
|
|
|
if (sidebar) {
|
|
sidebar.classList.remove("navbar-bordered");
|
|
}
|
|
} else if (skin === "navbar-dark") {
|
|
if (sidebar) {
|
|
for (
|
|
var i = 0;
|
|
i <
|
|
document.querySelectorAll("aside .navbar-brand-logo")
|
|
.length;
|
|
i++
|
|
) {
|
|
document
|
|
.querySelectorAll("aside .navbar-brand-logo")
|
|
[i].setAttribute(
|
|
"src",
|
|
document
|
|
.querySelectorAll("aside .navbar-brand-logo")[0]
|
|
.getAttribute("src")
|
|
.replace("logo.svg", "logo-white.svg")
|
|
);
|
|
}
|
|
} else {
|
|
for (
|
|
var i = 0;
|
|
i <
|
|
document.querySelectorAll("header .navbar-brand-logo")
|
|
.length;
|
|
i++
|
|
) {
|
|
document
|
|
.querySelectorAll("header .navbar-brand-logo")
|
|
[i].setAttribute(
|
|
"src",
|
|
document
|
|
.querySelectorAll(
|
|
"header .navbar-brand-logo"
|
|
)[0]
|
|
.getAttribute("src")
|
|
.replace("logo.svg", "logo-white.svg")
|
|
);
|
|
}
|
|
}
|
|
|
|
for (
|
|
var i = 0;
|
|
i <
|
|
document.getElementsByClassName("navbar-brand-logo-mini")
|
|
.length;
|
|
i++
|
|
) {
|
|
document
|
|
.getElementsByClassName("navbar-brand-logo-mini")
|
|
[i].setAttribute(
|
|
"src",
|
|
document
|
|
.getElementsByClassName("navbar-brand-logo-mini")[0]
|
|
.getAttribute("src")
|
|
.replace("logo-short.svg", "logo-short-white.svg")
|
|
);
|
|
}
|
|
|
|
for (
|
|
var i = 0;
|
|
i <
|
|
document.getElementsByClassName("navbar-brand-logo-short")
|
|
.length;
|
|
i++
|
|
) {
|
|
document
|
|
.getElementsByClassName("navbar-brand-logo-short")
|
|
[i].setAttribute(
|
|
"src",
|
|
document
|
|
.getElementsByClassName(
|
|
"navbar-brand-logo-short"
|
|
)[0]
|
|
.getAttribute("src")
|
|
.replace("logo-short.svg", "logo-short-white.svg")
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
radiosSkin.forEach(function (radio) {
|
|
if (skin === radio.value) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
radio.addEventListener("change", function () {
|
|
skin = radio.value;
|
|
});
|
|
});
|
|
radiosSidebarMode.forEach(function (radio) {
|
|
if (sidebarMode === radio.value) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
radio.addEventListener("change", function () {
|
|
sidebarMode = radio.value;
|
|
radiosSkin.forEach(function (radio) {
|
|
if (skin === radio.value) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
radio.disabled = false;
|
|
});
|
|
radiosHeaderMode.forEach(function (radio) {
|
|
radio.checked = false;
|
|
headerMode = false;
|
|
});
|
|
});
|
|
});
|
|
radiosHeaderMode.forEach(function (radio) {
|
|
if (headerMode === radio.value) {
|
|
radio.checked = true;
|
|
|
|
if (
|
|
radio.value === "double" ||
|
|
radio.value === "double-container"
|
|
) {
|
|
radiosSkin.forEach(function (radio) {
|
|
radio.checked = false;
|
|
radio.disabled = true;
|
|
});
|
|
document.getElementById(
|
|
"js-builder-disabled"
|
|
).style.opacity = 1;
|
|
}
|
|
|
|
radiosSidebarMode.forEach(function (radio) {
|
|
radio.checked = false;
|
|
});
|
|
}
|
|
|
|
radio.addEventListener("change", function (e) {
|
|
if (radio.value !== "default") {
|
|
headerMode = radio.value;
|
|
} else {
|
|
headerMode = false;
|
|
}
|
|
|
|
if (
|
|
e.target.value === "double" ||
|
|
radio.value === "double-container"
|
|
) {
|
|
radiosSkin.forEach(function (radio) {
|
|
radio.checked = false;
|
|
radio.disabled = true;
|
|
});
|
|
} else {
|
|
radiosSkin.forEach(function (radio) {
|
|
if (
|
|
(skin === false && radio.value === "default") ||
|
|
skin === radio.value
|
|
) {
|
|
radio.checked = true;
|
|
}
|
|
|
|
radio.disabled = false;
|
|
});
|
|
}
|
|
|
|
radiosSidebarMode.forEach(function (radio) {
|
|
radio.checked = false;
|
|
sidebarMode = false;
|
|
});
|
|
});
|
|
});
|
|
Array.prototype.slice
|
|
.call(document.querySelectorAll(".custom-checkbox-card-input"), 0)
|
|
.forEach(function (radio) {
|
|
radio.addEventListener("change", function () {
|
|
radiosSkin.forEach(function (radio) {
|
|
if (radio.disabled) {
|
|
document.getElementById(
|
|
"js-builder-disabled"
|
|
).style.opacity = 1;
|
|
} else {
|
|
document.getElementById(
|
|
"js-builder-disabled"
|
|
).style.opacity = 0;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
document
|
|
.getElementById("js-builder-preview")
|
|
.addEventListener("click", function () {
|
|
location.reload();
|
|
|
|
if (skin) {
|
|
window.localStorage.setItem("hs-builder-skin", skin);
|
|
}
|
|
|
|
if (sidebarMode) {
|
|
window.localStorage.setItem(
|
|
"hs-builder-sidebar-mode",
|
|
sidebarMode
|
|
);
|
|
}
|
|
|
|
window.localStorage.setItem("hs-builder-header-mode", headerMode);
|
|
});
|
|
document
|
|
.getElementById("js-builder-reset")
|
|
.addEventListener("click", function () {
|
|
window.localStorage.removeItem("hs-builder-skin");
|
|
window.localStorage.removeItem("hs-builder-sidebar-mode");
|
|
window.localStorage.removeItem("hs-builder-header-mode");
|
|
location.reload();
|
|
});
|
|
|
|
document
|
|
.getElementById("headerMain")
|
|
.parentNode.removeChild(document.getElementById("headerMain"));
|
|
document
|
|
.getElementById("headerFluid")
|
|
.parentNode.removeChild(document.getElementById("headerFluid"));
|
|
document
|
|
.getElementById("headerDouble")
|
|
.parentNode.removeChild(document.getElementById("headerDouble"));
|
|
document
|
|
.getElementById("sidebarMain")
|
|
.parentNode.removeChild(document.getElementById("sidebarMain"));
|
|
document
|
|
.getElementById("sidebarCompact")
|
|
.parentNode.removeChild(document.getElementById("sidebarCompact"));
|
|
}
|
|
|
|
HSDemo();
|
|
|