diff --git a/packages/typo3-docs-theme/assets/js/menu-expandable.js b/packages/typo3-docs-theme/assets/js/menu-expandable.js index 3e3364cd4..595badd6b 100644 --- a/packages/typo3-docs-theme/assets/js/menu-expandable.js +++ b/packages/typo3-docs-theme/assets/js/menu-expandable.js @@ -7,15 +7,15 @@ const link = event.currentTarget.parentElement; const element = link.parentElement; - const siblings = element.parentElement.parentElement.querySelectorAll('li.active'); + const siblings = element.parentElement.parentElement.querySelectorAll('li.expanded'); Array.from(siblings).forEach(sibling => { if (sibling !== element) { - sibling.classList.remove('active'); + sibling.classList.remove('expanded'); } }); - element.classList.toggle('active'); + element.classList.toggle('expanded'); } // Add toggle icon to a-tags of menu items in .toc navigations diff --git a/packages/typo3-docs-theme/assets/js/menu-scope.js b/packages/typo3-docs-theme/assets/js/menu-scope.js new file mode 100644 index 000000000..95b3bfc20 --- /dev/null +++ b/packages/typo3-docs-theme/assets/js/menu-scope.js @@ -0,0 +1,9 @@ +(() => { + 'use strict' + + // add a separate state for expanded elements + const elements = Array.from(document.querySelectorAll('.main_menu li.active:has(li)')) + elements.forEach((element) => { + element.classList.add('expanded') + }) +})() diff --git a/packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss b/packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss index 72e33863f..535ae5b8d 100644 --- a/packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss +++ b/packages/typo3-docs-theme/assets/sass/layout/navigation/_main_navigation.scss @@ -50,7 +50,7 @@ border-radius: $border-radius; overflow: hidden; padding-left: calc(#{$spacer} / 2) ; - &.active { + &.expanded { border-left: 1px solid rgba(0, 0, 0, .15); border-radius: 0; } @@ -90,6 +90,8 @@ } .active > a { font-weight: bold; + } + .expanded > a { > .toctree-expand { &:before { display: none; @@ -98,7 +100,7 @@ } > ul { padding-left: 0; - .active { + .expanded { > ul { display: block !important; } diff --git a/packages/typo3-docs-theme/resources/public/css/theme.css b/packages/typo3-docs-theme/resources/public/css/theme.css index 8bc735470..fd670aaec 100644 --- a/packages/typo3-docs-theme/resources/public/css/theme.css +++ b/packages/typo3-docs-theme/resources/public/css/theme.css @@ -25379,7 +25379,7 @@ dl.field-list > dt:after { overflow: hidden; padding-left: calc(1rem / 2); } -.main_menu li.active { +.main_menu li.expanded { border-left: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0; } @@ -25418,13 +25418,13 @@ dl.field-list > dt:after { .main_menu .active > a { font-weight: bold; } -.main_menu .active > a > .toctree-expand:before { +.main_menu .expanded > a > .toctree-expand:before { display: none; } .main_menu > ul { padding-left: 0; } -.main_menu > ul .active > ul { +.main_menu > ul .expanded > ul { display: block !important; } .main_menu > ul > li ul { diff --git a/packages/typo3-docs-theme/resources/public/js/theme.min.js b/packages/typo3-docs-theme/resources/public/js/theme.min.js index 39d357c4c..b8713352a 100644 --- a/packages/typo3-docs-theme/resources/public/js/theme.min.js +++ b/packages/typo3-docs-theme/resources/public/js/theme.min.js @@ -1 +1 @@ -(()=>{const a="code-block-hide";if(navigator.clipboard||navigator.clipboard.writeText){const o=e=>{var t=e.querySelector(".code-block-copy-icon"),o=e.querySelector(".code-block-check-icon"),e=e.querySelector(".code-block-check-tooltip");t.classList.toggle(a),o.classList.toggle(a),e.classList.toggle(a)};[...document.querySelectorAll(".code-block-copy")].forEach(e=>{e.addEventListener("click",e=>{const t=e.target.closest(".code-block-wrapper");e=t.querySelector(".code-block");e?(navigator.clipboard.writeText(e.textContent),o(t),setTimeout(()=>{o(t)},3e3)):console.warn("Cannot copy code as no code block is available!")})})}else console.info('"navigator.clipboard.writeText" is not available. Update to a modern browser to copy code to the system\'s clipboard')})(),[].slice.call(document.querySelectorAll(".code-inline[aria-description]")).map(function(e){var t=e.getAttribute("aria-description"),o=e.getAttribute("aria-details");return new bootstrap.Popover(e,{title:o?t:"",content:o||t,trigger:"hover",placement:"bottom"})}),(()=>{const l="#permalink-uri",s="#permalink-html";function d(a){const r=a.querySelector("#permalink-alert-success");var e=a.querySelectorAll(".copy-button");navigator.clipboard&&navigator.clipboard.writeText?e.forEach(e=>{e.addEventListener("click",function(){var e,t,o=this.getAttribute("data-target"),o=a.querySelector("#"+o);o?(r.classList.remove("d-none"),r.innerHTML=`Snippet ${e=o.value,t=document.createElement("div"),t.textContent=e,t.innerHTML} was copied to your clipboard.`,navigator.clipboard.writeText(o.value)):console.warn("Cannot copy link as no input is available!")})}):(console.info('"navigator.clipboard.writeText" is not available. Update to a modern browser to copy code to the system\'s clipboard'),e.forEach(e=>e.disabled=!0))}const u=document.querySelector("#linkReferenceModal");u.addEventListener("show.bs.modal",function(e){var t,e=e.relatedTarget,o=e.closest("section"),a=e.dataset.id||(o?o.dataset.rstAnchor:null),r=e.closest("h1, h2, h3, h4, h5, h6, dt"),r=r?r.innerText:"",n=e.dataset.rstcode,e=e.title,c=(c=u,i=a||n,c=c.querySelector(".alert-permalink-rst"),i?c.classList.add("d-none"):c.classList.remove("d-none"),i=o,c=a,"null"===window.location.origin||"file://"===window.location.origin?null:c?""+window.location.origin+window.location.pathname+"#"+c:""+window.location.origin+window.location.pathname+"#"+(i?.id||"")),i=u.dataset.currentFilename,a=n||(n=u,o=o,t=r,a=a,i=i,n=n.dataset.interlinkShortcode||"somemanual",a?`:ref:\`${t} <${n}:${a}>\``:""===i?"":`:doc:\`${t} <${n}:${i}#${o?.id||""}>\``);t=u,n=r,i=c,o=a,(r=e)&&(t.querySelector("h5").innerHTML=r),null===i?(t.querySelector(l).value="",t.querySelector(s).value=""):(t.querySelector(l).value=i,t.querySelector(s).value=`${n}`),r=t.querySelector("#permalink-rst"),i=r.closest("div"),""===o?i.classList.add("d-none"):(i.classList.remove("d-none"),r.value=o),d(u)})})(),(()=>{"use strict";function o(e){e.preventDefault();const t=e.currentTarget.parentElement.parentElement;e=t.parentElement.parentElement.querySelectorAll("li.active");Array.from(e).forEach(e=>{e!==t&&e.classList.remove("active")}),t.classList.toggle("active")}var e;e=document.getElementsByClassName("main_menu"),Array.from(e).forEach(e=>{e=e.getElementsByTagName("a");Array.from(e).forEach(e=>{var t;e.nextSibling&&((t=document.createElement("span")).classList.add("toctree-expand"),t.addEventListener("click",o,!0),e.prepend(t))})})})(),window.addEventListener("load",()=>{var e,t,o=window.location.pathname.match(/^\/(c|m|p|h|other)\/[A-Za-z0-9\-_]+\/[A-Za-z0-9\-_]+\/[A-Za-z0-9\-.]+\/[A-Za-z0-9\-]+\/(Changelog\/[A-Za-z0-9\-.]+\/)?/),o=o?o[0]:null;o&&(e=document.getElementById("searchscope"),(t=document.createElement("option")).value=o,t.text="Search current",e.add(t))}),(()=>{"use strict";const e=Array.from(document.querySelectorAll('.nav-item > [role="tab"]'));function n(e){return e.innerHTML.trim()}document.addEventListener("shown.bs.tab",function(a){const r=n(a.target);e.filter(e=>{var t=n(e)===r,o=e===a.target,e="true"===e.getAttribute("aria-selected");return t&&!o&&!e}).forEach(e=>{new bootstrap.Tab(e).show()})})})(),(()=>{"use strict";const t="https://docs.typo3.org/services/ajaxversions.php?url=";var e=document.getElementById("toc-version");e&&e.addEventListener("click",function(){var e=document.getElementById("toc-version-wrapper");const a=document.getElementById("toc-version-options");e.classList.toggle("toc-version-wrapper-active"),a.dataset.ready||async function(){var e=t+encodeURI(document.URL);return(e=await fetch(e)).ok?e.text():""}().then(e=>{var t,o;""===e&&(e="

No data available.

"),t=a,e=e,(o=document.createElement("dl")).innerHTML=e,t.innerHTML="",t.appendChild(o),a.dataset.ready="true"})})})(); \ No newline at end of file +(()=>{const a="code-block-hide";if(navigator.clipboard||navigator.clipboard.writeText){const o=e=>{var t=e.querySelector(".code-block-copy-icon"),o=e.querySelector(".code-block-check-icon"),e=e.querySelector(".code-block-check-tooltip");t.classList.toggle(a),o.classList.toggle(a),e.classList.toggle(a)};[...document.querySelectorAll(".code-block-copy")].forEach(e=>{e.addEventListener("click",e=>{const t=e.target.closest(".code-block-wrapper");e=t.querySelector(".code-block");e?(navigator.clipboard.writeText(e.textContent),o(t),setTimeout(()=>{o(t)},3e3)):console.warn("Cannot copy code as no code block is available!")})})}else console.info('"navigator.clipboard.writeText" is not available. Update to a modern browser to copy code to the system\'s clipboard')})(),[].slice.call(document.querySelectorAll(".code-inline[aria-description]")).map(function(e){var t=e.getAttribute("aria-description"),o=e.getAttribute("aria-details");return new bootstrap.Popover(e,{title:o?t:"",content:o||t,trigger:"hover",placement:"bottom"})}),(()=>{const l="#permalink-uri",s="#permalink-html";function d(a){const r=a.querySelector("#permalink-alert-success");var e=a.querySelectorAll(".copy-button");navigator.clipboard&&navigator.clipboard.writeText?e.forEach(e=>{e.addEventListener("click",function(){var e,t,o=this.getAttribute("data-target"),o=a.querySelector("#"+o);o?(r.classList.remove("d-none"),r.innerHTML=`Snippet ${e=o.value,t=document.createElement("div"),t.textContent=e,t.innerHTML} was copied to your clipboard.`,navigator.clipboard.writeText(o.value)):console.warn("Cannot copy link as no input is available!")})}):(console.info('"navigator.clipboard.writeText" is not available. Update to a modern browser to copy code to the system\'s clipboard'),e.forEach(e=>e.disabled=!0))}const u=document.querySelector("#linkReferenceModal");u.addEventListener("show.bs.modal",function(e){var t,e=e.relatedTarget,o=e.closest("section"),a=e.dataset.id||(o?o.dataset.rstAnchor:null),r=e.closest("h1, h2, h3, h4, h5, h6, dt"),r=r?r.innerText:"",n=e.dataset.rstcode,e=e.title,c=(c=u,i=a||n,c=c.querySelector(".alert-permalink-rst"),i?c.classList.add("d-none"):c.classList.remove("d-none"),i=o,c=a,"null"===window.location.origin||"file://"===window.location.origin?null:c?""+window.location.origin+window.location.pathname+"#"+c:""+window.location.origin+window.location.pathname+"#"+(i?.id||"")),i=u.dataset.currentFilename,a=n||(n=u,o=o,t=r,a=a,i=i,n=n.dataset.interlinkShortcode||"somemanual",a?`:ref:\`${t} <${n}:${a}>\``:""===i?"":`:doc:\`${t} <${n}:${i}#${o?.id||""}>\``);t=u,n=r,i=c,o=a,(r=e)&&(t.querySelector("h5").innerHTML=r),null===i?(t.querySelector(l).value="",t.querySelector(s).value=""):(t.querySelector(l).value=i,t.querySelector(s).value=`${n}`),r=t.querySelector("#permalink-rst"),i=r.closest("div"),""===o?i.classList.add("d-none"):(i.classList.remove("d-none"),r.value=o),d(u)})})(),(()=>{"use strict";function o(e){e.preventDefault();const t=e.currentTarget.parentElement.parentElement;e=t.parentElement.parentElement.querySelectorAll("li.expanded");Array.from(e).forEach(e=>{e!==t&&e.classList.remove("expanded")}),t.classList.toggle("expanded")}var e;e=document.getElementsByClassName("main_menu"),Array.from(e).forEach(e=>{e=e.getElementsByTagName("a");Array.from(e).forEach(e=>{var t;e.nextSibling&&((t=document.createElement("span")).classList.add("toctree-expand"),t.addEventListener("click",o,!0),e.prepend(t))})})})(),(()=>{"use strict";Array.from(document.querySelectorAll(".main_menu li.active:has(li)")).forEach(e=>{e.classList.add("expanded")})})(),window.addEventListener("load",()=>{var e,t,o=window.location.pathname.match(/^\/(c|m|p|h|other)\/[A-Za-z0-9\-_]+\/[A-Za-z0-9\-_]+\/[A-Za-z0-9\-.]+\/[A-Za-z0-9\-]+\/(Changelog\/[A-Za-z0-9\-.]+\/)?/),o=o?o[0]:null;o&&(e=document.getElementById("searchscope"),(t=document.createElement("option")).value=o,t.text="Search current",e.add(t))}),(()=>{"use strict";const e=Array.from(document.querySelectorAll('.nav-item > [role="tab"]'));function n(e){return e.innerHTML.trim()}document.addEventListener("shown.bs.tab",function(a){const r=n(a.target);e.filter(e=>{var t=n(e)===r,o=e===a.target,e="true"===e.getAttribute("aria-selected");return t&&!o&&!e}).forEach(e=>{new bootstrap.Tab(e).show()})})})(),(()=>{"use strict";const t="https://docs.typo3.org/services/ajaxversions.php?url=";var e=document.getElementById("toc-version");e&&e.addEventListener("click",function(){var e=document.getElementById("toc-version-wrapper");const a=document.getElementById("toc-version-options");e.classList.toggle("toc-version-wrapper-active"),a.dataset.ready||async function(){var e=t+encodeURI(document.URL);return(e=await fetch(e)).ok?e.text():""}().then(e=>{var t,o;""===e&&(e="

No data available.

"),t=a,e=e,(o=document.createElement("dl")).innerHTML=e,t.innerHTML="",t.appendChild(o),a.dataset.ready="true"})})})(); \ No newline at end of file