So, basically, it’s impossible to have only a </div> in a conditionally called statement, right? Because the SugarCube2 engine parses the code and doesn’t recognize that the </div> is set correctly?
I have this issue:
I want to have six buttons placed like this:
[1] [2] [3]
[4] [5] [6]
They will have content and mouse-over events dependent on the loop variable, so they should be best placed in a <<for>> loop.
The two rows are rendered by a respective <div class="row"> element.
So the output code should look like this:
<div class="row"> /* first row with [1] [2] [3] */
<<for _i to 0; _i lt 6; _i++>>
<div class="button">{button-rendering code}</div>
<<if _i eq 2>> /* after the first 3 buttons, switch the row */
</div> /* end of first row with [1] [2] [3] */
<div class="row"> /* second row with [4] [5] [6] */
<</if>>
<</for>>
</div> /* end of second row with [4] [5] [6] */
When I code it like this, SugarCube says that it can’t find the closing </div> element and refuses to render the sequence.
I can circumvent the problem with two loops, one with _i={0,1,2} and one with _i={3,4,5}. But this is extremely ugly
Is there no other way to have a simple, singular loop?
<div class="row">
<<set $miniGroupBtnId to 1>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 2>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 3>><<include MiniGroupBtn>>
</div>
<br>
<div class="row">
<<set $miniGroupBtnId to 4>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 5>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 6>><<include MiniGroupBtn>>
</div>
This is also not the “prettiest” solution but the rendering code in passage MiniGroupBtn is 29 lines long and does “advanced” things like <<capture>>, calculations of the parameters to the passage that will be called when one of the buttons is activated and so on. So I’m not sure if the approach with the print buffer would work. So I won’t check it out now. But thank you for the suggestion. I’m sure it will come handy in the future.
<div class="grid">
<<set $miniGroupBtnId to 1>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 2>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 3>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 4>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 5>><<include MiniGroupBtn>>
<<set $miniGroupBtnId to 6>><<include MiniGroupBtn>>
</div>
You may also want to look at <<widget>> in the SugarCube documentation, as a way to replace your use of include with something more self-contained, so you can do:
Thank you very much, David.
Your idea with the grid layout and the <<widget>> element helped a lot. It’s a beautiful solution.
Though I found that not only is a .grid class needed but also each element has to be inside its own class.
For all interested, this is my solution (omitting a lot of actual display code, just the absolute necessary stuff).
Definition of the MiniGroupBtn <<widget>>. According to the SugarCube documentation, it has to be defined inside a passage tagged with a tag ‘widget’. I created a passage called “Widgets” with an appropriate tag and this content:
I found the <<nobr>> tag has to be placed outside the <<widget>> definition for best results. Ymmv.
3. Then inside the appropriate passage, I call it like this:
