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

Add oriantation to Split and demo option

Browse source
This commit is contained in:
Julian Viereck 2011-05-20 23:08:26 +02:00
commit 55328f3690
3 changed files with 76 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

28
demo/demo.js
View file

@ -365,6 +365,29 @@ exports.launch = function(env) {
env.editor.getSession().setUseSoftTabs(checked);
});
var secondSplitSession = null;
bindDropdown("split", function(value) {
var sp = env.split;
if (value == "none") {
sp.setSplits(1);
} else {
var newEditor = (sp.getSplits() == 1);
if (value == "below") {
sp.setOriantation(sp.BELOW);
} else {
sp.setOriantation(sp.BESIDE);
}
sp.setSplits(2);
if (newEditor) {
var session = secondSplitSession || sp.getEditor(0).session;
var newSession = sp.setSession(session, 1);
newSession.name = session.name;
secondSplitSession = newSession;
}
}
});
function bindCheckbox(id, callback) {
var el = document.getElementById(id);
var onCheck = function() {
@ -577,11 +600,6 @@ exports.launch = function(env) {
session.addFold(placeHolder, range);
}
}
env.split.setSplits(2);
sp = env.split;
session = sp.setSession(sp.getEditor(0).session, 1);
session.name = sp.getEditor(0).session.name;
};
});

11
index.html
View file

@ -11,6 +11,17 @@
<body>
<img id="logo" src="demo/logo.png">
<table id="controls">
<tr>
<td>
<label for="split">Split</label>
</td><td>
<select id="split" size="1">
<option value="none">None</option>
<option value="below">Below</option>
<option value="beside">Beside</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="doc">Document</label>

49
lib/ace/split.js
View file

@ -47,15 +47,20 @@ var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var EditSession = require("ace/edit_session").EditSession;
var Split = function(container, theme, splits) {
this.BELOW = 1;
this.BESIDE = 0;
this.$container = container;
this.$theme = theme;
this.$splits = 0;
this.$editorCSS = "";
this.$editors = [];
this.$oriantation = this.BESIDE;
this.setSplits(splits || 1);
this.$cEditor = this.$editors[0];
this.on("focus", function(editor) {
this.$cEditor = editor;
}.bind(this));
@ -106,6 +111,10 @@ var Split = function(container, theme, splits) {
this.resize();
}
this.getSplits = function() {
return this.$splits;
}
this.getEditor = function(idx) {
return this.$editors[idx];
}
@ -191,17 +200,43 @@ var Split = function(container, theme, splits) {
return session;
}
this.getOriantation = function() {
return this.$oriantation;
}
this.setOriantation = function(oriantation) {
if (this.$oriantation == oriantation) {
return;
}
this.$oriantation = oriantation;
this.resize();
}
this.resize = function() {
var width = this.$container.clientWidth;
var height = this.$container.clientHeight;
var editor;
var editorWidth = width / this.$splits;
for (var i = 0; i < this.$splits; i++) {
editor = this.$editors[i];
editor.container.style.width = editorWidth + "px";
editor.container.style.left = i * editorWidth + "px";
editor.container.style.height = height + "px";
editor.resize();
if (this.$oriantation == this.BESIDE) {
var editorWidth = width / this.$splits;
for (var i = 0; i < this.$splits; i++) {
editor = this.$editors[i];
editor.container.style.width = editorWidth + "px";
editor.container.style.top = "0px";
editor.container.style.left = i * editorWidth + "px";
editor.container.style.height = height + "px";
editor.resize();
}
} else {
var editorHeight = height / this.$splits;
for (var i = 0; i < this.$splits; i++) {
editor = this.$editors[i];
editor.container.style.width = width + "px";
editor.container.style.top = i * editorHeight + "px"
editor.container.style.left = "0px";
editor.container.style.height = editorHeight + "px";
editor.resize();
}
}
}