I have an HMENU with a submenu and I want to add a third submenu, if the main menu point has the uid xxx.
If I implement this TypoScript Code, all third submenus will be shown:
3 = TMENU
3 {
stdWrap.outerWrap = <div class="submenu-third-level"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override = <div class="submenu-third-level show"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override.if {
value.data = field:pid
isInList = 588
}
stdWrap.insertData = 1
NO.wrapItemAndSub = <li class="menu-item">|</li>
ACT = 1
ACT{
wrapItemAndSub = <li class="menu-item active">|</li>
}
SPC = 1
SPC {
doNotLinkIt = 1
doNotShowLink = 1
allWrap = </ul><ul class='submenu'>
}
}
Thus, all submenus of submenus will be shown. But I want to only show the submenus of submenus in HMENU PID XXX.
Is there a possibility to do it like:
3 = TMENU
3 {
stdWrap.outerWrap = <div class="submenu-third-level"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override = <div class="submenu-third-level show"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override.if {
value.data = field:pid
isInList = 588
}
stdWrap.insertData = 1
NO.wrapItemAndSub = <li class="menu-item">|</li>
ACT = 1
ACT{
wrapItemAndSub = <li class="menu-item active">|</li>
}
SPC = 1
SPC {
doNotLinkIt = 1
doNotShowLink = 1
allWrap = </ul><ul class='submenu'>
}
if {
value.data = field:pid
equals = xxx
}
}
Look you better use new HMENU like:
lib.mainmenu = HMENU
...{
1 = TMENU
...
2 = TMENU
} # so just two levels
lib.tempmenu <. lib.mainmenu # just save your menu
[PIDinRootline = xxx]
#or [globalVar = TSFE:id=xxx]
lib.mainmenu <. lib.tempmenu
lib.mainmenu.3 = TMENU # just add 3d submenu. Prev menu haven't it
[global]
If not, please leave comment
thanks for your response. I solved in a different way and it works great.
My solution:
3 = TMENU
3 {
stdWrap.outerWrap = <div class="submenu-third-level"><ul class='submenu'>|</ul></div>
stdWrap.if {
value.data = field:pid
isInList = {$menu.thirdSubmenuList}
}
NO.wrapItemAndSub = <li class="menu-item">|</li>
ACT = 1
ACT{
wrapItemAndSub = <li class="menu-item active">|</li>
}
SPC = 1
SPC {
doNotLinkIt = 1
doNotShowLink = 1
allWrap = </ul><ul class='submenu'>
}
}
The condition decide, if the menu will be displayed or not.
best regards
Related
I used Gridelements a while now. I used the following code:
TypoScript (Gridelements (deprecated) (gridelements)):
tt_content.gridelements_pi1.20.10.setup {
2col < lib.gridelements.defaultGridSetup
2col.cObject = FLUIDTEMPLATE
2col.cObject.file = {$resDir}/Private/Partials/Gridelements/2spalten.html
}
FLUID Template:
<div class="row">
<div class="col-md-6">
{data.tx_gridelements_view_column_0}
</div>
<div class="col-md-6">
{data.tx_gridelements_view_column_1}
</div>
</div>
PageTS:
tx_gridelements.setup {
2col {
title = Two Columns
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Links
colPos = 0
}
2 {
name = Rechts
colPos = 1
}
}
}
}
}
}
}
But now I want to use "Gridelements w/DataProcessing (recommended) (gridelements)" because the other one is deprecated. But all I see is the error:
Tried resolving a template file for controller action "Standard->2col"
in format ".html", but none of the paths contained the expected
template file (Standard/2col.html). The following paths were checked:
/var/www/html/typo3/sysext/fluid_styled_content/Resources/Private/Templates/,
/var/www/html/typo3/typo3conf/ext/gridelements/Resources/Private/Templates/,
/var/www/html/typo3/typo3conf/ext/dev_layout/Resources/Private/Templates/
If I write this in my TypoScript code:
lib.gridelements.defaultGridSetup =< lib.contentElement
lib.gridelements.defaultGridSetup {
templateRootPaths {
20 = {$resDir}/Private/Templates/Gridelements/
}
}
tt_content.gridelements_pi1 < lib.gridelements.defaultGridSetup
tt_content.gridelements_view < tt_content.gridelements_pi1
And when I create the named file, the error no longer appears. But there is no output. I see the divs but no content. How can I switch from deprecated gridelements to dataprocessing gridelements?
"The documentation is wrong you need this"
tt_content.gridelements_pi1 =< lib.contentElement
Sure? I could still use the original as it is written in the example for w / DataProcessing:
lib.gridelements.defaultGridSetup =< lib.contentElement
The problem is that this code
tt_content.gridelements_pi1.20.10.setup {
2col < lib.gridelements.defaultGridSetup
2col.cObject = FLUIDTEMPLATE
2col.cObject.file = {$resDir}/Private/Partials/Gridelements/2spalten.html
}
does not match the new static you included.
Take a look at the basic example shown in the documentation:
https://docs.typo3.org/typo3cms/extensions/gridelements/stable/Chapters/DataProcessing/Index.html
lib.gridelements.defaultGridSetup =< lib.contentElement
lib.gridelements.defaultGridSetup {
templateName.field = tx_gridelements_backend_layout
templateName.ifEmpty = GridElement
layoutRootPaths {
1 = EXT:gridelements/Resources/Private/Layouts/
}
partialRootPaths {
1 = EXT:gridelements/Resources/Private/Partials/
}
templateRootPaths {
1 = EXT:gridelements/Resources/Private/Templates/
}
dataProcessing {
10 = GridElementsTeam\Gridelements\DataProcessing\GridChildrenProcessor
10 {
default {
as = children
# Default options of the grid children processor
# Change them according to the needs of your layout
# Read more about it in the TypoScript section of the manual
# options {
# sortingDirection = ASC
# sortingField = sorting
# recursive = 0
# resolveFlexFormData = 1
# resolveBackendLayout = 1
# respectColumns = 1
# respectRows = 1
# }
}
}
}
}
Now if you want to add your own templates and rendering configurations you just need to add something in dataProcessing.10 like
dataProcessing {
10 = GridElementsTeam\Gridelements\DataProcessing\GridChildrenProcessor
10 {
2col {
as = columncontent
options {
resolveFlexFormData = 0
respectRows = 0
}
}
accordion {
as = accordionitems
options {
resolveFlexFormData = 0
respectRows = 0
respectColumns = 0
}
}
}
}
The name of the variables can still be children, but it might be more comfortable to deal with variable names matching then purpose of your template.
I found the solution:
Template:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="row">
<f:if condition="{children}">
<f:for each="{children.1}" as="column" key="columnNumber">
<div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} col-lg-6">
<f:for each="{column}" as="child">
<f:render partial="Child"
arguments="{data: child.data, children: child.children, options: options, settings: settings}" />
</f:for>
</div>
</f:for>
</f:if>
</div>
</html>
For two different cols
<div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} {f:if(condition: '{columnNumber} == 0', then: 'col-lg-3', else: 'col-lg-9')}">
My column numbers are left 0 and right 1
TS in dataprocessing.10:
2col {
as = children
options {
resolveChildFlexFormData = 0
}
}
}
The documentation is wrong you need this
tt_content.gridelements_pi1 =< lib.contentElement
TSconfig:
Default gridelements TSConfig
I got same error after i upgrade to latest TYPO3 10 version from Typo3 9 and include Gridelement (Recommended).
Tried resolving a template file for controller action "Standard->1" in format ".html", but none of the paths contained the expected template file (Standard/1.html). The following paths were checked:
Solution:
Rename gridelement template name with 1.html for gridelement uid=1
Change TS like:
tt_content.gridelements_pi1 {
templateRootPaths {
15 = EXT:site_config/Resources/Private/Templates/Extensions/Grid-Templates/
}
dataProcessing {
10 {
default {
options {
resolveFlexFormData = 1
resolveChildFlexFormData = 0
}
}
}
}
}
Inside Grid-Templates add your gridelement templates like 1.html, 2.html etc.
3) change template(HTML) code like this:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="row">
<f:if condition="{children}">
<f:for each="{children.1}" as="column" key="columnNumber">
<div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} col-lg-6">
<f:for each="{column}" as="child">
<f:render partial="Child"
arguments="{data: child.data, children: child.children, options: options, settings: settings}" />
</f:for>
</div>
</f:for>
</f:if>
</div>
</html>
I don't understand how I can set up several Bokeh Chart in my django template. I have read this page https://docs.bokeh.org/en/latest/docs/user_guide/embed.html which supposed to explain this but it is not clear at all.
Here is my view :
def Bokehplot(request):
source = ColumnDataSource(S.df)
p = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
p.line("date", "Te", source = source, line_width = 2,color = "green", alpha = 0.6)
q = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
q.line("date", "Tr", source = source, line_width = 2,color = "red", alpha = 0.6)
plots = {'Red': p, 'Blue': q}
script, div = components(plots)
return render(request, 'batterie/results.html', locals())
{{div|safe}} gives the 2 divs on a row. I would like to access div1 (first graph) and div2 (second graph) in order to put them in 2 different bootstrap columns ? Any help is welcome. Thanks!
Got my answer, very simple. My View :
def Bokehplot(request):
source = ColumnDataSource(S.df)
p = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
p.line("date", "Te", source = source, line_width = 2,color = "green", alpha = 0.6)
q = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
q.line("date", "Tr", source = source, line_width = 2,color = "red", alpha = 0.6)
plots = {'Red': p, 'Blue': q}
script, div = components(plots)
div1 = div["Red"]
div2 = div["Blue"]
return render(request, 'batterie/results.html', locals())
My template :
<div class = "row">
<div class = "col-sm-6 p-3 text-center">
{{ div1 | safe }}
</div>
<div class = "col-sm-6 p-3 text-center">
{{ div2 | safe }}
</div>
</div>
Now, I can arrange my plots with Bootstrap. Cool !
I am newbie in ROKU development.I apologise if my question seems stupid because i am just starting with it.I am working on customvideoplayer example that comes with ROKU sdk examples. I want to add buttons on the canvas for play ,stop ,minimise and maximise functionality. I have reseacrhed on it but have not been able to add the buttons. Moreover I also want to capture the click events of those buttons and perform the requireds fuctionality on their click.
How do I write maximise and minimise codes on button click??
Any suggestions about how I can create those buttons and perform required functionality , would be really appreciated.
Here is the code I am using:
Sub RunUserInterface()
o = Setup()
o.setup()
o.paint()
o.eventloop()
End Sub
Sub Setup() As Object
this = {
port: CreateObject("roMessagePort")
progress: 0 'buffering progress
position: 0 'playback position (in seconds)
paused: false 'is the video currently paused?
feedData: invalid
playing: 0
playingPrev: 0
playlistSize: 0
canvas: CreateObject("roImageCanvas") 'user interface
player: CreateObject("roVideoPlayer")
load: LoadFeed
setup: SetupFullscreenCanvas
paint: PaintFullscreenCanvas
create_playlist_text: CreatePlaylistText
drawtext: false
eventloop: EventLoop
}
this.targetRect ={x: 100, y: 100, w: 600, h:500}
' this.targetRect = this.canvas.GetCanvasRect()
'this.textRect = {x: 520, y: 480, w: 300, h:200}
this.textRect = {x: 150, y: 470, w: 300, h:200}
this.load()
'Setup image canvas:
this.canvas.SetMessagePort(this.port)
this.canvas.SetLayer(0, { Color: "#000000" })
this.canvas.Show()
this.player.SetMessagePort(this.port)
this.player.SetLoop(true)
this.player.SetPositionNotificationPeriod(1)
this.player.SetDestinationRect(this.targetRect)
this.player.Play()
this.playingPrev = this.playing
return this
End Sub
Sub EventLoop()
while true
msg = wait(0, m.port)
if msg <> invalid
if msg.isStatusMessage() and msg.GetMessage() = "startup progress"
m.paused = false
print "Raw progress: " + stri(msg.GetIndex())
progress% = msg.GetIndex() / 10
if m.progress <> progress%
m.progress = progress%
m.paint()
end if
'Playback progress (in seconds):
else if msg.isPlaybackPosition()
m.position = msg.GetIndex()
print "Playback position: " + stri(m.position)
else if msg.isRemoteKeyPressed()
index = msg.GetIndex()
print "Remote button pressed: " + index.tostr()
if index = 4 '<LEFT>
m.playing = m.playing - 1
if (m.playing < 0)
m.playing = 2
endif
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
else if index = 8 '<REV>
m.position = m.position - 60
m.player.Seek(m.position * 1000)
else if index = 5 '<RIGHT>
m.playing = m.playing + 1
if (m.playing > 2)
m.playing = 0
endif
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
else if index = 9 '<REV>
m.position = m.position + 60
m.player.Seek(m.position * 1000)
else if index = 2 '<Up>
if m.drawtext
m.playing = m.playing - 1
if (m.playing < 0)
m.playing = m.playlistSize-1
endif
m.paint()
endif
else if index = 3 '<Down>
if m.drawtext
m.playing = m.playing + 1
if (m.playing > m.playlistSize-1)
m.playing = 0
endif
m.paint()
endif
else if index = 13 '<PAUSE/PLAY>
if m.paused m.player.Resume() else m.player.Pause()
else if index = 6 'OK
if m.drawtext
m.drawtext = false
if m.playing <> m.playingPrev
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
endif
else
m.drawtext = true
endif
m.paint()
end if
else if msg.isPaused()
m.paused = true
m.paint()
else if msg.isResumed()
m.paused = false
m.paint()
end if
endif
end while
End Sub
Sub SetupFullscreenCanvas()
m.canvas.AllowUpdates(false)
m.paint()
m.canvas.AllowUpdates(true)
End Sub
Sub PaintFullscreenCanvas()
splash = []
list = []
if m.progress < 100
progress_bar = {TargetRect: {x: 100, y: 500, w: 598, h: 37}, url: "pkg:/images/progress_bar.png"}
color = "#00a0a0a0"
splash.Push({
url: "pkg:/images/splash.png"
TargetRect: m.targetRect
})
list.Push({
Text: "Loading..."
TextAttrs: { font: "large", color: "#707070" }
TargetRect: m.textRect
})
if m.progress >= 0 AND m.progress < 20
progress_bar.url = "pkg:/images/progress_bar_1.png"
print progress_bar.url
else if m.progress >= 20 AND m.progress < 40
progress_bar.url = "pkg:/images/progress_bar_2.png"
print progress_bar.url
else if m.progress >= 40 AND m.progress < 75
progress_bar.url = "pkg:/images/progress_bar_3.png"
print progress_bar.url
else
progress_bar.url = "pkg:/images/progress_bar_4.png"
print progress_bar.url
endif
list.Push(progress_bar)
end if
if m.drawtext
textArr = m.create_playlist_text()
yTxt = 100
color = "#00000000"
index = 0
for each str in textArr
if index = m.playing
textColor = "#00ff00"
else
textColor = "#dddddd"
endif
list.Push({
Text: str
TextAttrs: {color: textColor, font: "medium"}
TargetRect: {x:700, y:yTxt, w: 500, h: 100}
})
yTxt = yTxt + 100
index = index + 1
end for
else
color = "#00000000"
list.Push({
Text: ""
TextAttrs: {font: "medium"}
TargetRect: {x:100, y:600, w: 300, h: 100}
})
endif
'Clear previous contents
m.canvas.ClearLayer(0)
m.canvas.ClearLayer(1)
m.canvas.ClearLayer(2)
m.canvas.SetLayer(0, { Color: color, CompositionMode: "Source" })
if (splash.Count() > 0)
m.canvas.SetLayer(1, splash)
m.canvas.SetLayer(2, list)
else
m.canvas.SetLayer(1, list)
endif
list.Clear()
splash.Clear()
End Sub
Function LoadFeed() as void
jsonAsString = ReadAsciiFile("pkg:/json/feed.json")
m.feedData = ParseJSON(jsonAsString)
m.playlistSize = m.feedData.Videos.Count()
contentList = []
for each video in m.feedData.Videos
contentList.Push({
Stream: { url: video.url }
StreamFormat: "mp4"
})
end for
m.player.SetContentList(contentList)
End Function
Function CreatePlaylistText() as object
textArr = []
for each video in m.feedData.Videos
textArr.Push(video.title)
end for
return textArr
End Function
I would like to combine two menu's into one for mobile. So with the foundation top-bar the standaard menu is shown and the below the tip menu into one menu. But i don't get the tip menu wrapped into the main menu just before the first . See code below, any idee?
topnavigation = HMENU
topnavigation.wrap (
<section class="topnavigation">
<div class="row">
<div class="columns large-12">
<nav class="top-bar" data-topbar data-options="back_text: « Vorige">
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-catmenu show-for-small menu-icon">Tips</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">|<li class="divider"></li></ul>
</section>
</nav>
</div>
</div>
</section>
)
topnavigation.entryLevel = 0
topnavigation {
1= TMENU
1 {
expAll = 1
maxItems = 4
NO.wrapItemAndSub = <li class="top-but">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active top-but">|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="has-dropdown top-but">|</li>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="active has-dropdown top-but">|</li>
}
2= TMENU
2 {
wrap = <ul class="dropdown">|</ul>
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
}
}
tipmenu = HMENU
tipmenu.special = directory
tipmenu.special.value = 8
tipmenu.allWrap = <ul class="left">|</ul>
tipmenu {
1 = TMENU
1 {
expAll = 1
maxItems = 4
NO.wrapItemAndSub = <li class="top-but">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active top-but">|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="has-dropdown top-but">|</li>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="active has-dropdown top-but">|</li>
}
2= TMENU
2 {
wrap = <ul class="dropdown">|</ul>
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
}
}
You can't combine one HMENU inside the other instead you need to use COA cObject, COA allows for combining many cObjects (even different type):
myCombinedMenu = COA
myCombinedMenu.10 < lib.mainMenu
myCombinedMenu.20 < lib.additionalMenu
myCombinedMenu.30 = TEXT
myCombinedMenu.30.value = ...and that's it...
This should do it. COA is not necessary. This solution has a common parent ul tag and displays both sub tree items (the items of two different sub-trees) at the same ul level:
temp.mainMenuObject = HMENU
temp.mainMenuObject {
# entryLevel = 1
special = directory
special.value = pid1, pid2 # pids of parent pages
1 = TMENU
1 {
expAll = 1
wrap = <ul> | </ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
ATagTitle.field = title
}
}
2 < .1
}
I'm trying to modify a template in TYPO3 and I can modify some parts of the page, but not some other parts that are 1 level deeper. For example :
HTML
<body>
...
<div class="wrapper">
...
<div id="content-right">
<div id="colRight">
<div id="metaNav"></div>
</div>
</div>
...
</div>
...
</body>
Typoscript
page.10.subparts {
colRight = HMENU
colRight.wrap = <ul>|</ul>
colRight.special.value = 6, 7, 8, 9
colRight.1 = TMENU
colRight.1 {
noBlur = 1
NO = 1
NO {
allWrap = <li>|</li>
}
}
}
But if I change colRight with metaNav (because this is where we want the links so we can place other contents in colRight), nothing happens; no content is displayed. Why?
While you have it mapped to #colRight and have problem with mapping it to its child div you can just add a HTML markup to element's wrap:
page.10.subparts {
colRight = HMENU
colRight.wrap = <div id="metaNav"><ul>|</ul></div>
// etc...
}
With rule #1: In TS every way is the best solution to get immediate results :)
edit
if you need to render many different elements under one HTML tag, you can also use COA element to span them:
page.10.subparts {
colRight = COA
colRight {
10 = HMENU
10 {
wrap = <div id="metaNav"><ul>|</ul></div>
// etc...
}
20 = TEXT
20 {
value = my text in #colRight right after #metaNav
wrap = <div class="containerAfterMetsNav">|</div>
}
}
}