All books with JavaScript interactivity designed for Apple Books should follow these technical guidelines and requirements:
JavaScript should be in its own document, not inline in the XHTML. All JavaScript files must be included in the manifest of the OPF and given the mimetype of application/javascript.
The Apple Books JavaScript Library (ibooks.js) is a collection of pre-written JavaScript that makes it easier to develop books with JavaScript interactivity for Apple Books. The Apple Books JS Library provides functionality to:
defer an event
make an element draggable
make an element stamp-able
make an element toggle-able
add audio
define constants
To begin using ibooks.js, first include the script in your markup.
<head> <meta name="viewport" content="width=575, height=432"/> <meta content="text/html; charset=UTF-8"/> <title>Fixed-Layout Example 3.2</title> <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/> <link rel="stylesheet" href="css/page06.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <script src="js/ibooks.js" type="text/javascript" charset="utf-8"></script></head>When a page has loaded, ibooks.js appends a CSS class build-in to the body. The addition of this class can be used to trigger animations.
Sometimes, a developer wants to fire a delayed event after the content has loaded. By adding ibooks-deferred-event to an element, ibooks.js will append a CSS class active to the target element after a delay, by default this value in milliseconds is 1000. This delay can be defined on a per element basis by adding a HTML attribute data-deferred-event-delay and setting the desired value in milliseconds.
<!-- "active" class appended after default delay, 1000ms --><div class="ibooks-deferred-event"></div><!-- "active" class appended 5000ms after content load --><div class="ibooks-deferred-event" data-deferred-event-delay="5000"></div>Draggable elements respond to touch events and can be moved around the page. HTML elements can be made draggable by simply appending the CSS class ibooks-draggable.
<!-- Makes the target element draggable --><div class="ibooks-draggable"></div>Any element with a CSS class ibooks-stampable will act as a parent container for stamp-able elements. Stamp-able elements respond to touch gestures; on touch, ibooks.js will append an empty <div> element with the CSS class stamp to the parent container. You can then style the appended element.
ibooks.js relies on a SVG path to define a valid touch area; without a SVG path ibooks.js will not respond to touch events. It is worth noting that SVG patches are especially useful when defining irregular shaped hit areas, such as hills.
<div class="ibooks-stampable"><!--svg defines irregularly-shaped hit area for replicating script--><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1224px" height="792px" viewBox="0 0 1224 792" enable-background="new 0 0 1224 792"><path fill="#82983E" d="M612.806,387.128c-8.555,0-17.023,0.229-25.394,0.656c-50.48-31.565-116.654-60.656-189.107-60.656 c-8.653,0-16.846,0.42-24.805,1.205v136.949l14.525,0.023l296.721,0.478l215.824,0.347 C900.57,466.128,771.732,387.128,612.806,387.128z"/></svg></div>ibooks.js provides the ability to make elements toggle-able, by appending the CSS class ibooks-toggleable, on touch elements will toggle the CSS class active.
<!-- Inactive, toggle-able element --><div class="ibooks-toggleable"></div><!-- Active, toggle-able element --><div class="ibooks-toggleable active"></div>Any HTML element can be used to trigger audio by appending the CSS class ibooks-media-audio and defining a value for the HTML attribute data-ibooks-audio-src. Additionally, the audio source playhead can be reset each time the element is touched by defining data-ibooks-audio-reset-on-play. Read aloud can be paused after the media has played or is paused by setting an HTML attribute: "ibooks:pause-readaloud" to "true". See Embedding Read Aloud Controls for more information.
Note: Only one audio source can be played at a time.
<!-- Toggles between play, pause on touch --><div class="ibooks-media-audio" data-ibooks-audio-src="audio/source.m4a"></div><!-- Plays source on touch, resets playback position to start on subsequent touches --><div class="ibooks-media-audio" data-ibooks-audio-reset-on-play="true" data-ibooks-audio-src="audio/source.m4a"></div>If desired, many of the ibooks.js constants can be defined by the developer; these variables are located within initConfigurables.
/*** Configuration of user defined constants.*/iBooksBaseController.prototype.initConfigurables = function() {// CSS class name on active elementsiBooks.ACTIVE_CSS_CLASS = "active"; // CSS class name appended to body on page load iBooks.CSS_CLASS_ON_LOAD = "build-in"; // Delay in milliseconds before deferred events fire iBooks.DEFERRED_EVENT_DELAY = "1000";// CSS selector for page iBooks.PAGE_CSS_SELECTOR = ".page";// CSS class for stamped elementsiBooks.STAMPED_ELEMENT_CSS_CLASS = "stamp";};