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

refactor CSS loading. Now use requireJS

Browse source
This commit is contained in:
Fabian Jakobs 2010-09-30 12:35:57 +02:00
commit 140d80a15e
11 changed files with 242 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1 +1,2 @@
.DS_Store .DS_Store
.settings.xml

21
demo/editor.html
View file

@ -40,8 +40,6 @@
</style> </style>
<link rel="stylesheet" href="../css/editor.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="../css/tm.css" type="text/css" charset="utf-8">
<script src="require.js" type="text/javascript" charset="utf-8"></script> <script src="require.js" type="text/javascript" charset="utf-8"></script>
</head> </head>
<body> <body>
@ -66,6 +64,13 @@
<option value="css">CSS</option> <option value="css">CSS</option>
</select> </select>
</td> </td>
<td>
<label for="theme">Theme:</label>
<select id="theme" size="1">
<option value="ace/theme/TextMate">TextMate</option>
<option value="ace/theme/Eclipse">Eclipse</option>
</select>
</td>
<td> <td>
<label for="select_style">Full line selections</label> <label for="select_style">Full line selections</label>
<input type="checkbox" name="select_style" id="select_style" checked> <input type="checkbox" name="select_style" id="select_style" checked>
@ -121,6 +126,7 @@ require(
[ [
"ace/Editor", "ace/Editor",
"ace/VirtualRenderer", "ace/VirtualRenderer",
"ace/theme/TextMate",
"ace/Document", "ace/Document",
"ace/mode/JavaScript", "ace/mode/JavaScript",
"ace/mode/Css", "ace/mode/Css",
@ -128,7 +134,7 @@ require(
"ace/mode/Xml", "ace/mode/Xml",
"ace/mode/Text", "ace/mode/Text",
"ace/UndoManager" "ace/UndoManager"
], function(Editor, Renderer, Document, JavaScriptMode, CssMode, HtmlMode, XmlMode, TextMode, UndoManager) { ], function(Editor, Renderer, theme, Document, JavaScriptMode, CssMode, HtmlMode, XmlMode, TextMode, UndoManager) {
var ace = require("ace/ace"); var ace = require("ace/ace");
var docs = {} var docs = {}
@ -178,7 +184,7 @@ function getDoc() {
var modeEl = document.getElementById("mode"); var modeEl = document.getElementById("mode");
modeEl.onchange = function() { modeEl.onchange = function() {
editor.getDocument().setMode(getMode()); editor.getDocument().setTheme(modeEl.value);
}; };
var modes = { var modes = {
@ -193,6 +199,11 @@ function getMode() {
return modes[modeEl.value]; return modes[modeEl.value];
} }
var themeEl = document.getElementById("theme");
themeEl.onchange = function() {
editor.setTheme(themeEl.value);
};
var selectEl = document.getElementById("select_style"); var selectEl = document.getElementById("select_style");
selectEl.onchange = function() { selectEl.onchange = function() {
if (selectEl.checked) { if (selectEl.checked) {
@ -208,7 +219,7 @@ activeEl.onchange = function() {
}; };
var container = document.getElementById("editor"); var container = document.getElementById("editor");
var editor = new Editor(new Renderer(container)); var editor = new Editor(new Renderer(container, theme));
onDocChange(); onDocChange();
function onResize() { function onResize() {

4
src/ace/Editor.js
View file

@ -142,6 +142,10 @@ var Editor = function(renderer, doc) {
this.renderer.onResize(); this.renderer.onResize();
}; };
this.setTheme = function(theme) {
this.renderer.setTheme(theme);
};
this.$highlightBrackets = function() { this.$highlightBrackets = function() {
if (this.$bracketHighlight) { if (this.$bracketHighlight) {
this.renderer.removeMarker(this.$bracketHighlight); this.renderer.removeMarker(this.$bracketHighlight);

41
src/ace/VirtualRenderer.js
View file

@ -17,15 +17,21 @@ require.def("ace/VirtualRenderer",
"ace/layer/Cursor", "ace/layer/Cursor",
"ace/ScrollBar", "ace/ScrollBar",
"ace/RenderLoop", "ace/RenderLoop",
"ace/MEventEmitter" "ace/MEventEmitter",
"text!ace/css/editor.css"
], function( ], function(
oop, lang, dom, event, GutterLayer, MarkerLayer, TextLayer, oop, lang, dom, event, GutterLayer, MarkerLayer, TextLayer,
CursorLayer, ScrollBar, RenderLoop, MEventEmitter) { CursorLayer, ScrollBar, RenderLoop, MEventEmitter, editorCss) {
var VirtualRenderer = function(container) { // import CSS once
dom.importCssString(editorCss);
var VirtualRenderer = function(container, theme) {
this.container = container; this.container = container;
dom.addCssClass(this.container, "ace_editor"); dom.addCssClass(this.container, "ace_editor");
this.setTheme(theme);
this.scroller = document.createElement("div"); this.scroller = document.createElement("div");
this.scroller.className = "ace_scroller"; this.scroller.className = "ace_scroller";
this.container.appendChild(this.scroller); this.container.appendChild(this.scroller);
@ -506,6 +512,35 @@ var VirtualRenderer = function(container) {
this.hideComposition = function() { this.hideComposition = function() {
}; };
this.setTheme = function(theme) {
var _self = this;
if (!theme || typeof theme == "string") {
theme = theme || "ace/theme/TextMate";
require([theme], function(theme) {
afterLoad(theme);
})
} else {
afterLoad(theme);
}
var _self = this;
function afterLoad(theme) {
if (_self.$theme)
dom.removeCssClass(_self.container, _self.$theme)
_self.$theme = theme ? theme.cssClass : null;
if (_self.$theme)
dom.addCssClass(_self.container, _self.$theme)
// force remeasure of the gutter width
if (_self.$size) {
_self.$size.width = 0;
_self.onResize();
}
}
}
}).call(VirtualRenderer.prototype); }).call(VirtualRenderer.prototype);
return VirtualRenderer; return VirtualRenderer;

0
css/editor.css → src/ace/css/editor.css
View file

2
src/ace/layer/Text.js
View file

@ -13,7 +13,7 @@ var Text = function(parentEl) {
parentEl.appendChild(this.element); parentEl.appendChild(this.element);
this.$characterSize = this.$measureSizes(); this.$characterSize = this.$measureSizes();
//this.$pollSizeChanges(); this.$pollSizeChanges();
}; };
(function() { (function() {

14
src/ace/lib/dom.js
View file

@ -44,6 +44,20 @@ require.def("ace/lib/dom", ["ace/lib/lang"], function(lang) {
el.className = classes.join(" "); el.className = classes.join(" ");
}; };
dom.importCssString = function(cssText, doc){
doc = doc || document;
if (doc.createStyleSheet) {
var sheet = doc.createStyleSheet();
sheet.cssText = cssText;
}
else {
var style = doc.createElement("style");
style.appendChild(doc.createTextNode(cssText));
doc.getElementsByTagName("head")[0].appendChild(style);
}
};
dom.getInnerWidth = function(element) { dom.getInnerWidth = function(element) {
return (parseInt(dom.computedStyle(element, "paddingLeft")) return (parseInt(dom.computedStyle(element, "paddingLeft"))
+ parseInt(dom.computedStyle(element, "paddingRight")) + element.clientWidth); + parseInt(dom.computedStyle(element, "paddingRight")) + element.clientWidth);

10
src/ace/theme/Eclipse.js Normal file
View file

@ -0,0 +1,10 @@
require.def("ace/theme/Eclipse",
["ace/lib/dom", "text!ace/theme/eclipse.css"], function(dom, cssText) {
// import CSS once
dom.importCssString(cssText);
return {
cssClass: "ace-eclipse"
};
})

10
src/ace/theme/TextMate.js Normal file
View file

@ -0,0 +1,10 @@
require.def("ace/theme/TextMate",
["ace/lib/dom", "text!ace/theme/tm.css"], function(dom, cssText) {
// import CSS once
dom.importCssString(cssText);
return {
cssClass: "ace-tm"
};
})

47
css/eclipse.css → src/ace/theme/eclipse.css
View file

@ -1,12 +1,12 @@
.editor { .ace-eclipse .ace_editor {
border: 2px solid rgb(159, 159, 159); border: 2px solid rgb(159, 159, 159);
} }
.editor.focus { .ace-eclipse .ace_editor.ace_focus {
border: 2px solid #327fbd;; border: 2px solid #327fbd;;
} }
.gutter { .ace-eclipse .ace_gutter {
width: 40px; width: 40px;
background: rgb(227, 227, 227); background: rgb(227, 227, 227);
border-right: 1px solid rgb(159, 159, 159); border-right: 1px solid rgb(159, 159, 159);
@ -15,83 +15,82 @@
font-size: 11px; font-size: 11px;
} }
.gutter-layer { .ace-eclipse .ace_gutter-layer {
right: 10px; right: 10px;
text-align: right; text-align: right;
} }
.text-layer { .ace-eclipse .ace_text-layer {
font-family: Monaco, "Courier New", monospace; font-family: Monaco, "Courier New", monospace;
font-size: 11px; font-size: 11px;
cursor: text; cursor: text;
} }
.cursor { .ace-eclipse .ace_cursor {
width: 1px; border-left: 1px solid black;
background: black;
} }
.line .keyword { .ace-eclipse .ace_line .ace_keyword {
color: rgb(127, 0, 85); color: rgb(127, 0, 85);
} }
.line .buildin-constant { .ace-eclipse .ace_line .ace_buildin-constant {
color: rgb(88, 72, 246); color: rgb(88, 72, 246);
} }
.line .library-constant { .ace-eclipse .ace_line .ace_library-constant {
color: rgb(6, 150, 14); color: rgb(6, 150, 14);
} }
.line .buildin-function { .ace-eclipse .ace_line .ace_buildin-function {
color: rgb(60, 76, 114); color: rgb(60, 76, 114);
} }
.line .string { .ace-eclipse .ace_line .ace_string {
color: rgb(42, 0, 255); color: rgb(42, 0, 255);
} }
.line .comment { .ace-eclipse .ace_line .ace_comment {
color: rgb(63, 127, 95); color: rgb(63, 127, 95);
} }
.line .doc-comment { .ace-eclipse .ace_line .ace_doc-comment {
color: rgb(63, 95, 191); color: rgb(63, 95, 191);
} }
.line .doc-comment-tag { .ace-eclipse .ace_line .ace_doc-comment-tag {
color: rgb(127, 159, 191); color: rgb(127, 159, 191);
} }
.line .number { .ace-eclipse .ace_line .ace_number {
} }
.line .tag { .ace-eclipse .ace_line .ace_tag {
color: rgb(63, 127, 127); color: rgb(63, 127, 127);
} }
.line .attribute { .ace-eclipse .ace_line .ace_attribute {
color: rbg(127, 0, 127); color: rbg(127, 0, 127);
} }
.line .attribute-value { .ace-eclipse .ace_line .ace_attribute-value {
font-style: italic; font-style: italic;
color: rbg(42, 0, 255); color: rbg(42, 0, 255);
} }
.line .xml_pe { .ace-eclipse .ace_line .ace_xml_pe {
color: rgb(104, 104, 91); color: rgb(104, 104, 91);
} }
.marker-layer .selection { .ace-eclipse .ace_marker-layer .ace_selection {
background: rgb(181, 213, 255); background: rgb(181, 213, 255);
} }
.marker-layer .bracket { .ace-eclipse .ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
border: 1px solid rgb(192, 192, 192); border: 1px solid rgb(192, 192, 192);
} }
.marker-layer .active_line { .ace-eclipse .ace_marker-layer .ace_active_line {
background: rgb(232, 242, 254); background: rgb(232, 242, 254);
} }

46
css/tm.css → src/ace/theme/tm.css
View file

@ -1,101 +1,101 @@
.ace_editor { .ace-tm .ace_editor {
border: 2px solid rgb(159, 159, 159); border: 2px solid rgb(159, 159, 159);
font-family: Monaco, "Courier New"; font-family: Monaco, "Courier New";
font-size: 12px; font-size: 12px;
} }
.ace_editor.ace_focus { .ace-tm .ace_editor.ace_focus {
border: 2px solid #327fbd;; border: 2px solid #327fbd;;
} }
.ace_gutter { .ace-tm .ace_gutter {
width: 40px; width: 40px;
background: rgb(227, 227, 227); background: rgb(227, 227, 227);
border-right: 1px solid rgb(159, 159, 159); border-right: 1px solid rgb(159, 159, 159);
color: rgb(136, 136, 136); color: rgb(136, 136, 136);
} }
.ace_editor .ace_printMargin { .ace-tm .ace_editor .ace_printMargin {
width: 1px; width: 1px;
background: rgb(191, 191, 191); background: rgb(191, 191, 191);
} }
.ace_gutter-layer { .ace-tm .ace_gutter-layer {
right: 10px; right: 10px;
text-align: right; text-align: right;
} }
.ace_text-layer { .ace-tm .ace_text-layer {
cursor: text; cursor: text;
} }
.ace_cursor { .ace-tm .ace_cursor {
border-left: 2px solid black; border-left: 2px solid black;
} }
.ace_cursor.ace_overwrite { .ace-tm .ace_cursor.ace_overwrite {
border-left: 0px; border-left: 0px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
.ace_line .ace_invisible { .ace-tm .ace_line .ace_invisible {
color: rgb(191, 191, 191); color: rgb(191, 191, 191);
} }
.ace_line .ace_keyword { .ace-tm .ace_line .ace_keyword {
color: blue; color: blue;
} }
.ace_line .ace_buildin-constant { .ace-tm .ace_line .ace_buildin-constant {
color: rgb(88, 72, 246); color: rgb(88, 72, 246);
} }
.ace_line .ace_library-constant { .ace-tm .ace_line .ace_library-constant {
color: rgb(6, 150, 14); color: rgb(6, 150, 14);
} }
.ace_line .ace_buildin-function { .ace-tm .ace_line .ace_buildin-function {
color: rgb(60, 76, 114); color: rgb(60, 76, 114);
} }
.ace_line .ace_string { .ace-tm .ace_line .ace_string {
color: rgb(3, 106, 7); color: rgb(3, 106, 7);
} }
.ace_line .ace_comment { .ace-tm .ace_line .ace_comment {
font-style: italic; font-style: italic;
color: rgb(76, 136, 107); color: rgb(76, 136, 107);
} }
.ace_line .ace_doc-comment { .ace-tm .ace_line .ace_doc-comment {
color: rgb(0, 102, 255); color: rgb(0, 102, 255);
} }
.ace_line .ace_doc-comment-tag { .ace-tm .ace_line .ace_doc-comment-tag {
color: rgb(128, 159, 191); color: rgb(128, 159, 191);
} }
.ace_line .ace_number { .ace-tm .ace_line .ace_number {
color: rgb(0, 0, 205); color: rgb(0, 0, 205);
} }
.ace_line .ace_xml_pe { .ace-tm .ace_line .ace_xml_pe {
color: rgb(104, 104, 91); color: rgb(104, 104, 91);
} }
.ace_marker-layer .ace_selection { .ace-tm .ace_marker-layer .ace_selection {
background: rgb(181, 213, 255); background: rgb(181, 213, 255);
} }
.ace_marker-layer .ace_step { .ace-tm .ace_marker-layer .ace_step {
background: rgb(198, 219, 174); background: rgb(198, 219, 174);
} }
.ace_marker-layer .ace_bracket { .ace-tm .ace_marker-layer .ace_bracket {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
border: 1px solid rgb(192, 192, 192); border: 1px solid rgb(192, 192, 192);
} }
.ace_marker-layer .ace_active_line { .ace-tm .ace_marker-layer .ace_active_line {
background: rgb(232, 242, 254); background: rgb(232, 242, 254);
} }