monocle-rails 0.0.1

data/vendor/assets/javascripts/core/selection.js

@@ -0,0 +1,158 @@
+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();
+    if (!sel) { return; }
+    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;
+    }
+
+    var nvp;
+    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);
+        nvp = createViewportMeta(nvpcontent);
+        fn();
+        head.removeChild(nvp);
+        head.appendChild(ovp);
+      }
+    } else {
+      nvp = createViewportMeta('user-scalable=no');
+      fn();
+      nvp.setAttribute('content', 'user-scalable=yes');
+    }
+  }
+
+
+  function anythingSelected(win) {
+    var sel = win.getSelection();
+    return sel && !sel.isCollapsed;
+  }
+
+
+  API.deselect = deselect;
+
+
+  initialize();
+
+  return API;
+}
+
+
+Monocle.Selection.SELECTION_POLLING_INTERVAL = 250;

data/vendor/assets/javascripts/core/styles.js

@@ -0,0 +1,155 @@
+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], 10);
+  },
+
+
+  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"
+}

data/vendor/assets/javascripts/dimensions/columns.js

@@ -0,0 +1,218 @@
+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;
+      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; }
+
+      var scroller, x;
+      if (Monocle.Browser.env.sheafIsScroller) {
+        scroller = p.page.m.sheafDiv;
+        x = scroller.scrollLeft;
+        target.scrollIntoView();
+        offset = scroller.scrollLeft;
+      } else {
+        scroller = win;
+        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"
+  }
+}