cops/resources/monocle/scripts/monoctrl.js

986 lines
25 KiB
JavaScript
Raw Normal View History

Monocle.Controls.Contents = function (reader) {
var API = { constructor: Monocle.Controls.Contents }
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader
}
function createControlElements() {
var div = reader.dom.make('div', 'controls_contents_container');
contentsForBook(div, reader.getBook());
return div;
}
function contentsForBook(div, book) {
while (div.hasChildNodes()) {
div.removeChild(div.firstChild);
}
var list = div.dom.append('ol', 'controls_contents_list');
var contents = book.properties.contents;
for (var i = 0; i < contents.length; ++i) {
chapterBuilder(list, contents[i], 0);
}
}
function chapterBuilder(list, chp, padLvl) {
var index = list.childNodes.length;
var li = list.dom.append('li', 'controls_contents_chapter', index);
var span = li.dom.append(
'span',
'controls_contents_chapterTitle',
index,
{ html: chp.title }
);
span.style.paddingLeft = padLvl + "em";
var invoked = function () {
p.reader.skipToChapter(chp.src);
p.reader.hideControl(API);
}
Monocle.Events.listenForTap(li, invoked, 'controls_contents_chapter_active');
if (chp.children) {
for (var i = 0; i < chp.children.length; ++i) {
chapterBuilder(list, chp.children[i], padLvl + 1);
}
}
}
API.createControlElements = createControlElements;
return API;
}
;
Monocle.Controls.Magnifier = function (reader) {
var API = { constructor: Monocle.Controls.Magnifier }
var k = API.constants = API.constructor;
var p = API.properties = {
buttons: [],
magnified: false
}
function initialize() {
p.reader = reader;
}
function createControlElements(holder) {
var btn = holder.dom.make('div', 'controls_magnifier_button');
btn.smallA = btn.dom.append('span', 'controls_magnifier_a', { text: 'A' });
btn.largeA = btn.dom.append('span', 'controls_magnifier_A', { text: 'A' });
p.buttons.push(btn);
Monocle.Events.listenForTap(btn, toggleMagnification);
return btn;
}
function toggleMagnification(evt) {
var opacities;
p.magnified = !p.magnified;
if (p.magnified) {
opacities = [0.3, 1];
p.reader.formatting.setFontScale(k.MAGNIFICATION, true);
} else {
opacities = [1, 0.3];
p.reader.formatting.setFontScale(null, true);
}
for (var i = 0; i < p.buttons.length; i++) {
p.buttons[i].smallA.style.opacity = opacities[0];
p.buttons[i].largeA.style.opacity = opacities[1];
}
}
API.createControlElements = createControlElements;
initialize();
return API;
}
Monocle.Controls.Magnifier.MAGNIFICATION = 1.2;
// 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%'
}
;
Monocle.Controls.PlaceSaver = function (bookId) {
var API = { constructor: Monocle.Controls.PlaceSaver }
var k = API.constants = API.constructor;
var p = API.properties = {}
function initialize() {
applyToBook(bookId);
}
function assignToReader(reader) {
p.reader = reader;
p.reader.listen('monocle:turn', savePlaceToCookie);
}
function applyToBook(bookId) {
p.bkTitle = bookId.toLowerCase().replace(/[^a-z0-9]/g, '');
p.prefix = k.COOKIE_NAMESPACE + p.bkTitle + ".";
}
function setCookie(key, value, days) {
var expires = "";
if (days) {
var d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires="+d.toGMTString();
}
var path = "; path=/";
document.cookie = p.prefix + key + "=" + value + expires + path;
return value;
}
function getCookie(key) {
if (!document.cookie) {
return null;
}
var regex = new RegExp(p.prefix + key + "=(.+?)(;|$)");
var matches = document.cookie.match(regex);
if (matches) {
return matches[1];
} else {
return null;
}
}
function savePlaceToCookie() {
var place = p.reader.getPlace();
setCookie(
"component",
encodeURIComponent(place.componentId()),
k.COOKIE_EXPIRES_IN_DAYS
);
setCookie(
"percent",
place.percentageThrough(),
k.COOKIE_EXPIRES_IN_DAYS
);
}
function savedPlace() {
var locus = {
componentId: getCookie('component'),
percent: getCookie('percent')
}
if (locus.componentId && locus.percent) {
locus.componentId = decodeURIComponent(locus.componentId);
locus.percent = parseFloat(locus.percent);
return locus;
} else {
return null;
}
}
function restorePlace() {
var locus = savedPlace();
if (locus) {
p.reader.moveTo(locus);
}
}
API.assignToReader = assignToReader;
API.savedPlace = savedPlace;
API.restorePlace = restorePlace;
initialize();
return API;
}
Monocle.Controls.PlaceSaver.COOKIE_NAMESPACE = "monocle.controls.placesaver.";
Monocle.Controls.PlaceSaver.COOKIE_EXPIRES_IN_DAYS = 7; // Set to 0 for session-based expiry.
;
Monocle.Controls.Scrubber = function (reader) {
var API = { constructor: Monocle.Controls.Scrubber }
var k = API.constants = API.constructor;
var p = API.properties = {}
function initialize() {
p.reader = reader;
p.reader.listen('monocle:turn', updateNeedles);
updateNeedles();
}
function pixelToPlace(x, cntr) {
if (!p.componentIds) {
p.componentIds = p.reader.getBook().properties.componentIds;
p.componentWidth = 100 / p.componentIds.length;
}
var pc = (x / cntr.offsetWidth) * 100;
var cmpt = p.componentIds[Math.floor(pc / p.componentWidth)];
var cmptPc = ((pc % p.componentWidth) / p.componentWidth);
return { componentId: cmpt, percentageThrough: cmptPc };
}
function placeToPixel(place, cntr) {
if (!p.componentIds) {
p.componentIds = p.reader.getBook().properties.componentIds;
p.componentWidth = 100 / p.componentIds.length;
}
var componentIndex = p.componentIds.indexOf(place.componentId());
var pc = p.componentWidth * componentIndex;
pc += place.percentageThrough() * p.componentWidth;
return Math.round((pc / 100) * cntr.offsetWidth);
}
function updateNeedles() {
if (p.hidden || !p.reader.dom.find(k.CLS.container)) {
return;
}
var place = p.reader.getPlace();
var x = placeToPixel(place, p.reader.dom.find(k.CLS.container));
var needle, i = 0;
for (var i = 0, needle; needle = p.reader.dom.find(k.CLS.needle, i); ++i) {
setX(needle, x - needle.offsetWidth / 2);
p.reader.dom.find(k.CLS.trail, i).style.width = x + "px";
}
}
function setX(node, x) {
var cntr = p.reader.dom.find(k.CLS.container);
x = Math.min(cntr.offsetWidth - node.offsetWidth, x);
x = Math.max(x, 0);
Monocle.Styles.setX(node, x);
}
function createControlElements(holder) {
var cntr = holder.dom.make('div', k.CLS.container);
var track = cntr.dom.append('div', k.CLS.track);
var needleTrail = cntr.dom.append('div', k.CLS.trail);
var needle = cntr.dom.append('div', k.CLS.needle);
var bubble = cntr.dom.append('div', k.CLS.bubble);
var cntrListeners, bodyListeners;
var moveEvt = function (evt, x) {
evt.preventDefault();
x = (typeof x == "number") ? x : evt.m.registrantX;
var place = pixelToPlace(x, cntr);
setX(needle, x - needle.offsetWidth / 2);
var book = p.reader.getBook();
var chps = book.chaptersForComponent(place.componentId);
var cmptIndex = p.componentIds.indexOf(place.componentId);
var chp = chps[Math.floor(chps.length * place.percentageThrough)];
if (cmptIndex > -1 && book.properties.components[cmptIndex]) {
var actualPlace = Monocle.Place.FromPercentageThrough(
book.properties.components[cmptIndex],
place.percentageThrough
);
chp = actualPlace.chapterInfo() || chp;
}
if (chp) {
bubble.innerHTML = chp.title;
}
setX(bubble, x - bubble.offsetWidth / 2);
p.lastX = x;
return place;
}
var endEvt = function (evt) {
var place = moveEvt(evt, p.lastX);
p.reader.moveTo({
percent: place.percentageThrough,
componentId: place.componentId
});
Monocle.Events.deafenForContact(cntr, cntrListeners);
Monocle.Events.deafenForContact(document.body, bodyListeners);
bubble.style.display = "none";
}
var startFn = function (evt) {
bubble.style.display = "block";
moveEvt(evt);
cntrListeners = Monocle.Events.listenForContact(
cntr,
{ move: moveEvt }
);
bodyListeners = Monocle.Events.listenForContact(
document.body,
{ end: endEvt }
);
}
Monocle.Events.listenForContact(cntr, { start: startFn });
return cntr;
}
API.createControlElements = createControlElements;
API.updateNeedles = updateNeedles;
initialize();
return API;
}
Monocle.Controls.Scrubber.CLS = {
container: 'controls_scrubber_container',
track: 'controls_scrubber_track',
needle: 'controls_scrubber_needle',
trail: 'controls_scrubber_trail',
bubble: 'controls_scrubber_bubble'
}
;
Monocle.Controls.Spinner = function (reader) {
var API = { constructor: Monocle.Controls.Spinner }
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader,
divs: [],
repeaters: {},
showForPages: []
}
function createControlElements(cntr) {
var anim = cntr.dom.make('div', 'controls_spinner_anim');
anim.dom.append('div', 'controls_spinner_inner');
p.divs.push(anim);
return anim;
}
function registerSpinEvent(startEvtType, stopEvtType) {
var label = startEvtType;
p.reader.listen(startEvtType, function (evt) { spin(label, evt) });
p.reader.listen(stopEvtType, function (evt) { spun(label, evt) });
}
// Registers spin/spun event handlers for certain time-consuming events.
//
function listenForUsualDelays() {
registerSpinEvent('monocle:componentloading', 'monocle:componentloaded');
registerSpinEvent('monocle:componentchanging', 'monocle:componentchange');
registerSpinEvent('monocle:resizing', 'monocle:resize');
registerSpinEvent('monocle:jumping', 'monocle:jump');
registerSpinEvent('monocle:recalculating', 'monocle:recalculated');
p.reader.listen('monocle:notfound', forceSpun);
p.reader.listen('monocle:componentfailed', forceSpun);
}
// Displays the spinner. Both arguments are optional.
//
function spin(label, evt) {
label = label || k.GENERIC_LABEL;
p.repeaters[label] = true;
p.reader.showControl(API);
// If the delay is on a page other than the page we've been assigned to,
// don't show the animation. p.global ensures that if an event affects
// all pages, the animation is always shown, even if other events in this
// spin cycle are page-specific.
var page = (evt && evt.m && evt.m.page) ? evt.m.page : null;
if (page && p.divs.length > 1) {
p.showForPages[page.m.pageIndex] = true;
} else {
p.global = true;
p.reader.dispatchEvent('monocle:modal:on');
}
for (var i = 0; i < p.divs.length; ++i) {
var show = (p.global || p.showForPages[i]) ? true : false;
p.divs[i].dom[show ? 'removeClass' : 'addClass']('dormant');
}
}
// Stops displaying the spinner. Both arguments are optional.
//
function spun(label, evt) {
label = label || k.GENERIC_LABEL;
p.repeaters[label] = false;
for (var l in p.repeaters) {
if (p.repeaters[l]) { return; }
}
forceSpun();
}
function forceSpun() {
if (p.global) { p.reader.dispatchEvent('monocle:modal:off'); }
p.global = false;
p.repeaters = {};
p.showForPages = [];
for (var i = 0; i < p.divs.length; ++i) {
p.divs[i].dom.addClass('dormant');
}
}
API.createControlElements = createControlElements;
API.registerSpinEvent = registerSpinEvent;
API.listenForUsualDelays = listenForUsualDelays;
API.spin = spin;
API.spun = spun;
API.forceSpun = forceSpun;
return API;
}
Monocle.Controls.Spinner.GENERIC_LABEL = "generic";
Monocle.Controls.Stencil = function (reader, behaviorClasses) {
var API = { constructor: Monocle.Controls.Stencil }
var k = API.constants = API.constructor;
var p = API.properties = {
reader: reader,
behaviors: [],
components: {},
masks: []
}
// Create the stencil container and listen for draw/update events.
//
function createControlElements(holder) {
behaviorClasses = behaviorClasses || k.DEFAULT_BEHAVIORS;
for (var i = 0, ii = behaviorClasses.length; i < ii; ++i) {
addBehavior(behaviorClasses[i]);
}
p.container = holder.dom.make('div', k.CLS.container);
p.reader.listen('monocle:turning', hide);
p.reader.listen('monocle:turn:cancel', show);
p.reader.listen('monocle:turn', update);
p.reader.listen('monocle:stylesheetchange', update);
p.reader.listen('monocle:resize', update);
update();
return p.container;
}
// Pass this method an object that responds to 'findElements(doc)' with
// an array of DOM elements for that document, and to 'fitMask(elem, mask)'.
//
// After you have added all your behaviors this way, you would typically
// call update() to make them take effect immediately.
//
function addBehavior(bhvrClass) {
var bhvr = new bhvrClass(API);
if (typeof bhvr.findElements != 'function') {
console.warn('Missing "findElements" method for behavior: %o', bhvr);
}
if (typeof bhvr.fitMask != 'function') {
console.warn('Missing "fitMask" method for behavior: %o', bhvr);
}
p.behaviors.push(bhvr);
}
// Resets any pre-calculated rectangles for the active component,
// recalculates them, and forces masks to be "drawn" (moved into the new
// rectangular locations).
//
function update() {
var visPages = p.reader.visiblePages();
if (!visPages || !visPages.length) { return; }
var pageDiv = visPages[0];
var cmptId = pageComponentId(pageDiv);
if (!cmptId) { return; }
p.components[cmptId] = null;
calculateRectangles(pageDiv);
draw();
}
function hide() {
p.container.style.display = 'none';
}
function show() {
p.container.style.display = 'block';
}
// Removes any existing masks.
function clear() {
while (p.container.childNodes.length) {
p.container.removeChild(p.container.lastChild);
}
}
// Aligns the stencil container to the shape of the page, then moves the
// masks to sit above any currently visible rectangles.
//
function draw() {
var pageDiv = p.reader.visiblePages()[0];
var cmptId = pageComponentId(pageDiv);
if (!p.components[cmptId]) {
return;
}
// Position the container.
alignToComponent(pageDiv);
// Clear old masks.
clear();
// Layout the masks.
if (!p.disabled) {
show();
var rects = p.components[cmptId];
if (rects && rects.length) {
layoutRectangles(pageDiv, rects);
}
}
}
// Iterate over all the <a> elements in the active component, and
// create an array of rectangular points corresponding to their positions.
//
function calculateRectangles(pageDiv) {
var cmptId = pageComponentId(pageDiv);
if (!p.components[cmptId]) {
p.components[cmptId] = [];
} else {
return;
}
var doc = pageDiv.m.activeFrame.contentDocument;
var offset = getOffset(pageDiv);
for (var b = 0, bb = p.behaviors.length; b < bb; ++b) {
var bhvr = p.behaviors[b];
var elems = bhvr.findElements(doc);
for (var i = 0; i < elems.length; ++i) {
var elem = elems[i];
if (elem.getClientRects) {
var r = elem.getClientRects();
for (var j = 0; j < r.length; j++) {
p.components[cmptId].push({
element: elem,
behavior: bhvr,
left: Math.ceil(r[j].left + offset.l),
top: Math.ceil(r[j].top),
width: Math.floor(r[j].width),
height: Math.floor(r[j].height)
});
}
}
}
}
return p.components[cmptId];
}
// Update location of visible rectangles - creating as required.
//
function layoutRectangles(pageDiv, rects) {
var offset = getOffset(pageDiv);
var visRects = [];
for (var i = 0; i < rects.length; ++i) {
if (rectVisible(rects[i], offset.l, offset.l + offset.w)) {
visRects.push(rects[i]);
}
}
for (i = 0; i < visRects.length; ++i) {
var r = visRects[i];
var cr = {
left: r.left - offset.l,
top: r.top,
width: r.width,
height: r.height
};
var mask = createMask(r.element, r.behavior);
mask.dom.setStyles({
display: 'block',
left: cr.left+"px",
top: cr.top+"px",
width: cr.width+"px",
height: cr.height+"px",
position: 'absolute'
});
mask.stencilRect = cr;
}
}
// Find the offset position in pixels from the left of the current page.
//
function getOffset(pageDiv) {
return {
l: pageDiv.m.offset || 0,
w: pageDiv.m.dimensions.properties.width
};
}
// Is this area presently on the screen?
//
function rectVisible(rect, l, r) {
return rect.left >= l && rect.left < r;
}
// Returns the active component id for the given page, or the current
// page if no argument passed in.
//
function pageComponentId(pageDiv) {
pageDiv = pageDiv || p.reader.visiblePages()[0];
if (!pageDiv.m.activeFrame.m.component) { return; }
return pageDiv.m.activeFrame.m.component.properties.id;
}
// Positions the stencil container over the active frame.
//
function alignToComponent(pageDiv) {
cmpt = pageDiv.m.activeFrame.parentNode;
p.container.dom.setStyles({
left: cmpt.offsetLeft+"px",
top: cmpt.offsetTop+"px"
});
}
function createMask(element, bhvr) {
var mask = p.container.dom.append(bhvr.maskTagName || 'div', k.CLS.mask);
Monocle.Events.listenForContact(mask, {
start: function () { p.reader.dispatchEvent('monocle:magic:halt'); },
move: function (evt) { evt.preventDefault(); },
end: function () { p.reader.dispatchEvent('monocle:magic:init'); }
});
bhvr.fitMask(element, mask);
return mask;
}
// Make the active masks visible (by giving them a class -- override style
// in monoctrl.css).
//
function toggleHighlights() {
var cls = k.CLS.highlights;
if (p.container.dom.hasClass(cls)) {
p.container.dom.removeClass(cls);
} else {
p.container.dom.addClass(cls);
}
}
function disable() {
p.disabled = true;
draw();
}
function enable() {
p.disabled = false;
draw();
}
function filterElement(elem, behavior) {
if (typeof behavior.filterElement == 'function') {
return behavior.filterElement(elem);
}
return elem;
}
function maskAssigned(elem, mask, behavior) {
if (typeof behavior.maskAssigned == 'function') {
return behavior.maskAssigned(elem, mask);
}
return false;
}
API.createControlElements = createControlElements;
API.addBehavior = addBehavior;
API.draw = draw;
API.update = update;
API.toggleHighlights = toggleHighlights;
return API;
}
Monocle.Controls.Stencil.CLS = {
container: 'controls_stencil_container',
mask: 'controls_stencil_mask',
highlights: 'controls_stencil_highlighted'
}
Monocle.Controls.Stencil.Links = function (stencil) {
var API = { constructor: Monocle.Controls.Stencil.Links }
// Optionally specify the HTML tagname of the mask.
API.maskTagName = 'a';
// Returns an array of all the elements in the given doc that should
// be covered with a stencil mask for interactivity.
//
// (Hint: doc.querySelectorAll() is your friend.)
//
API.findElements = function (doc) {
return doc.querySelectorAll('a[href]');
}
// Return an element. It should usually be a child of the container element,
// with a className of the given maskClass. You set up the interactivity of
// the mask element here.
//
API.fitMask = function (link, mask) {
var hrefObject = deconstructHref(link);
if (hrefObject.internal) {
mask.setAttribute('href', 'javascript:"Skip to chapter"');
mask.onclick = function (evt) {
stencil.properties.reader.skipToChapter(hrefObject.internal);
evt.preventDefault();
return false;
}
} else {
mask.setAttribute('href', hrefObject.external);
mask.setAttribute('target', '_blank');
mask.onclick = function (evt) { return true; }
}
link.onclick = function (evt) {
evt.preventDefault();
return false;
}
}
// Returns an object with either:
//
// - an 'external' property -- an absolute URL with a protocol,
// host & etc, which should be treated as an external resource (eg,
// open in new window)
//
// OR
//
// - an 'internal' property -- a relative URL (with optional hash anchor),
// that is treated as a link to component in the book
//
// A weird but useful property of <a> tags is that while
// link.getAttribute('href') will return the actual string value of the
// attribute (eg, 'foo.html'), link.href will return the absolute URL (eg,
// 'http://example.com/monocles/foo.html').
//
function deconstructHref(elem) {
var loc = document.location;
var origin = loc.protocol+'//'+loc.host;
var href = elem.href;
var path = href.substring(origin.length);
var ext = { external: href };
// Anchor tags with 'target' attributes are always external URLs.
if (elem.getAttribute('target')) {
return ext;
}
// URLs with a different protocol or domain are always external.
//console.log("Domain test: %s <=> %s", origin, href);
if (href.indexOf(origin) != 0) {
return ext;
}
// If it is in a sub-path of the current path, it's internal.
var topPath = loc.pathname.replace(/[^\/]*\.[^\/]+$/,'');
if (topPath[topPath.length - 1] != '/') {
topPath += '/';
}
//console.log("Sub-path test: %s <=> %s", topPath, path);
if (path.indexOf(topPath) == 0) {
return { internal: path.substring(topPath.length) }
}
// If it's a root-relative URL and it's in our list of component ids,
// it's internal.
var cmptIds = stencil.properties.reader.getBook().properties.componentIds;
for (var i = 0, ii = cmptIds.length; i < ii; ++i) {
//console.log("Component test: %s <=> %s", cmptIds[i], path);
if (path.indexOf(cmptIds[i]) == 0) {
return { internal: path }
}
}
// Otherwise it's external.
return ext;
}
return API;
}
Monocle.Controls.Stencil.DEFAULT_BEHAVIORS = [Monocle.Controls.Stencil.Links];