jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

externalize CSS

Browse source
This commit is contained in:
Fabian Jakobs 2010-04-06 16:45:40 +02:00
commit d1ba11811d
3 changed files with 70 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

7
VirtualRenderer.js
View file

@ -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)

64
editor.css Normal file
View file

@ -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);
}

65
editor.html
View file

@ -9,76 +9,15 @@
<style type="text/css" media="screen">
#container {
position: absolute;
border: 1px solid black;
overflow-x: auto;
overflow-y: hidden;
#container {
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>