[TASK]: Add all-documentations-menu WebComponent

packages/typo3-docs-theme/assets/js/all-documentations-menu.js

@@ -0,0 +1,239 @@
+// mock up for presentation purposes - should be replaced with real data
+const exampleDocumentationsJson = JSON.stringify([
+ {
+ name: 'References',
+ href: '#',
+ children: [
+ { name: 'Changelog', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'TYPO3 Explained', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'TCA Reference', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'TypoScript Reference', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'TSConfig Reference', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'ViewHelper Reference', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ ]
+ },
+ {
+ name: 'Guides',
+ href: '#',
+ children: [
+ { name: 'Getting started', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'Localization', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'Upgrade Guide', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'Editors Guide', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'Exceptions', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ ]
+ },
+ {
+ name: 'Tutorials',
+ href: '#',
+ children: [
+ { name: 'Sitepackage Tutorial', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'TypoScript Tutorial', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ ]
+ },
+ {
+ name: 'System Extensions',
+ href: '#',
+ children: [
+ { name: 'Adminpanel', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ { name: 'SEO', href: '#', versions: [ { name: 'main', href: '#' }, { name: '12.4', href: '#' }, { name: '11.5', href: '#' } ] },
+ ]
+ },
+ {
+ name: 'Third Party Extensions',
+ href: '#',
+ },
+ {
+ name: 'Contribution',
+ href: '#',
+ children: [
+ { name: 'Core', href: '#' },
+ { name: 'Documentation', href: '#' },
+ { name: 'typo3.org', href: '#' },
+ ]
+ },
+])
+
+class AllDocumentationMenu extends HTMLElement {
+ constructor() {
+ super();
+ this.data = this.initializeDocumentationsData();
+
+ this.classList.add('all-documentations-menu')
+
+ this.mainButton = this.createMainButton('All documentations');
+ this.tooltip = this.createTooltip();
+
+ this.appendChild(this.mainButton);
+ this.appendChild(this.tooltip);
+
+ this.popperInstance = null;
+
+ this.mainButton.addEventListener('click', (event) => {
+ event.stopPropagation();
+ this.toggleTooltip();
+ });
+
+ // hide popup on outside click
+ document.addEventListener('click', (event) => {
+ if (!this.tooltip.hasAttribute('data-show')) {
+ return;
+ }
+
+ if (event.target?.closest('.all-documentations-menu-tooltip')) {
+ return
+ }
+
+ this.hideTooltip();
+ })
+ }
+
+ initializeDocumentationsData() {
+ // replace with real data
+ return JSON.parse(exampleDocumentationsJson)
+ }
+
+ createClassName(name) {
+ return `all-documentations-menu-${name}`;
+ }
+
+ /** Button */
+
+ createMainButton(text) {
+ const element = document.createElement('button')
+ element.classList.add(
+ 'btn', 'btn-light',
+ this.createClassName('button'),
+ );
+ element.innerHTML = text;
+
+ const icon = document.createElement('i');
+ icon.classList.add('fa-solid', 'fa-bars');
+ element.prepend(icon);
+
+ return element;
+ }
+
+ /** Documentations popup */
+
+ createDocumentationCategoryHeader(text, href) {
+ let headerElement;
+ if (href) {
+ headerElement = document.createElement('a');
+ headerElement.setAttribute('href', href)
+ } else {
+ headerElement = document.createElement('div')
+ }
+
+ headerElement.classList.add(this.createClassName('category-header'))
+ headerElement.innerHTML = text;
+
+ return headerElement;
+ }
+
+ createDocumentationVersionBadge(version) {
+ const element = document.createElement('a');
+ element.setAttribute('href', version.href)
+ element.innerHTML = version.name;
+ return element;
+ }
+
+ createDocumentationLink(documentation) {
+ const listItemElement = document.createElement('li');
+ const anchorElement = document.createElement('a');
+ anchorElement.setAttribute('href', documentation.href);
+ anchorElement.innerHTML = documentation.name;
+
+ listItemElement.appendChild(anchorElement);
+
+ if (!documentation.versions || !documentation.versions.length) {
+ return listItemElement;
+ }
+
+ const versionsElement = document.createElement('div');
+ versionsElement.classList.add(this.createClassName('versions'));
+
+ for (const version of documentation.versions) {
+ versionsElement.appendChild(this.createDocumentationVersionBadge(version))
+ }
+
+ listItemElement.appendChild(versionsElement);
+
+ return listItemElement;
+ }
+
+ createDocumentationCategory(category) {
+ const section = document.createElement('div');
+ section.classList.add('category');
+
+ const header = this.createDocumentationCategoryHeader(category.name, category.href);
+ section.appendChild(header);
+
+ if (!category.children || !category.children.length) {
+ return section;
+ }
+
+ const docsListElement = document.createElement('ul');
+ docsListElement.classList.add(this.createClassName('documentations'))
+
+ for (const child of category.children) {
+ docsListElement.appendChild(this.createDocumentationLink(child));
+ }
+
+ section.appendChild(docsListElement);
+
+ return section;
+ }
+
+ createTooltip() {
+ const element = document.createElement('div');
+ element.classList.add(this.createClassName('tooltip'));
+ element.setAttribute('role', 'topoltip');
+
+ const arrowElement = document.createElement('div');
+ arrowElement.classList.add(this.createClassName('tooltip-arrow'));
+ arrowElement.setAttribute('data-popper-arrow', '')
+ element.appendChild(arrowElement);
+
+ const categoriesElement = document.createElement('div');
+ categoriesElement.classList.add(this.createClassName('categories'));
+
+ for (const category of this.data) {
+ categoriesElement.appendChild(this.createDocumentationCategory(category));
+ }
+
+ element.appendChild(categoriesElement);
+
+ return element;
+ }
+
+ toggleTooltip() {
+ if (this.tooltip.hasAttribute('data-show')) {
+ this.hideTooltip();
+ } else {
+ this.showTooltip();
+ }
+ }
+
+ showTooltip() {
+ this.tooltip.setAttribute('data-show', '');
+
+ this.popperInstance = Popper.createPopper(this.mainButton, this.tooltip, {
+ placement: 'bottom',
+ modifiers: [
+ { name: 'arrow' },
+ { name: 'offset', options: { offset: [0, 10] } }
+ ],
+ });
+ }
+
+ hideTooltip() {
+ this.tooltip.removeAttribute('data-show');
+ if (this.popperInstance) {
+ this.popperInstance.destroy();
+ this.popperInstance = null;
+ }
+ }
+}
+
+customElements.define('all-documentations-menu', AllDocumentationMenu)

packages/typo3-docs-theme/assets/sass/components/_allDocumentationMenu.scss

@@ -0,0 +1,125 @@
+.all-documentations-menu {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ white-space: nowrap;
+
+ &-button {
+ display: flex;
+ align-items: center;
+ gap: 0.4em;
+ }
+
+ &-tooltip {
+ display: none;
+ border-radius: 0.6em;
+ background: white;
+ box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+ padding: 1.5em 2.5em;
+ border: 1px solid #eaeaea;
+ z-index: 50;
+
+ &[data-show] {
+ display: block;
+ }
+
+ &-arrow {
+ width: 1.2em;
+ height: 1.2em;
+ top: -0.2em;
+
+ &:before {
+ display: block;
+ content: '';
+ width: 100%;
+ height: 100%;
+ transform: rotateZ(45deg);
+ background-color: white;
+ }
+ }
+
+ @media screen and (max-width: 768px) {
+ padding: 1.5em;
+ }
+ }
+
+ &-categories {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1em 2em;
+
+ @media screen and (max-width: 1200px) {
+ grid-template-columns: repeat(2, 1fr)
+ }
+
+ @media screen and (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ &-category {
+ &-header {
+ font-size: 1.1em;
+ font-weight: 700;
+ color: #333;
+ position: relative;
+ text-decoration: none;
+
+ &:before {
+ display: block;
+ content: '';
+ width: 0.2em;
+ height: 100%;
+ background: $primary;
+ position: absolute;
+ top: 0;
+ left: -0.6em;
+ }
+ }
+ }
+
+ a.all-documentations-menu-category-header {
+ &:hover, &:focus {
+ text-decoration: .1em underline;
+ }
+ }
+
+ &-documentations {
+ display: flex;
+ flex-direction: column;
+ gap: 0.2em;
+ list-style-type: none;
+ padding: 0.4em 0 0 0;
+
+ li {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.4em;
+
+ a:not(:hover):not(:focus) {
+ text-decoration: none;
+ }
+ }
+ }
+
+ &-versions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 0.3em;
+
+ a {
+ background-color: $light;
+ padding: 0 5px;
+ font-size: 0.8em;
+ border-radius: 0.4em;
+ display: flex;
+ align-items: center;
+
+ &:first-child {
+ background-color: lighten($primary, 40%);
+ }
+ }
+ }
+}

packages/typo3-docs-theme/assets/sass/layout/_structure.scss

@@ -26,6 +26,20 @@
  margin: 0 auto;
  padding: 0 calc(#{$grid-gutter-width} / 2);
 }
+.menu-search-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 0.4em;
+
+ search {
+ flex-grow: 1;
+ }
+
+ @media screen and (max-width: 576px) {
+ flex-direction: column;
+ align-items: start;
+ }
+}
 
 /**
  * Main

packages/typo3-docs-theme/assets/sass/theme.scss

@@ -41,6 +41,7 @@
 @import 'components/tabs';
 @import 'components/textroles';
 @import 'components/uml';
+@import 'components/allDocumentationMenu';
 
 // Additional classes that can be applied by .. rst-class::
 @import 'components/customClasses/bignums';