Chrome

Chrome

A set of HTML elements used to display the pages of content and UI for display.

Markup Example

  <div class="chrome">
    <div class="viewer">
    </div>
    <div class="controls">
        <span data-ts-template="position">Page {{pagenumber}} of {{pagecount}}</span>
      <button class="prev">Prev</button>
      <button class="next">Next</button>
    </div>
  </div>

Viewer

The only required component, this element is used as the container for page display. The size of the viewer is used to determine the size used to layout pages. Create the viewer by adding the class viewer to any element within the chrome.

Interface Commands

Certain UI commands can be added automatically to any link or button by adding a CSS class:

• prev: Go to the previous page
• next: Go to the next page
• prevArticle: Go to the previous article
• nextArticle: Go to the next article
• menu: Toggle class=menu-active on the root of the Chrome
• open-sidebar: Add class=sidebar-active to the root of the Chrome
• close-sidebar: Remove class=sidebar-active to the root of the Chrome
• toggle-sidebar: Toggle class=sidebar-active on the root of the Chrome

Pagewidth

Any element with class=pagewidth will automatically be made as wide as the initial page shown. This width gets reset whenever a window size change causes a re-layout.

Active Flag

Whenever the user interacts with the page (by moving the mouse or tapping), class=active will be added to the root of the chrome. This allows authors to show/hide UI elements that should disappear when the user is reading.

Sidebar and Menu Active Flags

These flags can be used to show or hide elements within the Chrome.

Chrome Selection

Treesaver searches through all Chrome elements from the Resources file, checking each Chrome in markup order until it finds one that:

• Fits in the current screen size, based on the CSS values of minWidth, minHeight, maxWidth, and maxHeight
• Meets the Requirements specified by the data-requires property

The first Chrome that meets both of these requirements will be selected, and all subsequent chromes will be ignored.