0.9.x Chrome

Chrome

This page is based on Treesaver 0.9.x. See the Chrome page for current documentation.

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 class="pagenumbers">
        <span data-bind="pagenumber">1</span> /
        <span data-bind="pagecount">5</span>
      </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

Page Number and Page Count

Use the data-bind attribute to bind to either pagenumber or pagecount.

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.

TOC

Authors can bind to the list of articles with the following markup:

  <div data-bind="toc">
    <div data-bind="article">
      <img data-bind="thumb:src" />
      <h3><a data-bind="url:href title"></a></h3>
      <p data-bind="byline"></p>
    </div>
  </div>

To map a value to a HTML attribute the value name can receive an optional attribute name. The syntax is value-name:attribute-name, for example:

• url:href: Will set the href attribute to the value of url
• thumb:src: Will set the src attribute to the value of thumb

All other variable names are used to set the innerText (not innerHTML) of the element.

URL Binding

Sharing widgets often use a dynamic link target that includes the current URL. You can do so with the following markup from within Chrome:

  <a data-href="http://twitter.com/?status={{current-url}}" data-bind="current-url:href">Tweet</a>

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.