116 lines
No EOL
2.2 KiB
HTML
116 lines
No EOL
2.2 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Editor</title>
|
|
<meta name="author" content="Fabian Jakobs">
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
#virtual_container {
|
|
position: absolute;
|
|
/*padding: 3px;*/
|
|
border: 1px solid black;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
width: 600px;
|
|
height: 400px;
|
|
}
|
|
|
|
#virtual_container.focus {
|
|
border: 1px solid #327fbd;;
|
|
}
|
|
|
|
#container {
|
|
position: absolute;
|
|
left: 630px;
|
|
border: 1px solid black;
|
|
overflow: auto;
|
|
width: 600px;
|
|
height: 400px;
|
|
}
|
|
|
|
#container.focus {
|
|
border: 1px solid #327fbd;;
|
|
}
|
|
|
|
.canvas {
|
|
z-index: 2;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
font-family: Monaco, "Courier New";
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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 {
|
|
z-index: 1;
|
|
}
|
|
|
|
.selection {
|
|
position: absolute;
|
|
background: rgba(77, 151, 255, 0.33);
|
|
}
|
|
</style>
|
|
|
|
<script src="lib.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="TextDocument.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="Editor.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="DumbRenderer.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="VirtualRenderer.js" type="text/javascript" charset="utf-8"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="virtual_container">
|
|
</div>
|
|
|
|
<div id="container">
|
|
</div>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
var doc = new TextDocument("Juhu Kinners");
|
|
|
|
new Editor(doc, new VirtualRenderer("virtual_container"));
|
|
new Editor(doc, new DumbRenderer("container"));
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |