Conditional keywords in Content Container Templates

(Ryan Archer) #1

**Matrix Version:**5.3.3

I’m attempting to develop a Content Container Template (CCT) that will allow Edit+ users to create columns for sites using frameworks such as Bootstrap, Foundation, Skeleton, etc.

I’m running into some issues with making some conditional statements working in the Simple Edit Layout.

I’m using a Metadata section to allow the user to select how many columns they want in a row (right now just testing with 3 available). They make this selection via a select menu. Then options for configuring the width of each column for various devices will appear below.

I am trying to do this with conditional keywords with a keyword modifier. I get the feeling that this kind of thing won’t “fly” within an Simple Edit Layout:

<!-- Template Edit Layout Start: %globals_asset_name:352832% -->
<div id="tmpedit_id-%asset_assetid%" data-id="%asset_assetid%" data-url="%globals_asset_assetid:352161%" data-asset="%globals_asset_assetid:352162%" data-settings="%globals_asset_assetid:352163%">
    <div class="tmpedit_metadata-wrapper colpicker">
        %metadata-F_section_353008_values%
    </div>
    <div class="tmpedit_metadata-wrapper coldata">
        %begin_asset_metadata_column-no^:eq:1%
          %metadata-F_section_352923_values%
        %else_begin_asset_metadata_column-no^:eq:2%
          %metadata-F_section_352923_values%
          %metadata-F_section_353019_values%
        %else_begin_asset_metadata_column-no^:eq:3%
          %metadata-F_section_352923_values%
          %metadata-F_section_353019_values%
          %metadata-F_section_353024_values%
        %else_asset%
          <span>Please choose an option</span>
        %end_asset%
    </div>
</div>

I keep getting the warning “The content of asset #352843 is broken by misused conditional keywords. Make sure begin, else and end keywords are used in correct logical order” and of course the logic fails. I’ve tried doing some JS/jQuery hacks as well but it hasn’t worked out very well either.

Obviously what I am trying to do is obscure options that don’t need to show if the user does not need them (i.e. if they only want two columns, only those options should appear).

Can this work. If not, what would be the best approach?

(Bart Banda) #2

I’ve never used conditional begin/else/end keyword in SEI before, will need to confirm if it’s supported there. Are you on a version that supports else_begin as well?

I would actually do that using JS anyways because then you can show/hide stuff as soon as the user changes a value in the colpicker field without having to save the screen first.

(Ryan Archer) #3

Hi Bart,

Funny thing is that I did try and use JS and yes it did work the first time. I went home feeling happy. The next day the JS does not work to toggle the options in the Edit+ screen and there is nothing telling me why, no console error - nothing!

Here was the script that I used:

<div id="tmpedit_id-%asset_assetid%" data-id="%asset_assetid%" data-url="%globals_asset_assetid:352161%" data-asset="%globals_asset_assetid:352162%" data-settings="%globals_asset_assetid:352163%">
    <div class="tmpedit_metadata-wrapper colpicker">
        %metadata-F_section_353008_values%
    </div>
    <div class="tmpedit_metadata-wrapper coldata">
        <div class=colgroup id="colgroup1">%metadata-F_section_352923_values%</div>
        <div class=colgroup id="colgroup2">%metadata-F_section_353019_values%</div>
        <div class=colgroup id="colgroup3">%metadata-F_section_353024_values%</div>
    </div>
</div>

<script>

/* Hide all column options initially */
$('.colgroup').css("display", "none");
$('.colpicker select').change(function(){
  if($(this).val() == '1'){
      console.log('one column is selected');
      $('.colgroup').css("display", "none");
      $('#colgroup1').css("display", "block");
  }else if($(this).val() == '2') {
      console.log('you have selected 2 columns');
      $('.colgroup').css("display", "none");
      $('#colgroup1').css("display", "block");
      $('#colgroup2').css("display", "block");
  }else if($(this).val() == '3'){
      console.log('you have selected 3 columns');
      $('#colgroup1').css("display", "block");
      $('#colgroup2').css("display", "block");
      $('#colgroup3').css("display", "block");
  }else{
       $('.colgroup').css("display", "none");
    console.log('no columns man');
  }
});
</script>

There is also another issue in this method (besides my initial sloppy JS code) - if a user goes in and fills in three columns worth of data and then suddenly changes their mind and then wants to go two columns - I don’t think it will remove the entered data when it hides that ‘colgroup’. I suppose I would have to rely on the paint layout to run a condition to display/hide it based on the value of the select option in the ‘colpicker’.

(Bart Banda) #4

Looks ok to me at first glance, strange. Maybe try putting some console logs in your select change function to see if that even triggers and to see what $(this).val() actually is giving you.

That’s correct, it’s because you are not clearing any of the HTML in the WYSIWYG containers when you hide them, which is probably what you want. Definitely use keyword conditions within the paint layout to only show the content blocks based on the select metadata value.

(Ryan Archer) #5

Frustrating as. Works in Codepen, works in JSFiddle, works in local HTML on WAMP.
Does not work in Squiz…

Get nothing from console logs at all. The change function does not work at all. I’ve even done it plain vanilla JS as well. It’s all in appearing in the inspector, but does not do anything.

(Bart Banda) #6

Actually, can you try putting a timeout on your JS function? See the templates that were provided from the community site, they use a 100ms timeout first before running the JS because of the way that Edit+ ajaxes in the content within the edit contents screen and I think Chrome tries to fire the JS within your Simple Edit Layout before the HTML is actually available to it.
Something like this:

<script>
setTimeout(function(){ 
    //run function now
}, 100);
</script>
(Peter McLeod) #7

Hi

Think it could be an issue with timing as Bart’s noted.

The other problem I can see with the JS code is that is being loaded with each time a new container is added in the edit inferface. So first time shouldn’t be an issue but after then you might run into some issues as the scope of the JS isn’t localised to the specific parent div you want it to act on (eg by using the template ids to make the classes/ids in the JS and HTML unique).

You probably would also need to call the hide/show logic when it first loads as well as when the select changes.

Thanks
Peter

(Ryan Archer) #8

Yes, I think your onto something there…