diff --git a/resources/css/app.css b/resources/css/app.css index 7b90ac0..a686391 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -30,7 +30,7 @@ @import './components/sommaire-index.css'; @import './components/index-panel.css'; @import './components/footnotes-index.css'; -@import './components/article-toolbar.css'; +@import './components/article-revues-toolbar.css'; @import './components/post-card--article.css'; @import './components/authors-last-publications.css'; @import './components/article-references.css'; diff --git a/resources/css/components/article-toolbar.css b/resources/css/components/article-revues-toolbar.css similarity index 92% rename from resources/css/components/article-toolbar.css rename to resources/css/components/article-revues-toolbar.css index 24774bf..7216ab7 100644 --- a/resources/css/components/article-toolbar.css +++ b/resources/css/components/article-revues-toolbar.css @@ -1,3 +1,4 @@ +#revue-toolbar, #article-toolbar { @apply col-span-2 container mx-auto; diff --git a/resources/css/pages/singles.css b/resources/css/pages/singles.css index c8f52d6..b496786 100644 --- a/resources/css/pages/singles.css +++ b/resources/css/pages/singles.css @@ -14,6 +14,7 @@ } } &[data-active-tab='authors'] { + .edito, .article-informations, #article-references, .article-content, @@ -32,6 +33,7 @@ } } &[data-active-tab='table-of-contents'] { + #revue-authors, #article-authors, #article-references, .article-informations, @@ -41,6 +43,8 @@ } } &[data-active-tab='informations'] { + .edito, + #revue-authors, #article-authors, #article-references, .article-content, diff --git a/resources/js/singles/revue-toolbar.ts b/resources/js/singles/revue-toolbar.ts new file mode 100644 index 0000000..872e504 --- /dev/null +++ b/resources/js/singles/revue-toolbar.ts @@ -0,0 +1,33 @@ +export function handleRevueToolbar() { + observeTabsButtons(); +} + +function observeTabsButtons(): void { + const toolbarButtons = document.querySelectorAll('#revue-toolbar button'); + + toolbarButtons.forEach((toolbarButton) => { + toolbarButton.addEventListener('click', () => { + const currentTabValue = toolbarButton.getAttribute('data-tab') as string; + toggleActiveTab(toolbarButton as HTMLElement); + handleActiveTabContent(currentTabValue as string); + }); + }); +} + +function toggleActiveTab(toolbarButton: HTMLElement): void { + resetActiveToolbarButtons(); + toolbarButton.setAttribute('aria-selected', 'true'); +} + +function resetActiveToolbarButtons(): void { + const toolbarButtons = document.querySelectorAll('#revue-toolbar button'); + toolbarButtons.forEach((toolbarButton) => { + toolbarButton.setAttribute('aria-selected', 'false'); + }); +} + +function handleActiveTabContent(tab: string): void { + const contentWrapper = document.querySelector('.content-wrapper'); + contentWrapper?.setAttribute('data-active-tab', tab); + console.log(tab); +} diff --git a/resources/js/singles/singles.ts b/resources/js/singles/singles.ts index c16ea56..24a2056 100644 --- a/resources/js/singles/singles.ts +++ b/resources/js/singles/singles.ts @@ -2,6 +2,7 @@ import handleIndexPanel from './index-panel'; import handleFootnoteFormat from './footnote-format'; import handleCiteButton from './cite-button'; import { handleArticleToolbar } from './article-toolbar.ts'; +import { handleRevueToolbar } from './revue-toolbar.ts'; export default function singles(): void { const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue'); @@ -12,4 +13,5 @@ export default function singles(): void { handleFootnoteFormat(); handleCiteButton(); handleArticleToolbar(); + handleRevueToolbar(); } diff --git a/single-revues.php b/single-revues.php index 324cc4e..9090db8 100644 --- a/single-revues.php +++ b/single-revues.php @@ -11,9 +11,10 @@ $articles = get_field('articles', $current_issue->ID); + -
+