Remapping Interface Elements

One challenge using Exhibit with a Content Management System is that the user-editable content region is often too narrow for facets. It would be nice if there were an easy way to put facets in the sidebar instead of the main content region. Datapress provides a more general way to do this, with content remapping.

Using simple data- attribute, Datapress will move HTML elements around the page for you before creating an Exhibit. This way, you can specify a facet in the main content region, but have it moved to the sidebar before the Exhibit is created.

To specify that an element should be moved, add a data-remap="true" attribute to the element. You then need two additional parameters:

• A destination, provided with a CSS3 selector that matches one element.
• An offset, relative to that destination. Valid offsets are:
  • replace: replace the destination with the element
  • append: add the element as the last child of the element
  • prepend: add the element as the first child of the element
  • before: add the element as a sibling before the element
  • after: add the element as a sibling after the element

All together, this means you need three attributes:

• data-remap: specifies you want a remapping
• data-destination: specifies the destination
• data-offset: specifies the offset

Here is an example:

<div data-remap="true" data-destination="#sidebar-first" data-offset="prepend">
  <div ex:role="facet" ex:expression=".custom-affiliation" ex:facetLabel="Affiliation"></div>
</div>