Add 'all' option and display labels if selected (#172)

Allows for the addition of an `all` option in the products dropdown.

- handles URL.replace depending on whether or not `all` is selected
- handles URL.replace depending on whether or not `localhost` is the
url.host
- displays labels when `all` is selected

Author: recrwplay

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]
+----
+<CYPHER EXAMPLE>
+----
+
+[.description]
+This example only applies to Neo4j Enterprise Edition and is marked with the `[.neo4j-ee]` role.
+====
+
+
 ====
 [source, cypher, role=noheader]
 ----

preview-src/ui-model.yml

@@ -279,6 +279,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'
@@ -289,7 +292,6 @@ page:
           class: 'aura-dbp'
         - name: 'AuraDB Enterprise'
           class: 'aura-dbe'
-          default: true
         - name: 'AuraDS Professional'
           class: 'aura-dsp'
         - name: 'AuraDS Enterprise'

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 {

src/css/labels.css

@@ -174,6 +174,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);

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,17 +103,27 @@ 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)
+        }
       })
     }
   })
 
   // 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'

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'))}}
     <script src="//go.neo4j.com/js/forms2/js/forms2.min.js"></script>
   {{/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)}}
   <script src="{{{@root.site.path}}}{{{@root.site.ui.url}}}/js/vendor/auth0.js"></script>
 
   <script src="{{{@root.site.path}}}{{{@root.site.ui.url}}}/js/site.js"></script>

src/partials/nav-selectors.hbs

@@ -44,7 +44,7 @@
       {{!-- <option value="all" data-label="all" data-class="all" data-label-type="products">All</option> --}}
       {{#each page.attributes.cheatsheet-products}}
       {{#if this.default}}
-      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="products" selected>{{this.name}}</option>
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="products" data-default-value="true" selected>{{this.name}}</option>
       {{else}}
       <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="products" {{#if this.label-only }}hidden{{/if}}>{{this.name}}</option>
       {{/if}}