Controls

Controls are objects that adhere to a specified interface. They can be any kind of object. They are added to a Reader object like this:

function configureReader(reader) {
  var control = someObject;
  reader.addControl(control, 'standard');
}

// Create the reader object, which will call our configuration function
// when ready.
Monocle.Reader(someDiv, null, {}, configureReader);

The Reader's addControl method takes the control, a control type string, and an options object. The control type string can be one of:

• standard (a DOM element that floats above or near the pages)
• page (DOM elements that sit within the page - one control element is created for each page element)
• modal (an overlaying DOM element where clicking away does nothing)
• popover (an overlaying DOM element where clicking away hides the control)
• invisible

Presently, the options argument to addControl has one recognized property:

• hidden - if true, control element is hidden as soon as it is created.

The standard-issue controls

If you include the monoctrl script and stylesheet, you can add Monocle's standard (and quite basic) controls to your reader. The 'controls' test demonstrates how to do this — it creates each control in a different reader for test purposes, but you can of course add all the controls to a single reader.

• Source code - test/controls/index.html

Implementing a control

Your object must provide implementations of the methods and properties of the control interface. The control interface is currently really simple:

Methods:

• createControlElements(parentNode)

Note that the createControlElements method is not strictly required for controls that are always added as 'invisible'. The method should return a DOM element (which can contain as many child elements as you like) — although again, this is optional for invisible controls. You should not insert the DOM element into the parentNode — the Reader will do this for you.