monocle-rails 0.0.1

data/vendor/assets/javascripts/monocore.js

@@ -0,0 +1,27 @@
+//= require ./core/monocle
+//= require ./compat/env
+//= require ./compat/css
+//= require ./compat/stubs
+//= require ./compat/browser
+//= require ./compat/gala
+//= require ./core/bookdata
+//= require ./core/factory
+//= require ./core/events
+//= require ./core/styles
+//= require ./core/formatting
+//= require ./core/reader
+//= require ./core/book
+//= require ./core/place
+//= require ./core/component
+//= require ./core/selection
+//= require ./core/billboard
+//= require ./controls/panel
+//= require ./panels/twopane
+//= require ./panels/imode
+//= require ./panels/eink
+//= require ./panels/marginal
+//= require ./panels/magic
+//= require ./dimensions/columns
+//= require ./flippers/slider
+//= require ./flippers/scroller
+//= require ./flippers/instant

data/vendor/assets/javascripts/monoctrl.js

@@ -0,0 +1 @@
+//= require_tree ./controls

data/vendor/assets/javascripts/panels/eink.js

@@ -0,0 +1,61 @@
+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 };

data/vendor/assets/javascripts/panels/imode.js

@@ -0,0 +1,180 @@
+// 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 (var 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;

data/vendor/assets/javascripts/panels/magic.js

@@ -0,0 +1,297 @@
+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;