q-import { /q-components/q-tech-panel.qhtml }
/* ========================================================= */
/* Concrete Top Navigation Bar via q-var data + q-components */
/* ========================================================= */
q-var navbarData {
{"blockId":"535","includeTransparency":false,"includeStickyNav":true,"includeNavigation":true,"includeSearchInput":true,"includeLanguages":false,"toggleLabel":"Toggle Navigation","searchLabel":"Search","switchLanguageLabel":"Switch Language","searchAction":"https://datafault.net/","brand":{"href":"https://datafault.net/","text":"","logos":[{"src":"https://datafault.net/application/files/3117/5788/1082/datafault-logo.png","className":"logo","transparent":false}]},"nav":[{"name":"qhtml-js","url":"https://datafault.net/qhtml-js","target":"_self","active":false,"activeParent":false,"children":[{"name":"qhtml.js about info","url":"https://datafault.net/packages/qhtml6/doc/index.html","target":"_self","active":false,"activeParent":false},{"name":"LCARS Builder Demo","url":"/builder/index.html","target":"_blank","active":false,"activeParent":false},{"name":"Q-HTML Editor","url":"https://datafault.net/qhtml-js/qhtml-editor","target":"_self","active":false,"activeParent":false}]},{"name":"General Coding","url":"https://datafault.net/general-coding","target":"_self","active":false,"activeParent":false,"children":[{"name":"\ud83d\udd17 Custom Systems Integrations","url":"https://datafault.net/general-coding/custom-systems-integrations","target":"_self","active":false,"activeParent":false},{"name":"\u26a1 Performance Optimization","url":"https://datafault.net/general-coding/performance-optimization","target":"_self","active":false,"activeParent":false},{"name":"\ud83d\udd12 Security Enhancements","url":"https://datafault.net/general-coding/security-enhancements","target":"_self","active":false,"activeParent":false},{"name":"\ud83e\udde9 CMS \u0026 Web Platform Extensions","url":"https://datafault.net/general-coding/cms-and-web-platform-extensions","target":"_self","active":false,"activeParent":false},{"name":"\ud83c\udfa8 UI/UX Customization","url":"https://datafault.net/general-coding/uiux-customization","target":"_self","active":false,"activeParent":false},{"name":"Artificial Intelligence","url":"https://datafault.net/general-coding/ai-services","target":"_self","active":false,"activeParent":false}]},{"name":"Active Projects","url":"https://datafault.net/active-projects","target":"_self","active":false,"activeParent":false,"children":[]},{"name":"RouteUI Demo","url":"/tools/RouteUI/index.html","target":"_blank","active":false,"activeParent":false,"children":[]},{"name":"America Freedom Proposal","url":"https://datafault.net/freedom","target":"_self","active":false,"activeParent":false,"children":[]}],"languages":[]}}
q-var navdata {
navbarData.nav || []
}
q-var languageData {
navbarData.languages || []
}
q-var qstr {
function(value) {
if (value === null || value === undefined) {
return JSON.stringify("");
}
return JSON.stringify(String(value));
}
}
q-var navStateClass {
function(item) {
var cls = "";
if (item.activeParent) {
cls += " nav-path-selected";
}
if (item.active) {
cls += " active";
}
return cls.trim();
}
}
q-var dropdownItemQhtml {
function(item) {
return ""
+ "c5-navbar-dropdown-link {\n"
+ " label: " + qstr(item.name) + "\n"
+ " url: " + qstr(item.url) + "\n"
+ " target: " + qstr(item.target || "_self") + "\n"
+ " classes: " + qstr(navStateClass(item)) + "\n"
+ "}\n";
}
}
q-var dropdownChildrenQhtml {
function(children) {
var output = "";
var i = 0;
children = children || [];
for (i = 0; i < children.length; i++) {
output += dropdownItemQhtml(children[i]);
}
return output;
}
}
q-var navItemQhtml {
function(item) {
var classes = navStateClass(item);
var hasChildren = item.children && item.children.length > 0;
if (hasChildren) {
return ""
+ "c5-navbar-submenu {\n"
+ " label: " + qstr(item.name) + "\n"
+ " url: " + qstr(item.url) + "\n"
+ " target: " + qstr(item.target || "_self") + "\n"
+ " classes: " + qstr(classes) + "\n"
+ " children {\n"
+ dropdownChildrenQhtml(item.children)
+ " }\n"
+ "}\n";
}
return ""
+ "c5-navbar-link {\n"
+ " label: " + qstr(item.name) + "\n"
+ " url: " + qstr(item.url) + "\n"
+ " target: " + qstr(item.target || "_self") + "\n"
+ " classes: " + qstr(classes) + "\n"
+ "}\n";
}
}
q-var languageItemQhtml {
function(language) {
var classes = language.active ? "active" : "";
return ""
+ "li {\n"
+ " a {\n"
+ " class: " + qstr("dropdown-item " + classes) + "\n"
+ " href: " + qstr(language.url) + "\n"
+ " text { " + language.name + " }\n"
+ " }\n"
+ "}\n";
}
}
/* ========================================================= */
/* Component: brand */
/* ========================================================= */
q-component c5-navbar-brand {
q-var brand {
navbarData.brand || { href: "#", text: "", logos: [] }
}
a.navbar-brand {
href: "${brand.href}"
for (logo in brand.logos) {
img {
src: "${logo.src}"
class: "${logo.className}"
}
}
span.c5-brand-text {
text { ${brand.text} }
}
}
}
/* ========================================================= */
/* Component: normal nav link */
/* Slots: effects */
/* ========================================================= */
q-component c5-navbar-link {
q-var label { this.getAttribute("label") || "" }
q-var url { this.getAttribute("url") || "#" }
q-var target { this.getAttribute("target") || "_self" }
q-var classes { this.getAttribute("classes") || "" }
li.nav-item {
a {
class: "nav-link ${classes}"
target: "${target}"
href: "${url}"
span.c5-nav-label {
text { ${label} }
}
span.c5-nav-effect {
slot { effects }
}
}
}
}
/* ========================================================= */
/* Component: dropdown nav link */
/* Slots: children, effects */
/* ========================================================= */
q-component c5-navbar-submenu {
q-var label { this.getAttribute("label") || "" }
q-var url { this.getAttribute("url") || "#" }
q-var target { this.getAttribute("target") || "_self" }
q-var classes { this.getAttribute("classes") || "" }
li.nav-item.dropdown.w3-theme-d4 {
a {
class: "w3-theme-d4 nav-link dropdown-toggle ${classes}"
data-concrete-toggle: "dropdown"
target: "${target}"
href: "${url}"
span.c5-nav-label {
text { ${label} }
}
span.c5-nav-effect {
slot { effects }
}
}
ul.dropdown-menu.w3-theme-d4 {
slot { children }
}
}
}
/* ========================================================= */
/* Component: dropdown child link */
/* ========================================================= */
q-component c5-navbar-dropdown-link {
q-var label { this.getAttribute("label") || "" }
q-var url { this.getAttribute("url") || "#" }
q-var target { this.getAttribute("target") || "_self" }
q-var classes { this.getAttribute("classes") || "" }
li {
a {
class: "w3-theme-d3 dropdown-item ${classes}"
target: "${target}"
href: "${url}"
text { ${label} }
}
}
}
/* ========================================================= */
/* Component: search form */
/* ========================================================= */
q-component c5-navbar-search {
q-var action { this.getAttribute("action") || "" }
q-var searchLabel { navbarData.searchLabel || "Search" }
form {
method: "get"
action: "${action}"
input.form-control {
type: "search"
name: "query"
placeholder: "${searchLabel}"
aria-label: "${searchLabel}"
}
button.btn.btn-light.bg-white.ms-2 {
type: "submit"
i.fas.fa-search.text-secondary { }
}
}
}
/* ========================================================= */
/* Component: language switcher */
/* ========================================================= */
q-component c5-language-switcher {
q-var label { navbarData.switchLanguageLabel || "Switch Language" }
div.dropdown-center.ms-3.order-2 {
button.btn.btn-link.dropdown-toggle.d-block.mx-auto {
type: "button"
data-bs-toggle: "dropdown"
aria-expanded: "false"
i.fas.fa-globe { }
span.d-lg-none.ms-2 {
text { ${label} }
}
}
ul.dropdown-menu.dropdown-menu-lg-end.w-100 {
for (language in languageData) {
q-var languageMarkup {
languageItemQhtml(language)
}
qhtml(languageMarkup)
}
}
}
}
/* ========================================================= */
/* Component: global nav particles */
/* ========================================================= */
q-component c5-navbar-particles {
particle-emitter {
id: "t120-emitter"
emitrate: "74"
lifetime: "700"
lifetimevariation: "90"
xvelocity: "0"
yvelocity: "-1.75"
xacceleration: "0"
yacceleration: "0.0028"
startsize: "25"
endsize: "1"
startopacity: "0.5"
endopacity: "0.02"
startsizevariation: "7"
endsizevariation: "5"
startopacityvariation: "0.16"
endopacityvariation: "0.02"
x: "110"
y: "114"
xvariation: "845"
yvariation: "20"
xvelocityvariation: "0"
yvelocityvariation: "0.04"
xaccelerationvariation: "0"
yaccelerationvariation: "0.005"
maxactiveparticles: "166"
maxactiveparticlesvariation: "18"
running: "true"
interval: "10"
src: "/packages/qhtml6/dist/assets/particle.png"
color: "#08c473"
qhtml-unsynced: "1"
style {
position: absolute
inset: 0px
display: block
pointer-events: none
overflow: hidden
z-index: 1
}
}
}
/* ========================================================= */
/* Render navbar */
/* ========================================================= */
div.ccm-block-top-navigation-bar.w3-theme-d4 {
nav.w3-theme-d4.navbar.navbar-expand-lg.navbar-dark.fixed-top {
particle-emitter {
id: "t120-emitter"
emitrate: "74"
lifetime: "700"
lifetimevariation: "90"
xvelocity: "0"
yvelocity: "-1.75"
xacceleration: "0"
yacceleration: "0.0028"
startsize: "25"
endsize: "1"
startopacity: "0.5"
endopacity: "0.02"
startsizevariation: "7"
endsizevariation: "5"
startopacityvariation: "0.16"
endopacityvariation: "0.02"
x: "110"
y: "114"
xvariation: "845"
yvariation: "20"
xvelocityvariation: "0"
yvelocityvariation: "0.04"
xaccelerationvariation: "0"
yaccelerationvariation: "0.005"
maxactiveparticles: "166"
maxactiveparticlesvariation: "18"
running: "true"
interval: "10"
src: "/packages/qhtml6/dist/assets/particle.png"
color: "#08c473"
qhtml-unsynced: "1"
}
div.w3-theme-d4.container-fluid {
c5-navbar-brand { }
button.navbar-toggler.collapsed {
type: "button"
data-bs-toggle: "collapse"
data-bs-target: "#top-navigation-bar-535"
aria-controls: "top-navigation-bar-535"
aria-expanded: "false"
aria-label: "Toggle Navigation"
span.icon-bar { }
span.icon-bar { }
span.icon-bar { }
}
div.w3-theme-d4.collapse.navbar-collapse {
id: "top-navigation-bar-535"
ul.navbar-nav.w3-theme-d4 {
for (item in navdata) {
q-var itemMarkup {
navItemQhtml(item)
}
qhtml(itemMarkup)
}
}
c5-navbar-search {
action: "https://datafault.net//search"
}
}
}
}
}