Skip to content

Commit 2ba0671

Browse files
xemxem
committed
491
1 parent b8bbb7f commit 2ba0671

File tree

2 files changed

+3
-223
lines changed

2 files changed

+3
-223
lines changed

‎README.md

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,5 @@
11
Codegolf IDE
22
===
33

4-
A Web editor dedicated to HTML/JS code-golfing
5-
6-
http://codegolf.github.io/codegolfIDE
7-
8-
*Featuring:*
9-
10-
- A code editor with CodeMirror, on the left.
11-
- A real time preview, on the right.
12-
- A character count, in the title
13-
- Dev tools, hidden under the checkbox on the bottom:
14-
- A custom console.
15-
- A button to save current code in localStorage.
16-
- A button to load previous code from localStorage.
17-
- A button to export (download) your code as index.html.
18-
- A button to share current code with an URL.
19-
- A button to minify current JS code using Closure Compiler.
20-
- A button to pack current JS code using RegPack.
21-
- A button to minify AND regpack current JS code.
22-
- Basic RegPack configuration (gain/length/copies/mode).
23-
24-
*NB:*
25-
26-
- The custom console responds to console.log() and console.clear(). It is cleared before each refresh of the preview.
27-
- "Current JS code" is extracted from the first <script> tag present in the source code.
28-
- Closure Compiler is called with the parameters "simple optimizations" and "ES6 code".
29-
- Closure Compiler's output is cleaned (line breaks and trailing semicolon are removed).
30-
- Minified and/or packed code is logged in the console.
31-
4+
A golfed Web editor dedicated to HTML/JS code-golfing,
5+
including codeMirror for better syntax highlight.

‎index.html

Lines changed: 1 addition & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -1,195 +1 @@
1-
<!doctype html>
2-
<meta charset=utf-8>
3-
<title>Codegolf IDE</title>
4-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.css">
5-
<style>
6-
*{margin:0;padding:0;border:0;box-sizing:border-box;vertical-align:middle}
7-
html,body{height:100%;font:12px arial}
8-
#code,.CodeMirror,#iframe{height:100%;float:left;transition:.5s}
9-
#code,.CodeMirror{width:40%}
10-
#iframe{border-left:1px solid;width:60%}
11-
#toggle{position:fixed;bottom:0;left:40%;transform:translateX(-50%);z-index:50;transition:.5s}
12-
#toggle:checked{bottom:170px;transform:translateX(-50%) translateY(50%)}
13-
#menu{position:fixed;bottom:-170px;height:170px;width:100%;border-top:1px solid;z-index:2;transition:.5s}
14-
#toggle:checked~#menu{bottom:0}
15-
#toggle:checked~.CodeMirror,#toggle:checked~#iframe{height:calc(100% - 170px);bottom:0}
16-
#myconsole{float:right;height:170px;width:calc(100% - 120px);border-left:1px solid;padding:5px;-moz-control-character-visibility:visible;resize:none}
17-
button,a{height:25px;line-height:25px;float:left;border:1px solid;margin:5px 0 0 5px;width:110px;cursor:pointer;text-align:center;color:#000;background:#eee;text-decoration:none}
18-
button:active,a.active{background:#aaa}
19-
button.half,a.half{width:53px}
20-
input[type=text]{width:16px;height:17px;line-height:15px;font-size:12px;border:1px solid;margin:5px 2px 5px 4px;text-align:center}
21-
b{display:block;float:left;margin:8px 5px 0}
22-
</style>
23-
<input type=checkbox id=toggle title="Toggle dev tools" accesskey=s>
24-
<textarea id=code>&lt;body id=b>
25-
&lt;style>*{color:blue}&lt;/style>
26-
Hello World!
27-
&lt;script>console.log("ok")&lt;/script>
28-
&lt;/body></textarea>
29-
<iframe id=iframe></iframe>
30-
<div id=menu>
31-
<textarea id=myconsole readonly spellcheck=off></textarea>
32-
<button id=save class=half>Save</button>
33-
<button id=load class=half>Load</button>
34-
<a download=index.html id=download class=half>Export</a>
35-
<button id=share class=half>Share</button>
36-
<button id=minify class=half>Minify</button>
37-
<button id=pack class=half>Pack</button>
38-
<button id=minpack>Minify + pack</button>
39-
<b>RegPack options:</b>
40-
<input id=gain type=text value=1 title=gain>g
41-
<input id=length type=text value=0 title=length>l
42-
<input id=copies type=text value=0 title=copies>c
43-
<input id=mode type=checkbox checked title="longest string first">⇅
44-
</div>
45-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.js"></script>
46-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/mode/xml/xml.js"></script>
47-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/mode/javascript/javascript.js"></script>
48-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/mode/css/css.js"></script>
49-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/mode/htmlmixed/htmlmixed.js"></script>
50-
<script src="http://siorki.github.io/contextDescriptor_browser.js"></script>
51-
<script src="http://siorki.github.io/packerData.js"></script>
52-
<script src="http://siorki.github.io/shapeShifter.js"></script>
53-
<script src="http://siorki.github.io/regPack.js"></script>
54-
<script>
55-
56-
// Custom_console
57-
custom_console="<script>console.old_log=console.log;console.log=function(text){top.myconsole.innerHTML+=text+'\\n';top.myconsole.scrollTop=1e8;console.old_log(text)};console.old_clear=console.clear;console.clear=function(){ top.myconsole.innerHTML='';console.old_clear()}<\/script>";
58-
59-
console.old_log=console.log;
60-
console.log=function(text){
61-
top.myconsole.innerHTML+=text+'\n';
62-
top.myconsole.scrollTop=1e8;
63-
console.old_log(text);
64-
}
65-
66-
console.old_clear=console.clear;
67-
console.clear=function(){
68-
top.myconsole.innerHTML='';
69-
console.old_clear();
70-
}
71-
72-
// Count chars
73-
count_chars=function(b,a,c,d){a=[];for(c=0;c<b.length;c++)54==(b[d="charCodeAt"](c)>>10)?(a.push(1024*(b[d](c)-55296)+b[d](c+1)+9216),c++):a.push(b[d](c));return a.length}
74-
75-
// Count UTF-8 bytes
76-
count_bytes=function(b,a,c,d,n){a=[];for(c=0;c<b.length;c++)128>b[d="charCodeAt"](c)?a.push(b[d](c)):(n=b[c],55296==(b[d](c)&64512)&&(n=b.substr(c,2),c++),encodeURI(n).replace(/\w+/g,function(b){a.push(parseInt(b,16))}));return a.length}
77-
78-
79-
// Read hash
80-
if(location.hash){
81-
code.value=decodeURIComponent(location.hash.slice(1));
82-
location.hash="";
83-
}
84-
85-
// Use CodeMirror
86-
editor=CodeMirror.fromTextArea(code,{lineNumbers:true,lineWrapping:true,mode:"htmlmixed"});
87-
input=editor.getValue();
88-
89-
// Update iframe
90-
iframe.srcdoc=custom_console+editor.getValue();
91-
92-
// Update download link
93-
download.href="data:text/html,"+encodeURIComponent(editor.getValue());
94-
95-
// Update count
96-
document.title=count_chars(input)+" chars / "+count_bytes(input)+" bytes - Codegolf IDE";
97-
98-
// After typing code, clear console and update iframe and export link
99-
editor.on("keyup",function(){
100-
console.clear();
101-
input=editor.getValue();
102-
iframe.srcdoc=custom_console+editor.getValue();
103-
download.href="data:text/html,"+encodeURIComponent(input);
104-
document.title=count_chars(input)+" chars / "+count_bytes(input)+" bytes - Codegolf IDE";
105-
});
106-
107-
// Save
108-
save.onclick=function(){
109-
localStorage["code"]=editor.getValue();
110-
console.log("Code saved in localStorage");
111-
}
112-
113-
// Load
114-
load.onclick=function(){
115-
console.clear();
116-
editor.setValue(localStorage["code"]);
117-
input=editor.getValue();
118-
iframe.srcdoc=custom_console+editor.getValue();
119-
download.href="data:text/html,"+encodeURIComponent(input);
120-
document.title=input.length+" chars - Codegolf IDE";
121-
console.log("Code loaded from localStorage");
122-
}
123-
124-
// Share
125-
share.onclick=function(){
126-
myconsole.innerHTML="http://codegolf.github.io/codegolfIDE/#"+encodeURIComponent(editor.getValue());
127-
}
128-
129-
// Minify
130-
minify.onclick=function(){
131-
console.clear();
132-
input=/<script>([^]*?)<\/script>/gm.exec(editor.getValue())[1];
133-
xhr=new XMLHttpRequest();
134-
xhr.open("POST", "https://closure-compiler.appspot.com/compile", true);
135-
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
136-
xhr.send("language=ECMASCRIPT6&compilation_level=ADVANCED_OPTIMIZATIONS&output_info=compiled_code&js_code="+encodeURIComponent(input));
137-
xhr.onload=function(){
138-
min=xhr.response.replace(/\r|\n|(;*\n*$)/,"");
139-
console.log(min+"\n\n// "+min.length+" chars minified (original: "+input.length+")");
140-
}
141-
}
142-
143-
// Pack
144-
regpack=function(input){
145-
options={
146-
withMath:false,
147-
hash2DContext:false,
148-
hashWebGLContext:false,
149-
hashAudioContext:false,
150-
contextVariableName:false,
151-
contextType:0,
152-
reassignVars:false,
153-
varsNotReassigned:[],
154-
crushGainFactor:+gain.value,
155-
crushLengthFactor:+length.value,
156-
crushCopiesFactor:+copies.value,
157-
crushTiebreakerFactor:+mode.checked,
158-
wrapInSetInterval:false,
159-
timeVariableName:""
160-
};
161-
inputList=packer.runPacker(input,options);
162-
results=inputList[0].result;
163-
shortest=0;
164-
shortest_bytes=1e8;
165-
for(i=0;i<results.length;i++){
166-
if(results[i][0]<shortest_bytes){
167-
shortest=i;
168-
shortest_bytes=results[i][0];
169-
}
170-
}
171-
return results[shortest][1];
172-
}
173-
174-
pack.onclick=function(){
175-
console.clear();
176-
input=/<script>([^]*?)<\/script>/gm.exec(editor.getValue())[1];
177-
min=regpack(input);
178-
console.log(min+"\n\n// "+min.length+" chars packed (original: "+input.length+")");
179-
}
180-
181-
// Min + pack
182-
minpack.onclick=function(){
183-
console.clear();
184-
input=/<script>([^]*?)<\/script>/gm.exec(editor.getValue())[1];
185-
xhr=new XMLHttpRequest();
186-
xhr.open("POST", "https://closure-compiler.appspot.com/compile", true);
187-
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
188-
xhr.send("language=ECMASCRIPT6&compilation_level=ADVANCED_OPTIMIZATIONS&output_info=compiled_code&js_code="+encodeURIComponent(input));
189-
xhr.onload=function(){
190-
min=xhr.response.replace(/\r|\n|(;*\n*$)/,"");
191-
min=regpack(min);
192-
console.log(min+"\n\n// "+min.length+" chars minified + packed (original: "+input.length+")");
193-
}
194-
}
195-
</script>
1+
<link rel=stylesheet href=c.css><textarea id=c>&lt;body text=blue id=b onload=b.innerHTML="Hello,World!"></textarea><iframe id=f></iframe><script src=c.js></script><script>E=CodeMirror.fromTextArea(c,{lineNumbers:!0,lineWrapping:!0,mode:"htmlmixed"});(U=z=>f.srcdoc=E.getValue())();E.on("keyup",z=>{console.clear(),document.title=encodeURI(U()).split(/%..|./).length-1+"b"})</script><style>*{margin:0;font-size:12px}.CodeMirror,#f{width:100%;height:50%;border:1px solid;box-sizing:border-box

0 commit comments

Comments
 (0)