AmberRack 0.1.0

data/app/javascripts/lib/CodeMirror/demo/complete.js

@@ -0,0 +1,151 @@
+(function () {
+  // Minimal event-handling wrapper.
+  function stopEvent() {
+    if (this.preventDefault) {this.preventDefault(); this.stopPropagation();}
+    else {this.returnValue = false; this.cancelBubble = true;}
+  }
+  function addStop(event) {
+    if (!event.stop) event.stop = stopEvent;
+    return event;
+  }
+  function connect(node, type, handler) {
+    function wrapHandler(event) {handler(addStop(event || window.event));}
+    if (typeof node.addEventListener == "function")
+      node.addEventListener(type, wrapHandler, false);
+    else
+      node.attachEvent("on" + type, wrapHandler);
+  }
+
+  function forEach(arr, f) {
+    for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
+  }
+
+  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+    lineNumbers: true,
+    theme: "night",
+    onKeyEvent: function(i, e) {
+      // Hook into ctrl-space
+      if (e.keyCode == 32 && (e.ctrlKey || e.metaKey) && !e.altKey) {
+        e.stop();
+        return startComplete();
+      }
+    }
+  });
+
+  function startComplete() {
+    // We want a single cursor position.
+    if (editor.somethingSelected()) return;
+    // Find the token at the cursor
+    var cur = editor.getCursor(false), token = editor.getTokenAt(cur), tprop = token;
+    // If it's not a 'word-style' token, ignore the token.
+    if (!/^[\w$_]*$/.test(token.string)) {
+      token = tprop = {start: cur.ch, end: cur.ch, string: "", state: token.state,
+                       className: token.string == "." ? "js-property" : null};
+    }
+    // If it is a property, find out what it is a property of.
+    while (tprop.className == "js-property") {
+      tprop = editor.getTokenAt({line: cur.line, ch: tprop.start});
+      if (tprop.string != ".") return;
+      tprop = editor.getTokenAt({line: cur.line, ch: tprop.start});
+      if (!context) var context = [];
+      context.push(tprop);
+    }
+    var completions = getCompletions(token, context);
+    if (!completions.length) return;
+    function insert(str) {
+      editor.replaceRange(str, {line: cur.line, ch: token.start}, {line: cur.line, ch: token.end});
+    }
+    // When there is only one completion, use it directly.
+    if (completions.length == 1) {insert(completions[0]); return true;}
+
+    // Build the select widget
+    var complete = document.createElement("div");
+    complete.className = "completions";
+    var sel = complete.appendChild(document.createElement("select"));
+    sel.multiple = true;
+    for (var i = 0; i < completions.length; ++i) {
+      var opt = sel.appendChild(document.createElement("option"));
+      opt.appendChild(document.createTextNode(completions[i]));
+    }
+    sel.firstChild.selected = true;
+    sel.size = Math.min(10, completions.length);
+    var pos = editor.cursorCoords();
+    complete.style.left = pos.x + "px";
+    complete.style.top = pos.yBot + "px";
+    document.body.appendChild(complete);
+    // Hack to hide the scrollbar.
+    if (completions.length <= 10)
+      complete.style.width = (sel.clientWidth - 1) + "px";
+
+    var done = false;
+    function close() {
+      if (done) return;
+      done = true;
+      complete.parentNode.removeChild(complete);
+    }
+    function pick() {
+      insert(sel.options[sel.selectedIndex].value);
+      close();
+      setTimeout(function(){editor.focus();}, 50);
+    }
+    connect(sel, "blur", close);
+    connect(sel, "keydown", function(event) {
+      var code = event.keyCode;
+      // Enter and space
+      if (code == 13 || code == 32) {event.stop(); pick();}
+      // Escape
+      else if (code == 27) {event.stop(); close(); editor.focus();}
+      else if (code != 38 && code != 40) {close(); editor.focus(); setTimeout(startComplete, 50);}
+    });
+    connect(sel, "dblclick", pick);
+
+    sel.focus();
+    // Opera sometimes ignores focusing a freshly created node
+    if (window.opera) setTimeout(function(){if (!done) sel.focus();}, 100);
+    return true;
+  }
+
+  var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
+                     "toUpperCase toLowerCase split concat match replace search").split(" ");
+  var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
+                    "lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
+  var funcProps = "prototype apply call bind".split(" ");
+  var keywords = ("break case catch continue debugger default delete do else false finally for function " +
+                  "if in instanceof new null return switch throw true try typeof var void while with").split(" ");
+
+  function getCompletions(token, context) {
+    var found = [], start = token.string;
+    function maybeAdd(str) {
+      if (str.indexOf(start) == 0) found.push(str);
+    }
+    function gatherCompletions(obj) {
+      if (typeof obj == "string") forEach(stringProps, maybeAdd);
+      else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
+      else if (obj instanceof Function) forEach(funcProps, maybeAdd);
+      for (var name in obj) maybeAdd(name);
+    }
+
+    if (context) {
+      // If this is a property, see if it belongs to some object we can
+      // find in the current environment.
+      var obj = context.pop(), base;
+      if (obj.className == "js-variable")
+        base = window[obj.string];
+      else if (obj.className == "js-string")
+        base = "";
+      else if (obj.className == "js-atom")
+        base = 1;
+      while (base != null && context.length)
+        base = base[context.pop().string];
+      if (base != null) gatherCompletions(base);
+    }
+    else {
+      // If not, just look in the window object and any local scope
+      // (reading into JS mode internals to get at the local variables)
+      for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
+      gatherCompletions(window);
+      forEach(keywords, maybeAdd);
+    }
+    return found;
+  }
+})();

data/app/javascripts/lib/CodeMirror/demo/fullscreen.html

@@ -0,0 +1,158 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Full Screen Editing</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <link rel="stylesheet" href="../theme/default.css">
+    <link rel="stylesheet" href="../theme/night.css">
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../css/docs.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+
+    <style type="text/css">
+        .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+        .fullscreen {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 9999;
+            margin: 0;
+            padding: 0;
+            border: 0px solid #BBBBBB;
+            opacity: 1;
+        }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: Full Screen Editing</h1>
+
+    <form><textarea id="code" name="code" rows="5">
+  <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
+  <dd>Whether, when indenting, the first N*8 spaces should be
+  replaced by N tabs. Default is false.</dd>
+
+  <dt id="option_tabMode"><code>tabMode (string)</code></dt>
+  <dd>Determines what happens when the user presses the tab key.
+  Must be one of the following:
+    <dl>
+      <dt><code>"classic" (the default)</code></dt>
+      <dd>When nothing is selected, insert a tab. Otherwise,
+      behave like the <code>"shift"</code> mode. (When shift is
+      held, this behaves like the <code>"indent"</code> mode.)</dd>
+      <dt><code>"shift"</code></dt>
+      <dd>Indent all selected lines by
+      one <a href="#option_indentUnit"><code>indentUnit</code></a>.
+      If shift was held while pressing tab, un-indent all selected
+      lines one unit.</dd>
+      <dt><code>"indent"</code></dt>
+      <dd>Indent the line the 'correctly', based on its syntactic
+      context. Only works if the
+      mode <a href="#indent">supports</a> it.</dd>
+      <dt><code>"default"</code></dt>
+      <dd>Do not capture tab presses, let the browser apply its
+      default behaviour (which usually means it skips to the next
+      control).</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
+  <dd>Determines whether and how new lines are indented when the
+  enter key is pressed. The following modes are supported:
+    <dl>
+      <dt><code>"indent" (the default)</code></dt>
+      <dd>Use the mode's indentation rules to give the new line
+      the correct indentation.</dd>
+      <dt><code>"keep"</code></dt>
+      <dd>Indent the line the same as the previous line.</dd>
+      <dt><code>"flat"</code></dt>
+      <dd>Do not indent the new line.</dd>
+    </dl></dd>
+
+</textarea></form>
+ <script>
+
+(function () {
+
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        theme: "night",
+        onKeyEvent: function(i, e) {
+          // Hook into F11
+          if ((e.keyCode == 122 || e.keyCode == 27) && e.type == 'keydown') {
+            e.stop();
+            return toggleFullscreenEditing();
+          }
+        }
+    });
+
+    function toggleFullscreenEditing()
+    {
+        var editorDiv = $('.CodeMirror-scroll');
+        if (!editorDiv.hasClass('fullscreen')) {
+            toggleFullscreenEditing.beforeFullscreen = { height: editorDiv.height(), width: editorDiv.width() }
+            editorDiv.addClass('fullscreen');
+            editorDiv.height('100%');
+            editorDiv.width('100%');
+            editor.refresh();
+        }
+        else {
+            editorDiv.removeClass('fullscreen');
+            editorDiv.height(toggleFullscreenEditing.beforeFullscreen.height);
+            editorDiv.width(toggleFullscreenEditing.beforeFullscreen.width);
+            editor.refresh();
+        }
+    }
+
+})();
+</script>
+
+    <p>Press <strong>F11</strong> (or <strong>ESC</strong> in Safari on Mac OS X) when cursor is in the editor to toggle full screen editing.</p>
+
+    <p><strong>Note:</strong> Does not currently work correctly in IE
+    6 and 7, where setting the height of something
+    to <code>100%</code> doesn't make it full-screen.</p>
+
+  </body>
+</html>

data/app/javascripts/lib/CodeMirror/demo/marker.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Breakpoint Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <link rel="stylesheet" href="../theme/default.css">
+    <script src="../mode/javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../css/docs.css">
+
+    <style type="text/css">
+      .CodeMirror-gutter {
+        width: 3em;
+        background: white;
+      }
+      .CodeMirror {
+        border: 1px solid #aaa;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: Breakpoint demo</h1>
+
+    <form><textarea id="code" name="code">
+CodeMirror.fromTextArea(document.getElementById("code"), {
+  lineNumbers: true,
+  onGutterClick: function(cm, n) {
+    var info = cm.lineInfo(n);
+    if (info.markerText)
+      cm.clearMarker(n);
+    else
+      cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%");
+  }
+});
+</textarea></form>
+
+<p>Click the line-number gutter to add or remove 'breakpoints'.</p>
+
+    <script>
+      CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+        onGutterClick: function(cm, n) {
+          var info = cm.lineInfo(n);
+          if (info.markerText)
+            cm.clearMarker(n);
+          else
+            cm.setMarker(n, "<span style=\"color: #900\">●</span> %N%");
+        }
+      });
+    </script>
+
+  </body>
+</html>

data/app/javascripts/lib/CodeMirror/demo/mustache.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Overlay Parser Demo</title>
+    <link rel="stylesheet" href="../lib/codemirror.css">
+    <script src="../lib/codemirror.js"></script>
+    <script src="../lib/overlay.js"></script>
+    <link rel="stylesheet" href="../theme/default.css">
+    <script src="../mode/xml/xml.js"></script>
+    <link rel="stylesheet" href="../css/docs.css">
+
+    <style type="text/css">
+      .CodeMirror {border: 1px solid black;}
+      .mustache {color: #0ca;}
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: Overlay Parser Demo</h1>
+
+    <form><textarea id="code" name="code">
+<html>
+  <body>
+    <h1>{{title}}</h1>
+    <p>These are links to {{things}}:</p>
+    <ul>{{#links}}
+      <li><a href="{{url}}">{{text}}</a></li>
+    {{/links}}</ul>
+  </body>
+</html>
+</textarea></form>
+
+    <script>
+CodeMirror.defineMode("mustache", function(config, parserConfig) {
+  var mustacheOverlay = {
+    token: function(stream, state) {
+      if (stream.match("{{")) {
+        while ((ch = stream.next()) != null)
+          if (ch == "}" && stream.next() == "}") break;
+        return "mustache";
+      }
+      while (stream.next() != null && !stream.match("{{", false)) {}
+      return null;
+    }
+  };
+  return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
+});
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
+</script>
+
+    <p>Demonstration of a mode that parses HTML, highlighting
+    the <a href="http://mustache.github.com/">Mustache</a> templating
+    directives inside of it by using the code
+    in <a href="../lib/overlay.js"><code>overlay.js</code></a>. View
+    source to see the 15 lines of code needed to accomplish this.</p>
+
+  </body>
+</html>

data/app/javascripts/lib/CodeMirror/demo/preview.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: HTML5 preview</title>
+    <meta charset=utf-8>
+    <script src=../lib/codemirror.js></script>
+    <script src=../mode/xml/xml.js></script>
+    <script src=../mode/javascript/javascript.js></script>
+    <script src=../mode/css/css.js></script>
+    <script src=../mode/htmlmixed/htmlmixed.js></script>
+    <link rel=stylesheet href=../lib/codemirror.css>
+    <link rel=stylesheet href=../theme/default.css>
+    <link rel=stylesheet href=../css/docs.css>
+    <style type=text/css>
+      .CodeMirror {
+        float: left;
+        width: 50%;
+        border: 1px solid black;
+      }
+      iframe {
+        width: 49%;
+        float: left;
+        height: 300px;
+        border: 1px solid black;
+        border-left: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: HTML5 preview</h1>
+    <textarea id=code name=code>
+<!doctype html>
+<html>
+  <head>
+    <title>HTML5 canvas demo</title>
+    <meta charset=utf-8>
+  </head>
+  <body>
+    <canvas id=tutorial width=250 height=250></canvas>
+    <script>
+      var canvas = document.getElementById('tutorial');
+      var context = canvas.getContext('2d');
+
+      context.fillStyle = 'rgb(250,0,0)';
+      context.fillRect(10, 10, 55, 50);
+
+      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
+      context.fillRect(30, 30, 55, 50);
+    </script>
+  </body>
+</html>
+</textarea>
+    <iframe id=preview></iframe>
+    <script>
+      var delay;
+      // Initialize CodeMirror editor with a nice html5 canvas demo.
+      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+        mode: 'text/html',
+        tabMode: 'indent',
+        onChange: function() {
+          clearTimeout(delay);
+          delay = setTimeout(updatePreview, 300);
+        }
+      });
+      
+      function updatePreview() {
+        var preview = document.getElementById('preview').contentDocument;
+        preview.open();
+        preview.write(editor.getValue());
+        preview.close();
+      }
+      setTimeout(updatePreview, 300);
+    </script>
+  </body>
+</html>