Skip to content

Instantly share code, notes, and snippets.

@pgampe

pgampe/menu.ts

Last active Aug 4, 2020
Embed
What would you like to do?
Fully cached menu with TypoScript
page.10 >
page.10 = COA
page.10 {
cache {
key = main-menu
}
10 = TEXT
10 {
data = date : U
strftime = %H:%M:%S
noTrimWrap = |Time: | |
}
20 = HMENU
20 {
special = directory
special.value = 2
wrap = <div class"menu">|</div>
1 = TMENU
1.expAll = 1
1.wrap = <ul>|</ul>
1 {
NO = 1
NO.wrapItemAndSub = <li>|</li>
}
2 < .1
3 < .1
4 < .1
}
}
# replaces the A tag of the active menu item
page.stdWrap.replacement.10 {
search.cObject = HMENU
search.cObject {
special = list
special.value.field = uid
# take care to copy any additional params to the A tag
1 = TMENU
1 {
NO = 1
}
}
replace.cObject = HMENU
replace.cObject {
special = list
special.value.field = uid
# take care to copy any additional params to the A tag
1 = TMENU
1 {
NO = 1
NO.ATagParams = class="active"
}
}
}
/*
debug here
page.20 >
page.20 < page.stdWrap.replacement.10.search.cObject
page.30 >
page.30 < page.stdWrap.replacement.10.replace.cObject
*/
@pi-phi

This comment has been minimized.

Copy link

@pi-phi pi-phi commented Jun 6, 2018

wäre es nicht einfacher die highlighting Klassen 'current' und 'active' per Javascript im Browser setzen zu lassen?
jeder Menüeintrag benötigt dafür natürlich eine eindeutige ID (zb. '#m').
auf jeder Seite wird ein Javascript Funktionsaufruf mit der aktuellen page uid als Parameter generiert.

die dazugehörige javascript-Funktion sucht den Menüeintrag, setzt die 'current' Klasse und hangelt sich im Menü-DOM nach oben um jeweils die 'active' Klasse zu setzen.

@mgrn0

This comment has been minimized.

Copy link

@mgrn0 mgrn0 commented Dec 13, 2019

Einfacher, ja - sauberer, nein. Genausogut könnte man das gesamte Menü auf einer Seite ausgeben und "vorberechnen/cachen" lassen und auf allen andren Seiten per Ajax laden - technisch gehts, ist aber alles andre als sinnvoll.
Alles was serverseitig im Markup geht, sollte imho nicht per JS clientseitig geflickt werden.

Eine noch optimierte Loesung findet man übrigens hier: https://gist.github.com/julrich/d91c1ac1968418e6ae8290f2a2e90afb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment