CTATGroupingComponent - CMUCTAT/CTAT GitHub Wiki
Sometimes you might want to control several components at once. For example you might want to hide or show a row of text input boxes through the graph. You can accomplish this through the grouping component. Through it you can call TPAs on a number of components at the same time.
<div id="group" class="CTATGroupingComponent"
style="width: 0px; height: 0px; display: none;"
data-ctat-componentlist="component1,component2,component3,component4">
</div>Alternately:
<div id="group2" class="CTATGroupingComponent">
<div id="group2memberA" class="CTATTextInput"></div>
<div id="group2memberB" class="CTATTextInput"></div>
</div>- CTATGroupingComponentExample (using div as the container)
- CTATGroupingComponentExample (using a list of components to control)
-
id: Required. The name of the component, must be a valid html id name. -
class: Required. The class list, must includeCTATGroupingComponentand no other CTAT<component> classes. -
data-ctat-componentlist: a , separated list of CTAT component ids to include in the group. -
data-ctat-use-componentlist: deprecated in 4.1.0 a boolean value. Iftrueusedata-ctat-componentlist, otherwise this controls child entities.
| Action | Input | Notes |
|---|---|---|
| SetVisible | value (Boolean) | Use this to hide or show all the sub components |
| lock | ignored (String) | Use this to completely lock all components inside the group |
| unlock | ignored (String) | Use this to completely unlock all components inside the group |
| setSize | value (String) | Depending on the setting of data-ctat-use-componentlist either the containing div will be resized or every component inside the container will be resized. So if you specify 100,50 as the width and height, then either all listed components or the grouping div will be resized to that width and height |
| move | value (String) | Depending on the setting of data-ctat-use-componentlist either the containing div will be moved or every component inside the container will be moved. Note that the move is not an absolute, instead it will move by the amount of pixels specified in the Input field in the Matcher dialog in the Behavior Recorder. So if you specify 20,20 then either all listed components or the grouping div will move by that amount in the x and y direction |
| highlight | ignored (String) | Depending on the setting of data-ctat-use-componentlist either the containing div will be highlighted or every component inside the container will be highlighted |
| unhighlight | ignored (String) | Depending on the setting of data-ctat-use-componentlist either the containing div will be unhighlighted or every component inside the container will be unhighlighted |
Typically you will want to use regular styling as you would apply to any div. So for example you would set the overflow CSS attribute if your grouping div manages containing components. If however you are driving sub components through a list then you will most likely want to visually remove the grouping component from your page by doing something like:
{ width: 0px; height: 0px; display: none; }