initial commit

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "JSLint"]
+	path = JSLint
+	url = https://github.com/douglascrockford/JSLint.git
+[submodule "CodeMirror"]
+	path = CodeMirror
+	url = https://github.com/marijnh/CodeMirror.git

LICENSE.txt

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2011 Daniel Lamb <daniellmb.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+#JavaScript Scope Context Coloring
+
+A JavaScript experiment in switching between syntax highlighting and scope colorizing, built on JSLint and CodeMirror and inspired by Douglas Crockford.

example/demo.css

@@ -0,0 +1,36 @@
+/* editor scope levels */
+.cm-level0 { color: #ffffff; } /* white */
+.cm-level1 { color: #aefab8; } /* green */
+.cm-level2 { color: #fafa99; } /* yellow */
+.cm-level3 { color: #a9f2ff; } /* blue */
+.cm-level4 { color: #faadba; } /* red */
+.cm-level5 { color: #c9bfff; } /* cyan */
+.cm-level6 { color: #f9b5ff; } /* magenta */
+.cm-level7 { color: #c7c7c7; } /* gray */
+.cm-level8 { color: #ffba80; } /* orange */
+
+
+/* You don't need below this line, it's just for this demo page */
+
+/* editor */
+.CodeMirror { height: auto; }
+.CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
+
+/* code samples */
+.samples { position: absolute; top: 0; right: 0; padding: 5px; }
+a { color:#00f; }
+
+/* modes */
+label { cursor: pointer; }
+
+/* scope color legend */
+.legend span { font-size: 12px; border: solid 1px #000; padding: 2px; }
+.level0 { background-color: #ffffff; }
+.level1 { background-color: #aefab8; }
+.level2 { background-color: #fafa99; }
+.level3 { background-color: #a9f2ff; }
+.level4 { background-color: #faadba; }
+.level5 { background-color: #c9bfff; }
+.level6 { background-color: #f9b5ff; }
+.level7 { background-color: #c7c7c7; }
+.level8 { background-color: #ffba80; }

example/demo.js

@@ -0,0 +1,74 @@
+/*global document, JSLINT, CodeMirror, location*/
+(function (doc, lint, cm) {
+    'use strict';
+
+    var editor,
+        editorChanged = false,
+        scopeMode = {
+            'name': 'scope',
+            'hasChanged': function () {
+                return editorChanged;
+            },
+            'getLevels': function () {
+                //check that JSLINT has been called
+                if (lint.hasOwnProperty('errors')) {
+                    editorChanged = false;
+                    return lint.color(lint.data());
+                }
+            }
+        };
+
+    //set up code editor
+    editor = cm.fromTextArea(doc.getElementById('editor'), { 'theme': 'ambiance', 'mode': scopeMode });
+
+    //lint the code in the editor
+    function lintCode() {
+        lint(editor.getValue());
+        editorChanged = true;
+    }
+
+    //lint the initial code
+    lintCode();
+
+    //lint code when it changes
+    editor.on('change', lintCode);
+
+
+    //Shouldn't need the code below this line, it's just for this demo
+
+    function loadSample(id) {
+        editor.setValue(doc.getElementById(id.substr(id.lastIndexOf('#') + 1)).innerHTML);
+    }
+
+    //load the default code sample
+    loadSample(location.hash || 'minimonad');
+
+    //support changing modes
+    function selectMode(mode) {
+        if (mode === 'pro') {
+            lintCode();
+            editor.setOption('mode', scopeMode);
+        } else {
+            editor.setOption('mode', 'javascript');
+        }
+    }
+
+    //bind mode change event handlers
+    doc.getElementById('grownup').onclick = function () {
+        selectMode(this.value);
+    };
+    doc.getElementById('n00b').onclick = function () {
+        selectMode(this.value);
+    };
+
+    //bing code sample handlers
+    doc.getElementById('mini').onclick = function () {
+        loadSample(this.href);
+    };
+    doc.getElementById('full').onclick = function () {
+        loadSample(this.href);
+    };
+    doc.getElementById('eight').onclick = function () {
+        loadSample(this.href);
+    };
+}(document, JSLINT, CodeMirror));

example/scope-coloring.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>JavaScript Scope Context Coloring</title>
+    <link rel="stylesheet" href="../CodeMirror/lib/codemirror.css">
+    <link rel="stylesheet" href="../CodeMirror/theme/ambiance.css">
+    <link rel="stylesheet" href="demo.css">
+  </head>
+  <body>
+    <h1>JavaScript Scope Context Coloring</h1>
+    <form>
+        <div class="samples">
+        <strong>Code Samples:</strong>
+        <a href="#minimonad" id="mini">Mini Monad</a>,
+        <a href="#fullmonad" id="full">Full Monad</a>,
+        <a href="#level8" id="eight">8 Levels</a>
+        </div>
+        <input type="radio" name="mode" id="n00b" value="n00b"> <label for="n00b">Syntax Coloring</label>
+        <input type="radio" name="mode" id="grownup" value="pro" checked> <label for="grownup">Scope Coloring</label>
+        <span class="legend">
+            <span class="level0">Level 0</span>
+            <span class="level1">Level 1</span>
+            <span class="level2">Level 2</span>
+            <span class="level3">Level 3</span>
+            <span class="level4">Level 4</span>
+            <span class="level5">Level 5</span>
+            <span class="level6">Level 6</span>
+            <span class="level7">Level 7</span>
+            <span class="level8">Level 8</span>
+        </span>
+        <br>
+        <textarea id="editor"></textarea>
+    </form>
+<script id="minimonad" type="text/html">function MONAD() {
+    'use strict';
+    return function unit(value) {
+        var monad = Object.create(null);
+        monad.bind = function (func) {
+            return func(value);
+        };
+        return monad;
+    };
+}</script>
+<script id="fullmonad" type="text/html">function MONAD(modifier) {
+    'use strict';
+
+    var prototype = Object.create(null);
+    prototype.is_monad = true;
+
+    function unit(value) {
+        var monad = Object.create(prototype);
+        monad.bind = function (func, args) {
+            return func.apply(
+                undefined,
+                [value].concat(Array.prototype.slice.apply(args || []))
+            );
+        };
+        if (typeof modifier === 'function') {
+            value = modifier(monad, value);
+        }
+        return monad;
+    }
+    unit.method = function (name, func) {
+        prototype[name] = func;
+        return unit;
+    };
+    unit.lift_value = function (name, func) {
+        prototype[name] = function () {
+            return this.bind(func, arguments);
+        };
+        return unit;
+    };
+    unit.lift = function (name, func) {
+        prototype[name] = function () {
+            var result = this.bind(func, arguments);
+            return result && result.is_monad === true ? result : unit(result);
+        };
+        return unit;
+    };
+    return unit;
+}</script>
+<script id="level8" type="text/html">function Level0() {
+    'use strict';
+    return function Level1() {
+        return function Level2() {
+            return function Level3() {
+                return function Level4() {
+                    return function Level5() {
+                        return function Level6() {
+                            return function Level7() {
+                                console.warn('Seriously, 8 Levels!?');
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+}</script>
+    <script src="../CodeMirror/lib/codemirror.js"></script>
+    <script src="../CodeMirror/mode/javascript/javascript.js"></script>
+    <script src="../scope.js"></script>
+    <script src="../jslint/jslint.js"></script>
+    <script src="demo.js"></script>
+  </body>
+</html>

scope.js

@@ -0,0 +1,73 @@
+/*global CodeMirror */
+CodeMirror.defineMode('scope', function (config, parserConfig) {
+    'use strict';
+
+    var levels = [], fullyParsed;
+
+    //lint the code to get the scope information
+    function getLevels() {
+        //this gets called a lot so check first
+        if (parserConfig.hasChanged()) {
+            levels = parserConfig.getLevels();
+        }
+    }
+
+    //get the level information
+    getLevels();
+
+    return {
+        startState: function () {
+            fullyParsed = false;
+
+            return {
+                line: 0,
+                index: 0
+            };
+        },
+        token: function (stream, state) {
+            var level, next;
+
+            //get the latest levels
+            getLevels();
+
+            //check for valid levels data
+            if (state.index < levels.length) {
+
+                //check stream for 'start of line'
+                if (stream.sol()) {
+                    if (!fullyParsed) {
+                        state.line += 1;
+                    }
+                }
+
+                //get the level information
+                level = levels[state.index];
+
+                //check if we need to skip ahead
+                if((level.from - 1) > stream.pos) {
+                    stream.pos += (level.from - stream.pos -1);
+                    return null;
+                }
+
+                //move stream to scope change
+                stream.pos += (level.thru - level.from);
+
+                //check if this is the last line
+                if (state.index == levels.length) {
+                    fullyParsed = true;
+                }
+                else
+                {
+                    //step forward in the list
+                    state.index += 1;
+                }
+
+                //return the CSS class to apply
+                return 'level' + level.level;
+            }
+            //handle race conditions
+            stream.skipToEnd();
+            return null;
+        }
+    };
+});