Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Introduced Right Subsections for Seamless Topic Access #99

Merged
merged 3 commits into from
Mar 20, 2024
Merged

feat: Introduced Right Subsections for Seamless Topic Access #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ccf75b0
feat: Implemented the right sidebar
ankitkumar748846 Mar 18, 2024
c901151
feat: Moved the setupSidebar function to page_navigation.js
ankitkumar748846 Mar 19, 2024
696aef8
feat: Implemented the Right Sub Section
ankitkumar748846 Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion frontend/javascript/code_snippets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,5 @@ export function insertCodeSnippetCopyButtons() {
}, 2000);
});
});
}
}

6 changes: 5 additions & 1 deletion frontend/javascript/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import {

import {
enableScrollToTop,
saveAndRestoreNavigationPosition
saveAndRestoreNavigationPosition,
setupSidebar,
setupSidebarItemEventListeners
} from "./page_navigation";

import { enableDocSearch } from "./search";
Expand All @@ -27,4 +29,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
enableDocSearch('#oba-docs-search-container--mobile');
enableScrollToTop();
saveAndRestoreNavigationPosition();
setupSidebar();
setupSidebarItemEventListeners();
});
67 changes: 67 additions & 0 deletions frontend/javascript/page_navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,73 @@ export function enableScrollToTop() {
});
}

export function setupSidebarItemEventListeners() {
const sidebarItems = document.querySelectorAll('.sidebar-item-h2');

sidebarItems.forEach(function(item) {
item.addEventListener('mouseenter', function() {
item.style.color = '#34d399';
});
item.addEventListener('mouseleave', function() {
item.style.color = 'gray';
});
item.addEventListener('click', function() {
const currentVersion = item.textContent;
const headings = document.querySelectorAll('h2');
let targetElement = null;
headings.forEach(function(heading) {
if (heading.textContent.trim() === currentVersion.trim()) {
targetElement = heading;
}
});
if (targetElement) {
window.scrollTo(0, targetElement.offsetTop - 100);
}
});
});
}

export function setupSidebar() {
const h1Elements = document.querySelectorAll('h1');
const h2Elements = document.querySelectorAll('h2');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changing this line to document.querySelectorAll('article h2') would mean you can get rid of the counting of categories down below. That also future-proofs your changes in case the number of h2 tags in the navigation panel changes. you can't trust that the number of elements on the page will remain fixed. and if you have to for some reason you have to leave a comment explaining your decision

const sidebar = document.querySelector('.sidebar');

sidebar.style.position = 'fixed';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these styles should all be expressed as tailwind classes in the HTML

sidebar.style.top = '100px';
sidebar.style.right = '50px';
sidebar.style.width = 'fit-content';
sidebar.style.maxWidth = '300px';
sidebar.style.height = '100%';

function appendSidebarItem(textContent, tagName) {
const newItem = document.createElement('p');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these should be anchor tags so that they are accessible. That would have the added advantage that you then don't need to apply custom colors on mouseenter and mouseleave.

newItem.textContent = textContent;
if (tagName === 'h1') {
newItem.classList.add('sidebar-item');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add() can take multiple arguments.

newItem.classList.add('text-green-500');
}
if (tagName === 'h2') {
newItem.classList.add('sidebar-item-h2');
newItem.classList.add('text-gray-500');
newItem.style.marginLeft = '20px';
newItem.style.cursor = 'pointer';
}
sidebar.appendChild(newItem);
}

h1Elements.forEach(function (element) {
appendSidebarItem(element.textContent, 'h1');
});

let categories = 0;
h2Elements.forEach(function (element) {
if (categories > 4) {
appendSidebarItem(element.textContent, 'h2');
}
categories++;
});
}

export function saveAndRestoreNavigationPosition() {
var scrollPosition = sessionStorage.getItem('scrollPosition');
if (scrollPosition !== undefined) {
Expand Down
5 changes: 3 additions & 2 deletions src/_layouts/default.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
<div class="w-full">
<div class="h-full lg:ml-72 xl:ml-80">
<header
class="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
>
class="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex">
<div id="navigation-sidebar"class="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 xl:w-80 lg:dark:border-white/10">
<div class="hidden lg:flex sticky top-0 z-20 py-2 px-6 backdrop-blur-sm dark:backdrop-blur bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]" style="--bg-opacity-light:0.5;--bg-opacity-dark:0.2">
<%= render 'site_logo' %>
Expand All @@ -34,6 +33,8 @@
</div>
</article>
</main>
<div class="hidden sidebar text-xs p-4 2xl:flex flex-col">
</div>
<%= render "footer", locals: { metadata: site.metadata } %>
</div>
</div>
Expand Down
Loading