Add support for "data" attributes to template regions

CM1 Ideas and Feature Requests
1

I am creating a responsive template using Percussion’s base (non-responsive) template and adding all the Foundation file references manually.

So in order to use the Foundation drop downs and the off-canvas menus, the following type of attribute needs to be assigned to the div class and here are a couple of actual examples (the ones that begin with “data-”:

How can I assign these to Percussion container regions that don’t have content? As far as I know, I can only assign classes to a region or widget. Please advise how I can accomplish this.

2

Debbie,

You are correct, you cannot assign data attributes directly through the CM1 interface. You would have to use javascript to add the data fields to the divs.

3

Hi Matt,

Can you please show me how to do that?

4

Sure Debbie. I’m going to show you two different ways to do this. Either way will work just fine.

Example 1

<script> <br /> $(document).ready(function(){ <br />
  document.getElementById('div_id').setAttribute('data', "[att]: ''); <br /> }); <br /> </script>

In the above example, you will want to set the div_id to the id/name that you gave the div/region in Percussion. The [att] needs to be changed to whatever data- attribute you want. This is the part after data- . The []'s are not needed. If you need to do more than one attribute doe the following:

<script> <br /> $(document).ready(function(){ <br />
  document.getElementById('div_id').setAttribute('data', "[att]: 'att_value', [att2]: 'att2_value'''); <br /> }); <br /> </script>

Example 2

<script> <br /> $(document).ready(function(){ <br />
  document.getElementById('div_id').dataset.[att] = "att_value"; <br /> }); <br /> </script>

In this example, you will want to create the

document.getElementById('div\_id').dataset.[att] = "att\_value";

for each attribute you want to use. Like before change the div_id to the div/region id/name and then set [att] to the type of data attribute and then set the value it needs to have.

You will want to either do this at a page or template level depending on how ofter you need this.

5

Matt,
That definitely solved the issue of adding the “data” attribute, thanks. There’s just one more obstacle to getting the Foundation off-canvas menu to work.

The entire page needs to be nested inside an “inner-wrap” class and then an “off-canvas-wrap” class. Percussion adds another div in between them and as a result the off-canvas menu will not function. To test this, I downloaded the source code that Percussion created, removed that extra div class=" perc-vertical " and the feature now works.

Here are the 3 divs and I believe I need to be able to do one of two things: either remove that extra div OR be able to assign the “inner-wrap” class to it.

Which is more doable?

6

Debbie,

With the way Percussion adds extra div’s, the easiest way would be to use javascript to add the class to a specific div.

You can use the following code

$(document).ready(function(){   
$('div\_id').addClass("inner-wrap");   
});
7

How do I single out a div called “perc-vertical” that Percussion automatically adds and is also not unique?

8

If that perc-vertical is inside another div that has a name/id you can do the following:

$(document).ready(function(){   
$('#div\_id .perc-vertical').addClass("inner-wrap");   
});

You will notice that the div_id has a # symbol in front of it. That signifies that it is the name/id of a div. The second one per-vertical has a . before it to signify it is a class.

9

The above code appeared to add the “inner-wrap” class to all Percussion-generated DIVs inside the outermost wrap. Our back-end developer just tweaked it and now it works. Thank you.

 ```
 $('#container-area \> .perc-vertical').addClass("inner-wrap"); 
```
10

Your welcome Debbie. I’m glad everything is working now.