monocle-rails 0.0.1

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

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

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

@@ -0,0 +1,194 @@
+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, indexOrOptions, orOptions) {
+    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, indexOrOptions, orOptions) {
+    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;
+}

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

@@ -0,0 +1,317 @@
+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.
+  //
+  // Returns a sheet index value that can be used with updatePageStyles
+  // and removePageStyles.
+  //
+  function addPageStyles(styleRules) {
+    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;
+    });
+  }
+
+
+  // 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) {
+    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
+          );
+        }
+      }
+    });
+  }
+
+
+  // API for removing a page stylesheet from all components. Takes a sheet
+  // index value obtained via addPageStyles.
+  //
+  function removePageStyles(sheetIndex) {
+    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);
+      }
+    });
+  }
+
+
+  // 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) {
+    dispatchChanging();
+    var result = callback();
+    p.reader.recalculateDimensions(true, dispatchChange);
+    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) {
+    p.fontScale = scale;
+    dispatchChanging();
+    var i = 0, cmpt = null;
+    while (cmpt = p.reader.dom.find('component', i++)) {
+      adjustFontScaleForDoc(cmpt.contentDocument, scale);
+    }
+    p.reader.recalculateDimensions(true, dispatchChange);
+  }
+
+
+  function adjustFontScaleForDoc(doc, scale) {
+    if (scale) {
+      if (!doc.body.pfsSwept) {
+        sweepElements(doc);
+      }
+      var evtData = { document: doc, scale: parseFloat(scale) };
+      p.reader.dispatchEvent('monocle:fontscaling', evtData);
+      scale = evtData.scale;
+
+      // 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.
+      walkTree(doc.body, function (elem) {
+        if (typeof elem.pfsOriginal == 'undefined') { return; }
+        var newFs = fsProperty(Math.round(elem.pfsOriginal*scale));
+        if (elem.pfsApplied) {
+          replaceFontSizeInStyle(elem, newFs);
+        } else {
+          elem.style.cssText += newFs;
+        }
+        elem.pfsApplied = scale;
+      });
+
+      p.reader.dispatchEvent('monocle:fontscale', evtData);
+    } else if (doc.body.pfsApplied) {
+      var evtData = { document: doc, scale: null };
+      p.reader.dispatchEvent('monocle:fontscaling', evtData);
+
+      // Iterate over each element, removing proportional font-sizing flag
+      // and property from cssText.
+      walkTree(doc.body, function (elem) {
+        if (typeof elem.pfsOriginal == 'undefined') { return; }
+        if (elem.pfsApplied) {
+          var oprop = elem.pfsOriginalProp;
+          var opropDec = oprop ? 'font-size: '+oprop+' ! important;' : '';
+          replaceFontSizeInStyle(elem, opropDec);
+          elem.pfsApplied = null;
+        }
+      });
+
+      // Establish new baselines in case classes have changed.
+      sweepElements(doc);
+
+      p.reader.dispatchEvent('monocle:fontscale', evtData);
+    }
+  }
+
+
+  function sweepElements(doc) {
+    // Iterate over each element, looking at its font size and storing
+    // the original value against the element.
+    walkTree(doc.body, function (elem) {
+      if (elem.getCTM) { return; } // Ignore SVG elements
+      var currStyle = doc.defaultView.getComputedStyle(elem, null);
+      var fs = parseFloat(currStyle.getPropertyValue('font-size'));
+      elem.pfsOriginal = fs;
+      elem.pfsOriginalProp = elem.style.fontSize;
+    });
+    doc.body.pfsSwept = true;
+  }
+
+
+  function walkTree(node, fn) {
+    if (node.nodeType != 1) { return; }
+    fn(node);
+    node = node.firstChild;
+    while (node) {
+      walkTree(node, fn);
+      node = node.nextSibling;
+    }
+  }
+
+
+  function fsProperty(fsInPixels) {
+    return 'font-size: '+fsInPixels+'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;" +
+    "-ms-touch-action: none;" +
+    "-ms-content-zooming: none;" +
+    "-ms-content-zoom-chaining: chained;" +
+    "-ms-content-zoom-limit-min: 100%;" +
+    "-ms-content-zoom-limit-max: 100%;" +
+    "-ms-touch-select: 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;" +
+  "}",
+  "a:not([href]) { color: inherit; }"
+]