-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
130 lines (120 loc) · 4.97 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>BetterExamples.js</title>
<style>
body, html { font: 14px arial, verdana; margin: 0px; padding: 0px; color: #222233; background: #cc1919; background: #fbfbfb; }
h1, h2, h3, h4 { color: #cc1919; }
a { text-decoration: none; border: none; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.source { width: 100%; display: inline-block; background: #fafafa; padding: 10px; }
.inline { display: inline; margin: 0px; }
.header { width: 800px; margin: 20px auto; padding: 20px; }
.header a { display: block-inline; padding: 10px; }
.container { width: 800px; margin: 20px auto; background: #fff; padding: 20px; box-shadow: 0px 0px 5px #777; }
.betterExample { overflow: auto; }
.input, .output { float: left; width: 50%; position: relative; padding: 0px; margin: 0px; font-family: monospace; overflow: visible; }
.input *, .output * { font-size: 14px; }
.output { padding-left: 10px; }
</style>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/esprima.js"></script>
<script src="js/betterexamples.js"></script>
<script src="js/betterexamples.editor.codemirror.js"></script>
<!-- Codemirror -->
<link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
<script src="js/codemirror/lib/codemirror.js"></script>
<script src="js/codemirror/lib/util/continuecomment.js"></script>
<script src="js/codemirror/mode/javascript/javascript.js"></script>
<script>
$(function() {
example1 = new BetterExample("#input1", "#output1", {id:"input1",editor:'codemirror'});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-258109-12']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="header">Projects
<a href='http://willemmulder.github.com/Presenteer.js/'>Presenteer.js</a>
<a href='http://willemmulder.github.com/BetterExamples.js/'>BetterExamples.js</a>
<a href='http://willemmulder.github.com/FilteredPaste.js/'>FilteredPaste.js</a>
</div>
<div class="container">
<h1>BetterExamples.js</h1>
<p class='source'>
Source code at <a href="https://github.com/willemmulder/BetterExamples.js">https://github.com/willemmulder/BetterExamples.js</a>
</p>
<h2>What does it do?</h2>
<p>
It makes live Javascript examples a great experience! Click the button below or press <code>Ctrl+R</code> or <code>F9</code> to see how it works.
</p>
<p>
<div class='betterExample'>
<pre id="input1" class="input">
var a = "SomeString";
alert(a);
var b = 42;
alert(b);
var c = a + b;
alert(c);
nonExistent();</pre>
<div id="output1" class="output"></div>
</div>
</p>
<p>
<button onclick="BetterExamples.getInstance('input1').run();">Run and show BetterExamples.js in action</button> or press <code>Ctrl+R</code> or <code>F9</code>
<span style='float: right;'>
Or <button onclick="BetterExamples.getInstance('input1').debug();">Step-debug</button> the code (not working in Opera)
</span>
</p>
<h2>Why do we need it?</h2>
<p>
Because it shows <strong>both</strong> logging and errors, right at the place <strong>where they are generated</strong>, while <strong>not interrupting the UI</strong>. We can't do that yet with alerts or console logging.
</p>
<p>
In fact, the above example would look like this in a non-BetterExample world:
</p>
<textarea style='width:100%; height: 130px;'>
var a = "SomeString";
alert(a);
var b = 42;
alert(b);
var c = a + b;
alert(c);
invalidFunction();
</textarea>
<button onclick="eval($(this).prev().val());">Run this code</button>
<p>
Not a very good experience. In the first place, there's the popups which require user action, are only displayed one at the time, and are lacking a reference to the code that generated it. In the second place there is no proper information about errors. BetterExamples.js aims to fix that!
</p>
<h2>How do I make it work?</h2>
<p>
First, you need two DOM containers next to each other. The first contains your code and is preferably a <pre> element, so it will show your code correctly even if Javascript is not working. The second element (a div will do) will contain the log information.
</p>
<pre> <pre class='input' id='input1'>somecode</pre> <div class='output' id='output1'/></pre>
<p>
Second, you load jQuery, Esprima and BetterExamples.js and run an example by doing
</p>
<pre> $(function() {
example = new BetterExample("#input1", "#output1");
example.run();
});</pre>
<p>
That's it. Hope you like it!
</p>
</div>
</body>
</html>