Chrome html

The user interface, or chrome as it is referred to in Treesaver, should be the most familiar aspect of template development. The DOM is largely left to the developer and is not re-written by Treesaver.

Just like with all Treesaver templating you will start in the html/_/resrouces.html file. Anything contained in a <div> with the class chrome will be used as your chrome. You can have different sets of chrome and use min/max-width/height to restrict when the chrome shows up.

Navigation

It’s pretty simple, just drop these buttons in with the appropriate classes:

<button class="prev">previous page</button>
<button class="next">next page</button>
<button class="prevArticle">previous article</button>
<button class="nextArticle">next article</button>

Menu

The menu is just a simple pop up that you can put items in. A <button> inside a <div class="menu"> is all you need to get started. Clicking on the button will add menu-active to the class list.

<div class="menu">
  <button>Menu</button>
  <ul class="content">          
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

Page Numbers

To call up page numbers just place data-ts-template="position" on a container element and use {{pagenumber}} or {{pagecount}} to call up the page number or page count.

Contents

The contents element is more abstract and may very depending on how you formatted your toc.html file. To use it add data-ts-template="publication" to the container element and wrap the contents loop in {{#contents}} . . . {{/contents}}. The loop itself can contain any attribute in your contents.

<div class="content scroll" data-ts-template="publication">
  {{#contents}}
    <a href="{{url}}">
      <span class="title">{{title}}</span>
    </a>
  {{/contents}}
</div>