Apostrophe CMS propagating edit:false of area to all children widgets and pieces

Question

I have a normal set of widgets that you generally edit on the page, no problem. However, I have a requirement to edit these widgets in a modal schema area as the component is being animated and things get a bit funky. Setting edit:false does stop the area being edited but all the widgets and pieces inside the area can still be edited? I need to stop this as I can’t really edit in either the modal of the page as I get an error saying " You were unable to take control of the document" in the modal and nothing being saved via contextual edits?

Are you asking both how to make edit: false cascade to the sub-areas and how to fix it so you can edit these at all in the modal? It sounds like you're stuck on both points, but I'm not sure. — Tom Boutell
Okay to be as clear as I can : 1) I have a widget that animates content. 2) That content can not be contextually edited as lots of it can be hidden or moving. 3) the widget uses an array type to hold multiple apos-areas. 4) I need those areas to be modally edited only. 5) I pass the edit false on the main area in the template (which works), but all sub-areas are still editable and create quite a few problems with content locking messages. — Rob McGlade
OK I see. So the editing in the modal works great. The problem is that you can't shut off the editing in the sub-areas "in context." But you can add edit: false to each of them, no? In their widget.html where these nested apos.area calls are found. — Tom Boutell

Felix Felix · Accepted Answer · 2019-03-18T22:40:35

I understand what you mean sometimes you need a little bit more flexibility than calling the values of your widget in an non editable singleton or area in your view.html

I found the solution in creating pieces widgets as described in this tutorial This allows you to call values of your widget wherever you want, without any edit functionality. You can call the same field on different places and one in animated and flies around and all stuff, the other static header for example.

Here you'll find an example how I used an pieces widget and displayed all fields on view.html. I have even added an if condition so without user input die fields won't be loaded in your widget.html.

I think this solution fits the best for your needs.

 {% for piece in data.widget._pieces %}
  <div class="card horizontal" style="
    {%- if piece.backColor-%}
      background-color:{{ piece.backColor }}
    {% endif %}
  ">

    {%- if piece._image -%}
    <div class="card-image hide-on-small-only">
      <img width="100%" src="{{ apos.attachments.url(piece._image.attachment, { size: data.options.size or 'full' }) }}">
    </div>
    {%- endif -%}
    <div class="card-stacked">
      <div class="card-content" style="
        {%- if piece.backColor-%}
          background-color:{{ piece.backColor }}
        {% endif %}
      ">

        {%- if piece.title -%}
          <span class="card-title">
            <h5 class="accent-color" style="
              {%- if piece.titleColor -%}
                color:{{ piece.titleColor }}
              {% endif %}
            ">
              {{ piece.title }}
            </h5>
          </span>
        {%- endif -%}

        {%- if piece.text -%}
            {{ apos.area(piece, 'text', {
              edit: false,
              widgets: { 'apostrophe-rich-text': { } }
            }) }}
        {%- endif -%}

      </div>
    </div>
  </div>
 {% endfor %}

So broken down to the simplest value this {{ piece.titleColor }} means an simple widget schema like this in your widgets index.js

{
  name: 'titleColor',
  label: 'Title Color',
  type: 'color',
  help: 'Remove to set title to Accent Color'
},

Apostrophe CMS propagating edit:false of area to all children widgets and pieces

1 Answers