externalize CSS

VirtualRenderer.js

@@ -1,8 +1,9 @@
 function VirtualRenderer(containerId)
 {
   this.container = document.getElementById(containerId);
-  this.canvas = document.createElement("div");
+  this.container.className += "editor";
   
+  this.canvas = document.createElement("div");
   this.canvas.className = "canvas";
   this.container.appendChild(this.canvas);
   
@@ -331,11 +332,11 @@ VirtualRenderer.prototype.screenToTextCoordinates = function(pageX, pageY)
 };
 
 VirtualRenderer.prototype.visualizeFocus = function() {
-  this.container.className = "focus";
+  this.container.className = "editor focus";
 };
 
 VirtualRenderer.prototype.visualizeBlur = function() {
-  this.container.className = "";
+  this.container.className = "editor";
 };
 
 VirtualRenderer.prototype.showComposition = function(position)

editor.css

@@ -0,0 +1,64 @@
+.editor {
+  position: absolute;
+  border: 1px solid black;
+  overflow-x: auto;
+  overflow-y: hidden;	  
+}
+
+.editor.focus {
+  border: 1px solid #327fbd;;
+}
+
+.editor .canvas {
+  z-index: 2;
+  position: absolute;
+  overflow: hidden;
+  font-family: Monaco, "Courier New";
+  font-size: 12px;
+  white-space: nowrap;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: text;
+}
+	
+.composition {
+  position: absolute;
+  text-decoration: underline;
+}
+
+.cursor {
+  position: absolute;
+  width: 1px;
+  background: black;
+}
+
+.line {
+  white-space: nowrap;
+}
+
+.line.odd {
+  /*background: #FAFAFA;*/
+}
+
+.keyword {
+  color: blue;
+}
+
+.string {
+  color: rgb(3, 106, 7);
+}
+
+.comment {
+  font-style: italic;
+  color: rgb(0, 102, 255);
+}
+
+.editor .markers {
+  position: absolute;
+  z-index: 1;
+}
+
+.selection {
+  position: absolute;
+  background: rgba(77, 151, 255, 0.33);
+}

editor.html

@@ -10,75 +10,14 @@
 	<style type="text/css" media="screen">
 	
 	#container {  
-	  position: absolute;
-	  border: 1px solid black;
-	  overflow-x: auto;
-	  overflow-y: hidden;	  
 	  top: 5px;
 	  right: 5px;
 	  bottom: 5px;
 	  left: 5px;
 	}
   
-	#container.focus {
-	  border: 1px solid #327fbd;;
-	}
-	
-	.canvas {
-	  z-index: 2;
-	  position: absolute;
-    overflow: hidden;
-	  font-family: Monaco, "Courier New";
-	  font-size: 12px;
-	  white-space: nowrap;
-	  -webkit-box-sizing: border-box;
-	  box-sizing: border-box;
-	  cursor: text;
-	}
-		
-	.composition {
-	  position: absolute;
-	  text-decoration: underline;
-	}
-	
-	.cursor {
-	  position: absolute;
-	  width: 1px;
-    background: black;
-	}
-	
-	.line {
-	  white-space: nowrap;
-	}
-	
-	.line.odd {
-	  /*background: #FAFAFA;*/
-	}
-
-  .keyword {
-    color: blue;
-  }
-  
-  .string {
-    color: rgb(3, 106, 7);
-  }
-  
-  .comment {
-    font-style: italic;
-    color: rgb(0, 102, 255);
-  }
-  
-  .markers {
-    position: absolute;
-    z-index: 1;
-  }
-  
-  .selection {
-    position: absolute;
-    background: rgba(77, 151, 255, 0.33);
-  }
-  
 	</style>
+	<link rel="stylesheet" href="editor.css" type="text/css" charset="utf-8">
 	
 	<script src="lib.js" type="text/javascript" charset="utf-8"></script>
 	<script src="TextDocument.js" type="text/javascript" charset="utf-8"></script>