Merge pull request TheThingsIndustries#350 from TheThingsIndustries/doc/anchor-js

benolayinka · web-flow · commit cd85aafeada9 · 2021-05-10T14:43:14.000+03:00
Change anchor hashes to JS
diff --git a/doc/assets/css/common/global.scss b/doc/assets/css/common/global.scss
@@ -278,6 +278,7 @@ table.fixed td { overflow: auto; }
   font-size: 100%;
   visibility: hidden;
   color: silver;
+  padding-left: 0.375rem;
 }
 
 h2, h3, h4, h5, h6 {
diff --git a/doc/assets/css/header/nav.scss b/doc/assets/css/header/nav.scss
@@ -17,6 +17,7 @@
   align-items: center;
   background-color: $blue;
   display: none; // or `flex`
+  padding: 0 2rem 0 2rem;
 }
 
 .navbar {
diff --git a/doc/assets/js/theme.js b/doc/assets/js/theme.js
@@ -12,20 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-document.addEventListener('DOMContentLoaded', function () {
-  var migrationInfoAccepted = window.localStorage.getItem('migrationInfoAccepted')
-  if(migrationInfoAccepted != 'true') {
-    var migrationBar = document.getElementById('migration-info')
-    migrationBar.style.display = 'flex';
-    document.documentElement.classList.add("has-navbar-banner-top")
-    var migrationButton = document.getElementById('migration-button')
-    migrationButton.addEventListener('click', function (){
-      window.localStorage.setItem('migrationInfoAccepted', true)
-      migrationBar.style.display = 'none';
-      document.documentElement.classList.remove("has-navbar-banner-top")
-    })
-  }
-
+function addNavBarBurgers(){
   var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
   if ($navbarBurgers.length > 0) {
     $navbarBurgers.forEach(function(el) {
@@ -37,7 +24,22 @@ document.addEventListener('DOMContentLoaded', function () {
       })
     })
   }
+}
+
+function addAnchor(element) {
+  element.insertAdjacentHTML('beforeend',
+  `<a class="header-hash" href="#${element.id}" ariaLabel="Anchor">#</a>` )
+}
+
+function addAnchors() {
+  var headers = document.querySelectorAll(
+    '.docs-content h2[id], .docs-content h3[id], .docs-content h4[id], .docs-content h5[id], .docs-content h6[id]')
+    if (headers) {
+        headers.forEach(addAnchor)
+    }
+}
 
+function addTabs(){
   const tabs = [...document.querySelectorAll('.tabs li')]
   const tabContent = [...document.querySelectorAll('.tab-content section')]
   const activeClass = 'is-active'
@@ -102,4 +104,26 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   init()
+}
+
+function addMigrationBar(){
+  var migrationInfoAccepted = window.localStorage.getItem('migrationInfoAccepted')
+  if(migrationInfoAccepted != 'true') {
+    var migrationBar = document.getElementById('migration-info')
+    migrationBar.style.display = 'flex';
+    document.documentElement.classList.add("has-navbar-banner-top")
+    var migrationButton = document.getElementById('migration-button')
+    migrationButton.addEventListener('click', function (){
+      window.localStorage.setItem('migrationInfoAccepted', true)
+      migrationBar.style.display = 'none';
+      document.documentElement.classList.remove("has-navbar-banner-top")
+    })
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  addAnchors()
+  addMigrationBar()
+  addNavBarBurgers()
+  addTabs()
 })
diff --git a/doc/layouts/_default/list.html b/doc/layouts/_default/list.html
@@ -18,7 +18,7 @@ <h1 class="title is-size-2">{{ .Title }}
 </h1>
 
 <div class="content">
-  {{ partial "header-hash.html" .Content }}
+  {{ .Content }}
 </div>
 {{ if and .Pages (not (eq .Parent .FirstSection)) }}
 {{ partial "pages-cards.html" .Pages }}
diff --git a/doc/layouts/_default/single.html b/doc/layouts/_default/single.html
@@ -18,7 +18,7 @@ <h1 class="title is-size-2">{{ .Title }}
 </h1>
 
 <div class="content">
-  {{ partial "header-hash.html" .Content }}
+  {{ .Content }}
 </div>
 {{ partial "prev-next-in-section" . }}
 {{ partial "feedback" . }}
diff --git a/doc/layouts/partials/header-hash.html b/doc/layouts/partials/header-hash.html

Original file line number	Diff line number	Diff line change
`@@ -278,6 +278,7 @@ table.fixed td { overflow: auto; }`
`278`	`278`	`font-size: 100%;`
`279`	`279`	`visibility: hidden;`
`280`	`280`	`color: silver;`
	`281`	`+ padding-left: 0.375rem;`
`281`	`282`	`}`
`282`	`283`
`283`	`284`	`h2, h3, h4, h5, h6 {`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@`
`17`	`17`	`align-items: center;`
`18`	`18`	`background-color: $blue;`
`19`	`19`	display: none; // or `flex`
	`20`	`+ padding: 0 2rem 0 2rem;`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`.navbar {`