Skip to content

Commit

Permalink
Idea for coarse-grained page tabbing for articles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood committed Jan 8, 2024
1 parent b81f068 commit cfbb245
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 19 deletions.
3 changes: 2 additions & 1 deletion app/templates/explore/highlight-gallery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ <h2 class="tna-heading-l">{{ image['title'] }}</h2>
<dt>Date</dt>
<dd>{{ image['record_dates'] }}</dd>
<dt>Catalogue reference</dt>
<dd>{{ image['record'] }} [TODO]</dd>
<dd>{{ image['record'] }}</dd>
<dd>[TODO]</dd>
</dl>
{{ image['description'] | safe }}
<div class="tna-button-group">
Expand Down
154 changes: 136 additions & 18 deletions src/scripts/article.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ const $articles = document.querySelectorAll(".etna-article");
$articles.forEach(($article) => {
$article.classList.add("etna-article--interactive");

const $sidebar = $article.querySelector(".etna-article__sidebar");
const $sidebarItems =
$sidebar && $sidebar.querySelectorAll(".etna-article__sidebar-item");
const $collapsibleSections = $article.querySelector(
".etna-article__sections",
);
Expand Down Expand Up @@ -74,10 +71,115 @@ $articles.forEach(($article) => {
}
});

const $sidebar = $article.querySelector(".etna-article__sidebar");
const $sidebarItems =
$sidebar && $sidebar.querySelectorAll(".etna-article__sidebar-item");

if ($sidebarItems) {
let currentSectionId = "";
const currentSectionFromTop = 0.15;
const onMobile = window.matchMedia("(max-width: 48em)");

// const setSelectedToPreviousItem = ($targetItem, $sidebarItems) => {
// const currentIndex = Array.from($sidebarItems).findIndex(($sidebarItem) =>
// $sidebarItem.getAttribute("href") === $targetItem.getAttribute("href")
// )
// if(currentIndex > 0) {
// switchItemByIndex(currentIndex - 1,$sidebarItems, true)
// }
// }

// const setSelectedToNextItem = ($targetItem,$sidebarItems) => {
// const currentIndex = Array.from($sidebarItems).findIndex(($sidebarItem) =>
// $sidebarItem.getAttribute("href") === $targetItem.getAttribute("href")
// )
// if(currentIndex < $sidebarItems.length - 1) {
// switchItemByIndex(currentIndex + 1,$sidebarItems, true)
// }
// }

// const switchItemByIndex = (
// targetItemIndex,
// $sidebarItems,
// simulateClick = false,
// ) => {
// switchItem($sidebarItems[targetItemIndex], $sidebarItems, true);
// };

const switchItemById = (
targetItemID,
$sidebarItems,
// simulateClick = false,
) => {
const index = Array.from($sidebarItems).findIndex(
($sidebarItem) =>
$sidebarItem.getAttribute("href") === `#${targetItemID}`,
);
if (index >= 0) {
switchItem($sidebarItems[index], $sidebarItems /*, simulateClick*/);
}
};

const switchItem = (
$targetItem,
$sidebarItems /*, simulateClick = false*/,
) => {
const currentSectionHref = $targetItem.getAttribute("href");
$sidebarItems.forEach(($sidebarItem) => {
const isCurrentItem =
$sidebarItem.getAttribute("href") === currentSectionHref;
isCurrentItem
? $sidebarItem.classList.add("etna-article__sidebar-item--current")
: $sidebarItem.classList.remove(
"etna-article__sidebar-item--current",
);
// $sidebarItem.setAttribute("tabindex", isCurrentItem ? "0" : "-1");
});
if (history.replaceState) {
history.replaceState(null, null, currentSectionHref);
}
// if (simulateClick) {
// // $targetItem.click()
// } else {
// $targetItem.focus();
// }
};

// const handleSidebarItemKeyDown = (e, $sidebarItems) => {
// const targetItem = e.currentTarget;
// let overwriteKeyAction = false;

// switch (e.key) {
// case "ArrowUp":
// setSelectedToPreviousItem(targetItem, $sidebarItems);
// overwriteKeyAction = true;
// break;

// case "ArrowDown":
// setSelectedToNextItem(targetItem, $sidebarItems);
// overwriteKeyAction = true;
// break;

// case "Home":
// switchItem(0);
// overwriteKeyAction = true;
// break;

// case "End":
// switchItem($sidebarItems.length - 1);
// overwriteKeyAction = true;
// break;

// default:
// break;
// }

// if (overwriteKeyAction) {
// e.stopPropagation();
// e.preventDefault();
// }
// };

const highlightCurrentSection = () => {
if (onMobile.matches) {
return;
Expand All @@ -95,31 +197,47 @@ $articles.forEach(($article) => {
if (topSectionId !== currentSectionId) {
currentSectionId = topSectionId;
if ($topSection) {
$sidebarItems.forEach(($sidebarItem) =>
$sidebarItem.getAttribute("href") === `#${currentSectionId}`
? $sidebarItem.classList.add(
"etna-article__sidebar-item--current",
)
: $sidebarItem.classList.remove(
"etna-article__sidebar-item--current",
),
);
if (history.replaceState) {
history.replaceState(null, null, `#${currentSectionId}`);
}
switchItemById(currentSectionId, $sidebarItems);
// $sidebarItems.forEach(($sidebarItem) => {
// const isCurrentItem =
// $sidebarItem.getAttribute("href") === `#${currentSectionId}`;
// isCurrentItem
// ? $sidebarItem.classList.add(
// "etna-article__sidebar-item--current",
// )
// : $sidebarItem.classList.remove(
// "etna-article__sidebar-item--current",
// );
// // $sidebarItem.setAttribute("tabindex", isCurrentItem ? "0" : "-1");
// });
// if (history.replaceState) {
// history.replaceState(null, null, `#${currentSectionId}`);
// }
}
}
} else {
currentSectionId = "";
$sidebarItems.forEach(($sidebarItem) =>
$sidebarItem.classList.remove("etna-article__sidebar-item--current"),
);
// $sidebarItems.forEach(($sidebarItem, index) => {
// $sidebarItem.classList.remove("etna-article__sidebar-item--current");
// $sidebarItem.setAttribute("tabindex", index === 0 ? "0" : "-1");
// });
$sidebarItems.forEach(($sidebarItem) => {
$sidebarItem.classList.remove("etna-article__sidebar-item--current");
});
if (history.replaceState) {
history.replaceState(null, null, "#");
}
}
};

// $sidebarItems.forEach(($sidebarItem) => {
// $sidebarItem.addEventListener(
// "keydown",
// (e) => handleSidebarItemKeyDown(e, $sidebarItems),
// true,
// );
// });

window.addEventListener("scroll", highlightCurrentSection);
window.addEventListener("resize", highlightCurrentSection);
}
Expand Down

0 comments on commit cfbb245

Please sign in to comment.