forked from daniellmb/JavaScript-Scope-Context-Coloring
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscope-coloring.html
More file actions
148 lines (143 loc) · 5.84 KB
/
Copy pathscope-coloring.html
File metadata and controls
148 lines (143 loc) · 5.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<title>JavaScript Scope Context Coloring</title>
<meta name="description" content="A JavaScript experiment in switching between syntax highlighting and scope context coloring.">
<meta name="author" content="Daniel Lamb">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="../CodeMirror/theme/ambiance.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="wrap">
<div class="container-fluid">
<div class="page-header">
<h1>JavaScript Scope Context Coloring</h1>
</div>
<p class="lead">An experiment in switching between <strong>syntax highlighting</strong> and <strong>scope colorizing</strong> built on JSLint and CodeMirror.</p>
<span id="fork"><a href="https://github.com/daniellmb/JavaScript-Scope-Context-Coloring">Fork me on GitHub</a></span>
<div id="toggleMode" class="btn-group" data-toggle="buttons-radio">
<button type="button" data-mode="n00b" class="btn">Syntax Coloring</button>
<button type="button" data-mode="pro" class="btn active">Scope Coloring</button>
</div>
<i class="icon-question-sign" data-toggle="popover" data-trigger="hover" data-placement="top" data-title="Scope Color Legend"></i>
<form>
<div class="btn-group samples">
<button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">Code Samples<span class="caret"></span></button>
<ul class="dropdown-menu" id="samples">
<li><a href="#minimonad" id="mini">Mini Monad</a></li>
<li><a href="#fullmonad" id="full">Full Monad</a></li>
<li><a href="#level10" id="ten">10 Levels</a></li>
</ul>
</div>
<div id="editor"></div>
</form>
<div id="push"></div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Experiment by <a href="https://github.com/daniellmb">Daniel Lamb</a>.</p>
</div>
</div>
<!-- experiment dependencies -->
<script src="../CodeMirror/lib/codemirror.js"></script>
<script src="../CodeMirror/mode/javascript/javascript.js"></script>
<script src="../JSLint/jslint.js"></script>
<!-- experiment -->
<script src="../scope.js"></script>
<!-- demo page specific code (you need stuff below this line) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="demo.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script>
(function ($) {
'use strict';
//setup scope color legend popover
var legendHTML = ['<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 class="level9">Level 9</span>',
'</span>'];
$('i').popover({ html : true, content: legendHTML.join('\n') });
}(jQuery));
</script>
<!-- scope coloring samples -->
<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="level10" 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() {
return function Level8() {
console.warn('Seriously, 10 Levels!?');
};
};
};
};
};
};
};
};
}</script>
</body>
</html>