On Controls

Initializing

The built-in controls hang off the global cozy.control structure.

To let cozy-sun-bear manage the creation and placement of controls, you need to pass a region, e.g. cozy.control.title({ region: 'top.header.left' }) (see the layout page).

The "typical" pattern is to create the control and add it to the reader, e.g.

cozy.control.title({ region: 'top.header.left' }).addTo(reader);

Book Metadata

• cozy.control.title

  Displays the book's dc:title, and when appropriate, the section title.
  Default template: <h1><span class="cozy-title"></span><span class="cozy-section"></span></h1>

• cozy.control.publicationMetadata

  Displays the book's dc:publisher and dc:rights content.
  Default template: <div><div class="cozy-publisher"></div><div class="cozy-rights"></div></div>

Panels

• cozy.control.contents

  Builds a toggle button to present the table of contents as clickable links.

• cozy.control.preferences

  Builds a modal(ish) dialog for the user to select how to present the book (reflowable vs. scrolled-doc).

Pagination

The specific pagination controls are subclasses of a general "paging" control.

• cozy.control.pageFirst

• cozy.control.pagePrevious

• cozy.control.pageNext

• cozy.control.pageLast

  Finding the last page in an EPUB requires loading all the chapters to calculate a final fragment identifier; the first time you navigate to the last time is a pause.

Widgets!

Add custom behavior/functionality to the reader, e.g.

• cozy.control.widget.panel

cozy.control.widget.panel({ 
    region: 'top.toolbar.left',
    template: `<div class="permalink-label"><span class="u-screenreader">Permalink</span><form><input data-slot="title" type="text" id="permalink" value="" readonly="readonly" onclick="this.select(); document.execCommand('copy');"></form></div>`,
    data: { title: "https://doi.org/10.3998/fulcrum.12345" }
}).addTo(reader);

Creates a basic panel. Takes a region, template, and (optionally) a data object. Elements in the template can be tagged with the data-slot attribute which refer to a property in the data object. In the above example, the data-slot="title" in the <input> will be filled with the data.title value ("https://doi.org/10.3998/fulcrum.12345").

• cozy.control.widget.button

cozy.control.widget.button({ 
  region: 'top.toolbar.left', 
  data: { label: 'ALERT' },
  onClick: function() { alert("Hey."); }
});

Creates an interactive button, with the default template <button data-toggle="button" data-slot="label"></button>. Accepts on onClick handler which is invoked when the reader clicks the button.

• cozy.control.widget.toggle

The toggle widget can have multiple states, which you can switch between if you supply onclick handlers:

cozy.control.widget.toggle({ 
    region: 'top.header.left',
    states: [{
      stateName: 'back-to-metadata',
      icon: null,
      className: 'chooser-metadata',
      title: 'Metadata',
      onClick: function(btn, reader) {
        console.log("AHOY CLICK", btn);
        alert("Take you back to the metadata page!");
        btn.state('back-to-results');
      }
    },
    {
        stateName: 'back-to-results',
        icon: null,
        className: 'chooser-metadata',
        title: 'Results',
        onClick: function(btn, reader) {
            alert("Take you back to the search results!");
            btn.state('back-to-metadata');
        }
    }],
}).addTo(reader);

(Currently the toggle widget doesn't have a concrete use case.)