Personal/cops
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
cops/resources/monocle/scripts/monocore.js

5642 lines
153 KiB
JavaScript
Raw Normal View History

Add monocle --HG-- extra : rebase_source : 9503ba50aa6dbba68dce8dbb4898cefcba1293f8
2013-09-08 19:34:15 +03:00
/*!
* Monocle - A silky, tactile browser-based ebook JavaScript library.
*
* Copyright 2012, Joseph Pearson
* Licensed under the MIT license.
*/
Monocle = {
VERSION: "3.2.0"
};
Monocle.Dimensions = {};
Monocle.Controls = {};
Monocle.Flippers = {};
Monocle.Panels = {};
// A class that tests the browser environment for required capabilities and
// known bugs (for which we have workarounds).
//
Monocle.Env = function () {
var API = { constructor: Monocle.Env }
var k = API.constants = API.constructor;
var p = API.properties = {
// Assign to a function before running survey in order to get
// results as they come in. The function should take two arguments:
// testName and value.
resultCallback: null
}
// These are private variables so they don't clutter up properties.
var css = Monocle.Browser.css;
var activeTestName = null;
var frameLoadCallback = null;
var testFrame = null;
var testFrameCntr = null;
var testFrameSize = 100;
var surveyCallback = null;
function survey(cb) {
surveyCallback = cb;
runNextTest();
}
function runNextTest() {
var test = envTests.shift();
if (!test) { return completed(); }
activeTestName = test[0];
try { test[1](); } catch (e) { result(e); }
}
// Each test should call this to say "I'm finished, run the next test."
//
function result(val) {
API[activeTestName] = val;
if (p.resultCallback) { p.resultCallback(activeTestName, val); }
runNextTest();
return val;
}
// Invoked after all tests have run.
//
function completed() {
// Remove the test frame after a slight delay (otherwise Gecko spins).
Monocle.defer(removeTestFrame);
if (typeof surveyCallback == "function") {
fn = surveyCallback;
surveyCallback = null;
fn(API);
}
}
// A bit of sugar for simplifying a detection pattern: does this
// function exist?
//
// Pass a string snippet of JavaScript to be evaluated.
//
function testForFunction(str) {
return function () { result(typeof eval(str) == "function"); }
}
// A bit of sugar to indicate that the detection function for this test
// hasn't been written yet...
//
// Pass the value you want assigned for the test until it is implemented.
//
function testNotYetImplemented(rslt) {
return function () { result(rslt); }
}
// Loads (or reloads) a hidden iframe so that we can test browser features.
//
// cb is the callback that is fired when the test frame's content is loaded.
//
// src is optional, in which case it defaults to 4. If provided, it can be
// a number (specifying the number of pages of default content), or a string,
// which will be loaded as a URL.
//
function loadTestFrame(cb, src) {
if (!testFrame) { testFrame = createTestFrame(); }
frameLoadCallback = cb;
src = src || 4;
if (typeof src == "number") {
var pgs = [];
for (var i = 1, ii = src; i <= ii; ++i) {
pgs.push("<div>Page "+i+"</div>");
}
var divStyle = [
"display:inline-block",
"line-height:"+testFrameSize+"px",
"width:"+testFrameSize+"px"
].join(";");
src = "javascript:'<!DOCTYPE html><html>"+
'<head><meta name="time" content="'+(new Date()).getTime()+'" />'+
'<style>div{'+divStyle+'}</style></head>'+
'<body>'+pgs.join("")+'</body>'+
"</html>'";
}
testFrame.src = src;
}
// Creates the hidden test frame and returns it.
//
function createTestFrame() {
testFrameCntr = document.createElement('div');
testFrameCntr.style.cssText = [
"width:"+testFrameSize+"px",
"height:"+testFrameSize+"px",
"overflow:hidden",
"position:absolute",
"visibility:hidden"
].join(";");
document.body.appendChild(testFrameCntr);
var fr = document.createElement('iframe');
testFrameCntr.appendChild(fr);
fr.setAttribute("scrolling", "no");
fr.style.cssText = [
"width:100%",
"height:100%",
"border:none",
"background:#900"
].join(";");
fr.addEventListener(
"load",
function () {
if (!fr.contentDocument || !fr.contentDocument.body) { return; }
var bd = fr.contentDocument.body;
bd.style.cssText = ([
"margin:0",
"padding:0",
"position:absolute",
"height:100%",
"width:100%",
"-webkit-column-width:"+testFrameSize+"px",
"-webkit-column-gap:0",
"-webkit-column-fill:auto",
"-moz-column-width:"+testFrameSize+"px",
"-moz-column-gap:0",
"-moz-column-fill:auto",
"-o-column-width:"+testFrameSize+"px",
"-o-column-gap:0",
"-o-column-fill:auto",
"column-width:"+testFrameSize+"px",
"column-gap:0",
"column-fill:auto"
].join(";"));
if (bd.scrollHeight > testFrameSize) {
bd.style.cssText += ["min-width:200%", "overflow:hidden"].join(";");
if (bd.scrollHeight <= testFrameSize) {
bd.className = "column-force";
} else {
bd.className = "column-failed "+bd.scrollHeight;
}
}
frameLoadCallback(fr);
},
false
);
return fr;
}
function removeTestFrame() {
if (testFrameCntr && testFrameCntr.parentNode) {
testFrameCntr.parentNode.removeChild(testFrameCntr);
}
}
function columnedWidth(fr) {
var bd = fr.contentDocument.body;
var de = fr.contentDocument.documentElement;
return Math.max(bd.scrollWidth, de.scrollWidth);
}
var envTests = [
// TEST FOR REQUIRED CAPABILITIES
["supportsW3CEvents", testForFunction("window.addEventListener")],
["supportsCustomEvents", testForFunction("document.createEvent")],
["supportsColumns", function () {
result(css.supportsPropertyWithAnyPrefix('column-width'));
}],
["supportsTransform", function () {
result(css.supportsProperty([
'transformProperty',
'WebkitTransform',
'MozTransform',
'OTransform',
'msTransform'
]));
}],
// TEST FOR OPTIONAL CAPABILITIES
// Does it do CSS transitions?
["supportsTransition", function () {
result(css.supportsPropertyWithAnyPrefix('transition'))
}],
// Can we find nodes in a document with an XPath?
//
["supportsXPath", testForFunction("document.evaluate")],
// Can we find nodes in a document natively with a CSS selector?
//
["supportsQuerySelector", testForFunction("document.querySelector")],
// Can we do 3d transforms?
//
["supportsTransform3d", function () {
result(
css.supportsMediaQueryProperty('transform-3d') &&
css.supportsProperty([
'perspectiveProperty',
'WebkitPerspective',
'MozPerspective',
'OPerspective',
'msPerspective'
]) &&
!Monocle.Browser.renders.slow // Some older browsers can't be trusted.
);
}],
// Commonly-used browser functionality
["supportsOfflineCache", function () {
result(typeof window.applicationCache != 'undefined');
}],
["supportsLocalStorage", function () {
// NB: Some duplicitous early Android browsers claim to have
// localStorage, but calls to getItem() fail.
result(
typeof window.localStorage != "undefined" &&
typeof window.localStorage.getItem == "function"
)
}],
// CHECK OUT OUR CONTEXT
// Does the device have a MobileSafari-style touch interface?
//
["touch", function () {
result(
('ontouchstart' in window) ||
css.supportsMediaQueryProperty('touch-enabled')
);
}],
// Is the Reader embedded, or in the top-level window?
//
["embedded", function () { result(top != self) }],
// TEST FOR CERTAIN RENDERING OR INTERACTION BUGS
// iOS (at least up to version 4.1) makes a complete hash of touch events
// when an iframe is overlapped by other elements. It's a dog's breakfast.
// See test/bugs/ios-frame-touch-bug for details.
//
["brokenIframeTouchModel", function () {
result(Monocle.Browser.iOSVersionBelow("4.2"));
}],
// Webkit-based browsers put floated elements in the wrong spot when
// columns are used -- they appear way down where they would be if there
// were no columns. Presumably the float positions are calculated before
// the columns. A bug has been lodged, and it's fixed in recent WebKits.
//
["floatsIgnoreColumns", function () {
if (!Monocle.Browser.is.WebKit) { return result(false); }
match = navigator.userAgent.match(/AppleWebKit\/([\d\.]+)/);
if (!match) { return result(false); }
return result(match[1] < "534.30");
}],
// The latest engines all agree that if a body is translated leftwards,
// its scrollWidth is shortened. But some older WebKits (notably iOS4)
// do not subtract translateX values from scrollWidth. In this case,
// we should not add the translate back when calculating the width.
//
["widthsIgnoreTranslate", function () {
loadTestFrame(function (fr) {
var firstWidth = columnedWidth(fr);
var s = fr.contentDocument.body.style;
var props = css.toDOMProps("transform");
for (var i = 0, ii = props.length; i < ii; ++i) {
s[props[i]] = "translateX(-600px)";
}
var secondWidth = columnedWidth(fr);
for (i = 0, ii = props.length; i < ii; ++i) {
s[props[i]] = "none";
}
result(secondWidth == firstWidth);
});
}],
// On Android browsers, if the component iframe has a relative width (ie,
// 100%), the width of the entire browser will keep expanding and expanding
// to fit the width of the body of the iframe (which, with columns, is
// massive). So, 100% is treated as "of the body content" rather than "of
// the parent dimensions". In this scenario, we need to give the component
// iframe a fixed width in pixels.
//
// In iOS, the frame is clipped by overflow:hidden, so this doesn't seem to
// be a problem.
//
["relativeIframeExpands", function () {
result(navigator.userAgent.indexOf("Android 2") >= 0);
}],
// iOS3 will pause JavaScript execution if it gets a style-change + a
// scroll change on a component body. Weirdly, this seems to break GBCR
// in iOS4.
//
["scrollToApplyStyle", function () {
result(Monocle.Browser.iOSVersionBelow("4"));
}],
// TEST FOR OTHER QUIRKY BROWSER BEHAVIOUR
// Older versions of WebKit (iOS3, Kindle3) need a min-width set on the
// body of the iframe at 200%. This forces columns. But when this
// min-width is set, it's more difficult to recognise 1 page components,
// so we generally don't want to force it unless we have to.
//
["forceColumns", function () {
loadTestFrame(function (fr) {
var bd = fr.contentDocument.body;
result(bd.className ? true : false);
});
}],
// A component iframe's body is absolutely positioned. This means that
// the documentElement should have a height of 0, since it contains nothing
// other than an absolutely positioned element.
//
// But for some browsers (Gecko and Opera), the documentElement is as
// wide as the full columned content, and the body is only as wide as
// the iframe element (ie, the first column).
//
// It gets weirder. Gecko sometimes behaves like WebKit (not clipping the
// body) IF the component has been loaded via HTML/JS/Nodes, not URL. Still
// can't reproduce outside Monocle.
//
// FIXME: If we can figure out a reliable behaviour for Gecko, we should
// use it to precalculate the workaround. At the moment, this test isn't
// used, but it belongs in src/dimensions/columns.js#columnedDimensions().
//
// ["iframeBodyWidthClipped", function () {
// loadTestFrame(function (fr) {
// var doc = fr.contentDocument;
// result(
// doc.body.scrollWidth <= testFrameSize &&
// doc.documentElement.scrollWidth > testFrameSize
// );
// })
// }],
// Finding the page that a given HTML node is on is typically done by
// calculating the offset of its rectange from the body's rectangle.
//
// But if this information isn't provided by the browser, we need to use
// node.scrollIntoView and check the scrollOffset. Basically iOS3 is the
// only target platform that doesn't give us the rectangle info.
//
["findNodesByScrolling", function () {
result(typeof document.body.getBoundingClientRect !== "function");
}],
// In MobileSafari browsers, iframes are rendered at the width and height
// of their content, rather than having scrollbars. So in that case, it's
// the containing element (the "sheaf") that must be scrolled, not the
// iframe body.
//
["sheafIsScroller", function () {
loadTestFrame(function (fr) {
result(fr.parentNode.scrollWidth > testFrameSize);
});
}],
// For some reason, iOS MobileSafari sometimes loses track of a page after
// slideOut -- it thinks it has an x-translation of 0, rather than -768 or
// whatever. So the page gets "stuck" there, until it is given a non-zero
// x-translation. The workaround is to set a non-zero duration on the jumpIn,
// which seems to force WebKit to recalculate the x of the page. Weird, yeah.
//
["stickySlideOut", function () {
result(Monocle.Browser.is.MobileSafari);
}],
// Chrome and Firefox incorrectly clip text when the dimensions of
// a page are not an integer. IE10 clips text when the page dimensions
// are rounded.
//
['roundPageDimensions', function () {
result(!Monocle.Browser.is.IE);
}],
// In IE10, the <html> element of the iframe's document has scrollbars,
// unless you set its style.overflow to 'hidden'.
//
['documentElementHasScrollbars', function () {
result(Monocle.Browser.is.IE);
}],
// Older versions of iOS (<6) would render blank pages if they were
// off the screen when their layout/position was updated.
//
['offscreenRenderingClipped', function () {
result(Monocle.Browser.iOSVersionBelow('6'));
}],
// Gecko is better at loading content with document.write than with
// javascript: URLs. With the latter, it tends to put cruft in history,
// and gets confused by <base>.
['loadHTMLWithDocWrite', function () {
result(Monocle.Browser.is.Gecko || Monocle.Browser.is.Opera);
}]
];
function isCompatible() {
return (
API.supportsW3CEvents &&
API.supportsCustomEvents &&
API.supportsColumns &&
API.supportsTransform &&
!API.brokenIframeTouchModel
);
}
API.survey = survey;
API.isCompatible = isCompatible;
return API;
}
;
// A class for manipulating CSS properties in a browser-engine-aware way.
//
Monocle.CSS = function () {
var API = { constructor: Monocle.CSS }
var k = API.constants = API.constructor;
var p = API.properties = {
guineapig: document.createElement('div')
}
// Returns engine-specific properties,
//
// eg:
//
// toCSSProps('transform')
//
// ... in WebKit, this will return:
//
// ['transform', '-webkit-transform']
//
function toCSSProps(prop) {
var props = [prop];
var eng = k.engines.indexOf(Monocle.Browser.engine);
if (eng) {
var pf = k.prefixes[eng];
if (pf) {
props.push(pf+prop);
}
}
return props;
}
// Returns an engine-specific CSS string.
//
// eg:
//
// toCSSDeclaration('column-width', '300px')
//
// ... in Mozilla, this will return:
//
// "column-width: 300px; -moz-column-width: 300px;"
//
function toCSSDeclaration(prop, val) {
var props = toCSSProps(prop);
for (var i = 0, ii = props.length; i < ii; ++i) {
props[i] += ": "+val+";";
}
return props.join("");
}
// Returns an array of DOM properties specific to this engine.
//
// eg:
//
// toDOMProps('column-width')
//
// ... in Opera, this will return:
//
// [columnWidth, OColumnWidth]
//
function toDOMProps(prop) {
var parts = prop.split('-');
for (var i = parts.length; i > 0; --i) {
parts[i] = capStr(parts[i]);
}
var props = [parts.join('')];
var eng = k.engines.indexOf(Monocle.Browser.engine);
if (eng) {
var pf = k.domprefixes[eng];
if (pf) {
parts[0] = capStr(parts[0]);
props.push(pf+parts.join(''));
}
}
return props;
}
// Is this exact property (or any in this array of properties) supported
// by this engine?
//
function supportsProperty(props) {
for (var i in props) {
if (p.guineapig.style[props[i]] !== undefined) { return true; }
}
return false;
} // Thanks modernizr!
// Is this property (or a prefixed variant) supported by this engine?
//
function supportsPropertyWithAnyPrefix(prop) {
return supportsProperty(toDOMProps(prop));
}
function supportsMediaQuery(query) {
var gpid = "monocle_guineapig";
p.guineapig.id = gpid;
var st = document.createElement('style');
st.textContent = query+'{#'+gpid+'{height:3px}}';
(document.head || document.getElementsByTagName('head')[0]).appendChild(st);
document.documentElement.appendChild(p.guineapig);
var result = p.guineapig.offsetHeight === 3;
st.parentNode.removeChild(st);
p.guineapig.parentNode.removeChild(p.guineapig);
return result;
} // Thanks modernizr!
function supportsMediaQueryProperty(prop) {
return supportsMediaQuery(
'@media (' + k.prefixes.join(prop+'),(') + 'monocle__)'
);
}
function capStr(wd) {
return wd ? wd.charAt(0).toUpperCase() + wd.substr(1) : "";
}
API.toCSSProps = toCSSProps;
API.toCSSDeclaration = toCSSDeclaration;
API.toDOMProps = toDOMProps;
API.supportsProperty = supportsProperty;
API.supportsPropertyWithAnyPrefix = supportsPropertyWithAnyPrefix;
API.supportsMediaQuery = supportsMediaQuery;
API.supportsMediaQueryProperty = supportsMediaQueryProperty;
return API;
}
Monocle.CSS.engines = ["W3C", "WebKit", "Gecko", "Opera", "IE", "Konqueror"];
Monocle.CSS.prefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-", "-khtml-"];
Monocle.CSS.domprefixes = ["", "Webkit", "Moz", "O", "ms", "Khtml"];
// STUBS - simple debug functions and polyfills to normalise client
// execution environments.
// A little console stub if not initialized in a console-equipped browser.
//
if (typeof window.console == "undefined") {
window.console = { messages: [] }
window.console.log = function (msg) {
this.messages.push(msg);
}
window.console.warn = window.console.log;
}
// A simple version of console.dir that works on iOS.
//
window.console.compatDir = function (obj) {
var stringify = function (o) {
var parts = [];
for (x in o) {
parts.push(x + ": " + o[x]);
}
return parts.join(";\n");
}
var out = stringify(obj);
window.console.log(out);
return out;
}
// This is called by Monocle methods and practices that are no longer
// recommended and will soon be removed.
//
window.console.deprecation = function (msg) {
console.warn("[DEPRECATION]: "+msg);
if (typeof console.trace == "function") {
console.trace();
}
}
// A convenient alias for setTimeout that assumes 0 if no timeout is specified.
//
Monocle.defer = function (fn, time) {
if (typeof fn == "function") {
return setTimeout(fn, time || 0);
}
}
;
Monocle.Browser = {};
// Compare the user-agent string to a string or regex pattern.
//
Monocle.Browser.uaMatch = function (test) {
var ua = navigator.userAgent;
if (typeof test == "string") { return ua.indexOf(test) >= 0; }
return !!ua.match(test);
}
// Detect the browser engine and set boolean flags for reference.
//
Monocle.Browser.is = {
IE: !!(window.attachEvent && !Monocle.Browser.uaMatch('Opera')),
Opera: Monocle.Browser.uaMatch('Opera'),
WebKit: Monocle.Browser.uaMatch(/Apple\s?WebKit/),
Gecko: Monocle.Browser.uaMatch('Gecko') && !Monocle.Browser.uaMatch('KHTML'),
MobileSafari: Monocle.Browser.uaMatch(/OS \d_.*AppleWebKit.*Mobile/)
}
// Set the browser engine string.
//
if (Monocle.Browser.is.IE) {
Monocle.Browser.engine = "IE";
} else if (Monocle.Browser.is.Opera) {
Monocle.Browser.engine = "Opera";
} else if (Monocle.Browser.is.WebKit) {
Monocle.Browser.engine = "WebKit";
} else if (Monocle.Browser.is.Gecko) {
Monocle.Browser.engine = "Gecko";
} else {
console.warn("Unknown engine; assuming W3C compliant.");
Monocle.Browser.engine = "W3C";
}
// Detect the client platform (typically device/operating system).
//
Monocle.Browser.on = {
iPhone: Monocle.Browser.is.MobileSafari && screen.width == 320,
iPad: Monocle.Browser.is.MobileSafari && screen.width == 768,
UIWebView: (
Monocle.Browser.is.MobileSafari &&
!Monocle.Browser.uaMatch('Safari') &&
!navigator.standalone
),
BlackBerry: Monocle.Browser.uaMatch('BlackBerry'),
Android: (
Monocle.Browser.uaMatch('Android') ||
Monocle.Browser.uaMatch(/Linux;.*EBRD/) // Sony Readers
),
MacOSX: (
Monocle.Browser.uaMatch('Mac OS X') &&
!Monocle.Browser.is.MobileSafari
),
Kindle3: Monocle.Browser.uaMatch(/Kindle\/3/)
}
// It is only because MobileSafari is responsible for so much anguish that
// we special-case it here. Not a badge of honour.
//
if (Monocle.Browser.is.MobileSafari) {
(function () {
var ver = navigator.userAgent.match(/ OS ([\d_]+)/);
if (ver) {
Monocle.Browser.iOSVersion = ver[1].replace(/_/g, '.');
} else {
console.warn("Unknown MobileSafari user agent: "+navigator.userAgent);
}
})();
}
Monocle.Browser.iOSVersionBelow = function (strOrNum) {
return !!Monocle.Browser.iOSVersion && Monocle.Browser.iOSVersion < strOrNum;
}
// Some browser environments are too slow or too problematic for
// special animation effects.
//
// FIXME: These tests are too opinionated. Replace with more targeted tests.
//
Monocle.Browser.renders = (function () {
var ua = navigator.userAgent;
var caps = {};
caps.eInk = Monocle.Browser.on.Kindle3;
caps.slow = (
caps.eInk ||
(Monocle.Browser.on.Android && !ua.match(/Chrome/)) ||
Monocle.Browser.on.Blackberry ||
ua.match(/NintendoBrowser/)
);
return caps;
})();
// A helper class for sniffing CSS features and creating CSS rules
// appropriate to the current rendering engine.
//
Monocle.Browser.css = new Monocle.CSS();
// During Reader initialization, this method is called to create the
// "environment", which tests for the existence of various browser
// features and bugs, then invokes the callback to continue initialization.
//
// If the survey has already been conducted and the env exists, calls
// callback immediately.
//
Monocle.Browser.survey = function (callback) {
if (!Monocle.Browser.env) {
Monocle.Browser.env = new Monocle.Env();
Monocle.Browser.env.survey(callback);
} else if (typeof callback == "function") {
callback();
}
}
;
Gala = {}
// Register an event listener.
//
Gala.listen = function (elem, evtType, fn, useCapture) {
elem = Gala.$(elem);
if (elem.addEventListener) {
elem.addEventListener(evtType, fn, useCapture || false);
} else if (elem.attachEvent) {
if (evtType.indexOf(':') < 1) {
elem.attachEvent('on'+evtType, fn);
} else {
var h = (Gala.IE_REGISTRATIONS[elem] = Gala.IE_REGISTRATIONS[elem] || {});
var a = (h[evtType] = h[evtType] || []);
a.push(fn);
}
}
}
// Remove an event listener.
//
Gala.deafen = function (elem, evtType, fn, useCapture) {
elem = Gala.$(elem);
if (elem.removeEventListener) {
elem.removeEventListener(evtType, fn, useCapture || false);
} else if (elem.detachEvent) {
if (evtType.indexOf(':') < 1) {
elem.detachEvent('on'+evtType, fn);
} else {
var h = (Gala.IE_REGISTRATIONS[elem] = Gala.IE_REGISTRATIONS[elem] || {});
var a = (h[evtType] = h[evtType] || []);
for (var i = 0, ii = a.length; i < ii; ++i) {
if (a[i] == fn) { a.splice(i, 1); }
}
}
}
}
// Fire an event on the element.
//
// The data supplied to this function will be available in the event object in
// the 'm' property -- eg, alert(evt.m) --> 'foo'
//
Gala.dispatch = function (elem, evtType, data, cancelable) {
elem = Gala.$(elem);
if (elem.dispatchEvent) {
var evt = document.createEvent('Events');
evt.initEvent(evtType, false, cancelable || false);
evt.m = data;
return elem.dispatchEvent(evt);
} else if (elem.attachEvent && evtType.indexOf(':') >= 0) {
if (!Gala.IE_REGISTRATIONS[elem]) { return true; }
var evtHandlers = Gala.IE_REGISTRATIONS[elem][evtType];
if (!evtHandlers || evtHandlers.length < 1) { return true; }
var evt = {
type: evtType,
currentTarget: elem,
target: elem,
m: data,
defaultPrevented: false,
preventDefault: function () { evt.defaultPrevented = true; }
}
var q, processQueue = Gala.IE_INVOCATION_QUEUE.length == 0;
for (var i = 0, ii = evtHandlers.length; i < ii; ++i) {
q = { elem: elem, evtType: evtType, handler: evtHandlers[i], evt: evt }
Gala.IE_INVOCATION_QUEUE.push(q);
}
if (processQueue) {
while (q = Gala.IE_INVOCATION_QUEUE.shift()) {
//console.log("IE EVT on %s: '%s' with data: %s", q.elem, q.evtType, q.evt.m);
q.handler(q.evt);
}
}
return !(cancelable && evt.defaultPrevented);
} else {
console.warn('[GALA] Cannot dispatch non-namespaced events: '+evtType);
return true;
}
}
// Prevents the browser-default action on an event and stops it from
// propagating up the DOM tree.
//
Gala.stop = function (evt) {
evt = evt || window.event;
if (evt.preventDefault) { evt.preventDefault(); }
if (evt.stopPropagation) { evt.stopPropagation(); }
evt.returnValue = false;
evt.cancelBubble = true;
return false;
}
// Add a group of listeners, which is just a hash of { evtType: callback, ... }
//
Gala.listenGroup = function (elem, listeners, useCapture) {
for (evtType in listeners) {
Gala.listen(elem, evtType, listeners[evtType], useCapture || false);
}
}
// Remove a group of listeners.
//
Gala.deafenGroup = function (elem, listeners, useCapture) {
for (evtType in listeners) {
Gala.deafen(elem, evtType, listeners[evtType], useCapture || false);
}
}
// Replace a group of listeners with another group, re-using the same
// 'listeners' object -- a common pattern.
//
Gala.replaceGroup = function (elem, listeners, newListeners, useCapture) {
Gala.deafenGroup(elem, listeners, useCapture || false);
for (evtType in listeners) { delete listeners[evtType]; }
for (evtType in newListeners) { listeners[evtType] = newListeners[evtType]; }
Gala.listenGroup(elem, listeners, useCapture || false);
return listeners;
}
// Listen for a tap or a click event.
//
// Returns a 'listener' object that can be passed to Gala.deafenGroup().
//
// If 'tapClass' is undefined, it defaults to 'tapping'. If it is a blank
// string, no class is assigned.
//
Gala.onTap = function (elem, fn, tapClass) {
elem = Gala.$(elem);
if (typeof tapClass == 'undefined') { tapClass = Gala.TAPPING_CLASS; }
var tapping = false;
var fns = {
start: function (evt) {
tapping = true;
if (tapClass) { elem.classList.add(tapClass); }
},
move: function (evt) {
if (!tapping) { return; }
tapping = false;
if (tapClass) { elem.classList.remove(tapClass); }
},
end: function (evt) {
if (!tapping) { return; }
fns.move(evt);
evt.currentTarget = evt.currentTarget || evt.srcElement;
fn(evt);
},
noop: function (evt) {}
}
var noopOnClick = function (listeners) {
Gala.listen(elem, 'click', listeners.click = fns.noop);
}
Gala.listen(window, 'gala:contact:cancel', fns.move);
return Gala.onContact(elem, fns, false, noopOnClick);
}
// Register a series of functions to listen for the start, move, end
// events of a mouse or touch interaction.
//
// 'fns' argument is an object like:
//
// {
// 'start': function () { ... },
// 'move': function () { ... },
// 'end': function () { ... },
// 'cancel': function () { ... }
// }
//
// All of the functions in this object are optional.
//
// Returns an object that can later be passed to Gala.deafenGroup.
//
Gala.onContact = function (elem, fns, useCapture, initCallback) {
elem = Gala.$(elem);
var listeners = null;
var inited = false;
// If we see a touchstart event, register all these listeners.
var touchListeners = function () {
var l = {}
if (fns.start) {
l.touchstart = function (evt) {
if (evt.touches.length <= 1) { fns.start(evt); }
}
}
if (fns.move) {
l.touchmove = function (evt) {
if (evt.touches.length <= 1) { fns.move(evt); }
}
}
if (fns.end) {
l.touchend = function (evt) {
if (evt.touches.length <= 1) { fns.end(evt); }
}
}
if (fns.cancel) {
l.touchcancel = fns.cancel;
}
return l;
}
// Whereas if we see a mousedown event, register all these listeners.
var mouseListeners = function () {
var l = {};
if (fns.start) {
l.mousedown = function (evt) { if (evt.button < 2) { fns.start(evt); } }
}
if (fns.move) {
l.mousemove = fns.move;
}
if (fns.end) {
l.mouseup = function (evt) { if (evt.button < 2) { fns.end(evt); } }
}
// if (fns.cancel) {
// l.mouseout = function (evt) {
// obj = evt.relatedTarget || evt.fromElement;
// while (obj && (obj = obj.parentNode)) { if (obj == elem) { return; } }
// fns.cancel(evt);
// }
// }
return l;
}
if (typeof Gala.CONTACT_MODE == 'undefined') {
var contactInit = function (evt, newListeners, mode) {
if (inited) { return; }
Gala.CONTACT_MODE = Gala.CONTACT_MODE || mode;
if (Gala.CONTACT_MODE != mode) { return; }
Gala.replaceGroup(elem, listeners, newListeners, useCapture);
if (typeof initCallback == 'function') { initCallback(listeners); }
if (listeners[evt.type]) { listeners[evt.type](evt); }
inited = true;
}
var touchInit = function (evt) {
contactInit(evt, touchListeners(), 'touch');
}
var mouseInit = function (evt) {
contactInit(evt, mouseListeners(), 'mouse');
}
listeners = {
'touchstart': touchInit,
'touchmove': touchInit,
'touchend': touchInit,
'touchcancel': touchInit,
'mousedown': mouseInit,
'mousemove': mouseInit,
'mouseup': mouseInit,
'mouseout': mouseInit
}
} else if (Gala.CONTACT_MODE == 'touch') {
listeners = touchListeners();
} else if (Gala.CONTACT_MODE == 'mouse') {
listeners = mouseListeners();
}
Gala.listenGroup(elem, listeners);
if (typeof initCallback == 'function') { initCallback(listeners); }
return listeners;
}
// The Gala.Cursor object provides more detail coordinates for the contact
// event, and normalizes differences between touch and mouse coordinates.
//
// If you have a contact event listener, you can get the coordinates for it
// with:
//
// var cursor = new Gala.Cursor(evt);
//
Gala.Cursor = function (evt) {
var API = { constructor: Gala.Cursor }
function initialize() {
var ci =
evt.type.indexOf('mouse') == 0 ? evt :
['touchstart', 'touchmove'].indexOf(evt.type) >= 0 ? evt.targetTouches[0] :
['touchend', 'touchcancel'].indexOf(evt.type) >= 0 ? evt.changedTouches[0] :
null;
// Basic coordinates (provided by the event).
API.pageX = ci.pageX;
API.pageY = ci.pageY;
API.clientX = ci.clientX;
API.clientY = ci.clientY;
API.screenX = ci.screenX;
API.screenY = ci.screenY;
// Coordinates relative to the target element for the event.
var tgt = API.target = evt.target || evt.srcElement;
while (tgt.nodeType != 1 && tgt.parentNode) { tgt = tgt.parentNode; }
assignOffsetFor(tgt, 'offset');
// Coordinates relative to the element that the event was registered on.
var registrant = evt.currentTarget;
if (registrant && typeof registrant.offsetLeft != 'undefined') {
assignOffsetFor(registrant, 'registrant');
}
}
function assignOffsetFor(elem, attr) {
var r;
if (elem.getBoundingClientRect) {
var er = elem.getBoundingClientRect();
var dr = document.documentElement.getBoundingClientRect();
r = { left: er.left - dr.left, top: er.top - dr.top }
} else {
r = { left: elem.offsetLeft, top: elem.offsetTop }
while (elem = elem.offsetParent) {
if (elem.offsetLeft || elem.offsetTop) {
r.left += elem.offsetLeft;
r.top += elem.offsetTop;
}
}
}
API[attr+'X'] = API.pageX - r.left;
API[attr+'Y'] = API.pageY - r.top;
}
initialize();
return API;
}
// A little utility to dereference ids into elements. You've seen this before.
//
Gala.$ = function (elem) {
if (typeof elem == 'string') { elem = document.getElementById(elem); }
return elem;
}
// CONSTANTS
//
Gala.TAPPING_CLASS = 'tapping';
Gala.IE_REGISTRATIONS = {}
Gala.IE_INVOCATION_QUEUE = []
;
// A shortcut for creating a bookdata object from a 'data' hash.
//
// eg:
//
// Monocle.bookData({ components: ['intro.html', 'ch1.html', 'ch2.html'] });
//
// All keys in the 'data' hash are optional:
//
// components: must be an array of component urls
// chapters: must be an array of nested chapters (the usual bookdata structure)
// metadata: must be a hash of key/values
// getComponentFn: override the default way to fetch components via id
//
Monocle.bookData = function (data) {
return {
getComponents: function () {
return data.components || ['anonymous'];
},
getContents: function () {
return data.chapters || [];
},
getComponent: data.getComponent || function (id) {
return { url: id }
},
getMetaData: function (key) {
return (data.metadata || {})[key];
},
data: data
}
}
// A shortcut for creating a bookdata object from an array of element ids.
//
// eg:
//
// Monocle.bookDataFromIds(['part1', 'part2']);
//
Monocle.bookDataFromIds = function (elementIds) {
return Monocle.bookData({
components: elementIds,
getComponent: function (cmptId) {
return { nodes: [document.getElementById(cmptId)] }
}
});
}
// A shortcut for creating a bookdata object from an array of nodes.
//
// eg:
//
// Monocle.bookDataFromNodes([document.getElementById('content')]);
//
Monocle.bookDataFromNodes = function (nodes) {
return Monocle.bookData({
getComponent: function (n) { return { 'nodes': nodes }; }
});
}
;
Monocle.Factory = function (element, label, index, reader) {
var API = { constructor: Monocle.Factory };
var k = API.constants = API.constructor;
var p = API.properties = {
element: element,
label: label,
index: index,
reader: reader,
prefix: reader.properties.classPrefix || ''
}
// If index is null, uses the first available slot. If index is not null and
// the slot is not free, throws an error.
//
function initialize() {
if (!p.label) { return; }
// Append the element to the reader's graph of DOM elements.
var node = p.reader.properties.graph;
node[p.label] = node[p.label] || [];
if (typeof p.index == 'undefined' && node[p.label][p.index]) {
throw('Element already exists in graph: '+p.label+'['+p.index+']');
} else {
p.index = p.index || node[p.label].length;
}
node[p.label][p.index] = p.element;
// Add the label as a class name.
addClass(p.label);
}
// Finds an element that has been created in the context of the current
// reader, with the given label. If oIndex is not provided, returns first.
// If oIndex is provided (eg, n), returns the nth element with the label.
//
function find(oLabel, oIndex) {
if (!p.reader.properties.graph[oLabel]) {
return null;
}
return p.reader.properties.graph[oLabel][oIndex || 0];
}
// Takes an elements and assimilates it into the reader -- essentially
// giving it a "dom" object of it's own. It will then be accessible via find.
//
// Note that (as per comments for initialize), if oIndex is provided and
// there is no free slot in the array for this label at that index, an
// error will be thrown.
//
function claim(oElement, oLabel, oIndex) {
return oElement.dom = new Monocle.Factory(
oElement,
oLabel,
oIndex,
p.reader
);
}
// Create an element with the given label.
//
// The last argument (whether third or fourth) is the options hash. Your
// options are:
//
// class - the classname for the element. Must only be one name.
// html - the innerHTML for the element.
// text - the innerText for the element (an alternative to html, simpler).
//
// Returns the created element.
//
function make(tagName, oLabel, index_or_options, or_options) {
var oIndex, options;
if (arguments.length == 1) {
oLabel = null,
oIndex = 0;
options = {};
} else if (arguments.length == 2) {
oIndex = 0;
options = {};
} else if (arguments.length == 4) {
oIndex = arguments[2];
options = arguments[3];
} else if (arguments.length == 3) {
var lastArg = arguments[arguments.length - 1];
if (typeof lastArg == "number") {
oIndex = lastArg;
options = {};
} else {
oIndex = 0;
options = lastArg;
}
}
var oElement = document.createElement(tagName);
claim(oElement, oLabel, oIndex);
if (options['class']) {
oElement.className += " "+p.prefix+options['class'];
}
if (options['html']) {
oElement.innerHTML = options['html'];
}
if (options['text']) {
oElement.appendChild(document.createTextNode(options['text']));
}
return oElement;
}
// Creates an element by passing all the given arguments to make. Then
// appends the element as a child of the current element.
//
function append(tagName, oLabel, index_or_options, or_options) {
var oElement = make.apply(this, arguments);
p.element.appendChild(oElement);
return oElement;
}
// Returns an array of [label, index, reader] for the given element.
// A simple way to introspect the arguments required for #find, for eg.
//
function address() {
return [p.label, p.index, p.reader];
}
// Apply a set of style rules (hash or string) to the current element.
// See Monocle.Styles.applyRules for more info.
//
function setStyles(rules) {
return Monocle.Styles.applyRules(p.element, rules);
}
function setBetaStyle(property, value) {
return Monocle.Styles.affix(p.element, property, value);
}
// ClassName manipulation functions - with thanks to prototype.js!
// Returns true if one of the current element's classnames matches name --
// classPrefix aware (so don't concate the prefix onto it).
//
function hasClass(name) {
name = p.prefix + name;
var klass = p.element.className;
if (!klass) { return false; }
if (klass == name) { return true; }
return new RegExp("(^|\\s)"+name+"(\\s|$)").test(klass);
}
// Adds name to the classnames of the current element (prepending the
// reader's classPrefix first).
//
function addClass(name) {
if (hasClass(name)) { return; }
var gap = p.element.className ? ' ' : '';
return p.element.className += gap+p.prefix+name;
}
// Removes (classPrefix+)name from the classnames of the current element.
//
function removeClass(name) {
var reName = new RegExp("(^|\\s+)"+p.prefix+name+"(\\s+|$)");
var reTrim = /^\s+|\s+$/g;
var klass = p.element.className;
p.element.className = klass.replace(reName, ' ').replace(reTrim, '');
return p.element.className;
}
API.find = find;
API.claim = claim;
API.make = make;
API.append = append;
API.address = address;
API.setStyles = setStyles;
API.setBetaStyle = setBetaStyle;
API.hasClass = hasClass;
API.addClass = addClass;
API.removeClass = removeClass;
initialize();
return API;
}
;
Monocle.Events = {};
Monocle.Events.wrapper = function (fn) {
return function (evt) { evt.m = new Gala.Cursor(evt); fn(evt); }
}
Monocle.Events.listen = Gala.listen;
Monocle.Events.deafen = Gala.deafen;
Monocle.Events.dispatch = Gala.dispatch;
Monocle.Events.listenForTap = function (elem, fn, tapClass) {
return Gala.onTap(elem, Monocle.Events.wrapper(fn), tapClass);
}
Monocle.Events.deafenForTap = Gala.deafenGroup;
Monocle.Events.listenForContact = function (elem, fns, options) {
options = options || { useCapture: false };
var wrappers = {};
for (evtType in fns) {
wrappers[evtType] = Monocle.Events.wrapper(fns[evtType]);
}
return Gala.onContact(elem, wrappers, options.useCapture);
}
Monocle.Events.deafenForContact = Gala.deafenGroup;
// Listen for the next transition-end event on the given element, call
// the function, then deafen.
//
// Returns a function that can be used to cancel the listen early.
//
Monocle.Events.afterTransition = function (elem, fn) {
var evtName = "transitionend";
if (Monocle.Browser.is.WebKit) {
evtName = 'webkitTransitionEnd';
} else if (Monocle.Browser.is.Opera) {
evtName = 'oTransitionEnd';
}
var l = null, cancel = null;
l = function () { fn(); cancel(); }
cancel = function () { Monocle.Events.deafen(elem, evtName, l); }
Monocle.Events.listen(elem, evtName, l);
return cancel;
}
;
Monocle.Styles = {
// Takes a hash and returns a string.
rulesToString: function (rules) {
if (typeof rules != 'string') {
var parts = [];
for (var declaration in rules) {
parts.push(declaration+": "+rules[declaration]+";")
}
rules = parts.join(" ");
}
return rules;
},
// Takes a hash or string of CSS property assignments and applies them
// to the element.
//
applyRules: function (elem, rules) {
rules = Monocle.Styles.rulesToString(rules);
elem.style.cssText += ';'+rules;
return elem.style.cssText;
},
// Generates cross-browser properties for a given property.
// ie, affix(<elem>, 'transition', 'linear 100ms') would apply that value
// to webkitTransition for WebKit browsers, and to MozTransition for Gecko.
//
affix: function (elem, property, value) {
var target = elem.style ? elem.style : elem;
var props = Monocle.Browser.css.toDOMProps(property);
while (props.length) { target[props.shift()] = value; }
},
setX: function (elem, x) {
var s = elem.style;
if (typeof x == "number") { x += "px"; }
var val = Monocle.Browser.env.supportsTransform3d ?
'translate3d('+x+', 0, 0)' :
'translateX('+x+')';
val = (x == '0px') ? 'none' : val;
s.webkitTransform = s.MozTransform = s.OTransform = s.transform = val;
return x;
},
setY: function (elem, y) {
var s = elem.style;
if (typeof y == "number") { y += "px"; }
var val = Monocle.Browser.env.supportsTransform3d ?
'translate3d(0, '+y+', 0)' :
'translateY('+y+')';
val = (y == '0px') ? 'none' : val;
s.webkitTransform = s.MozTransform = s.OTransform = s.transform = val;
return y;
},
getX: function (elem) {
var currStyle = document.defaultView.getComputedStyle(elem, null);
var re = /matrix\([^,]+,[^,]+,[^,]+,[^,]+,\s*([^,]+),[^\)]+\)/;
var props = Monocle.Browser.css.toDOMProps('transform');
var matrix = null;
while (props.length && !matrix) {
matrix = currStyle[props.shift()];
}
return parseInt(matrix.match(re)[1]);
},
transitionFor: function (elem, prop, duration, timing, delay) {
var tProps = Monocle.Browser.css.toDOMProps('transition');
var pProps = Monocle.Browser.css.toCSSProps(prop);
timing = timing || "linear";
delay = (delay || 0)+"ms";
for (var i = 0, ii = tProps.length; i < ii; ++i) {
var t = "none";
if (duration) {
t = [pProps[i], duration+"ms", timing, delay].join(" ");
}
elem.style[tProps[i]] = t;
}
}
}
// These rule definitions are more or less compulsory for Monocle to behave
// as expected. Which is why they appear here and not in the stylesheet.
// Adjust them if you know what you're doing.
//
Monocle.Styles.container = {
"position": "absolute",
"overflow": "hidden",
"top": "0",
"left": "0",
"bottom": "0",
"right": "0"
}
Monocle.Styles.page = {
"position": "absolute",
"z-index": "1",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"-ms-user-select": "none",
"user-select": "none",
"-webkit-transform": "translate3d(0,0,0)",
"visibility": "visible"
/*
"background": "white",
"top": "0",
"left": "0",
"bottom": "0",
"right": "0"
*/
}
Monocle.Styles.sheaf = {
"position": "absolute",
"overflow": "hidden"
/*
"top": "0",
"left": "0",
"bottom": "0",
"right": "0"
*/
}
Monocle.Styles.component = {
"width": "100%",
"height": "100%",
"border": "none",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"-ms-user-select": "none",
"user-select": "none"
}
Monocle.Styles.control = {
"z-index": "100",
"cursor": "pointer"
}
Monocle.Styles.overlay = {
"position": "absolute",
"display": "none",
"width": "100%",
"height": "100%",
"z-index": "1000"
}
;
Monocle.Formatting = function (reader, optStyles, optScale) {
var API = { constructor: Monocle.Formatting };
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader,
// An array of style rules that are automatically applied to every page.
stylesheets: [],
// A multiplier on the default font-size of each element in every
// component. If null, the multiplier is not applied (or it is removed).
fontScale: null
}
function initialize() {
p.fontScale = optScale;
clampStylesheets(optStyles);
p.reader.listen('monocle:componentmodify', persistOnComponentChange);
}
// Clamp page frames to a set of styles that reduce Monocle breakage.
//
function clampStylesheets(implStyles) {
var defCSS = k.DEFAULT_STYLE_RULES;
if (Monocle.Browser.env.floatsIgnoreColumns) {
defCSS.push("html#RS\\:monocle * { float: none !important; }");
}
p.defaultStyles = addPageStyles(defCSS, false);
if (implStyles) {
p.initialStyles = addPageStyles(implStyles, false);
}
}
function persistOnComponentChange(evt) {
var doc = evt.m['document'];
doc.documentElement.id = p.reader.properties.systemId;
adjustFontScaleForDoc(doc, p.fontScale);
for (var i = 0; i < p.stylesheets.length; ++i) {
if (p.stylesheets[i]) {
addPageStylesheet(doc, i);
}
}
}
/* PAGE STYLESHEETS */
// API for adding a new stylesheet to all components. styleRules should be
// a string of CSS rules. restorePlace defaults to true.
//
// Returns a sheet index value that can be used with updatePageStyles
// and removePageStyles.
//
function addPageStyles(styleRules, restorePlace) {
return changingStylesheet(function () {
p.stylesheets.push(styleRules);
var sheetIndex = p.stylesheets.length - 1;
var i = 0, cmpt = null;
while (cmpt = p.reader.dom.find('component', i++)) {
addPageStylesheet(cmpt.contentDocument, sheetIndex);
}
return sheetIndex;
}, restorePlace);
}
// API for updating the styleRules in an existing page stylesheet across
// all components. Takes a sheet index value obtained via addPageStyles.
//
function updatePageStyles(sheetIndex, styleRules, restorePlace) {
return changingStylesheet(function () {
p.stylesheets[sheetIndex] = styleRules;
if (typeof styleRules.join == "function") {
styleRules = styleRules.join("\n");
}
var i = 0, cmpt = null;
while (cmpt = p.reader.dom.find('component', i++)) {
var doc = cmpt.contentDocument;
var styleTag = doc.getElementById('monStylesheet'+sheetIndex);
if (!styleTag) {
console.warn('No such stylesheet: ' + sheetIndex);
return;
}
if (styleTag.styleSheet) {
styleTag.styleSheet.cssText = styleRules;
} else {
styleTag.replaceChild(
doc.createTextNode(styleRules),
styleTag.firstChild
);
}
}
}, restorePlace);
}
// API for removing a page stylesheet from all components. Takes a sheet
// index value obtained via addPageStyles.
//
function removePageStyles(sheetIndex, restorePlace) {
return changingStylesheet(function () {
p.stylesheets[sheetIndex] = null;
var i = 0, cmpt = null;
while (cmpt = p.reader.dom.find('component', i++)) {
var doc = cmpt.contentDocument;
var styleTag = doc.getElementById('monStylesheet'+sheetIndex);
styleTag.parentNode.removeChild(styleTag);
}
}, restorePlace);
}
// Wraps all API-based stylesheet changes (add, update, remove) in a
// brace of custom events (stylesheetchanging/stylesheetchange), and
// recalculates component dimensions if specified (default to true).
//
function changingStylesheet(callback, restorePlace) {
restorePlace = (restorePlace === false) ? false : true;
if (restorePlace) {
dispatchChanging();
}
var result = callback();
if (restorePlace) {
p.reader.recalculateDimensions(true);
Monocle.defer(dispatchChange);
} else {
p.reader.recalculateDimensions(false);
}
return result;
}
function dispatchChanging() {
p.reader.dispatchEvent("monocle:stylesheetchanging", {});
}
function dispatchChange() {
p.reader.dispatchEvent("monocle:stylesheetchange", {});
}
// Private method for adding a stylesheet to a component. Used by
// addPageStyles.
//
function addPageStylesheet(doc, sheetIndex) {
var styleRules = p.stylesheets[sheetIndex];
if (!styleRules) {
return;
}
if (!doc || !doc.documentElement) {
return;
}
var head = doc.getElementsByTagName('head')[0];
if (!head) {
head = doc.createElement('head');
doc.documentElement.appendChild(head);
}
if (typeof styleRules.join == "function") {
styleRules = styleRules.join("\n");
}
var styleTag = doc.createElement('style');
styleTag.type = 'text/css';
styleTag.id = "monStylesheet"+sheetIndex;
if (styleTag.styleSheet) {
styleTag.styleSheet.cssText = styleRules;
} else {
styleTag.appendChild(doc.createTextNode(styleRules));
}
head.appendChild(styleTag);
return styleTag;
}
/* FONT SCALING */
function setFontScale(scale, restorePlace) {
p.fontScale = scale;
if (restorePlace) {
dispatchChanging();
}
var i = 0, cmpt = null;
while (cmpt = p.reader.dom.find('component', i++)) {
adjustFontScaleForDoc(cmpt.contentDocument, scale);
}
if (restorePlace) {
p.reader.recalculateDimensions(true);
dispatchChange();
} else {
p.reader.recalculateDimensions(false);
}
}
function adjustFontScaleForDoc(doc, scale) {
var elems = doc.getElementsByTagName('*');
if (scale) {
scale = parseFloat(scale);
if (!doc.body.pfsSwept) {
sweepElements(doc, elems);
}
// Iterate over each element, applying scale to the original
// font-size. If a proportional font sizing is already applied to
// the element, update existing cssText, otherwise append new cssText.
//
for (var j = 0, jj = elems.length; j < jj; ++j) {
var newFs = fsProperty(elems[j].pfsOriginal, scale);
if (elems[j].pfsApplied) {
replaceFontSizeInStyle(elems[j], newFs);
} else {
elems[j].style.cssText += newFs;
}
elems[j].pfsApplied = scale;
}
} else if (doc.body.pfsSwept) {
// Iterate over each element, removing proportional font-sizing flag
// and property from cssText.
for (var j = 0, jj = elems.length; j < jj; ++j) {
if (elems[j].pfsApplied) {
var oprop = elems[j].pfsOriginalProp;
var opropDec = oprop ? 'font-size: '+oprop+' ! important;' : '';
replaceFontSizeInStyle(elems[j], opropDec);
elems[j].pfsApplied = null;
}
}
// Establish new baselines in case classes have changed.
sweepElements(doc, elems);
}
}
function sweepElements(doc, elems) {
// Iterate over each element, looking at its font size and storing
// the original value against the element.
for (var i = 0, ii = elems.length; i < ii; ++i) {
var currStyle = doc.defaultView.getComputedStyle(elems[i], null);
var fs = parseFloat(currStyle.getPropertyValue('font-size'));
elems[i].pfsOriginal = fs;
elems[i].pfsOriginalProp = elems[i].style.fontSize;
}
doc.body.pfsSwept = true;
}
function fsProperty(orig, scale) {
return 'font-size: '+(orig*scale)+'px ! important;';
}
function replaceFontSizeInStyle(elem, newProp) {
var lastFs = /font-size:[^;]/
elem.style.cssText = elem.style.cssText.replace(lastFs, newProp);
}
API.addPageStyles = addPageStyles;
API.updatePageStyles = updatePageStyles;
API.removePageStyles = removePageStyles;
API.setFontScale = setFontScale;
initialize();
return API;
}
Monocle.Formatting.DEFAULT_STYLE_RULES = [
"html#RS\\:monocle * {" +
"-webkit-font-smoothing: subpixel-antialiased;" +
"text-rendering: auto !important;" +
"word-wrap: break-word !important;" +
"overflow: visible !important;" +
"}",
"html#RS\\:monocle body {" +
"margin: 0 !important;"+
"border: none !important;" +
"padding: 0 !important;" +
"width: 100% !important;" +
"position: absolute !important;" +
"-webkit-text-size-adjust: none;" +
"}",
"html#RS\\:monocle body * {" +
"max-width: 100% !important;" +
"}",
"html#RS\\:monocle img, html#RS\\:monocle video, html#RS\\:monocle object, html#RS\\:monocle svg {" +
"max-height: 95% !important;" +
"height: auto !important;" +
"}"
]
;
// READER
//
//
// The full DOM hierarchy created by Reader is:
//
// box
// -> container
// -> pages (the number of page elements is determined by the flipper)
// -> sheaf (basically just sets the margins)
// -> component (an iframe created by the current component)
// -> body (the document.body of the iframe)
// -> page controls
// -> standard controls
// -> overlay
// -> modal/popover controls
//
//
// Options:
//
// flipper: The class of page flipper 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.
//
// fontScale: a float to multiply against the default font-size of each
// element in each component.
//
// place: A book locus for the page to open to when the reader is
// initialized. (See comments at Book#pageNumberAt for more about
// the locus option).
//
// systemId: the id for root elements of components, defaults to "RS:monocle"
//
Monocle.Reader = function (node, bookData, options, onLoadCallback) {
var API = { constructor: Monocle.Reader }
var k = API.constants = API.constructor;
var p = API.properties = {
// Initialization-completed flag.
initialized: false,
// The active book.
book: null,
// DOM graph of factory-generated objects.
graph: {},
// Id applied to the HTML element of each component, can be used to scope
// CSS rules.
systemId: (options ? options.systemId : null) || k.DEFAULT_SYSTEM_ID,
// Prefix for classnames for any created element.
classPrefix: k.DEFAULT_CLASS_PREFIX,
// Registered control objects (see addControl). Hashes of the form:
// {
// control: <control instance>,
// elements: <array of topmost elements created by control>,
// controlType: <standard, page, modal, popover, invisible, etc>
// }
controls: [],
// After the reader has been resized, this resettable timer must expire
// the place is restored.
resizeTimer: null
}
var dom;
// Inspects the browser environment and kicks off preparing the container.
//
function initialize() {
options = options || {}
Monocle.Browser.survey(prepareBox);
}
// Sets up the container and internal elements.
//
function prepareBox() {
var box = node;
if (typeof box == "string") { box = document.getElementById(box); }
dom = API.dom = box.dom = new Monocle.Factory(box, 'box', 0, API);
API.billboard = new Monocle.Billboard(API);
if (!Monocle.Browser.env.isCompatible()) {
if (dispatchEvent("monocle:incompatible", {}, true)) {
fatalSystemMessage(k.COMPATIBILITY_INFO);
}
return;
}
dispatchEvent("monocle:initializing", API);
bookData = bookData || Monocle.bookDataFromNodes([box.cloneNode(true)]);
var bk = new Monocle.Book(bookData, options.preloadWindow || 1);
box.innerHTML = "";
// Make sure the box div is absolutely or relatively positioned.
positionBox();
// Attach the page-flipping gadget.
attachFlipper(options.flipper);
// Create the essential DOM elements.
createReaderElements();
// Create the selection object.
API.selection = new Monocle.Selection(API);
// Create the formatting object.
API.formatting = new Monocle.Formatting(
API,
options.stylesheet,
options.fontScale
);
primeFrames(options.primeURL, function () {
// Make the reader elements look pretty.
applyStyles();
p.flipper.listenForInteraction(options.panels);
setBook(bk, options.place, function () {
if (onLoadCallback) { onLoadCallback(API); }
dispatchEvent("monocle:loaded", API);
});
});
}
function positionBox() {
var currPosVal;
var box = dom.find('box');
if (document.defaultView) {
var currStyle = document.defaultView.getComputedStyle(box, null);
currPosVal = currStyle.getPropertyValue('position');
} else if (box.currentStyle) {
currPosVal = box.currentStyle.position
}
if (["absolute", "relative"].indexOf(currPosVal) == -1) {
box.style.position = "relative";
}
}
function attachFlipper(flipperClass) {
if (!flipperClass) {
if (Monocle.Browser.renders.slow) {
flipperClass = Monocle.Flippers.Instant;
} else {
flipperClass = Monocle.Flippers.Slider;
}
}
p.flipper = new flipperClass(API, null, p.readerOptions);
}
function createReaderElements() {
var cntr = dom.append('div', 'container');
for (var i = 0; i < p.flipper.pageCount; ++i) {
var page = cntr.dom.append('div', 'page', i);
page.style.visibility = "hidden";
page.m = { reader: API, pageIndex: i, place: null }
page.m.sheafDiv = page.dom.append('div', 'sheaf', i);
page.m.activeFrame = page.m.sheafDiv.dom.append('iframe', 'component', i);
page.m.activeFrame.m = { 'pageDiv': page };
page.m.activeFrame.setAttribute('frameBorder', 0);
page.m.activeFrame.setAttribute('scrolling', 'no');
p.flipper.addPage(page);
}
dom.append('div', 'overlay');
dispatchEvent("monocle:loading", API);
}
// Opens the frame to a particular URL (usually 'about:blank').
//
function primeFrames(url, callback) {
url = url || (Monocle.Browser.on.UIWebView ? "blank.html" : "about:blank");
var pageCount = 0;
var cb = function (evt) {
var frame = evt.target || evt.srcElement;
Monocle.Events.deafen(frame, 'load', cb);
dispatchEvent(
'monocle:frameprimed',
{ frame: frame, pageIndex: pageCount }
);
if ((pageCount += 1) == p.flipper.pageCount) {
Monocle.defer(callback);
}
}
forEachPage(function (page) {
Monocle.Events.listen(page.m.activeFrame, 'load', cb);
page.m.activeFrame.src = url;
});
}
function applyStyles() {
dom.find('container').dom.setStyles(Monocle.Styles.container);
forEachPage(function (page, i) {
page.dom.setStyles(Monocle.Styles.page);
dom.find('sheaf', i).dom.setStyles(Monocle.Styles.sheaf);
var cmpt = dom.find('component', i)
cmpt.dom.setStyles(Monocle.Styles.component);
});
lockFrameWidths();
dom.find('overlay').dom.setStyles(Monocle.Styles.overlay);
dispatchEvent('monocle:styles');
}
function lockingFrameWidths() {
if (!Monocle.Browser.env.relativeIframeExpands) { return; }
for (var i = 0, cmpt; cmpt = dom.find('component', i); ++i) {
cmpt.style.display = "none";
}
}
function lockFrameWidths() {
if (!Monocle.Browser.env.relativeIframeExpands) { return; }
for (var i = 0, cmpt; cmpt = dom.find('component', i); ++i) {
cmpt.style.width = cmpt.parentNode.offsetWidth+"px";
cmpt.style.display = "block";
}
}
// Apply the book, move to a particular place or just the first page, wait
// for everything to complete, then fire the callback.
//
function setBook(bk, place, callback) {
p.book = bk;
var pageCount = 0;
if (typeof callback == 'function') {
var watchers = {
'monocle:componentchange': function (evt) {
dispatchEvent('monocle:firstcomponentchange', evt.m);
return (pageCount += 1) == p.flipper.pageCount;
},
'monocle:componentfailed': function (evt) {
fatalSystemMessage(k.LOAD_FAILURE_INFO);
return true;
},
'monocle:turn': function (evt) {
deafen('monocle:componentfailed', listener);
callback();
return true;
}
}
var listener = function (evt) {
if (watchers[evt.type](evt)) { deafen(evt.type, listener); }
}
for (evtType in watchers) { listen(evtType, listener) }
}
p.flipper.moveTo(place || { page: 1 }, initialized);
}
function getBook() {
return p.book;
}
function initialized() {
p.initialized = true;
}
// Attempts to restore the place we were up to in the book before the
// reader was resized.
//
// The delay ensures that if we get multiple calls to this function in
// a short period, we don't do lots of expensive recalculations.
//
function resized() {
if (!p.initialized) {
console.warn('Attempt to resize book before initialization.');
}
lockingFrameWidths();
if (!dispatchEvent("monocle:resizing", {}, true)) {
return;
}
clearTimeout(p.resizeTimer);
p.resizeTimer = Monocle.defer(performResize, k.RESIZE_DELAY);
}
function performResize() {
lockFrameWidths();
recalculateDimensions(true, afterResized);
}
function afterResized() {
dispatchEvent('monocle:resize');
}
function recalculateDimensions(andRestorePlace, callback) {
if (!p.book) { return; }
dispatchEvent("monocle:recalculating");
var place, locus;
if (andRestorePlace !== false) {
var place = getPlace();
var locus = { percent: place ? place.percentageThrough() : 0 };
}
forEachPage(function (pageDiv) {
pageDiv.m.activeFrame.m.component.updateDimensions(pageDiv);
});
var cb = function () {
dispatchEvent("monocle:recalculated");
Monocle.defer(callback);
}
Monocle.defer(function () { locus ? p.flipper.moveTo(locus, cb) : cb; });
}
// Returns the current page number in the book.
//
// The pageDiv argument is optional - typically defaults to whatever the
// flipper thinks is the "active" page.
//
function pageNumber(pageDiv) {
var place = getPlace(pageDiv);
return place ? (place.pageNumber() || 1) : 1;
}
// Returns the current "place" in the book -- ie, the page number, chapter
// title, etc.
//
// The pageDiv argument is optional - typically defaults to whatever the
// flipper thinks is the "active" page.
//
function getPlace(pageDiv) {
if (!p.initialized) {
console.warn('Attempt to access place before initialization.');
}
return p.flipper.getPlace(pageDiv);
}
// Moves the current page as specified by the locus. See
// Monocle.Book#pageNumberAt for documentation on the locus argument.
//
// The callback argument is optional.
//
function moveTo(locus, callback) {
if (!p.initialized) {
console.warn('Attempt to move place before initialization.');
}
if (!p.book.isValidLocus(locus)) {
dispatchEvent(
"monocle:notfound",
{ href: locus ? locus.componentId : "anonymous" }
);
return false;
}
var fn = callback;
if (!locus.direction) {
dispatchEvent('monocle:jumping', { locus: locus });
fn = function () {
dispatchEvent('monocle:jump', { locus: locus });
if (callback) { callback(); }
}
}
p.flipper.moveTo(locus, fn);
return true;
}
// Moves to the relevant element in the relevant component.
//
function skipToChapter(src) {
var locus = p.book.locusOfChapter(src);
return moveTo(locus);
}
// Valid types:
// - standard (an overlay above the pages)
// - page (within the page)
// - modal (overlay where click-away does nothing, for a single control)
// - hud (overlay that multiple controls can share)
// - popover (overlay where click-away removes the ctrl elements)
// - invisible
//
// Options:
// - hidden -- creates and hides the ctrl elements;
// use showControl to show them
// - container -- specify an existing DOM element to contain the control.
//
function addControl(ctrl, cType, options) {
for (var i = 0; i < p.controls.length; ++i) {
if (p.controls[i].control == ctrl) {
console.warn("Already added control: %o", ctrl);
return;
}
}
options = options || {};
var ctrlData = { control: ctrl, elements: [], controlType: cType }
p.controls.push(ctrlData);
var addControlTo = function (cntr) {
if (cntr == 'container') {
cntr = options.container || dom.find('container');
if (typeof cntr == 'string') { cntr = document.getElementById(cntr); }
if (!cntr.dom) { dom.claim(cntr, 'controlContainer'); }
} else if (cntr == 'overlay') {
cntr = dom.find('overlay');
}
if (typeof ctrl.createControlElements != 'function') { return; }
var ctrlElem = ctrl.createControlElements(cntr);
if (!ctrlElem) { return; }
cntr.appendChild(ctrlElem);
ctrlData.elements.push(ctrlElem);
Monocle.Styles.applyRules(ctrlElem, Monocle.Styles.control);
return ctrlElem;
}
if (!cType || cType == 'standard' || cType == 'invisible') {
addControlTo('container');
} else if (cType == 'page') {
forEachPage(addControlTo);
} else if (cType == 'modal' || cType == 'popover' || cType == 'hud') {
addControlTo('overlay');
ctrlData.usesOverlay = true;
} else if (cType == 'invisible') {
addControlTo('container');
} else {
console.warn('Unknown control type: ' + cType);
}
if (options.hidden) {
hideControl(ctrl);
} else {
showControl(ctrl);
}
if (typeof ctrl.assignToReader == 'function') {
ctrl.assignToReader(API);
}
return ctrl;
}
function dataForControl(ctrl) {
for (var i = 0; i < p.controls.length; ++i) {
if (p.controls[i].control == ctrl) {
return p.controls[i];
}
}
}
function hideControl(ctrl) {
var controlData = dataForControl(ctrl);
if (!controlData) {
console.warn("No data for control: " + ctrl);
return;
}
if (controlData.hidden) {
return;
}
for (var i = 0; i < controlData.elements.length; ++i) {
controlData.elements[i].style.display = "none";
}
if (controlData.usesOverlay) {
var overlay = dom.find('overlay');
overlay.style.display = "none";
Monocle.Events.deafenForContact(overlay, overlay.listeners);
if (controlData.controlType != 'hud') {
dispatchEvent('monocle:modal:off');
}
}
controlData.hidden = true;
if (ctrl.properties) {
ctrl.properties.hidden = true;
}
dispatchEvent('monocle:controlhide', { control: ctrl }, false);
}
function showControl(ctrl) {
var controlData = dataForControl(ctrl);
if (!controlData) {
console.warn("No data for control: " + ctrl);
return false;
}
if (showingControl(ctrl)) {
return false;
}
var overlay = dom.find('overlay');
if (controlData.usesOverlay && controlData.controlType != "hud") {
for (var i = 0, ii = p.controls.length; i < ii; ++i) {
if (p.controls[i].usesOverlay && !p.controls[i].hidden) {
return false;
}
}
overlay.style.display = "block";
dispatchEvent('monocle:modal:on');
}
for (var i = 0; i < controlData.elements.length; ++i) {
controlData.elements[i].style.display = "block";
}
if (controlData.controlType == "popover") {
var onControl = function (evt) {
var obj = evt.target;
do {
if (obj == controlData.elements[0]) { return true; }
} while (obj && (obj = obj.parentNode));
return false;
}
overlay.listeners = Monocle.Events.listenForContact(
overlay,
{
start: function (evt) { if (!onControl(evt)) { hideControl(ctrl); } },
move: function (evt) { if (!onControl(evt)) { evt.preventDefault(); } }
}
);
}
controlData.hidden = false;
if (ctrl.properties) {
ctrl.properties.hidden = false;
}
dispatchEvent('monocle:controlshow', { control: ctrl }, false);
return true;
}
function showingControl(ctrl) {
var controlData = dataForControl(ctrl);
return controlData.hidden == false;
}
function dispatchEvent(evtType, data, cancelable) {
return Monocle.Events.dispatch(dom.find('box'), evtType, data, cancelable);
}
function listen(evtType, fn, useCapture) {
Monocle.Events.listen(dom.find('box'), evtType, fn, useCapture);
}
function deafen(evtType, fn) {
Monocle.Events.deafen(dom.find('box'), evtType, fn);
}
function visiblePages() {
return p.flipper.visiblePages ?
p.flipper.visiblePages() :
[dom.find('page')];
}
function forEachPage(callback) {
for (var i = 0, ii = p.flipper.pageCount; i < ii; ++i) {
var page = dom.find('page', i);
callback(page, i);
}
}
/* The Reader PageStyles API is deprecated - it has moved to Formatting */
function addPageStyles(styleRules, restorePlace) {
console.deprecation("Use reader.formatting.addPageStyles instead.");
return API.formatting.addPageStyles(styleRules, restorePlace);
}
function updatePageStyles(sheetIndex, styleRules, restorePlace) {
console.deprecation("Use reader.formatting.updatePageStyles instead.");
return API.formatting.updatePageStyles(sheetIndex, styleRules, restorePlace);
}
function removePageStyles(sheetIndex, restorePlace) {
console.deprecation("Use reader.formatting.removePageStyles instead.");
return API.formatting.removePageStyles(sheetIndex, restorePlace);
}
function fatalSystemMessage(msg) {
var info = dom.make('div', 'book_fatality', { html: msg });
var box = dom.find('box');
var bbOrigin = [box.offsetWidth / 2, box.offsetHeight / 2];
API.billboard.show(info, { closeButton: false, from: bbOrigin });
}
API.getBook = getBook;
API.getPlace = getPlace;
API.moveTo = moveTo;
API.skipToChapter = skipToChapter;
API.resized = resized;
API.recalculateDimensions = recalculateDimensions;
API.addControl = addControl;
API.hideControl = hideControl;
API.showControl = showControl;
API.showingControl = showingControl;
API.dispatchEvent = dispatchEvent;
API.listen = listen;
API.deafen = deafen;
API.visiblePages = visiblePages;
// Deprecated!
API.addPageStyles = addPageStyles;
API.updatePageStyles = updatePageStyles;
API.removePageStyles = removePageStyles;
initialize();
return API;
}
Monocle.Reader.RESIZE_DELAY = Monocle.Browser.renders.slow ? 500 : 100;
Monocle.Reader.DEFAULT_SYSTEM_ID = 'RS:monocle'
Monocle.Reader.DEFAULT_CLASS_PREFIX = 'monelem_'
Monocle.Reader.DEFAULT_STYLE_RULES = Monocle.Formatting.DEFAULT_STYLE_RULES;
Monocle.Reader.COMPATIBILITY_INFO =
"<h1>Incompatible browser</h1>"+
"<p>Unfortunately, your browser isn't able to display this book. "+
"If possible, try again in another browser or on another device.</p>";
Monocle.Reader.LOAD_FAILURE_INFO =
"<h1>Book could not be loaded</h1>"+
"<p>Sorry, parts of the book could not be retrieved.<br />"+
"Please check your connection and refresh to try again.</p>";
/* BOOK */
/* The Book handles movement through the content by the reader page elements.
*
* It's responsible for instantiating components as they are required,
* and for calculating which component and page number to move to (based on
* requests from the Reader).
*
*/
Monocle.Book = function (dataSource, preloadWindow) {
var API = { constructor: Monocle.Book }
var k = API.constants = API.constructor;
var p = API.properties = {
dataSource: dataSource,
preloadWindow: preloadWindow,
cmptLoadQueue: {},
components: [],
chapters: {} // flat arrays of chapters per component
}
function initialize() {
p.componentIds = dataSource.getComponents();
p.contents = dataSource.getContents();
p.lastCIndex = p.componentIds.length - 1;
}
// Adjusts the given locus object to provide the page number within the
// current component.
//
// If the locus implies movement to another component, the locus
// 'componentId' property will be updated to point to this component, and
// the 'load' property will be set to true, which should be taken as a
// sign to call loadPageAt with a callback.
//
// The locus argument is an object that has one of the following properties:
//
// - page: positive integer. Counting up from the start of component.
// - pagesBack: negative integer. Counting back from the end of component.
// - percent: float indicating percentage through the component
// - direction: integer relative to the current page number for this pageDiv
// - position: string, one of "start" or "end", moves to corresponding point
// in the given component
// - anchor: an element id within the component
// - xpath: the node at this XPath within the component
// - selector: the first node at this CSS selector within the component
//
// The locus object can also specify a componentId. If it is not provided
// we default to the currently active component, and if that doesn't exist,
// we default to the very first component.
//
// The locus result will be an object with the following properties:
//
// - load: boolean, true if loading component required, false otherwise
// - componentId: component to load (current componentId if load is false)
// - if load is false:
// - page
// - if load is true:
// - one of page / pagesBack / percent / direction / position / anchor
//
function pageNumberAt(pageDiv, locus) {
locus.load = false;
var currComponent = pageDiv.m.activeFrame ?
pageDiv.m.activeFrame.m.component :
null;
var component = null;
var cIndex = p.componentIds.indexOf(locus.componentId);
if (cIndex < 0 && !currComponent) {
// No specified component, no current component. Load first component.
locus.load = true;
locus.componentId = p.componentIds[0];
return locus;
} else if (
cIndex < 0 &&
locus.componentId &&
currComponent.properties.id != locus.componentId
) {
// Invalid component, say not found.
pageDiv.m.reader.dispatchEvent(
"monocle:notfound",
{ href: locus.componentId }
);
return null;
} else if (cIndex < 0) {
// No specified (or invalid) component, use current component.
component = currComponent;
locus.componentId = pageDiv.m.activeFrame.m.component.properties.id;
cIndex = p.componentIds.indexOf(locus.componentId);
} else if (!p.components[cIndex] || p.components[cIndex] != currComponent) {
// Specified component differs from current component. Load specified.
locus.load = true;
return locus;
} else {
component = currComponent;
}
// If we're here, then the locus is based on the current component.
var result = { load: false, componentId: locus.componentId, page: 1 }
// Get the current last page.
lastPageNum = component.lastPageNumber();
// Deduce the page number for the given locus.
if (typeof(locus.page) == "number") {
result.page = locus.page;
} else if (typeof(locus.pagesBack) == "number") {
result.page = lastPageNum + locus.pagesBack;
} else if (typeof(locus.percent) == "number") {
var place = new Monocle.Place();
place.setPlace(component, 1);
result.page = place.pageAtPercentageThrough(locus.percent);
} else if (typeof(locus.direction) == "number") {
if (!pageDiv.m.place) {
console.warn("Can't move in a direction if pageDiv has no place.");
}
result.page = pageDiv.m.place.pageNumber();
result.page += locus.direction;
} else if (typeof(locus.anchor) == "string") {
result.page = component.pageForChapter(locus.anchor, pageDiv);
} else if (typeof(locus.xpath) == "string") {
result.page = component.pageForXPath(locus.xpath, pageDiv);
} else if (typeof(locus.selector) == "string") {
result.page = component.pageForSelector(locus.selector, pageDiv);
} else if (typeof(locus.position) == "string") {
if (locus.position == "start") {
result.page = 1;
} else if (locus.position == "end") {
result.page = lastPageNum['new'];
}
} else {
console.warn("Unrecognised locus: " + locus);
}
if (result.page < 1) {
if (cIndex == 0) {
// On first page of book.
result.page = 1;
result.boundarystart = true;
} else {
// Moving backwards from current component.
result.load = true;
result.componentId = p.componentIds[cIndex - 1];
result.pagesBack = result.page;
result.page = null;
}
} else if (result.page > lastPageNum) {
if (cIndex == p.lastCIndex) {
// On last page of book.
result.page = lastPageNum;
result.boundaryend = true;
} else {
// Moving forwards from current component.
result.load = true;
result.componentId = p.componentIds[cIndex + 1];
result.page -= lastPageNum;
}
}
return result;
}
// Same as pageNumberAt, but if a load is not flagged, this will
// automatically update the pageDiv's place to the given pageNumber.
//
// If you call this (ie, from a flipper), you are effectively entering into
// a contract to move the frame offset to the given page returned in the
// locus if load is false.
//
function setPageAt(pageDiv, locus) {
locus = pageNumberAt(pageDiv, locus);
if (locus && !locus.load) {
var evtData = { locus: locus, page: pageDiv }
if (locus.boundarystart) {
pageDiv.m.reader.dispatchEvent('monocle:boundarystart', evtData);
} else if (locus.boundaryend) {
pageDiv.m.reader.dispatchEvent('monocle:boundaryend', evtData);
} else {
var component = p.components[p.componentIds.indexOf(locus.componentId)];
pageDiv.m.place = pageDiv.m.place || new Monocle.Place();
pageDiv.m.place.setPlace(component, locus.page);
var evtData = {
page: pageDiv,
locus: locus,
pageNumber: pageDiv.m.place.pageNumber(),
componentId: locus.componentId
}
pageDiv.m.reader.dispatchEvent("monocle:pagechange", evtData);
}
}
return locus;
}
// Will load the given component into the pageDiv's frame, then invoke the
// callback with resulting locus (provided by pageNumberAt).
//
// If the resulting page number is outside the bounds of the new component,
// (ie, pageNumberAt again requests a load), this will recurse into further
// components until non-loading locus is returned by pageNumberAt. Then the
// callback will fire with that locus.
//
// As with setPageAt, if you call this you're obliged to move the frame
// offset to the given page in the locus passed to the callback.
//
function loadPageAt(pageDiv, locus, onLoad, onFail) {
var cIndex = p.componentIds.indexOf(locus.componentId);
if (!locus.load || cIndex < 0) {
locus = pageNumberAt(pageDiv, locus);
}
if (!locus) {
return onFail ? onFail() : null;
}
if (!locus.load) {
return onLoad(locus);
}
var findPageNumber = function () {
locus = setPageAt(pageDiv, locus);
if (!locus) {
return onFail ? onFail() : null;
} else if (locus.load) {
loadPageAt(pageDiv, locus, onLoad, onFail)
} else {
onLoad(locus);
}
}
var applyComponent = function (component) {
component.applyTo(pageDiv, findPageNumber);
for (var l = 1; l <= p.preloadWindow; ++l) {
deferredPreloadComponent(cIndex+l, l*k.PRELOAD_INTERVAL);
}
}
loadComponent(cIndex, applyComponent, onFail, pageDiv);
}
// If your flipper doesn't care whether a component needs to be
// loaded before the page can be set, you can use this shortcut.
//
function setOrLoadPageAt(pageDiv, locus, onLoad, onFail) {
locus = setPageAt(pageDiv, locus);
if (!locus) {
if (onFail) { onFail(); }
} else if (locus.load) {
loadPageAt(pageDiv, locus, onLoad, onFail);
} else {
onLoad(locus);
}
}
// Fetches the component source from the dataSource.
//
// 'index' is the index of the component in the
// dataSource.getComponents array.
//
// 'onLoad' is invoked when the source is received.
//
// 'onFail' is optional, and is invoked if the source could not be fetched.
//
// 'pageDiv' is optional, and simply allows firing events on
// the reader object that has requested this component, ONLY if
// the source has not already been received.
//
function loadComponent(index, onLoad, onFail, pageDiv) {
if (p.components[index]) {
return onLoad(p.components[index]);
}
var cmptId = p.components[index];
var evtData = { 'page': pageDiv, 'component': cmptId, 'index': index };
pageDiv.m.reader.dispatchEvent('monocle:componentloading', evtData);
var onCmptLoad = function (cmpt) {
evtData['component'] = cmpt;
pageDiv.m.reader.dispatchEvent('monocle:componentloaded', evtData);
onLoad(cmpt);
}
var onCmptFail = function (cmptId) {
console.warn("Failed to load component: "+cmptId);
pageDiv.m.reader.dispatchEvent('monocle:componentfailed', evtData);
if (onFail) { onFail(); }
}
_loadComponent(index, onCmptLoad, onCmptFail);
}
function preloadComponent(index) {
if (p.components[index]) { return; }
var cmptId = p.componentIds[index];
if (!cmptId) { return; }
if (p.cmptLoadQueue[cmptId]) { return; }
_loadComponent(index);
}
function deferredPreloadComponent(index, delay) {
Monocle.defer(function () { preloadComponent(index); }, delay);
}
function _loadComponent(index, successCallback, failureCallback) {
var cmptId = p.componentIds[index];
var queueItem = { success: successCallback, failure: failureCallback };
if (p.cmptLoadQueue[cmptId]) {
return p.cmptLoadQueue[cmptId] = queueItem;
} else {
p.cmptLoadQueue[cmptId] = queueItem;
}
var onCmptFail = function () {
fireLoadQueue(cmptId, 'failure', cmptId);
}
var onCmptLoad = function (cmptSource) {
if (cmptSource === false) { return onCmptFail(); }
p.components[index] = new Monocle.Component(
API,
cmptId,
index,
chaptersForComponent(cmptId),
cmptSource
);
fireLoadQueue(cmptId, 'success', p.components[index]);
}
var cmptSource = p.dataSource.getComponent(cmptId, onCmptLoad);
if (cmptSource && !p.components[index]) {
onCmptLoad(cmptSource);
} else if (cmptSource === false) {
onCmptFail();
}
}
function fireLoadQueue(cmptId, cbName, args) {
if (typeof p.cmptLoadQueue[cmptId][cbName] == 'function') {
p.cmptLoadQueue[cmptId][cbName](args);
}
p.cmptLoadQueue[cmptId] = null;
}
// Returns an array of chapter objects that are found in the given component.
//
// A chapter object has this format:
//
// {
// title: "Chapter 1",
// fragment: null
// }
//
// The fragment property of a chapter object is either null (the chapter
// starts at the head of the component) or the fragment part of the URL
// (eg, "foo" in "index.html#foo").
//
function chaptersForComponent(cmptId) {
if (p.chapters[cmptId]) {
return p.chapters[cmptId];
}
p.chapters[cmptId] = [];
var matcher = new RegExp('^'+decodeURIComponent(cmptId)+"(\#(.+)|$)");
var matches;
var recurser = function (chp) {
if (matches = decodeURIComponent(chp.src).match(matcher)) {
p.chapters[cmptId].push({
title: chp.title,
fragment: matches[2] || null
});
}
if (chp.children) {
for (var i = 0; i < chp.children.length; ++i) {
recurser(chp.children[i]);
}
}
}
for (var i = 0; i < p.contents.length; ++i) {
recurser(p.contents[i]);
}
return p.chapters[cmptId];
}
// Returns a locus for the chapter that has the URL given in the
// 'src' argument.
//
// See the comments at pageNumberAt for an explanation of locus objects.
//
function locusOfChapter(src) {
var matcher = new RegExp('^(.+?)(#(.*))?$');
var matches = src.match(matcher);
if (!matches) { return null; }
var cmptId = componentIdMatching(matches[1]);
if (!cmptId) { return null; }
var locus = { componentId: cmptId }
matches[3] ? locus.anchor = matches[3] : locus.position = "start";
return locus;
}
function isValidLocus(locus) {
if (!locus) { return false; }
if (locus.componentId && !componentIdMatching(locus.componentId)) {
return false;
}
return true;
}
function componentIdMatching(str) {
str = decodeURIComponent(str);
for (var i = 0, ii = p.componentIds.length; i < ii; ++i) {
if (decodeURIComponent(p.componentIds[i]) == str) { return str; }
}
return null;
}
function componentWeights() {
if (!p.weights) {
p.weights = dataSource.getMetaData('componentWeights') || [];
if (!p.weights.length) {
var cmptSize = 1.0 / p.componentIds.length;
for (var i = 0, ii = p.componentIds.length; i < ii; ++i) {
p.weights.push(cmptSize);
}
}
}
return p.weights;
}
API.getMetaData = dataSource.getMetaData;
API.pageNumberAt = pageNumberAt;
API.setPageAt = setPageAt;
API.loadPageAt = loadPageAt;
API.setOrLoadPageAt = setOrLoadPageAt;
API.chaptersForComponent = chaptersForComponent;
API.locusOfChapter = locusOfChapter;
API.isValidLocus = isValidLocus;
API.componentWeights = componentWeights;
initialize();
return API;
}
// Legacy function. Deprecated.
//
Monocle.Book.fromNodes = function (nodes) {
console.deprecation("Book.fromNodes() will soon be removed.");
return new Monocle.Book(Monocle.bookDataFromNodes(nodes));
}
Monocle.Book.PRELOAD_INTERVAL = 1000;
// PLACE
Monocle.Place = function () {
var API = { constructor: Monocle.Place }
var k = API.constants = API.constructor;
var p = API.properties = {
component: null,
percent: null
}
function setPlace(cmpt, pageN) {
p.component = cmpt;
p.percent = pageN / cmpt.lastPageNumber();
p.chapter = null;
}
function setPercentageThrough(cmpt, percent) {
p.component = cmpt;
p.percent = percent;
p.chapter = null;
}
function componentId() {
return p.component.properties.id;
}
// How far we are through the component at the "top of the page".
//
// 0 - start of book. 1.0 - end of book.
//
function percentAtTopOfPage() {
if (k.PAGE_ANCHOR == 'bottom') {
return p.percent - 1.0 / p.component.lastPageNumber();
} else {
return p.percent;
}
}
function percentOnPage() {
return percentAtTopOfPage() + k.PAGE_ANCHOR_OFFSET / pagesInComponent();
}
// How far we are through the component at the "bottom of the page".
//
function percentAtBottomOfPage() {
if (k.PAGE_ANCHOR == 'bottom') {
return p.percent;
} else {
return p.percent + 1.0 / p.component.lastPageNumber();
}
}
// The page number at a given point (0: start, 1: end) within the component.
//
function pageAtPercentageThrough(percent) {
var pages = pagesInComponent();
if (typeof percent != 'number') { percent = 0; }
return Math.max(Math.round(pages * percent), 1);
}
// The page number of this point within the component.
//
function pageNumber() {
return pageAtPercentageThrough(p.percent);
}
function pagesInComponent() {
return p.component.lastPageNumber();
}
function chapterInfo() {
if (p.chapter) {
return p.chapter;
}
return p.chapter = p.component.chapterForPage(pageNumber()+1);
}
function chapterTitle() {
var chp = chapterInfo();
return chp ? chp.title : null;
}
function chapterSrc() {
var src = componentId();
var cinfo = chapterInfo();
if (cinfo && cinfo.fragment) {
src += "#" + cinfo.fragment;
}
return src;
}
function getLocus(options) {
options = options || {};
var locus = {
page: pageNumber(),
componentId: componentId()
}
if (options.direction) {
locus.page += options.direction;
} else {
locus.percent = percentAtBottomOfPage();
}
return locus;
}
// Returns how far this place is in the entire book (0 - start, 1.0 - end).
//
function percentageOfBook() {
var book = p.component.properties.book;
var componentIds = book.properties.componentIds;
var weights = book.componentWeights();
var cmptIndex = p.component.properties.index;
var pc = weights[cmptIndex] * p.percent;
for (var i = 0, ii = cmptIndex; i < ii; ++i) { pc += weights[i]; }
// Note: This is a decent estimation of current page number and total
// number of pages, but it's very approximate. Could be improved by storing
// the page counts of all components accessed (since the dimensions of the
// reader last changed), and averaging the result across them. (You
// probably want to ignore calcs for components < 2 or 3 pages long, too.
// The bigger the component, the more accurate the calculation.)
//
// var bkPages = p.component.lastPageNumber() / weights[cmptIndex];
// console.log('Page: '+ Math.floor(pc*bkPages)+ ' of '+ Math.floor(bkPages));
return pc;
}
function onFirstPageOfBook() {
return p.component.properties.index == 0 && pageNumber() == 1;
}
function onLastPageOfBook() {
return (
p.component.properties.index ==
p.component.properties.book.properties.lastCIndex &&
pageNumber() == p.component.lastPageNumber()
);
}
API.setPlace = setPlace;
API.setPercentageThrough = setPercentageThrough;
API.componentId = componentId;
API.percentAtTopOfPage = percentAtTopOfPage;
API.percentOnPage = percentOnPage;
API.percentAtBottomOfPage = percentAtBottomOfPage;
API.pageAtPercentageThrough = pageAtPercentageThrough;
API.pageNumber = pageNumber;
API.pagesInComponent = pagesInComponent;
API.chapterInfo = chapterInfo;
API.chapterTitle = chapterTitle;
API.chapterSrc = chapterSrc;
API.getLocus = getLocus;
API.percentageOfBook = percentageOfBook;
API.onFirstPageOfBook = onFirstPageOfBook;
API.onLastPageOfBook = onLastPageOfBook;
API.percentageThrough = k.PAGE_ANCHOR == 'bottom' ? percentAtBottomOfPage :
k.PAGE_ANCHOR == 'offset' ? percentOnPage :
percentAtTopOfPage;
return API;
}
// Can set this to 'top', 'offset' or 'bottom'. Old Monocle behaviour is 'bottom'.
//
Monocle.Place.PAGE_ANCHOR = 'offset';
Monocle.Place.PAGE_ANCHOR_OFFSET = 0.1;
Monocle.Place.FromPageNumber = function (component, pageNumber) {
var place = new Monocle.Place();
place.setPlace(component, pageNumber);
return place;
}
Monocle.Place.FromPercentageThrough = function (component, percent) {
var place = new Monocle.Place();
place.setPercentageThrough(component, percent);
return place;
}
// We can't create a place from a percentage of the book, because the
// component may not have been loaded yet. But we can get a locus.
//
Monocle.Place.percentOfBookToLocus = function (reader, percent) {
var book = reader.getBook();
var componentIds = book.properties.componentIds;
var weights = book.componentWeights();
var cmptIndex = 0, cmptWeight = 0;
percent = Math.min(percent, 0.99999);
while (percent >= 0) {
cmptWeight = weights[cmptIndex];
percent -= weights[cmptIndex];
if (percent >= 0) {
cmptIndex += 1;
if (cmptIndex >= weights.length) {
console.error('Unable to calculate locus from percentage: '+percent);
return;
}
}
}
var cmptPercent = (percent + cmptWeight) / cmptWeight;
return { componentId: componentIds[cmptIndex], percent: cmptPercent }
}
;
/* COMPONENT */
// See the properties declaration for details of constructor arguments.
//
Monocle.Component = function (book, id, index, chapters, source) {
var API = { constructor: Monocle.Component }
var k = API.constants = API.constructor;
var p = API.properties = {
// a back-reference to the public API of the book that owns this component
book: book,
// the string that represents this component in the book's component array
id: id,
// the position in the book's components array of this component
index: index,
// The chapters argument is an array of objects that list the chapters that
// can be found in this component. A chapter object is defined as:
//
// {
// title: str,
// fragment: str, // optional anchor id
// percent: n // how far into the component the chapter begins
// }
//
// NOTE: the percent property is calculated by the component - you only need
// to pass in the title and the optional id string.
//
chapters: chapters,
// the frame provided by dataSource.getComponent() for this component
source: source
}
// Makes this component the active component for the pageDiv. There are
// several strategies for this (see loadFrame).
//
// When the component has been loaded into the pageDiv's frame, the callback
// will be invoked with the pageDiv and this component as arguments.
//
function applyTo(pageDiv, callback) {
prepareSource(pageDiv.m.reader);
var evtData = { 'page': pageDiv, 'source': p.source };
pageDiv.m.reader.dispatchEvent('monocle:componentchanging', evtData);
var onLoaded = function () {
setupFrame(
pageDiv,
pageDiv.m.activeFrame,
function () { callback(pageDiv, API) }
);
}
Monocle.defer(function () { loadFrame(pageDiv, onLoaded); });
}
// Loads this component into the given frame, using one of the following
// strategies:
//
// * HTML - a HTML string
// * URL - a URL string
// * Nodes - an array of DOM body nodes (NB: no way to populate head)
// * Document - a DOM DocumentElement object
//
function loadFrame(pageDiv, callback) {
var frame = pageDiv.m.activeFrame;
// We own this frame now.
frame.m.component = API;
// Hide the frame while we're changing it.
frame.style.visibility = "hidden";
frame.whenDocumentReady = function () {
var doc = frame.contentDocument;
var evtData = { 'page': pageDiv, 'document': doc, 'component': API };
pageDiv.m.reader.dispatchEvent('monocle:componentmodify', evtData);
frame.whenDocumentReady = null;
}
if (p.source.html) {
return loadFrameFromHTML(p.source.html || p.source, frame, callback);
} else if (p.source.url) {
return loadFrameFromURL(p.source.url, frame, callback);
} else if (p.source.doc) {
return loadFrameFromDocument(p.source.doc, frame, callback);
}
}
// LOAD STRATEGY: HTML
// Loads a HTML string into the given frame, invokes the callback once loaded.
//
function loadFrameFromHTML(src, frame, callback) {
var fn = function () {
Monocle.Events.deafen(frame, 'load', fn);
frame.whenDocumentReady();
Monocle.defer(callback);
}
Monocle.Events.listen(frame, 'load', fn);
if (Monocle.Browser.env.loadHTMLWithDocWrite) {
frame.contentDocument.open('text/html', 'replace');
frame.contentDocument.write(src);
frame.contentDocument.close();
} else {
frame.contentWindow['monCmptData'] = src;
frame.src = "javascript:window['monCmptData'];"
}
}
// LOAD STRATEGY: URL
// Loads the URL into the given frame, invokes callback once loaded.
//
function loadFrameFromURL(url, frame, callback) {
// If it's a relative path, we need to make it absolute.
if (!url.match(/^\//)) {
url = absoluteURL(url);
}
var onDocumentReady = function () {
Monocle.Events.deafen(frame, 'load', onDocumentReady);
frame.whenDocumentReady();
}
var onDocumentLoad = function () {
Monocle.Events.deafen(frame, 'load', onDocumentLoad);
Monocle.defer(callback);
}
Monocle.Events.listen(frame, 'load', onDocumentReady);
Monocle.Events.listen(frame, 'load', onDocumentLoad);
frame.contentWindow.location.replace(url);
}
// LOAD STRATEGY: DOCUMENT
// Replaces the DocumentElement of the given frame with the given srcDoc.
// Invokes the callback when loaded.
//
function loadFrameFromDocument(srcDoc, frame, callback) {
var doc = frame.contentDocument;
// WebKit has an interesting quirk. The <base> tag must exist in the
// document being replaced, not the new document.
if (Monocle.Browser.is.WebKit) {
var srcBase = srcDoc.querySelector('base');
if (srcBase) {
var head = doc.querySelector('head');
if (!head) {
try {
head = doc.createElement('head');
prependChild(doc.documentElement, head);
} catch (e) {
head = doc.body;
}
}
var base = doc.createElement('base');
base.setAttribute('href', srcBase.href);
head.appendChild(base);
}
}
doc.replaceChild(
doc.importNode(srcDoc.documentElement, true),
doc.documentElement
);
// NB: It's a significant problem with this load strategy that there's
// no indication when it is complete.
Monocle.defer(callback);
}
// Once a frame is loaded with this component, call this method to style
// and measure its contents.
//
function setupFrame(pageDiv, frame, callback) {
updateDimensions(pageDiv, function () {
frame.style.visibility = "visible";
// Find the place of any chapters in the component.
locateChapters(pageDiv);
// Nothing can prevent iframe scrolling on Android, so we have to undo it.
if (Monocle.Browser.on.Android) {
Monocle.Events.listen(frame.contentWindow, 'scroll', function () {
frame.contentWindow.scrollTo(0,0);
});
}
// Announce that the component has changed.
var doc = frame.contentDocument;
var evtData = { 'page': pageDiv, 'document': doc, 'component': API };
pageDiv.m.reader.dispatchEvent('monocle:componentchange', evtData);
callback();
});
}
// Checks whether the pageDiv dimensions have changed. If they have,
// remeasures dimensions and returns true. Otherwise returns false.
//
function updateDimensions(pageDiv, callback) {
pageDiv.m.dimensions.update(function (pageLength) {
p.pageLength = pageLength;
if (typeof callback == "function") { callback() };
});
}
// Iterates over all the chapters that are within this component
// (according to the array we were provided on initialization) and finds
// their location (in percentage terms) within the text.
//
// Stores this percentage with the chapter object in the chapters array.
//
function locateChapters(pageDiv) {
if (p.chapters[0] && typeof p.chapters[0].percent == "number") {
return;
}
var doc = pageDiv.m.activeFrame.contentDocument;
for (var i = 0; i < p.chapters.length; ++i) {
var chp = p.chapters[i];
chp.percent = 0;
if (chp.fragment) {
var node = doc.getElementById(chp.fragment);
chp.percent = pageDiv.m.dimensions.percentageThroughOfNode(node);
}
}
return p.chapters;
}
// For a given page number within the component, return the chapter that
// starts on or most-recently-before this page.
//
// Useful, for example, in displaying the current chapter title as a
// running head on the page.
//
function chapterForPage(pageN) {
var cand = null;
var percent = (pageN - 1) / p.pageLength;
for (var i = 0; i < p.chapters.length; ++i) {
if (percent >= p.chapters[i].percent) {
cand = p.chapters[i];
} else {
return cand;
}
}
return cand;
}
// For a given chapter fragment (the bit after the hash
// in eg, "index.html#foo"), return the page number on which
// the chapter starts. If the fragment is null or blank, will
// return the first page of the component.
//
function pageForChapter(fragment, pageDiv) {
if (!fragment) {
return 1;
}
for (var i = 0; i < p.chapters.length; ++i) {
if (p.chapters[i].fragment == fragment) {
return percentToPageNumber(p.chapters[i].percent);
}
}
var doc = pageDiv.m.activeFrame.contentDocument;
var node = doc.getElementById(fragment);
var percent = pageDiv.m.dimensions.percentageThroughOfNode(node);
return percentToPageNumber(percent);
}
function pageForXPath(xpath, pageDiv) {
var doc = pageDiv.m.activeFrame.contentDocument;
var percent = 0;
if (Monocle.Browser.env.supportsXPath) {
var node = doc.evaluate(xpath, doc, null, 9, null).singleNodeValue;
if (node) {
percent = pageDiv.m.dimensions.percentageThroughOfNode(node);
}
} else {
console.warn("XPath not supported in this client.");
}
return percentToPageNumber(percent);
}
function pageForSelector(selector, pageDiv) {
var doc = pageDiv.m.activeFrame.contentDocument;
var percent = 0;
if (Monocle.Browser.env.supportsQuerySelector) {
var node = doc.querySelector(selector);
if (node) {
percent = pageDiv.m.dimensions.percentageThroughOfNode(node);
}
} else {
console.warn("querySelector not supported in this client.");
}
return percentToPageNumber(percent);
}
function percentToPageNumber(pc) {
return Math.floor(pc * p.pageLength) + 1;
}
// A public getter for p.pageLength.
//
function lastPageNumber() {
return p.pageLength;
}
function prepareSource(reader) {
if (p.sourcePrepared) { return; }
p.sourcePrepared = true;
if (typeof p.source == "string") {
p.source = { html: p.source };
}
// If supplied as escaped javascript, unescape it to HTML by evalling it.
if (p.source.javascript) {
console.deprecation(
"Loading a component by 'javascript' is deprecated. " +
"Use { 'html': src } -- no need to escape or clean the string."
);
var src = p.source.javascript;
src = src.replace(/\\n/g, "\n");
src = src.replace(/\\r/g, "\r");
src = src.replace(/\\'/g, "'");
p.source = { html: src };
}
// If supplied as DOM nodes, convert to HTML by concatenating outerHTMLs.
if (p.source.nodes) {
var srcs = [];
for (var i = 0, ii = p.source.nodes.length; i < ii; ++i) {
var node = p.source.nodes[i];
if (node.outerHTML) {
srcs.push(node.outerHTML);
} else {
var div = document.createElement('div');
div.appendChild(node.cloneNode(true));
srcs.push(div.innerHTML);
delete(div);
}
}
p.source = { html: srcs.join('') };
}
if (p.source.html && !p.source.html.match(new RegExp("<base\s.+>", "im"))) {
var baseURI = computeBaseURI(reader);
if (baseURI) {
p.source.html = p.source.html.replace(
new RegExp("(<head[^>]*>)", "im"),
'$1<base href="'+baseURI+'" />'
);
}
}
if (p.source.doc && !p.source.doc.querySelector('base')) {
var srcHead = p.source.doc.querySelector('head') || p.source.doc.body;
var baseURI = computeBaseURI(reader);
if (srcHead && baseURI) {
var srcBase = p.source.doc.createElement('base');
srcBase.setAttribute('href', baseURI);
prependChild(srcHead, srcBase);
}
}
}
function computeBaseURI(reader) {
var evtData = { cmptId: p.id, cmptURI: absoluteURL(p.id) }
if (reader.dispatchEvent('monocle:component:baseuri', evtData, true)) {
return evtData.cmptURI;
}
}
function absoluteURL(url) {
var link = document.createElement('a');
link.setAttribute('href', url);
result = link.href;
delete(link);
return result;
}
function prependChild(pr, el) {
pr.firstChild ? pr.insertBefore(el, pr.firstChild) : pr.appendChild(el);
}
API.applyTo = applyTo;
API.updateDimensions = updateDimensions;
API.chapterForPage = chapterForPage;
API.pageForChapter = pageForChapter;
API.pageForXPath = pageForXPath;
API.pageForSelector = pageForSelector;
API.lastPageNumber = lastPageNumber;
return API;
}
;
Monocle.Selection = function (reader) {
var API = { constructor: Monocle.Selection };
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader,
lastSelection: []
};
function initialize() {
if (k.SELECTION_POLLING_INTERVAL) {
setInterval(pollSelection, k.SELECTION_POLLING_INTERVAL);
}
}
function pollSelection() {
var index = 0, frame = null;
while (frame = reader.dom.find('component', index++)) {
if (frame.contentWindow) {
pollSelectionOnWindow(frame.contentWindow, index);
}
}
}
function pollSelectionOnWindow(win, index) {
var sel = win.getSelection();
var lm = p.lastSelection[index] || {};
var nm = p.lastSelection[index] = {
selected: anythingSelected(win),
range: sel.rangeCount ? sel.getRangeAt(0) : null,
string: sel.toString()
};
if (nm.selected) {
nm.rangeStartContainer = nm.range.startContainer;
nm.rangeEndContainer = nm.range.endContainer;
nm.rangeStartOffset = nm.range.startOffset;
nm.rangeEndOffset = nm.range.endOffset;
if (!sameRange(nm, lm)) {
p.reader.dispatchEvent('monocle:selection', nm);
}
} else if (lm.selected) {
p.reader.dispatchEvent('monocle:deselection', lm);
}
}
function sameRange(m1, m2) {
return (
m1.rangeStartContainer == m2.rangeStartContainer &&
m1.rangeEndContainer == m2.rangeEndContainer &&
m1.rangeStartOffset == m2.rangeStartOffset &&
m1.rangeEndOffset == m2.rangeEndOffset
);
}
// Given a window object, remove any user selections within. Trivial in
// most browsers, but involving major mojo on iOS.
//
function deselect() {
var index = 0, frame = null;
while (frame = reader.dom.find('component', index++)) {
deselectOnWindow(frame.contentWindow);
}
}
function deselectOnWindow(win) {
win = win || window;
if (!anythingSelected(win)) { return; }
if (Monocle.Browser.iOSVersion && !Monocle.Browser.iOSVersionBelow(5)) {
preservingScale(function () {
preservingScrollPosition(function () {
var inp = document.createElement('input');
inp.style.cssText = [
'position: absolute',
'top: 0',
'left: 0',
'width: 0',
'height: 0'
].join(';');
document.body.appendChild(inp);
inp.focus();
document.body.removeChild(inp);
})
});
}
var sel = win.getSelection();
sel.removeAllRanges();
win.document.body.scrollLeft = 0;
win.document.body.scrollTop = 0;
}
function preservingScrollPosition(fn) {
var sx = window.scrollX, sy = window.scrollY;
fn();
window.scrollTo(sx, sy);
}
function preservingScale(fn) {
var head = document.querySelector('head');
var ovp = head.querySelector('meta[name=viewport]');
var createViewportMeta = function (content) {
var elem = document.createElement('meta');
elem.setAttribute('name', 'viewport');
elem.setAttribute('content', content);
head.appendChild(elem);
return elem;
}
if (ovp) {
var ovpcontent = ovp.getAttribute('content');
var re = /user-scalable\s*=\s*([^,$\s])*/;
var result = ovpcontent.match(re);
if (result && ['no', '0'].indexOf(result[1]) >= 0) {
fn();
} else {
var nvpcontent = ovpcontent.replace(re, '');
nvpcontent += nvpcontent ? ', ' : '';
nvpcontent += 'user-scalable=no';
head.removeChild(ovp);
var nvp = createViewportMeta(nvpcontent);
fn();
head.removeChild(nvp);
head.appendChild(ovp);
}
} else {
var nvp = createViewportMeta('user-scalable=no');
fn();
nvp.setAttribute('content', 'user-scalable=yes');
}
}
function anythingSelected(win) {
return !win.getSelection().isCollapsed;
}
API.deselect = deselect;
initialize();
return API;
}
Monocle.Selection.SELECTION_POLLING_INTERVAL = 250;
Monocle.Billboard = function (reader) {
var API = { constructor: Monocle.Billboard };
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader,
cntr: null
};
function show(urlOrElement, options) {
p.reader.dispatchEvent('monocle:modal:on');
if (p.cntr) { return console.warn("Modal billboard already showing."); }
var options = options || {};
var elem = urlOrElement;
p.cntr = reader.dom.append('div', k.CLS.cntr);
if (typeof urlOrElement == 'string') {
var url = urlOrElement;
p.inner = elem = p.cntr.dom.append('iframe', k.CLS.inner);
elem.setAttribute('src', url);
} else {
p.inner = p.cntr.dom.append('div', k.CLS.inner);
p.inner.appendChild(elem);
}
p.dims = [
elem.naturalWidth || elem.offsetWidth,
elem.naturalHeight || elem.offsetHeight
];
if (options.closeButton != false) {
var cBtn = p.cntr.dom.append('div', k.CLS.closeButton);
Monocle.Events.listenForTap(cBtn, hide);
}
align(options.align || 'left top');
p.reader.listen('monocle:resize', align);
shrink(options.from);
Monocle.defer(grow);
}
function hide(evt) {
shrink();
Monocle.Events.afterTransition(p.cntr, remove);
}
function grow() {
Monocle.Styles.transitionFor(p.cntr, 'transform', k.ANIM_MS, 'ease-in-out');
Monocle.Styles.affix(p.cntr, 'transform', 'translate(0, 0) scale(1)');
}
function shrink(from) {
p.from = from || p.from || [0,0];
var translate = 'translate('+p.from[0]+'px, '+p.from[1]+'px)';
var scale = 'scale(0)';
if (typeof p.from[2] === 'number') {
scale = 'scaleX('+(p.from[2] / p.cntr.offsetWidth)+') ';
scale += 'scaleY('+(p.from[3] / p.cntr.offsetHeight)+')';
}
Monocle.Styles.affix(p.cntr, 'transform', translate+' '+scale);
}
function remove () {
p.cntr.parentNode.removeChild(p.cntr);
p.cntr = p.inner = null;
p.reader.deafen('monocle:resize', align);
p.reader.dispatchEvent('monocle:modal:off');
}
function align(loc) {
p.alignment = (typeof loc == 'string') ? loc : p.alignment;
if (!p.alignment) { return; }
if (p.dims[0] > p.inner.offsetWidth || p.dims[1] > p.inner.offsetHeight) {
p.cntr.dom.addClass(k.CLS.oversized);
} else {
p.cntr.dom.removeClass(k.CLS.oversized);
}
var s = p.alignment.split(/\s+/);
var l = 0, t = 0;
var w = (p.inner.scrollWidth - p.inner.offsetWidth);
var h = (p.inner.scrollHeight - p.inner.offsetHeight);
if (s[0].match(/^\d+$/)) {
l = Math.max(0, parseInt(s[0]) - (p.inner.offsetWidth / 2));
} else if (s[0] == 'center') {
l = w / 2;
} else if (s[0] == 'right') {
l = w;
}
if (s[1] && s[1].match(/^\d+$/)) {
t = Math.max(0, parseInt(s[1]) - (p.inner.offsetHeight / 2));
} else if (!s[1] || s[1] == 'center') {
t = h / 2;
} else if (s[1] == 'bottom') {
t = h;
}
p.inner.scrollLeft = l;
p.inner.scrollTop = t;
}
API.show = show;
API.hide = hide;
API.align= align;
return API;
}
Monocle.Billboard.CLS = {
cntr: 'billboard_container',
inner: 'billboard_inner',
closeButton: 'billboard_close',
oversized: 'billboard_oversized'
}
Monocle.Billboard.ANIM_MS = 400;
// A panel is an invisible column of interactivity. When contact occurs
// (mousedown, touchstart), the panel expands to the full width of its
// container, to catch all interaction events and prevent them from hitting
// other things.
//
// Panels are used primarily to provide hit zones for page flipping
// interactions, but you can do whatever you like with them.
//
// After instantiating a panel and adding it to the reader as a control,
// you can call listenTo() with a hash of methods for any of 'start', 'move'
// 'end' and 'cancel'.
//
Monocle.Controls.Panel = function () {
var API = { constructor: Monocle.Controls.Panel }
var k = API.constants = API.constructor;
var p = API.properties = {
evtCallbacks: {}
}
function createControlElements(cntr) {
p.div = cntr.dom.make('div', k.CLS.panel);
p.div.dom.setStyles(k.DEFAULT_STYLES);
Monocle.Events.listenForContact(
p.div,
{
'start': start,
'move': move,
'end': end,
'cancel': cancel
},
{ useCapture: false }
);
return p.div;
}
function setDirection(dir) {
p.direction = dir;
}
function listenTo(evtCallbacks) {
p.evtCallbacks = evtCallbacks;
}
function deafen() {
p.evtCallbacks = {}
}
function start(evt) {
p.contact = true;
evt.m.offsetX += p.div.offsetLeft;
evt.m.offsetY += p.div.offsetTop;
expand();
invoke('start', evt);
}
function move(evt) {
if (!p.contact) {
return;
}
invoke('move', evt);
}
function end(evt) {
if (!p.contact) {
return;
}
Monocle.Events.deafenForContact(p.div, p.listeners);
contract();
p.contact = false;
invoke('end', evt);
}
function cancel(evt) {
if (!p.contact) {
return;
}
Monocle.Events.deafenForContact(p.div, p.listeners);
contract();
p.contact = false;
invoke('cancel', evt);
}
function invoke(evtType, evt) {
if (p.evtCallbacks[evtType]) {
p.evtCallbacks[evtType](p.direction, evt.m.offsetX, evt.m.offsetY, API);
}
evt.preventDefault();
}
function expand() {
if (p.expanded) {
return;
}
p.div.dom.addClass(k.CLS.expanded);
p.expanded = true;
}
function contract(evt) {
if (!p.expanded) {
return;
}
p.div.dom.removeClass(k.CLS.expanded);
p.expanded = false;
}
API.createControlElements = createControlElements;
API.listenTo = listenTo;
API.deafen = deafen;
API.expand = expand;
API.contract = contract;
API.setDirection = setDirection;
return API;
}
Monocle.Controls.Panel.CLS = {
panel: 'panel',
expanded: 'controls_panel_expanded'
}
Monocle.Controls.Panel.DEFAULT_STYLES = {
position: 'absolute',
height: '100%'
}
;
// The simplest page-flipping interaction system: contact to the left half of
// the reader turns back one page, contact to the right half turns forward
// one page.
//
Monocle.Panels.TwoPane = function (flipper, evtCallbacks) {
var API = { constructor: Monocle.Panels.TwoPane }
var k = API.constants = API.constructor;
var p = API.properties = {}
function initialize() {
p.panels = {
forwards: new Monocle.Controls.Panel(),
backwards: new Monocle.Controls.Panel()
}
for (dir in p.panels) {
flipper.properties.reader.addControl(p.panels[dir]);
p.panels[dir].listenTo(evtCallbacks);
p.panels[dir].setDirection(flipper.constants[dir.toUpperCase()]);
var style = { "width": k.WIDTH };
style[(dir == "forwards" ? "right" : "left")] = 0;
p.panels[dir].properties.div.dom.setStyles(style);
}
}
initialize();
return API;
}
Monocle.Panels.TwoPane.WIDTH = "50%";
// A three-pane system of page interaction. The left 33% turns backwards, the
// right 33% turns forwards, and contact on the middle third causes the
// system to go into "interactive mode". In this mode, the page-flipping panels
// are only active in the margins, and all of the actual text content of the
// book is selectable. The user can exit "interactive mode" by hitting the little
// IMode icon in the lower right corner of the reader.
//
Monocle.Panels.IMode = function (flipper, evtCallbacks) {
var API = { constructor: Monocle.Panels.IMode }
var k = API.constants = API.constructor;
var p = API.properties = {}
function initialize() {
p.flipper = flipper;
p.reader = flipper.properties.reader;
p.panels = {
forwards: new Monocle.Controls.Panel(),
backwards: new Monocle.Controls.Panel()
}
p.divs = {}
for (dir in p.panels) {
p.reader.addControl(p.panels[dir]);
p.divs[dir] = p.panels[dir].properties.div;
p.panels[dir].listenTo(evtCallbacks);
p.panels[dir].setDirection(flipper.constants[dir.toUpperCase()]);
p.divs[dir].style.width = "33%";
p.divs[dir].style[dir == "forwards" ? "right" : "left"] = 0;
}
p.panels.central = new Monocle.Controls.Panel();
p.reader.addControl(p.panels.central);
p.divs.central = p.panels.central.properties.div;
p.divs.central.dom.setStyles({ left: "33%", width: "34%" });
menuCallbacks({ end: modeOn });
for (dir in p.panels) {
p.divs[dir].dom.addClass('panels_imode_panel');
p.divs[dir].dom.addClass('panels_imode_'+dir+'Panel');
}
p.toggleIcon = {
createControlElements: function (cntr) {
var div = cntr.dom.make('div', 'panels_imode_toggleIcon');
Monocle.Events.listenForTap(div, modeOff);
return div;
}
}
p.reader.addControl(p.toggleIcon, null, { hidden: true });
}
function menuCallbacks(callbacks) {
p.menuCallbacks = callbacks;
p.panels.central.listenTo(p.menuCallbacks);
}
function toggle() {
p.interactive ? modeOff() : modeOn();
}
function modeOn() {
if (p.interactive) {
return;
}
p.panels.central.contract();
var page = p.reader.visiblePages()[0];
var sheaf = page.m.sheafDiv;
var bw = sheaf.offsetLeft;
var fw = page.offsetWidth - (sheaf.offsetLeft + sheaf.offsetWidth);
bw = Math.floor(((bw - 2) / page.offsetWidth) * 10000 / 100 ) + "%";
fw = Math.floor(((fw - 2) / page.offsetWidth) * 10000 / 100 ) + "%";
startCameo(function () {
p.divs.forwards.style.width = fw;
p.divs.backwards.style.width = bw;
Monocle.Styles.affix(p.divs.central, 'transform', 'translateY(-100%)');
});
p.reader.showControl(p.toggleIcon);
p.interactive = true;
}
function modeOff() {
if (!p.interactive) {
return;
}
p.panels.central.contract();
p.reader.selection.deselect();
startCameo(function () {
p.divs.forwards.style.width = "33%";
p.divs.backwards.style.width = "33%";
Monocle.Styles.affix(p.divs.central, 'transform', 'translateY(0)');
});
p.reader.hideControl(p.toggleIcon);
p.interactive = false;
}
function startCameo(fn) {
// Set transitions on the panels.
var trn = Monocle.Panels.IMode.CAMEO_DURATION+"ms ease-in";
Monocle.Styles.affix(p.divs.forwards, 'transition', "width "+trn);
Monocle.Styles.affix(p.divs.backwards, 'transition', "width "+trn);
Monocle.Styles.affix(p.divs.central, 'transition', "-webkit-transform "+trn);
// Temporarily disable listeners.
for (var pan in p.panels) {
p.panels[pan].deafen();
}
// Set the panels to opaque.
for (var div in p.divs) {
p.divs[div].style.opacity = 1;
}
if (typeof WebkitTransitionEvent != "undefined") {
p.cameoListener = Monocle.Events.listen(
p.divs.central,
'webkitTransitionEnd',
endCameo
);
} else {
setTimeout(endCameo, k.CAMEO_DURATION);
}
fn();
}
function endCameo() {
setTimeout(function () {
// Remove panel transitions.
var trn = "opacity linear " + Monocle.Panels.IMode.LINGER_DURATION + "ms";
Monocle.Styles.affix(p.divs.forwards, 'transition', trn);
Monocle.Styles.affix(p.divs.backwards, 'transition', trn);
Monocle.Styles.affix(p.divs.central, 'transition', trn);
// Set the panels to transparent.
for (var div in p.divs) {
p.divs[div].style.opacity = 0;
}
// Re-enable listeners.
p.panels.forwards.listenTo(evtCallbacks);
p.panels.backwards.listenTo(evtCallbacks);
p.panels.central.listenTo(p.menuCallbacks);
}, Monocle.Panels.IMode.LINGER_DURATION);
if (p.cameoListener) {
Monocle.Events.deafen(p.divs.central, 'webkitTransitionEnd', endCameo);
}
}
API.toggle = toggle;
API.modeOn = modeOn;
API.modeOff = modeOff;
API.menuCallbacks = menuCallbacks;
initialize();
return API;
}
Monocle.Panels.IMode.CAMEO_DURATION = 250;
Monocle.Panels.IMode.LINGER_DURATION = 250;
Monocle.Panels.eInk = function (flipper, evtCallbacks) {
var API = { constructor: Monocle.Panels.eInk }
var k = API.constants = API.constructor;
var p = API.properties = {
flipper: flipper
}
function initialize() {
p.panel = new Monocle.Controls.Panel();
p.reader = p.flipper.properties.reader;
p.reader.addControl(p.panel);
p.panel.listenTo({ end: function (panel, x) {
if (x < p.panel.properties.div.offsetWidth / 2) {
p.panel.setDirection(flipper.constants.BACKWARDS);
} else {
p.panel.setDirection(flipper.constants.FORWARDS);
}
evtCallbacks.end(panel, x);
} });
var s = p.panel.properties.div.style;
p.reader.listen("monocle:componentchanging", function () {
s.opacity = 1;
Monocle.defer(function () { s.opacity = 0 }, 40);
});
s.width = "100%";
s.background = "#000";
s.opacity = 0;
if (k.LISTEN_FOR_KEYS) {
Monocle.Events.listen(window.top.document, 'keyup', handleKeyEvent);
}
}
function handleKeyEvent(evt) {
var eventCharCode = evt.charCode || evt.keyCode;
var dir = null;
if (eventCharCode == k.KEYS["PAGEUP"]) {
dir = flipper.constants.BACKWARDS;
} else if (eventCharCode == k.KEYS["PAGEDOWN"]) {
dir = flipper.constants.FORWARDS;
}
if (dir) {
flipper.moveTo({ direction: dir });
evt.preventDefault();
}
}
initialize();
return API;
}
Monocle.Panels.eInk.LISTEN_FOR_KEYS = true;
Monocle.Panels.eInk.KEYS = { "PAGEUP": 33, "PAGEDOWN": 34 };
// Provides page-flipping panels only in the margins of the book. This is not
// entirely suited to small screens with razor-thin margins, but is an
// appropriate panel class for larger screens (like, say, an iPad).
//
// Since the flipper hit zones are only in the margins, the actual text content
// of the book is always selectable.
//
Monocle.Panels.Marginal = function (flipper, evtCallbacks) {
var API = { constructor: Monocle.Panels.Marginal }
var k = API.constants = API.constructor;
var p = API.properties = {}
function initialize() {
p.panels = {
forwards: new Monocle.Controls.Panel(),
backwards: new Monocle.Controls.Panel()
}
for (dir in p.panels) {
flipper.properties.reader.addControl(p.panels[dir]);
p.panels[dir].listenTo(evtCallbacks);
p.panels[dir].setDirection(flipper.constants[dir.toUpperCase()]);
with (p.panels[dir].properties.div.style) {
dir == "forwards" ? right = 0 : left = 0;
}
}
setWidths();
}
function setWidths() {
var page = flipper.properties.reader.dom.find('page');
var sheaf = page.m.sheafDiv;
var bw = sheaf.offsetLeft;
var fw = page.offsetWidth - (sheaf.offsetLeft + sheaf.offsetWidth);
bw = Math.floor(((bw - 2) / page.offsetWidth) * 10000 / 100) + "%";
fw = Math.floor(((fw - 2) / page.offsetWidth) * 10000 / 100) + "%";
p.panels.forwards.properties.div.style.width = fw;
p.panels.backwards.properties.div.style.width = bw;
}
API.setWidths = setWidths;
initialize();
return API;
}
;
Monocle.Panels.Magic = function (flipper, evtCallbacks) {
var API = { constructor: Monocle.Panels.Magic }
var k = API.constants = API.constructor;
var p = API.properties = {
flipper: flipper,
evtCallbacks: evtCallbacks,
parts: {},
action: {},
contacts: [],
startListeners: [],
disabled: false
}
function initialize() {
p.reader = flipper.properties.reader;
p.parts = {
reader: p.reader.dom.find('box'),
cmpts: []
}
for (var i = 0; i < p.flipper.pageCount; ++i) {
p.parts.cmpts.push(p.reader.dom.find('component', i));
}
initListeners();
p.reader.listen('monocle:componentmodify', initListeners);
p.reader.listen('monocle:magic:init', initListeners);
p.reader.listen('monocle:magic:halt', haltListeners);
p.reader.listen('monocle:modal:on', disable);
p.reader.listen('monocle:modal:off', enable);
Monocle.Events.listen(window, 'gala:contact:cancel', resetAction);
}
function initListeners(evt) {
//console.log('magic:init');
stopListening();
startListening();
}
function haltListeners(evt) {
//console.log('magic:halt');
stopListening();
}
function disable(evt) {
//console.log('modal:on - halting magic');
stopListening();
p.disabled = true;
}
function enable(evt) {
//console.log('modal:off - initing magic');
p.disabled = false;
startListening();
}
function startListening() {
if (p.disabled || p.startListeners.length) { return; }
p.startListeners.push([
p.parts.reader,
Monocle.Events.listenForContact(
p.parts.reader,
{ 'start': translatorFunction(p.parts.reader, readerContactStart) }
)
]);
for (var i = 0, ii = p.parts.cmpts.length; i < ii; ++i) {
p.startListeners.push([
p.parts.cmpts[i].contentDocument.defaultView,
Monocle.Events.listenForContact(
p.parts.cmpts[i].contentDocument.defaultView,
{ 'start': translatorFunction(p.parts.cmpts[i], cmptContactStart) }
)
]);
}
}
function stopListening() {
if (p.disabled || !p.startListeners.length) { return; }
for (var j = 0, jj = p.startListeners.length; j < jj; ++j) {
Monocle.Events.deafenForContact(
p.startListeners[j][0],
p.startListeners[j][1]
);
}
p.startListeners = [];
}
function listenForMoveAndEnd(fnMove, fnEnd) {
listenOnElem(
document.defaultView,
translatorFunction(document.documentElement, fnMove),
translatorFunction(document.documentElement, fnEnd)
);
for (var i = 0, ii = p.parts.cmpts.length; i < ii; ++i) {
listenOnElem(
p.parts.cmpts[i].contentDocument.defaultView,
translatorFunction(p.parts.cmpts[i], fnMove),
translatorFunction(p.parts.cmpts[i], fnEnd)
);
}
}
function listenOnElem(elem, fnMove, fnEnd) {
var contactListeners = Monocle.Events.listenForContact(
elem,
{
'move': fnMove,
'end': function (evt) { deafenContactListeners(); fnEnd(evt); }
}
);
p.contacts.push([elem, contactListeners]);
}
function deafenContactListeners() {
for (var i = 0, ii = p.contacts.length; i < ii; ++i) {
Monocle.Events.deafenForContact(p.contacts[i][0], p.contacts[i][1]);
}
p.contacts = [];
}
function readerContactStart(evt) {
listenForMoveAndEnd(readerContactMove, readerContactEnd);
p.action.startX = evt.m.readerX;
p.action.startY = evt.m.readerY;
p.action.screenX = evt.m.screenX;
p.action.screenY = evt.m.screenY;
p.action.dir = evt.m.readerX > halfway() ? k.FORWARDS : k.BACKWARDS;
p.action.handled = !dispatch('monocle:magic:contact:start', evt);
if (!p.action.handled) { invoke('start', evt); }
}
function readerContactMove(evt) {
if (p.action.handled) {
dispatch('monocle:magic:contact:move', evt);
} else {
invoke('move', evt);
}
// Can't prevent mousemove, so has no effect there. Preventing default
// for touchmove will override scrolling, while still allowing selection.
evt.preventDefault();
}
function readerContactEnd(evt) {
p.action.endX = evt.m.readerX;
p.action.endY = evt.m.readerY;
if (dispatch('monocle:magic:contact', evt)) { invoke('end', evt); }
p.action = {};
}
function cmptContactStart(evt) {
if (actionIsCancelled(evt)) { return resetAction(); }
p.action.startX = evt.m.readerX;
p.action.startY = evt.m.readerY;
p.action.screenX = evt.m.screenX;
p.action.screenY = evt.m.screenY;
listenForMoveAndEnd(cmptContactMove, cmptContactEnd);
}
function cmptContactMove(evt) {
if (actionIsEmpty()) { return; }
if (actionIsCancelled(evt)) { return resetAction(); }
// Can't prevent mousemove, so has no effect there. Preventing default
// for touchmove will override scrolling, while still allowing selection.
evt.preventDefault();
}
function cmptContactEnd(evt) {
if (actionIsEmpty()) { return; }
if (actionIsCancelled(evt)) { return resetAction(); }
p.action.endX = evt.m.readerX;
p.action.endY = evt.m.readerY;
if (Math.abs(p.action.endX - p.action.startX) < k.LEEWAY) {
p.action.dir = p.action.startX > halfway() ? k.FORWARDS : k.BACKWARDS;
} else {
p.action.dir = p.action.startX > p.action.endX ? k.FORWARDS : k.BACKWARDS;
}
if (dispatch('monocle:magic:contact', evt)) {
invoke('start', evt);
invoke('end', evt);
}
p.action = {};
}
// Adds two new properties to evt.m:
// - readerX
// - readerY
//
// Calculated as the offset of the click from the top left of reader element.
//
// Then calls the passed function.
//
function translatorFunction(registrant, callback) {
return function (evt) {
translatingReaderOffset(registrant, evt, callback);
}
}
function translatingReaderOffset(registrant, evt, callback) {
if (typeof p.action.screenX != 'undefined') {
evt.m.readerX = p.action.startX + (evt.m.screenX - p.action.screenX);
evt.m.readerY = p.action.startY + (evt.m.screenY - p.action.screenY);
} else {
var dr = document.documentElement.getBoundingClientRect();
var rr = p.parts.reader.getBoundingClientRect();
rr = { left: rr.left - dr.left, top: rr.top - dr.top }
if (evt.view == window) {
evt.m.readerX = Math.round(evt.m.pageX - rr.left);
evt.m.readerY = Math.round(evt.m.pageY - rr.top);
} else {
var er = registrant.getBoundingClientRect();
er = { left: er.left - dr.left, top: er.top - dr.top }
evt.m.readerX = Math.round((er.left - rr.left) + evt.m.clientX);
evt.m.readerY = Math.round((er.top - rr.top) + evt.m.clientY);
}
}
callback(evt);
}
function halfway() {
return p.parts.reader.offsetWidth / 2;
}
function resetAction() {
p.action = {};
deafenContactListeners();
}
function actionIsCancelled(evt) {
var win = evt.target.ownerDocument.defaultView;
return (evt.defaultPrevented || !win.getSelection().isCollapsed);
}
function actionIsEmpty() {
return typeof p.action.startX == 'undefined';
}
// Returns true if the event WAS NOT cancelled.
function dispatch(evtName, trigger) {
var rr = p.parts.reader.getBoundingClientRect();
var evtData = {
trigger: trigger,
start: { x: p.action.startX, y: p.action.startY },
end: { x: p.action.endX, y: p.action.endY },
max: { x: rr.right - rr.left, y: rr.bottom - rr.top }
}
return p.reader.dispatchEvent(evtName, evtData, true);
}
function invoke(evtType, evt) {
if (p.evtCallbacks[evtType]) {
p.evtCallbacks[evtType](p.action.dir, evt.m.readerX, evt.m.readerY, API);
}
}
API.enable = enable;
API.disable = disable;
initialize();
return API;
}
Monocle.Panels.Magic.LEEWAY = 3;
Monocle.Panels.Magic.FORWARDS = 1;
Monocle.Panels.Magic.BACKWARDS = -1;
Monocle.Dimensions.Columns = function (pageDiv) {
var API = { constructor: Monocle.Dimensions.Columns }
var k = API.constants = API.constructor;
var p = API.properties = {
page: pageDiv,
reader: pageDiv.m.reader,
length: 0,
width: 0
}
// Logically, forceColumn browsers can't have a gap, because that would
// make the minWidth > 200%. But how much greater? Not worth the effort.
k.GAP = Monocle.Browser.env.forceColumns ? 0 : 20;
function update(callback) {
setColumnWidth();
Monocle.defer(function () {
p.length = columnCount();
if (Monocle.DEBUG) {
console.log(
'page['+p.page.m.pageIndex+'] -> '+p.length+
' ('+p.page.m.activeFrame.m.component.properties.id+')'
);
}
callback(p.length);
});
}
function setColumnWidth() {
var pdims = pageDimensions();
var ce = columnedElement();
p.width = pdims.width;
var rules = Monocle.Styles.rulesToString(k.STYLE["columned"]);
rules += Monocle.Browser.css.toCSSDeclaration('column-width', pdims.col+'px');
rules += Monocle.Browser.css.toCSSDeclaration('column-gap', k.GAP+'px');
rules += Monocle.Browser.css.toCSSDeclaration('column-fill', 'auto');
rules += Monocle.Browser.css.toCSSDeclaration('transform', 'none');
if (Monocle.Browser.env.forceColumns && ce.scrollHeight > pdims.height) {
rules += Monocle.Styles.rulesToString(k.STYLE['column-force']);
if (Monocle.DEBUG) {
console.warn("Force columns ("+ce.scrollHeight+" > "+pdims.height+")");
}
}
if (ce.style.cssText != rules) {
// Update offset because we're translating to zero.
p.page.m.offset = 0;
// IE10 hack.
if (Monocle.Browser.env.documentElementHasScrollbars) {
ce.ownerDocument.documentElement.style.overflow = 'hidden';
}
// Apply body style changes.
ce.style.cssText = rules;
if (Monocle.Browser.env.scrollToApplyStyle) {
ce.scrollLeft = 0;
}
}
}
// Returns the element to which columns CSS should be applied.
//
function columnedElement() {
return p.page.m.activeFrame.contentDocument.body;
}
// Returns the width of the offsettable area of the columned element. By
// definition, the number of pages is always this divided by the
// width of a single page (eg, the client area of the columned element).
//
function columnedWidth() {
var bd = columnedElement();
var de = p.page.m.activeFrame.contentDocument.documentElement;
var w = Math.max(bd.scrollWidth, de.scrollWidth);
// Add one because the final column doesn't have right gutter.
// w += k.GAP;
if (!Monocle.Browser.env.widthsIgnoreTranslate && p.page.m.offset) {
w += p.page.m.offset;
}
return w;
}
function pageDimensions() {
var elem = p.page.m.sheafDiv;
var w = elem.clientWidth;
if (elem.getBoundingClientRect) { w = elem.getBoundingClientRect().width; }
if (Monocle.Browser.env.roundPageDimensions) { w = Math.round(w); }
return { col: w, width: w + k.GAP, height: elem.clientHeight }
}
function columnCount() {
return Math.ceil(columnedWidth() / pageDimensions().width)
}
function locusToOffset(locus) {
return pageDimensions().width * (locus.page - 1);
}
// Moves the columned element to the offset implied by the locus.
//
// The 'transition' argument is optional, allowing the translation to be
// animated. If not given, no change is made to the columned element's
// transition property.
//
function translateToLocus(locus, transition) {
var offset = locusToOffset(locus);
p.page.m.offset = offset;
translateToOffset(offset, transition);
return offset;
}
function translateToOffset(offset, transition) {
var ce = columnedElement();
if (transition) {
Monocle.Styles.affix(ce, "transition", transition);
}
// NB: can't use setX as it causes a flicker on iOS.
Monocle.Styles.affix(ce, "transform", "translateX(-"+offset+"px)");
}
function percentageThroughOfNode(target) {
if (!target) { return 0; }
var doc = p.page.m.activeFrame.contentDocument;
var offset = 0;
if (Monocle.Browser.env.findNodesByScrolling) {
// First, remove translation...
translateToOffset(0);
// Store scroll offsets for all windows.
var win = s = p.page.m.activeFrame.contentWindow;
var scrollers = [
[win, win.scrollX, win.scrollY],
[window, window.scrollX, window.scrollY]
];
//while (s != s.parent) { scrollers.push([s, s.scrollX]); s = s.parent; }
if (Monocle.Browser.env.sheafIsScroller) {
var scroller = p.page.m.sheafDiv;
var x = scroller.scrollLeft;
target.scrollIntoView();
offset = scroller.scrollLeft;
} else {
var scroller = win;
var x = scroller.scrollX;
target.scrollIntoView();
offset = scroller.scrollX;
}
// Restore scroll offsets for all windows.
while (s = scrollers.shift()) {
s[0].scrollTo(s[1], s[2]);
}
// ... finally, replace translation.
translateToOffset(p.page.m.offset);
} else {
offset = target.getBoundingClientRect().left;
offset -= doc.body.getBoundingClientRect().left;
}
// We know at least 1px will be visible, and offset should not be 0.
offset += 1;
// Percent is the offset divided by the total width of the component.
var percent = offset / (p.length * p.width);
// Page number would be offset divided by the width of a single page.
// var pageNum = Math.ceil(offset / pageDimensions().width);
return percent;
}
API.update = update;
API.percentageThroughOfNode = percentageThroughOfNode;
API.locusToOffset = locusToOffset;
API.translateToLocus = translateToLocus;
return API;
}
Monocle.Dimensions.Columns.STYLE = {
// Most of these are already applied to body, but they're repeated here
// in case columnedElement() is ever anything other than body.
"columned": {
"margin": "0",
"padding": "0",
"height": "100%",
"width": "100%",
"position": "absolute"
},
"column-force": {
"min-width": "200%",
"overflow": "hidden"
}
}
;
Monocle.Flippers.Slider = function (reader) {
var API = { constructor: Monocle.Flippers.Slider }
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader,
pageCount: 2,
activeIndex: 1,
turnData: {},
nextPageReady: true
}
function initialize() {
p.reader.listen("monocle:componentchanging", showWaitControl);
}
function addPage(pageDiv) {
pageDiv.m.dimensions = new Monocle.Dimensions.Columns(pageDiv);
// BROWSERHACK: Firefox 4 is prone to beachballing on the first page turn
// unless a zeroed translateX has been applied to the page div.
Monocle.Styles.setX(pageDiv, 0);
}
function visiblePages() {
return [upperPage()];
}
function listenForInteraction(panelClass) {
if (typeof panelClass != "function") {
panelClass = k.DEFAULT_PANELS_CLASS;
if (!panelClass) {
console.warn("Invalid panel class.")
}
}
p.panels = new panelClass(
API,
{
'start': lift,
'move': turning,
'end': release,
'cancel': release
}
);
}
function getPlace(pageDiv) {
pageDiv = pageDiv || upperPage();
return pageDiv.m ? pageDiv.m.place : null;
}
function moveTo(locus, callback) {
var cb = function () {
if (typeof callback == "function") { callback(); }
announceTurn();
}
setPage(upperPage(), locus, function () { prepareNextPage(cb) });
}
function setPage(pageDiv, locus, onLoad, onFail) {
p.reader.getBook().setOrLoadPageAt(
pageDiv,
locus,
function (locus) {
pageDiv.m.dimensions.translateToLocus(locus);
Monocle.defer(onLoad);
},
onFail
);
}
function upperPage() {
return p.reader.dom.find('page', p.activeIndex);
}
function lowerPage() {
return p.reader.dom.find('page', (p.activeIndex + 1) % 2);
}
function flipPages() {
upperPage().style.zIndex = 1;
lowerPage().style.zIndex = 2;
return p.activeIndex = (p.activeIndex + 1) % 2;
}
function lift(dir, boxPointX) {
if (p.turnData.lifting || p.turnData.releasing) { return; }
p.reader.selection.deselect();
p.turnData.points = {
start: boxPointX,
min: boxPointX,
max: boxPointX
}
p.turnData.lifting = true;
var place = getPlace();
if (dir == k.FORWARDS) {
if (place.onLastPageOfBook()) {
p.reader.dispatchEvent(
'monocle:boundaryend',
{
locus: getPlace().getLocus({ direction : dir }),
page: upperPage()
}
);
resetTurnData();
return;
}
onGoingForward(boxPointX);
} else if (dir == k.BACKWARDS) {
if (place.onFirstPageOfBook()) {
p.reader.dispatchEvent(
'monocle:boundarystart',
{
locus: getPlace().getLocus({ direction : dir }),
page: upperPage()
}
);
resetTurnData();
return;
}
onGoingBackward(boxPointX);
} else {
console.warn("Invalid direction: " + dir);
}
}
function turning(dir, boxPointX) {
if (!p.turnData.points) { return; }
if (p.turnData.lifting || p.turnData.releasing) { return; }
checkPoint(boxPointX);
slideToCursor(boxPointX, null, "0");
}
function release(dir, boxPointX) {
if (!p.turnData.points) {
return;
}
if (p.turnData.lifting) {
p.turnData.releaseArgs = [dir, boxPointX];
return;
}
if (p.turnData.releasing) {
return;
}
checkPoint(boxPointX);
p.turnData.releasing = true;
if (dir == k.FORWARDS) {
if (
p.turnData.points.tap ||
p.turnData.points.start - boxPointX > 60 ||
p.turnData.points.min >= boxPointX
) {
// Completing forward turn
slideOut(afterGoingForward);
} else {
// Cancelling forward turn
slideIn(afterCancellingForward);
}
} else if (dir == k.BACKWARDS) {
if (
p.turnData.points.tap ||
boxPointX - p.turnData.points.start > 60 ||
p.turnData.points.max <= boxPointX
) {
// Completing backward turn
slideIn(afterGoingBackward);
} else {
// Cancelling backward turn
slideOut(afterCancellingBackward);
}
} else {
console.warn("Invalid direction: " + dir);
}
}
function checkPoint(boxPointX) {
p.turnData.points.min = Math.min(p.turnData.points.min, boxPointX);
p.turnData.points.max = Math.max(p.turnData.points.max, boxPointX);
p.turnData.points.tap = p.turnData.points.max - p.turnData.points.min < 10;
}
function onGoingForward(x) {
if (p.nextPageReady == false) {
prepareNextPage(function () { lifted(x); }, resetTurnData);
} else {
lifted(x);
}
}
function onGoingBackward(x) {
var lp = lowerPage(), up = upperPage();
var onFail = function () { slideOut(afterCancellingBackward); }
if (Monocle.Browser.env.offscreenRenderingClipped) {
// set lower to "the page before upper"
setPage(
lp,
getPlace(up).getLocus({ direction: k.BACKWARDS }),
function () {
// flip lower to upper, ready to slide in from left
flipPages();
// move lower off the screen to the left
jumpOut(lp, function () { lifted(x); });
},
onFail
);
} else {
jumpOut(lp, function () {
flipPages();
setPage(
lp,
getPlace(up).getLocus({ direction: k.BACKWARDS }),
function () { lifted(x); },
onFail
);
});
}
}
function afterGoingForward() {
var up = upperPage(), lp = lowerPage();
flipPages();
jumpIn(up, function () { prepareNextPage(announceTurn); });
}
function afterGoingBackward() {
announceTurn();
}
function afterCancellingForward() {
announceCancel();
}
function afterCancellingBackward() {
flipPages(); // flip upper to lower
jumpIn(lowerPage(), function () { prepareNextPage(announceCancel); });
}
// Prepares the lower page to show the next page after the current page,
// and calls onLoad when done.
//
// Note that if the next page is a new component, and it fails to load,
// onFail will be called. If onFail is not supplied, onLoad will be called.
//
function prepareNextPage(onLoad, onFail) {
setPage(
lowerPage(),
getPlace().getLocus({ direction: k.FORWARDS }),
onLoad,
function () {
onFail ? onFail() : onLoad();
p.nextPageReady = false;
}
);
}
function lifted(x) {
p.turnData.lifting = false;
p.reader.dispatchEvent('monocle:turning');
var releaseArgs = p.turnData.releaseArgs;
if (releaseArgs) {
p.turnData.releaseArgs = null;
release(releaseArgs[0], releaseArgs[1]);
} else if (x) {
slideToCursor(x);
}
}
function announceTurn() {
p.nextPageReady = true;
p.reader.dispatchEvent('monocle:turn');
resetTurnData();
}
function announceCancel() {
p.reader.dispatchEvent('monocle:turn:cancel');
resetTurnData();
}
function resetTurnData() {
hideWaitControl();
p.turnData = {};
}
function setX(elem, x, options, callback) {
var duration, transition;
if (!options.duration) {
duration = 0;
} else {
duration = parseInt(options.duration);
}
if (Monocle.Browser.env.supportsTransition) {
Monocle.Styles.transitionFor(
elem,
'transform',
duration,
options.timing,
options.delay
);
if (Monocle.Browser.env.supportsTransform3d) {
Monocle.Styles.affix(elem, 'transform', 'translate3d('+x+'px,0,0)');
} else {
Monocle.Styles.affix(elem, 'transform', 'translateX('+x+'px)');
}
if (typeof callback == "function") {
if (duration && Monocle.Styles.getX(elem) != x) {
Monocle.Events.afterTransition(elem, callback);
} else {
Monocle.defer(callback);
}
}
} else {
// Old-school JS animation.
elem.currX = elem.currX || 0;
var completeTransition = function () {
elem.currX = x;
Monocle.Styles.setX(elem, x);
if (typeof callback == "function") { callback(); }
}
if (!duration) {
completeTransition();
} else {
var stamp = (new Date()).getTime();
var frameRate = 40;
var step = (x - elem.currX) * (frameRate / duration);
var stepFn = function () {
var destX = elem.currX + step;
var timeElapsed = ((new Date()).getTime() - stamp) >= duration;
var pastDest = (destX > x && elem.currX < x) ||
(destX < x && elem.currX > x);
if (timeElapsed || pastDest) {
completeTransition();
} else {
Monocle.Styles.setX(elem, destX);
elem.currX = destX;
setTimeout(stepFn, frameRate);
}
}
stepFn();
}
}
}
function jumpIn(pageDiv, callback) {
opts = { duration: (Monocle.Browser.env.stickySlideOut ? 1 : 0) }
setX(pageDiv, 0, opts, callback);
}
function jumpOut(pageDiv, callback) {
setX(pageDiv, 0 - pageDiv.offsetWidth, { duration: 0 }, callback);
}
// NB: Slides are always done by the visible upper page.
function slideIn(callback) {
setX(upperPage(), 0, slideOpts(), callback);
}
function slideOut(callback) {
setX(upperPage(), 0 - upperPage().offsetWidth, slideOpts(), callback);
}
function slideToCursor(cursorX, callback, duration) {
setX(
upperPage(),
Math.min(0, cursorX - upperPage().offsetWidth),
{ duration: duration || k.FOLLOW_DURATION },
callback
);
}
function slideOpts() {
var opts = { timing: 'ease-in', duration: 320 }
var now = (new Date()).getTime();
if (p.lastSlide && now - p.lastSlide < 1500) { opts.duration *= 0.5; }
p.lastSlide = now;
return opts;
}
function ensureWaitControl() {
if (p.waitControl) { return; }
p.waitControl = {
createControlElements: function (holder) {
return holder.dom.make('div', 'flippers_slider_wait');
}
}
p.reader.addControl(p.waitControl, 'page');
}
function showWaitControl() {
ensureWaitControl();
p.reader.dom.find('flippers_slider_wait', 0).style.opacity = 1;
p.reader.dom.find('flippers_slider_wait', 1).style.opacity = 1;
}
function hideWaitControl() {
ensureWaitControl();
p.reader.dom.find('flippers_slider_wait', 0).style.opacity = 0;
p.reader.dom.find('flippers_slider_wait', 1).style.opacity = 0;
}
// THIS IS THE CORE API THAT ALL FLIPPERS MUST PROVIDE.
API.pageCount = p.pageCount;
API.addPage = addPage;
API.getPlace = getPlace;
API.moveTo = moveTo;
API.listenForInteraction = listenForInteraction;
// OPTIONAL API - WILL BE INVOKED (WHERE RELEVANT) IF PROVIDED.
API.visiblePages = visiblePages;
initialize();
return API;
}
// Constants
Monocle.Flippers.Slider.DEFAULT_PANELS_CLASS = Monocle.Panels.TwoPane;
Monocle.Flippers.Slider.FORWARDS = 1;
Monocle.Flippers.Slider.BACKWARDS = -1;
Monocle.Flippers.Slider.FOLLOW_DURATION = 100;
Monocle.Flippers.Scroller = function (reader, setPageFn) {
var API = { constructor: Monocle.Flippers.Scroller }
var k = API.constants = API.constructor;
var p = API.properties = {
pageCount: 1,
duration: 300
}
function initialize() {
p.reader = reader;
p.setPageFn = setPageFn;
}
function addPage(pageDiv) {
pageDiv.m.dimensions = new Monocle.Dimensions.Columns(pageDiv);
}
function page() {
return p.reader.dom.find('page');
}
function listenForInteraction(panelClass) {
if (typeof panelClass != "function") {
panelClass = k.DEFAULT_PANELS_CLASS;
}
p.panels = new panelClass(
API,
{
'end': turn
}
);
}
function turn(dir) {
if (p.turning) { return; }
p.reader.selection.deselect();
moveTo({ page: getPlace().pageNumber() + dir});
p.reader.dispatchEvent('monocle:turning');
}
function getPlace() {
return page().m.place;
}
function moveTo(locus, callback) {
var fn = frameToLocus;
if (typeof callback == "function") {
fn = function (locus) { frameToLocus(locus); callback(locus); }
}
p.reader.getBook().setOrLoadPageAt(page(), locus, fn);
}
function frameToLocus(locus) {
if (locus.boundarystart || locus.boundaryend) { return; }
p.turning = true;
var dims = page().m.dimensions;
var fr = page().m.activeFrame;
var bdy = fr.contentDocument.body;
var anim = true;
if (p.activeComponent != fr.m.component) {
// No animation.
p.activeComponent = fr.m.component;
dims.translateToLocus(locus, "none");
Monocle.defer(turned);
} else if (Monocle.Browser.env.supportsTransition) {
// Native animation.
dims.translateToLocus(locus, p.duration+"ms ease-in 0ms");
Monocle.Events.afterTransition(bdy, turned);
} else {
// Old-school JS animation.
var x = dims.locusToOffset(locus);
var finalX = 0 - x;
var stamp = (new Date()).getTime();
var frameRate = 40;
var currX = p.currX || 0;
var step = (finalX - currX) * (frameRate / p.duration);
var stepFn = function () {
var destX = currX + step;
if (
(new Date()).getTime() - stamp > p.duration ||
Math.abs(currX - finalX) <= Math.abs((currX + step) - finalX)
) {
Monocle.Styles.setX(bdy, finalX);
turned();
} else {
Monocle.Styles.setX(bdy, destX);
currX = destX;
setTimeout(stepFn, frameRate);
}
p.currX = destX;
}
stepFn();
}
}
function turned() {
p.turning = false;
p.reader.dispatchEvent('monocle:turn');
}
// THIS IS THE CORE API THAT ALL FLIPPERS MUST PROVIDE.
API.pageCount = p.pageCount;
API.addPage = addPage;
API.getPlace = getPlace;
API.moveTo = moveTo;
API.listenForInteraction = listenForInteraction;
initialize();
return API;
}
Monocle.Flippers.Scroller.speed = 200; // How long the animation takes
Monocle.Flippers.Scroller.rate = 20; // frame-rate of the animation
Monocle.Flippers.Scroller.FORWARDS = 1;
Monocle.Flippers.Scroller.BACKWARDS = -1;
Monocle.Flippers.Scroller.DEFAULT_PANELS_CLASS = Monocle.Panels.TwoPane;
Monocle.Flippers.Instant = function (reader) {
var API = { constructor: Monocle.Flippers.Instant }
var k = API.constants = API.constructor;
var p = API.properties = {
pageCount: 1
}
function initialize() {
p.reader = reader;
}
function addPage(pageDiv) {
pageDiv.m.dimensions = new Monocle.Dimensions.Columns(pageDiv);
}
function getPlace() {
return page().m.place;
}
function moveTo(locus, callback) {
var fn = frameToLocus;
if (typeof callback == "function") {
fn = function (locus) { frameToLocus(locus); callback(locus); }
}
p.reader.getBook().setOrLoadPageAt(page(), locus, fn);
}
function listenForInteraction(panelClass) {
if (typeof panelClass != "function") {
if (Monocle.Browser.on.Kindle3) {
panelClass = Monocle.Panels.eInk;
}
panelClass = panelClass || k.DEFAULT_PANELS_CLASS;
}
if (!panelClass) { throw("Panels not found."); }
p.panels = new panelClass(API, { 'end': turn });
}
function page() {
return p.reader.dom.find('page');
}
function turn(dir) {
p.reader.selection.deselect();
moveTo({ page: getPlace().pageNumber() + dir});
p.reader.dispatchEvent('monocle:turning');
}
function frameToLocus(locus) {
page().m.dimensions.translateToLocus(locus);
Monocle.defer(function () { p.reader.dispatchEvent('monocle:turn'); });
}
// THIS IS THE CORE API THAT ALL FLIPPERS MUST PROVIDE.
API.pageCount = p.pageCount;
API.addPage = addPage;
API.getPlace = getPlace;
API.moveTo = moveTo;
API.listenForInteraction = listenForInteraction;
initialize();
return API;
}
Monocle.Flippers.Instant.FORWARDS = 1;
Monocle.Flippers.Instant.BACKWARDS = -1;
Monocle.Flippers.Instant.DEFAULT_PANELS_CLASS = Monocle.Panels.TwoPane;
Reference in a new issue Copy permalink