From 3348c3927eb0e5003fe3afde1734291ac05d9eb4 Mon Sep 17 00:00:00 2001 From: Ezerike Caleb Date: Mon, 18 Nov 2024 13:13:00 +0100 Subject: [PATCH] scroll to top functionality --- assets/js/scrollToTop.js | 36 +++++ assets/scss/_registry.scss | 18 +++ layouts/partials/hooks/body-end.html | 3 +- .../ecosystem/registry/search-form.html | 135 ++++++++++-------- 4 files changed, 132 insertions(+), 60 deletions(-) create mode 100644 assets/js/scrollToTop.js diff --git a/assets/js/scrollToTop.js b/assets/js/scrollToTop.js new file mode 100644 index 000000000000..3bc727797f9e --- /dev/null +++ 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 index 06ed0693de9f..c0eb9911bd22 100644 --- 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 index 9df70d272006..28b9f515b43f 100644 --- 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") }} \ No newline at end of file diff --git a/layouts/shortcodes/ecosystem/registry/search-form.html b/layouts/shortcodes/ecosystem/registry/search-form.html index 4ed992793e72..bf515483380d 100644 --- 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 }}
-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 add your project to the OpenTelemetry Registry + 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 add your project to the + OpenTelemetry Registry
- Search {{ len $registry }} entries - - + Search {{ len $registry }} + entries + + @@ -95,7 +100,9 @@ data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language - - + +
+ +
+ +
+
- -{{ partial "script.html" (dict "src" "js/registrySearch.js") -}} + +{{ partial "script.html" (dict "src" "js/registrySearch.js") -}} \ No newline at end of file