diff --git a/preview-src/cheat-sheet.adoc b/preview-src/cheat-sheet.adoc index 357c4d63..fa6e43f0 100644 --- a/preview-src/cheat-sheet.adoc +++ b/preview-src/cheat-sheet.adoc @@ -116,6 +116,18 @@ This example only applies to Neo4j Enterprise Edition and is marked with the `[. === Read queries subsection +[.neo4j-ce.neo4j-ee.aura-dbe.aura-dsp.aura-dbp.aura-dse] +==== +[source, cypher, role=noheader] +---- + +---- + +[.description] +This example only applies to Neo4j Enterprise Edition and is marked with the `[.neo4j-ee]` role. +==== + + ==== [source, cypher, role=noheader] ---- diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 4a3c8b02..ccaefcb9 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -278,6 +278,9 @@ page: # additional page attributes indexed by page-slug pages-data: cheatsheet-products: &cheatsheet-products + - name: 'All' + class: 'all' + default: true - name: 'Neo4j Community Edition' class: 'neo4j-ce' - name: 'Neo4j Enterprise Edition' @@ -288,7 +291,6 @@ page: class: 'aura-dbp' - name: 'AuraDB Enterprise' class: 'aura-dbe' - default: true - name: 'AuraDS Professional' class: 'aura-dsp' - name: 'AuraDS Enterprise' diff --git a/src/css/cheat-sheet.css b/src/css/cheat-sheet.css index afae6df2..7c1a7930 100644 --- a/src/css/cheat-sheet.css +++ b/src/css/cheat-sheet.css @@ -186,6 +186,7 @@ body.cheat-sheet .nav-panel-versions .dropdown .dropdown-label { body.cheat-sheet .nav-panel-versions .dropdown .dropdown-styles { width: 50%; display: inline-block; + background-color: var(--colors-neutral-10); } body.cheat-sheet .selectors > div { @@ -200,7 +201,7 @@ body.cheat-sheet .selectors > div { body.cheat-sheet .selectors .dropdown .dropdown-styles { display: inline-block; width: 100%; - /* background-color: var(--toolbar-background); */ + background-color: var(--colors-neutral-10); } /* toc */ @@ -337,6 +338,10 @@ body.cheat-sheet .sect1 { flex-wrap: wrap; } +body.cheat-sheet .sect1 > .sectionbody { + margin-top: 0.75rem; +} + body.cheat-sheet .sect2 { display: flex; flex-direction: row; @@ -401,7 +406,7 @@ body.cheat-sheet .exampleblock > .content > div { body.cheat-sheet .exampleblock > .content > div.labels { flex: 0 0 100%; - justify-content: flex-start; + justify-content: flex-end; padding-bottom: 0; padding-top: 0; gap: 0.25rem; @@ -411,11 +416,6 @@ body.cheat-sheet .exampleblock > .content > div.labels span.label { margin-top: 1rem; } -body.cheat-sheet div.labels span.group--products, -body.cheat-sheet div.page-labels span.group--products { - display: none; -} - body.cheat-sheet .exampleblock > .content > div.extra { flex-grow: 2; border-top: none; @@ -433,7 +433,7 @@ body.cheat-sheet .page-labels { /* flex-grow: 1; */ /* flex-direction: row-reverse; */ margin: 0; - padding: 0; + padding: 1rem 0.5rem; align-items: center; gap: 0.25rem; /* border-bottom: 1px solid rgba(var(--colors-neutral-20)); */ @@ -445,11 +445,12 @@ body.cheat-sheet .sect1 > h2 { body.cheat-sheet .sect1 > .page-labels { padding-right: 0.5rem; + margin: 0 0 0 auto; } -body.cheat-sheet .page-labels:first-of-type { +/* body.cheat-sheet .page-labels:first-of-type { margin: 0 0 0 auto; -} +} */ body.cheat-sheet .page-labels p { flex-direction: row; @@ -504,6 +505,10 @@ body.cheat-sheet span.label.hidden, padding: 0; } + body.cheat-sheet .article h3:not(.discrete) { + flex: auto; + } + body.cheat-sheet .toc-menu-placeholder ul { display: flex; flex-wrap: wrap; @@ -540,26 +545,37 @@ body.cheat-sheet span.label.hidden, margin: 0 0.5rem; } */ + body.cheat-sheet .sect1 > .page-labels { + justify-content: flex-start; + margin: 0; + } + body.cheat-sheet .sect2 { - background: none; + /* background: none; */ padding: 0; + border: 1px solid rgba(var(--colors-neutral-30)); + } + + body.cheat-sheet .sect2 > div.exampleblock:first-of-type { + border: none; } body.cheat-sheet h3:not(.discrete) { - background: rgba(var(--colors-neutral-20)); - margin: 0 0.5rem 0 0.5rem; + /* background: rgba(var(--colors-neutral-20)); */ + /* margin: 0 0.5rem 0 0.5rem; */ + padding: 1rem; flex-grow: 1; - border: 1px solid rgba(var(--colors-neutral-30)); + /* border: 1px solid rgba(var(--colors-neutral-30)); */ /* border-right: none; */ } body.cheat-sheet .sect2 > div { flex: 0 0 80%; flex-grow: 1; - padding: 0.5rem; + /* padding: 0.5rem; */ margin: 0 0.5rem; - background-color: rgba(var(--colors-neutral-20)); - border: 1px solid rgba(var(--colors-neutral-70)); + /* background-color: rgba(var(--colors-neutral-20)); */ + /* border: 1px solid rgba(var(--colors-neutral-70)); */ border-radius: 0; } @@ -578,8 +594,11 @@ body.cheat-sheet span.label.hidden, } body.cheat-sheet .sect2 > div.page-labels { + /* background: rgba(var(--colors-neutral-20)); */ border-left: none; - margin-left: -0.5rem; + margin-left: 0; + padding: 1rem; + /* flex-grow: 1; */ } body.cheat-sheet .sect2 > div.listingblock { diff --git a/src/css/labels.css b/src/css/labels.css index a70b71b4..61462809 100644 --- a/src/css/labels.css +++ b/src/css/labels.css @@ -173,6 +173,7 @@ span.label--beta { span.label--na, span.label--no, +span.label.not-available, span.label--removed { background: var(--warning-color); color: var(--warning-background-color); diff --git a/src/js/50-cheat-sheet-toggle.js b/src/js/50-cheat-sheet-toggle.js index 6e8a858f..ff0af990 100644 --- a/src/js/50-cheat-sheet-toggle.js +++ b/src/js/50-cheat-sheet-toggle.js @@ -7,6 +7,7 @@ const optionMap = [...selectorOptions].map((o) => ({ text: o.dataset.label, class: o.dataset.class, labelType: o.dataset.labelType, + default: o.dataset.defaultValue, labelOnly: o.hidden, selected: o.selected, inScope: true, @@ -23,7 +24,9 @@ const prodMatrix = { 'neo4j-enterprise': 'neo4j-ee', } -const defaultProd = 'auradb-enterprise' +// get the default product from optionMap +const defaultProdArray = optionMap.find((prod) => prod.default === 'true') +const defaultProd = defaultProdArray ? defaultProdArray.value : optionMap[0].value const defaultClasses = ['exampleblock', 'sect2', 'sect1'] @@ -55,7 +58,7 @@ document.addEventListener('DOMContentLoaded', function () { if (labelShow) { labelShow.addEventListener('click', function (c) { c.stopPropagation() - toggleLabels(c) + toggleLabels(c.target.checked) }) } @@ -79,7 +82,7 @@ document.addEventListener('DOMContentLoaded', function () { // console.log(`classes on the element: ${elClasses}`) // get an array of classes that match the select options - const labelsToAdd = optionNames.filter(function (obj) { + let labelsToAdd = optionNames.filter(function (obj) { return elClasses.indexOf(obj) !== -1 }).sort() @@ -100,9 +103,19 @@ document.addEventListener('DOMContentLoaded', function () { return } + const allLabels = Object.values(prodMatrix) + let availableOn = true + const difference = allLabels.filter((l) => !labelsToAdd.includes(l)) + if (difference && difference.length <= 2) { + labelsToAdd = difference + availableOn = false + } + if (labelsToAdd && labelsToAdd.length > 0) { labelsToAdd.forEach((label) => { - addLabel(el, label) + if (label !== 'all') { + addLabel(el, label, availableOn) + } }) } }) @@ -110,7 +123,7 @@ document.addEventListener('DOMContentLoaded', function () { // if we've removed elements we need to clean the toc by removing entries for those elements cleanToc() - function addLabel (el, match) { + function addLabel (el, match, availableOn) { const div = createElement('div', 'paragraph') let labelType = 'labels' @@ -133,8 +146,11 @@ document.addEventListener('DOMContentLoaded', function () { const p = createElement('p') const span = createElement('span', `label label--${match} group--${group}`) - const text = getProductFromOptionMap(match) - + let text = getProductFromOptionMap(match) + if (!availableOn) { + text = 'Not available on ' + text + span.classList.add('not-available') + } span.textContent = text p.appendChild(span) @@ -174,17 +190,25 @@ document.addEventListener('DOMContentLoaded', function () { prodSelector.addEventListener('change', function (e) { e.stopPropagation() + // if localhost + if (curURL.host.indexOf('localhost') !== -1) { + setVisibility(hiddenOptionNames, e.target.value === 'all') + return + } + + const currentProd = Object.keys(prodMatrix).find((key) => prodMatrix[key] === e.target.dataset.current) + const newProd = Object.keys(prodMatrix).find((key) => prodMatrix[key] === e.target.value) + const re = new RegExp(`/${currentProd}/`) + let newURL + // if we're using a proxied path, just load the new url if (selectionFromPath) { - // get the new url - const currentProd = Object.keys(prodMatrix).find((key) => prodMatrix[key] === e.target.dataset.current) - const newProd = Object.keys(prodMatrix).find((key) => prodMatrix[key] === e.target.value) - const newURL = curURL.href.replace(currentProd, newProd) - document.location.replace(newURL) + newURL = newProd ? curURL.href.replace(re, `/${newProd}/`) : curURL.href.replace(re, '') } else { - // reset everything - setVisibility(hiddenOptionNames) + newURL = curURL.href.split('#')[0].concat(newProd).concat(curURL.hash) } + + if (newURL) document.location.replace(newURL) }) var versionSelector = document.querySelector('body.cheat-sheet .version-selector') @@ -211,7 +235,7 @@ document.addEventListener('DOMContentLoaded', function () { }) } - setVisibility(hiddenOptionNames) + setVisibility(hiddenOptionNames, prodSelector.dataset.current === 'all') const matchTo = parseFloat(document.querySelector('.nav-container .selectors').getBoundingClientRect().height) const firstSection = document.querySelector('article h2') @@ -226,19 +250,22 @@ document.addEventListener('DOMContentLoaded', function () { }) }) -function setVisibility (hiddenOptionNames) { +function setVisibility (hiddenOptionNames, showLabels = false) { // reset everything - clearClass('hidden') - clearClass('hide-this') - clearClass('selectors-match') + clearClasses(['hidden', 'hide-this', 'selectors-match']) + // clearClass('hide-this') + // clearClass('selectors-match') selectorMatch(hiddenOptionNames) hideTocEntries() + toggleLabels(showLabels) document.querySelector('body.cheat-sheet').style.opacity = '1' } -function clearClass (cl) { - document.querySelectorAll(`.toc-menu .${cl}, .content .sect1.${cl}, .content .sect2.${cl}, .content .exampleblock.${cl}`).forEach((el) => { - el.classList.remove(cl) +function clearClasses (cl) { + cl.forEach((c) => { + document.querySelectorAll(`.toc-menu .${c}, .content .sect1.${c}, .content .sect2.${c}, .content .exampleblock.${c}`).forEach((el) => { + el.classList.remove(c) + }) }) } @@ -459,7 +486,7 @@ function removeDefaultClasses (c) { function toggleLabels (l) { document.querySelectorAll('span.group--products').forEach((div) => { - if (l.target.checked) { + if (l) { div.style.display = 'flex' } else { div.style.display = 'none' diff --git a/src/partials/footer-scripts.hbs b/src/partials/footer-scripts.hbs index 5133b1b1..bd691b0d 100644 --- a/src/partials/footer-scripts.hbs +++ b/src/partials/footer-scripts.hbs @@ -8,7 +8,7 @@ {{#if (or (eq @root.page.layout 'training-certification') (eq @root.page.layout 'training-enrollment') (eq @root.page.layout 'training'))}} {{/if}} - {{#if (and (eq @root.page.attributes.theme "cheat-sheet") (not (eq @root.site.url "http://localhost:5252")))}} + {{#if (and (eq @root.page.attributes.theme "cheat-sheet") @root.page.attributes.publish)}} diff --git a/src/partials/nav-selectors.hbs b/src/partials/nav-selectors.hbs index f22b7596..7cc189f8 100644 --- a/src/partials/nav-selectors.hbs +++ b/src/partials/nav-selectors.hbs @@ -48,7 +48,7 @@ {{!-- --}} {{#each page.attributes.cheatsheet-products}} {{#if this.default}} - + {{else}} {{/if}}