Fork me on GitHub

Grouping

Ur-Sets vs. Ur-Ids

In Uranium, we can group interactions in two ways: an ur-set (which stands for "Uranium Set") or an ur-id (which stands for "Uranium ID"). An ur-set is defined when the whole interaction is wrapped in a <div> (or other tag) with the attribute data-ur-set="interaction".

An ur-id is defined when every component of a single interaction is given a unique ur-id attribute. For example, giving each component of an interaction the attribute data-ur-id="unique_id". This is an alternative way to group a ur-set of HTML elements that may not be convenient to place together in the structure of your HTML document.

It's generally a better practice to use data-ur-set to group interactions structurally as well as functionally. This allows for cleaner, well-structured, and more obviously hierarchical HTML. However, it isn't possible in all cases to wrap every interaction in an element with this attribute. It's in these instances we use data-ur-id attributes. They are functionally the same — as seen below.

  <div data-ur-toggler-component="button" data-ur-id="MyIDAccordion">
    This toggler uses ur-ids
  </div>
  <ul data-ur-toggler-component="content" data-ur-id="MyIDAccordion">
    <li>Thom</li>
    <li>Jonny</li>
    <li>Ed</li>
    <li>Colin</li>
  </ul>
This toggler uses ur-ids 
  <div data-ur-set="toggler">
    <div data-ur-toggler-component="button">
      This toggler uses an ur-set
    </div>
    <ul data-ur-toggler-component="content">
      <li>Mission</li>
      <li>Guerrero</li>
      <li>Valencia</li>
      <li>Dolores</li>
    </ul>
  </div>
This toggler uses an ur-set

How Uranium Recognizes Ur-Sets and Ur-Ids

When the page is first loaded, Uranium automatically creates a unique ur-id for every ur-set element it finds on a page. These are numerical values with a "ur" prefix, starting with one, and incrementing by one for each ur-set encountered.

(Note: For that reason, we recommend that if you are creating an ur-id of your own, you use letters rather than numbers, to avoid conflicts with the automatically generated ur-id values.)

Uranium then searches through the HTML document for the special data attributes we use to add functionality to HTML elements. Once it sees an attribute that begins with data-ur, it looks for groups of components. The ur-set allows it to determine what interaction we're defining.

Next, the JavaScript looks for ur-ids on a component. If it finds a ur-id, it uses this to determine which other compoments on the page it should treat as part of the same Uranium interaction.

This is explained visually in the flowchart below.