scroll to top functionality

open-telemetry · Nov 18, 2024 · 3348c39 · 3348c39
1 parent a2dbe3c
commit 3348c39
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 60 deletions.
diff --git a/assets/js/scrollToTop.js b/assets/js/scrollToTop.js
@@ -0,0 +1,36 @@
+let scrollToTopBtn = document.getElementById('scrollToTopBtn');
+let footer = document.querySelector('.td-footer');
+
+// Function to check if the button is about to overlap the footer
+function adjustButtonPosition() {
+  let footerTop = footer.getBoundingClientRect().top;
+  let windowHeight = window.innerHeight;
+
+  // Calculate when the button would overlap the footer
+  if (footerTop < windowHeight + 40) {
+    // Stop the button above the footer
+    scrollToTopBtn.style.bottom = windowHeight - footerTop + 40 + 'px';
+  } else {
+    // Reset the button's position if no overlap
+    scrollToTopBtn.style.bottom = '40px';
+  }
+}
+
+// Show or hide the button based on scroll position
+window.onscroll = function () {
+  if (
+    document.body.scrollTop > 200 ||
+    document.documentElement.scrollTop > 200
+  ) {
+    scrollToTopBtn.style.display = 'block';
+  } else {
+    scrollToTopBtn.style.display = 'none';
+  }
+
+  adjustButtonPosition();
+};
+
+// Scroll to the top when the button is clicked
+scrollToTopBtn.onclick = function () {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss
@@ -39,3 +39,21 @@
 .registry-entry {
   @extend .shadow;
 }
+
+// Scroll-to-top button styling
+.scroll-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.scroll-btn {
+  background-color: #007bff;
+  color: white;
+  bottom: 40px;
+  right: 40px;
+  display: none;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  border-radius: 50%;
+  position: fixed;
+}
diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html
@@ -1,4 +1,5 @@
 {{ if hugo.IsProduction -}}
-  {{ partial "script.html" (dict "src" "js/tracing.js") -}}
+{{ partial "script.html" (dict "src" "js/tracing.js") -}}
 {{ end -}}
 {{ partial "script.html" (dict "src" "js/navScroll.js") -}}
+{{ partial "script.html" (dict "src" "js/scrollToTop.js") }}
diff --git a/layouts/shortcodes/ecosystem/registry/search-form.html b/layouts/shortcodes/ecosystem/registry/search-form.html
@@ -6,79 +6,84 @@
 {{ $languageNames.Set "js" "JavaScript" -}}
 {{ $languageNames.Set "php" "PHP" -}}
 
-{{ $officialLanguages := slice "collector" "cpp" "erlang" "elixir" "dotnet" "go" "java" "js" "php" "python" "ruby" "rust" "swift" -}}
+{{ $officialLanguages := slice "collector" "cpp" "erlang" "elixir" "dotnet" "go" "java" "js" "php" "python" "ruby"
+"rust" "swift" -}}
 
 
 {{ $langs := slice -}}
 {{ range $registry -}}
-  {{ $language := .language -}}
-  {{- $val := (dict
-    "name" .language
-    "isOfficial" (in $officialLanguages .language)
-    ) 
-  -}}
-  {{ $langs = $langs | append $val -}}
-  {{ if ne $language (lower $language) -}}
-    {{ errorf "Language keys must be in lowercase. Registry entry '%s' has the following invalid key: %s" .title $language -}}
-  {{ end -}}
+{{ $language := .language -}}
+{{- $val := (dict
+"name" .language
+"isOfficial" (in $officialLanguages .language)
+)
+-}}
+{{ $langs = $langs | append $val -}}
+{{ if ne $language (lower $language) -}}
+{{ errorf "Language keys must be in lowercase. Registry entry '%s' has the following invalid key: %s" .title $language
+-}}
+{{ end -}}
 {{ end -}}
 {{ $langs = sort ($langs | uniq) "name" -}}
 
 {{ $types := slice -}}
 {{ range $registry -}}
-  {{ $type := .registryType -}}
-  {{ $types = $types | append $type -}}
-  {{ if ne $type (lower $type) -}}
-    {{ errorf "Component-type keys must be in lowercase. Registry entry '%s' has the following invalid key: %s" .title $type -}}
-  {{ end -}}
+{{ $type := .registryType -}}
+{{ $types = $types | append $type -}}
+{{ if ne $type (lower $type) -}}
+{{ errorf "Component-type keys must be in lowercase. Registry entry '%s' has the following invalid key: %s" .title $type
+-}}
+{{ end -}}
 {{ end -}}
 {{ $types = $types | uniq | sort -}}
 
 {{ $counter := 0 -}}
 {{ $entries := slice -}}
 {{ range $key, $entry := .Site.Data.registry -}}
-  {{ $flags := slice -}}
-  {{ if .isNative -}}
-    {{ $flags = $flags | append "native" -}}
-  {{ end -}}
-  {{ if .isFirstParty -}}
-    {{ $flags = $flags | append "first_party" -}}
-  {{ end -}}
-  {{ if .isNew -}}
-    {{ $flags = $flags | append "new" -}}
-  {{ end -}}
-  {{ if .usedInDemo -}}
-    {{ $flags = $flags | append "used_in_demo" -}}
-  {{ end -}}
-  {{ if .deprecated -}}
-    {{ $flags = $flags | append "deprecated" -}}
-  {{ end -}}
-  {{ $entry = merge $entry (dict "_key" $key "id" $counter "flags" $flags) -}}
-  {{ $entries = $entries | append $entry -}}
-  {{ $counter = add $counter 1 }}
+{{ $flags := slice -}}
+{{ if .isNative -}}
+{{ $flags = $flags | append "native" -}}
+{{ end -}}
+{{ if .isFirstParty -}}
+{{ $flags = $flags | append "first_party" -}}
+{{ end -}}
+{{ if .isNew -}}
+{{ $flags = $flags | append "new" -}}
+{{ end -}}
+{{ if .usedInDemo -}}
+{{ $flags = $flags | append "used_in_demo" -}}
+{{ end -}}
+{{ if .deprecated -}}
+{{ $flags = $flags | append "deprecated" -}}
+{{ end -}}
+{{ $entry = merge $entry (dict "_key" $key "id" $counter "flags" $flags) -}}
+{{ $entries = $entries | append $entry -}}
+{{ $counter = add $counter 1 }}
 {{ end -}}
 
 {{ $allFlags := slice -}}
 {{ range $entry := $entries -}}
-  {{ range $flag := $entry.flags -}}
-    {{ $allFlags = $allFlags | append $flag }}
-  {{ end -}}
+{{ range $flag := $entry.flags -}}
+{{ $allFlags = $allFlags | append $flag }}
+{{ end -}}
 {{ end -}}
 {{ $uniqueFlags := $allFlags | uniq | sort }}
 
 <div class="alert alert-info">
-The OpenTelemetry Registry allows you to search for instrumentation libraries,
-collector components, utilities, and other useful projects in the OpenTelemetry
-ecosystem. If you are a project maintainer, you can <a href="/ecosystem/registry/adding/">add your project to the OpenTelemetry Registry</a>
+  The OpenTelemetry Registry allows you to search for instrumentation libraries,
+  collector components, utilities, and other useful projects in the OpenTelemetry
+  ecosystem. If you are a project maintainer, you can <a href="/ecosystem/registry/adding/">add your project to the
+    OpenTelemetry Registry</a>
 </div>
 
 <div class="pb-4">
   <form action="/ecosystem/registry" id="searchForm">
     <div class="input-group">
-      <span class="input-group-text" id="basic-addon1" title="{{ len $registry }} entries">Search {{ len $registry }} entries</span>
-      <input class="form-control w-auto" list="search-suggestions" id="input-s" type="text" name="s" placeholder="Type to search…"
-        aria-label="Registry search input field">
-        <datalist id="search-suggestions"></datalist>
+      <span class="input-group-text" id="basic-addon1" title="{{ len $registry }} entries">Search {{ len $registry }}
+        entries</span>
+      <input class="form-control w-auto" list="search-suggestions" id="input-s" type="text" name="s"
+        placeholder="Type to search…" aria-label="Registry search input field">
+      <datalist id="search-suggestions"></datalist>
 
 
       <input type="hidden" name="component" id="input-component" value="" />
@@ -95,15 +100,19 @@
         data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</button>
       <div class="dropdown-menu" id="languageFilter">
         <li><a value="all" class="dropdown-item">Any Language</a></li>
-        <li><hr class="dropdown-divider"></li>
+        <li>
+          <hr class="dropdown-divider">
+        </li>
         {{ range (where $langs "isOfficial" true) -}}
         <li>
           <a value="{{ .name }}" id="language-item-{{ .name }}" class="dropdown-item">
             {{ $languageNames.Get .name | default (humanize .name) }}
           </a>
         </li>
         {{ end -}}
-        <li><hr class="dropdown-divider"></li>
+        <li>
+          <hr class="dropdown-divider">
+        </li>
         {{ range (where $langs "isOfficial" false) -}}
         <li>
           <a value="{{ .name }}" id="language-item-{{ .name }}" class="dropdown-item">
@@ -123,19 +132,26 @@
       </div>
 
       <!-- Flags Filter Dropdown -->
-    <button class="btn btn-outline-secondary dropdown-toggle" id="flagsDropdown" type="button" 
-    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flags</button>
-    <div class="dropdown-menu" id="flagsFilter">
-    <a value="all" class="dropdown-item">Any Flag</a>
-    {{ range $flag := $uniqueFlags -}}
-    <a value="{{ $flag }}" id="flag-item-{{ $flag }}" class="dropdown-item">{{ humanize $flag }}</a>
-    {{ end -}}
-    </div>
+      <button class="btn btn-outline-secondary dropdown-toggle" id="flagsDropdown" type="button"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flags</button>
+      <div class="dropdown-menu" id="flagsFilter">
+        <a value="all" class="dropdown-item">Any Flag</a>
+        {{ range $flag := $uniqueFlags -}}
+        <a value="{{ $flag }}" id="flag-item-{{ $flag }}" class="dropdown-item">{{ humanize $flag }}</a>
+        {{ end -}}
+      </div>
 
     </div>
   </form>
 </div>
 
+<!-- Scroll-to-Top Button -->
+<div class="scroll-container">
+  <button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
+    <i class="fas fa-arrow-up"></i>
+  </button>
+</div>
+
 <div class="mx-auto">
   <div class="text-center text-primary" style="display: none" id="search-loading">
     <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
@@ -144,11 +160,12 @@
   <ul class="list-unstyled" id="search-results"></ul>
   <ul class="list-unstyled" id="default-body">
     {{ range $key, $value := $registry -}}
-      {{ $value = merge $value (dict "_key" $key) -}}
-      {{ partial "ecosystem/registry/entry" (dict "value" $value "languageNames" $languageNames) }}
+    {{ $value = merge $value (dict "_key" $key) -}}
+    {{ partial "ecosystem/registry/entry" (dict "value" $value "languageNames" $languageNames) }}
     {{ end -}}
   </ul>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/index.min.js" integrity="sha384-58p1D2xuw/76VRFUgDMRcrtnJAW5LWLE02ihn8aITu65c4vgo+BLy7raRKNC7KaL" crossorigin="anonymous"></script>
-{{ partial "script.html" (dict "src" "js/registrySearch.js") -}}
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/index.min.js"
+  integrity="sha384-58p1D2xuw/76VRFUgDMRcrtnJAW5LWLE02ihn8aITu65c4vgo+BLy7raRKNC7KaL" crossorigin="anonymous"></script>
+{{ partial "script.html" (dict "src" "js/registrySearch.js") -}}