-
Notifications
You must be signed in to change notification settings - Fork 63
/
compress.html
167 lines (150 loc) · 9.42 KB
/
compress.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CodeMirror: Compression Helper</title>
<link rel="stylesheet" type="text/css" href="css/docs.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
<pre class="grey">
<img src="css/baboon.png" class="logo" alt="logo"/>/* Script compression
helper */
</pre>
<p>The CodeMirror scripts, as distributed, are many, and full of
comments. To optimize page loading, it is recommended to
concatenate the scripts loaded in the CodeMirror frame, and
compress them. This page may be useful if you intend to do this:
it provides an interface to two different minifiers, <a
href="http://github.com/mishoo/UglifyJS/">UglifyJS</a> and
Google's <a href="http://closure-compiler.appspot.com/">Closure
compiler</a>, allowing you to easily feed them CodeMirror
scripts.</p>
<p>You will have to compress <code>codemirror.js</code>
separately, since that will be loaded into the top-level page from
which you use CodeMirror. Inside the frame, the
<code>parserfile</code> and <code>basefiles</code> options control
which files are loaded. If you combine the parser(s) you need with
the basefiles, you can set <code>basefiles</code> to point at your
compressed file, and leave <code>parserfiles</code> at
<code>[]</code>.</p>
<p>For example, you have a page that uses CodeMirror to edit some
JavaScript code. You could save a minimized version of
<code>codemirror.js</code> as <code>codemirror_min.js</code>, and
include that (with a <code><script></code> tag) in your page.
Next, you compress all the files under "In-frame base code", plus
<code>tokenizejavascript.js</code> and
<code>parsejavascript.js</code> into
<code>codemirror_base.js</code>, and load the editor like
this:</p>
<pre class="code">CodeMirror.fromTextArea("mytextarea", {
basefiles: ["js/codemirror_base.js"],
lineNumbers: true
});</pre>
<p>Clicking the "Compress with UglifyJS" button will download the
compressed file. If you use Closure, that doesn't support direct
downloads, so the button will take you to a file containing the
compressed code. Copy-paste this into your script file. ("Save as"
for that page is broken on some browsers, so be careful).</p>
<form id="form" action="http://marijnhaverbeke.nl/uglifyjs" method="post">
<input type="hidden" id="download" name="download" value=""/>
<p>Version: <select id="version" onchange="setVersion(this);" class="field" style="padding: 1px">
<option value="http://codemirror.net/1/" selected>Development head</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.94;f=">v0.94</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.93;f=">v0.93</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.92;f=">v0.92</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.91;f=">v0.91</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.9;f=">v0.9</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.8;f=">v0.8</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.7;f=">v0.7</option>
<option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.67;f=">v0.67</option>
</select></p>
<p><input type="hidden" value="compiled_code" name="output_info" id="output"/>
<select multiple="multiple" name="code_url" style="width: 40em;" class="field" id="files">
<optgroup label="CodeMirror Library">
<option value="http://codemirror.net/1/js/codemirror.js">codemirror.js</option>
</optgroup>
<optgroup label="In-frame base files">
<option value="http://codemirror.net/1/js/util.js">util.js</option>
<option value="http://codemirror.net/1/js/stringstream.js">stringstream.js</option>
<option value="http://codemirror.net/1/js/select.js">select.js</option>
<option value="http://codemirror.net/1/js/undo.js">undo.js</option>
<option value="http://codemirror.net/1/js/editor.js">editor.js</option>
<option value="http://codemirror.net/1/js/tokenize.js">tokenize.js</option>
</optgroup>
<optgroup label="Parsers">
<option value="http://codemirror.net/1/js/tokenizejavascript.js">tokenizejavascript.js</option>
<option value="http://codemirror.net/1/js/parsejavascript.js">parsejavascript.js</option>
<option value="http://codemirror.net/1/js/parsexml.js">parsexml.js</option>
<option value="http://codemirror.net/1/js/parsecss.js">parsecss.js</option>
<option value="http://codemirror.net/1/js/parsesparql.js">parsesparql.js</option>
<option value="http://codemirror.net/1/js/parsehtmlmixed.js">parsehtmlmixed.js</option>
<option value="http://codemirror.net/1/js/parsedummy.js">parsedummy.js</option>
</optgroup>
<optgroup label="Contributed parsers">
<option value="http://codemirror.net/1/contrib/lua/js/parselua.js">parselua.js</option>
<option value="http://codemirror.net/1/contrib/python/js/parsepython.js">parsepython.js</option>
<option value="http://codemirror.net/1/contrib/php/js/tokenizephp.js">tokenizephp.js</option>
<option value="http://codemirror.net/1/contrib/php/js/parsephp.js">parsephp.js</option>
<option value="http://codemirror.net/1/contrib/php/js/parsephphtmlmixed.js">parsephphtmlmixed.js</option>
<option value="http://codemirror.net/1/contrib/csharp/js/tokenizecsharp.js">tokenizecsharp.js</option>
<option value="http://codemirror.net/1/contrib/csharp/js/parsecsharp.js">parsecsharp.js</option>
<option value="http://codemirror.net/1/contrib/sql/js/parsesql.js">parsesql.js</option>
<option value="http://codemirror.net/1/contrib/plsql/js/parseplsql.js">parseplsql.js</option>
<option value="http://codemirror.net/1/contrib/scheme/js/tokenizescheme.js">tokenizescheme.js</option>
<option value="http://codemirror.net/1/contrib/scheme/js/parsescheme.js">parsescheme.js</option>
<option value="http://codemirror.net/1/contrib/ometa/js/tokenizeometa.js">tokenizeometa.js</option>
<option value="http://codemirror.net/1/contrib/ometa/js/parseometa.js">parseometa.js</option>
<option value="http://codemirror.net/1/contrib/xquery/js/tokenizexquery.js">tokenizexquery.js</option>
<option value="http://codemirror.net/1/contrib/xquery/js/parsexquery.js">parsexquery.js</option>
<option value="http://svn.exoplatform.org/projects/gwt/trunk/exo-gwtframework-editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/tokenizegroovy.js">tokenizegroovy.js</option>
<option value="http://svn.exoplatform.org/projects/gwt/trunk/exo-gwtframework-editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/parsegroovy.js">parsegroovy.js</option>
</optgroup>
</select></p>
<p>
<button type="submit" onclick="uglify();">Compress</button> with <a href="http://github.com/mishoo/UglifyJS/">UglifyJS</a><br/>
<button type="submit" onclick="google();">Compress</button> with <a href="http://closure-compiler.appspot.com/home">Google Closure</a><br/>
<button type="submit" onclick="verify();">Check</button> for errors
</p>
<p>Custom code to add to the compressed file:<textarea name="js_code" style="width: 100%; height: 15em;" class="field"></textarea></p>
</form>
<script type="text/javascript" src="css/font.js"></script>
<script type="text/javascript">
function $(name) {return document.getElementById(name);}
function setVersion(ver) {
var urlprefix = ver.options[ver.selectedIndex].value;
var select = $("files"), m;
for (var optgr = select.firstChild; optgr; optgr = optgr.nextSibling)
for (var opt = optgr.firstChild; opt; opt = opt.nextSibling) {
if (opt.nodeName != "OPTION")
continue;
else if (m = opt.value.match(/^http:\/\/codemirror.net\/1\/(.*)$/))
opt.value = urlprefix + m[1];
else if (m = opt.value.match(/http:\/\/marijnhaverbeke.nl\/git\/codemirror\?a=blob_plain;hb=[^;]+;f=(.*)$/))
opt.value = urlprefix + m[1];
}
}
var download = $("download");
function verify() {
google();
$("output").value="warnings";
}
function google() {
$("output").value="compiled_code";
if (download.parentNode) download.parentNode.removeChild(download);
$("form").action = "http://closure-compiler.appspot.com/compile";
}
function uglify() {
var names = [], files = $("files");
for (var i = 0; i < files.options.length; i++) {
var opt = files.options[i];
if (opt.selected)
names.push(opt.text.match(/^(.*).js$/)[1]);
}
download.value = (names.join("-") || "codemirror") + ".js";
if (!download.parentNode) $("form").appendChild(download);
$("form").action = "http://marijnhaverbeke.nl/uglifyjs";
}
</script>
</body>
</html>