use codemirror2 as editor

ddnn55 · Nov 30, 2011 · 6e999c6 · 6e999c6
1 parent 621e48f
commit 6e999c6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 87 deletions.
diff --git a/static/css/codemirror.css b/static/css/codemirror.css
@@ -1,11 +1,24 @@
 .CodeMirror {
+  color: white;
+  text-shadow: rgba( 0, 0, 0, 1 ) 0px 1px 2px;
+  background-color: transparent;
+  position: absolute; left: 25px; top: 75px;
+  padding: 12px;
+  border: none;
+  border-radius: 5px;
   line-height: 1em;
   font-family: monospace;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.CodeMirror:hover {
+  background-color:rgba(0,0,0,.5);
 }
 
 .CodeMirror-scroll {
   overflow: auto;
-  height: 300px;
+  height: 100%;
   /* This is needed to prevent an IE[67] bug where the scrolled content
      is visible outside of the scrolling box. */
   position: relative;
@@ -14,8 +27,8 @@
 .CodeMirror-gutter {
   position: absolute; left: 0; top: 0;
   z-index: 10;
-  background-color: #f7f7f7;
-  border-right: 1px solid #eee;
+/*  background-color: #f7f7f7; */
+  border-right: 1px solid black;
   min-width: 2em;
   height: 100%;
 }
@@ -59,7 +72,7 @@
   z-index: 10;
   position: absolute;
   visibility: hidden;
-  border-left: 1px solid black !important;
+  border-left: 1px solid white !important;
 }
 .CodeMirror-focused .CodeMirror-cursor {
   visibility: visible;

diff --git a/static/css/default.css b/static/css/default.css
@@ -2,11 +2,11 @@
 .cm-s-default span.cm-atom {color: #219;}
 .cm-s-default span.cm-number {color: #164;}
 .cm-s-default span.cm-def {color: #00f;}
-.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable {color: white;}
 .cm-s-default span.cm-variable-2 {color: #05a;}
 .cm-s-default span.cm-variable-3 {color: #085;}
-.cm-s-default span.cm-property {color: black;}
-.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-property {color: white;}
+.cm-s-default span.cm-operator {color: white;}
 .cm-s-default span.cm-comment {color: #a50;}
 .cm-s-default span.cm-string {color: #a11;}
 .cm-s-default span.cm-string-2 {color: #f50;}

diff --git a/static/index.html b/static/index.html
@@ -13,32 +13,6 @@
 
 			}
 
-			#code {
-
-				position: absolute;
-
-				padding: 12px;
-
-				border: none;
-				border-radius: 5px;
-
-				color: #ffffff;
-				background-color: transparent;
-				font-family: Monospace;
-				font-size: 14px;
-				font-weight: bold;
-				text-shadow: rgba( 0, 0, 0, 1 ) 0px 1px 2px;
-
-				white-space: pre;
-
-			}
-
-			#code:hover {
-
-				background-color:rgba(0,0,0,.5);
-
-			}
-
 			button, select {
 
 				padding: 8px 12px 8px 12px;
@@ -72,19 +46,18 @@
 
 			}
 
-			textarea:focus {
-
-				outline: 0; /* this removes browser-side outline */
-
-			}
-
 		</style>
 	</head>
 	<body>
 
+		<link rel="stylesheet" href="css/codemirror.css">
+		<link rel="stylesheet" href="css/default.css">
+
 		<script src="js/lzma.js"></script>
 		<script src='js/jquery.js'></script>
 		<script src='js/helpers.js'></script>
+		<script src="js/codemirror.js"></script>
+		<script src="js/clike.js"></script>
 
 		<script id="example" type="x-shader/x-fragment">#ifdef GL_ES
 precision highp float;
@@ -183,46 +156,6 @@
 
 				//
 
-				code = document.createElement( 'textarea' );
-				code.id = 'code';
-				code.spellcheck = false;
-				code.style.visibility = 'visible';
-
-				code.addEventListener( 'keydown', function ( event ) {
-
-					if ( event.keyCode == 9 ) {
-
-						// Fake TAB
-
-						event.preventDefault();
-
-						var start = code.selectionStart;
-						var end = code.selectionEnd;
-
-						code.value = code.value.substring( 0, start ) + '\t' + code.value.substring( end, code.value.length );
-
-						code.selectionStart = code.selectionEnd = start + 1;
-						code.focus();
-
-					}
-
-				}, false );
-
-				code.addEventListener( 'keyup', function ( event ) {
-
-					if ( event.keyCode == 37 ) return;
-					if ( event.keyCode == 38 ) return;
-					if ( event.keyCode == 39 ) return;
-					if ( event.keyCode == 40 ) return;
-
-					clearTimeout(compileTimer);
-					compileTimer = setTimeout(compile, 500);
-
-				}, false );
-
-				document.body.appendChild( code );
-
-				load_url_code();
 
 				//
 
@@ -341,10 +274,18 @@
 
 				}, false );
 
+				// initialize code editor
+				code = CodeMirror(document.body, {
+					lineNumbers: true,
+					matchBrackets: true,
+					onChange: function() {
+						compile();
+					}
+				});
+
 				onWindowResize();
 				window.addEventListener( 'resize', onWindowResize, false );
-
-				if ( code.value ) compile();
+				load_url_code();
 
 				compileScreenProgram();
 
@@ -353,7 +294,7 @@
 			function compile() {
 
 				var program = gl.createProgram();
-				var fragment = document.getElementById( 'code' ).value;
+				var fragment = code.getValue();
 
 				var vs = createShader( 'attribute vec3 position; void main() { gl_Position = vec4( position, 1.0 ); }', gl.VERTEX_SHADER );
 				var fs = createShader( fragment, gl.FRAGMENT_SHADER );
@@ -547,10 +488,10 @@
 
 				toolbar.style.width = window.innerWidth - 47 + 'px';
 
-				code.style.top = '75px';
-				code.style.left = '25px';
-				code.style.width = ( window.innerWidth - 75 ) + 'px';
-				code.style.height = ( window.innerHeight - 125 ) + 'px';
+				code.getWrapperElement().style.top = '75px';
+				code.getWrapperElement().style.left = '25px';
+				code.getWrapperElement().style.width = ( window.innerWidth - 75 ) + 'px';
+				code.getWrapperElement().style.height = ( window.innerHeight - 125 ) + 'px';
 
 				canvas.width = window.innerWidth / quality;
 				canvas.height = window.innerHeight / quality;

diff --git a/static/js/helpers.js b/static/js/helpers.js
@@ -52,7 +52,7 @@ function readURL( hash ) {
 
 	compressor.decompress( bytes, function( text ) {
 
-		code.value = text;
+		code.setValue(text);
 		compile();
 
 	},