Skip to content

Integrating

Jump to bottom
joseph edited this page Sep 13, 2011 · 6 revisions

The easiest way to get Monocle into your project is to download the distributable versions directly from Github:

Then you simply include the core script and the core stylesheet. Optionally you can include the control script and control stylesheet, if you want to use Monocle's (very basic) included controls for Tables of Contents, page numbers, remembering place, and so on.

Here's the simplest thing that could possibly work.

<head>
  <!-- Include the Monocle library and styles -->
  <script src="scripts/monocore.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/monocore.css" />
  <style>
    #reader { width: 300px; height: 400px; border: 1px solid #000; }
  </style>
</head>

<body>
  <!-- The reader element, with all content to paginate inside it -->
  <div id="reader">
    <h1>Hello world.</h1>
  </div>

  <!-- Instantiate the reader when the containing element has loaded -->
  <script>Monocle.Reader('reader');</script>
</body>

In this example, we initialise the reader with the contents of the div itself.

The important statement is this one:

Monocle.Reader('reader');

... which initialises the reader in the element with the id of 'reader'. We could also pass a DOM element directly, rather than an id.

Initialisation options

The Monocle.Reader constructor takes up to four arguments — only the first one is required. The second argument is bookData — this can be a book data object, or it can be null if you want to load the content of the element itself into Monocle (most advanced implementations of Monocle don't do this - they provide a book data object).

The third argument is an options hash. Currently five options are available:

  • flipper: The class of page flippers to use.
  • panels: The class of panels to use.
  • stylesheet: A string of CSS rules to apply to the contents of each component loaded into the reader.
  • place: A book locus for the page to open to when the reader is initialized (more information about locus objects).
  • systemId: The id for root <html> elements of components, defaults to RS:monocle.

The fourth argument is a callback function, which will be invoked when Monocle is fully initialised. This is typically where you create Monocle controls (like page number displays, running heads, tables of contents). The test directory contains a number of examples of this.

Exploring Monocle

If you want to explore all of Monocle's features, clone this repository and open test/index.html in your browser. This will guide you through Monocle's tests, which incidentally demonstrate all the major features. View source or browse the test directory in your text editor for implementation details.

Clone this wiki locally