Checking if matrix lightswitch is true, and add wrapper div

Question

I'm using Zurb foundation's Block Grid and using this in a matrix field where users can (using a block called 'wrapper') add a row and define the number of columns which appear side by side across a desktop device in that row, then using another block 'textBlocks' add divs of text within the row. I also want to add an option of 'fullwidth' a lightswitch field in the 'wrapper' block, so if this is selected then the 'following' will wrap around the row:

<div class="fullwidth">
…row/text content
</div>

but I can't seem to add the closing in the right place (at the end of the row), code below:

{% set isWrapperOpen = false %}
{% for block in entry.pagedesigner %}

  {% switch block.type %}

    {% case "wrapper" %}


      {% if block['fullwidth'] is defined %}<div class="fullwidth">{% endif %}
      {% if isWrapperOpen %}</div>{% endif %}

      <div class="row large-up-{{ block.columns }}">
      {% set isWrapperOpen = true %}
      {{ block.heading }}

    {% case "textBlocks" %}
        <div class="column"> 
          {{ block.text }}      
        </div> 

  {% endswitch %}

  {% if loop.last and isWrapperOpen %}</div>{% endif %}



{% endfor %}

pic added of Publish page

Appreciate semantics need some work but need to figure logic first

UPDATE I've since chatted with Andrew Fairlie from Mutual and got this working (with his guidance) excuse the crude inline styles – just helps aid making visual sense to me :)

{% set isWrapperOpen = false %} {% set isFullWrapperWidthOpen = false %} {% for block in entry.pageDesigner %}

{% switch block.type %}

{% case "wrapper" %}
 {# Close the previous fullwidth wrapper before we open a new one #}
  {% if isFullWrapperWidthOpen %}</div>{% endif %}
  {# Close the previous wrapper before we open a new one #}
  {% if isWrapperOpen %}</div>{% endif %}


  {% if block.fullWidth %}
    {% set isFullWrapperWidthOpen = true %}
     <div class="row expanded" style="background-color: red; margin-bottom: 30px;">
     {% else %}
       {% set isFullWrapperWidthOpen = false %}
    {% endif %}


  <div class="row large-up-{{ block.columns }}">
  {% set isWrapperOpen = true %}

  {% case "heading" %}
   <h2  style="background-color: blue;" class="column text-{{ block.position }} heading heading--{{ block.size }}">
    {{ block.text }}
   </h2>     


  {% case "textBlocks" %}
    <div class="column" style="background-color: yellow;"> 
      {{ block.text }}      
    </div>  

{% endswitch %}

{# If we're on the last block, close up the last wrapper div #} {% if loop.last and isWrapperOpen %}{% endif %} {% if loop.last and isFullWrapperWidthOpen %}**{% endif %} {% endfor %}

Answer 1

Judging from your code it looks like you are struggling with one of Matrix's limitations. Nesting. I have seen, and used, a number of hacks to get around this until I stumbled upon the Neo plugin. I, in fact, use it exclusively for this kind of thing; Bootstrap's and Foundation's rows and columns.... or any other flex grid system for that matter.

So this answer's kinda a non answer because I am going to point you in another direction to achieve Foundations Block Grid.

Because Neo can nest and the code is very similar to a structure using levels, you can do something like this for Foundation's Block Grid.

{% for row in entry.neoField.level(1) %}

  {% for column in row.children %}
    {% if loop.first %}<div class="row small-up-1 medium-up-{{ loop.total }}">{% endif %}
        <div class="column">
            {% for field in column.children %}
            stuff... (use your switch code or I prefer per-field includes)
            {% endfor %}
        </div>
    {% if loop.last %}</div>{% endif %}
 {% endfor %}

{% endfor %}

Will output

   <div class="row small-up-1 medium-up-3">
     <div class="column">
       <img src="//placehold.it/300x300">
     </div>
     <div class="column">
       <img src="//placehold.it/300x300">
     </div>
     <div class="column">
       <img src="//placehold.it/300x300">
     </div>
   </div>

So in Neo I have a top level block called "Row". It has no fields, but it could, you can make it as complicated as you want adding class, background etc. This row block can only have one type of child block called "Column" again, no fields if you don't want. This "Column" block can have any number of child blocks including photo, text, video(even a Row! Inception!). For each row you add, you can have as many columns you want(zurb block grid only works to 8). The total amount of columns you add gets added to the medium-up-3 per the {{ loop.total }}.

Neo Field

Note: The code above is a simplified version. Doing the Row > Column > Row works, but the code's a little more complicated.