- add animated scrolling to the demo
- fix infinite loop - fix some typos
This commit is contained in:
Fabian Jakobs
parent
bdb05e8c07
commit
9deb81fcaf
4 changed files with 55 additions and 43 deletions
|
|
@ -41,7 +41,7 @@
|
|||
define(function(require, exports, module) {
|
||||
|
||||
require("ace/lib/fixoldbrowsers");
|
||||
require("ace/config").init();
|
||||
require("ace/config").init();
|
||||
var env = {};
|
||||
|
||||
var event = require("ace/lib/event");
|
||||
|
|
@ -301,6 +301,7 @@ var showGutterEl = document.getElementById("show_gutter");
|
|||
var showPrintMarginEl = document.getElementById("show_print_margin");
|
||||
var highlightSelectedWordE = document.getElementById("highlight_selected_word");
|
||||
var showHScrollEl = document.getElementById("show_hscroll");
|
||||
var animateScrollEl = document.getElementById("animate_scroll");
|
||||
var softTabEl = document.getElementById("soft_tab");
|
||||
var behavioursEl = document.getElementById("enable_behaviours");
|
||||
|
||||
|
|
@ -320,12 +321,12 @@ modes.forEach(function(mode) {
|
|||
|
||||
bindDropdown("doc", function(value) {
|
||||
var doc = docsByName[value].doc;
|
||||
|
||||
|
||||
if (!docsByName[value].initialized) {
|
||||
docsByName[value].initialized = true;
|
||||
doc.setMode(modesByName[docsByName[value].name].mode);
|
||||
}
|
||||
|
||||
|
||||
var session = env.split.setSession(doc);
|
||||
session.name = doc.name;
|
||||
|
||||
|
|
@ -357,6 +358,7 @@ function updateUIEditorOptions() {
|
|||
showPrintMarginEl.checked = editor.renderer.getShowPrintMargin();
|
||||
highlightSelectedWordE.checked = editor.getHighlightSelectedWord();
|
||||
showHScrollEl.checked = editor.renderer.getHScrollBarAlwaysVisible();
|
||||
animateScrollEl.checked = editor.getAnimatedScroll();
|
||||
softTabEl.checked = session.getUseSoftTabs();
|
||||
behavioursEl.checked = editor.getBehavioursEnabled();
|
||||
}
|
||||
|
|
@ -440,6 +442,10 @@ bindCheckbox("show_hscroll", function(checked) {
|
|||
env.editor.renderer.setHScrollBarAlwaysVisible(checked);
|
||||
});
|
||||
|
||||
bindCheckbox("animate_scroll", function(checked) {
|
||||
env.editor.setAnimatedScroll(checked);
|
||||
});
|
||||
|
||||
bindCheckbox("soft_tab", function(checked) {
|
||||
env.editor.getSession().setUseSoftTabs(checked);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@
|
|||
<title>Ace Kitchen Sink</title>
|
||||
<meta name="author" content="Fabian Jakobs">
|
||||
<link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
|
||||
<!--
|
||||
|
||||
<!--
|
||||
|
||||
Ace
|
||||
version %version%
|
||||
commit %commit%
|
||||
|
||||
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -132,6 +132,13 @@
|
|||
<input type="checkbox" name="show_hscroll" id="show_hscroll">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td >
|
||||
<label for="animate_scroll">Animate scrolling</label>
|
||||
</td><td>
|
||||
<input type="checkbox" name="animate_scroll" id="animate_scroll">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td >
|
||||
<label for="keybinding">Key Binding</label>
|
||||
|
|
@ -210,7 +217,7 @@
|
|||
<script src="demo/kitchen-sink/require.js" data-main="demo/kitchen-sink/demo" type="text/javascript"></script>
|
||||
|
||||
<!--DEVEL -->
|
||||
|
||||
|
||||
<!--PACKAGE
|
||||
<script src="demo/kitchen-sink/kitchen-sink-uncompressed.js" data-ace-suffix="-uncompressed.js" data-ace-base="demo/kitchen-sink" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
|
|
|||
|
|
@ -292,7 +292,7 @@ var Editor = function(renderer, session) {
|
|||
else
|
||||
lastRow = Infinity;
|
||||
this.renderer.updateLines(range.start.row, lastRow);
|
||||
|
||||
|
||||
this._emit("change", e);
|
||||
|
||||
// update cursor because tab characters can influence the cursor position
|
||||
|
|
@ -341,7 +341,7 @@ var Editor = function(renderer, session) {
|
|||
if (this.getHighlightActiveLine()) {
|
||||
var cursor = this.getCursorPosition(),
|
||||
foldLine = this.session.getFoldLine(cursor.row);
|
||||
|
||||
|
||||
if ((this.getSelectionStyle() != "line" || !this.selection.isMultiLine())) {
|
||||
var range;
|
||||
if (foldLine) {
|
||||
|
|
@ -605,14 +605,14 @@ var Editor = function(renderer, session) {
|
|||
this.getHighlightSelectedWord = function() {
|
||||
return this.$highlightSelectedWord;
|
||||
};
|
||||
|
||||
|
||||
this.setAnimatedScroll = function(shouldAnimate){
|
||||
this.renderer.setAnimatedScroll(shouldAnimate);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.getAnimatedScroll = function(){
|
||||
this.rendered.getAnimatedScroll();
|
||||
}
|
||||
this.renderer.getAnimatedScroll();
|
||||
};
|
||||
|
||||
this.setShowInvisibles = function(showInvisibles) {
|
||||
if (this.getShowInvisibles() == showInvisibles)
|
||||
|
|
@ -1158,7 +1158,7 @@ var Editor = function(renderer, session) {
|
|||
this.selection.setSelectionRange(range);
|
||||
this.renderer.scrollSelectionIntoView(range.start, range.end);
|
||||
}
|
||||
|
||||
|
||||
return replaced;
|
||||
};
|
||||
|
||||
|
|
@ -1185,7 +1185,7 @@ var Editor = function(renderer, session) {
|
|||
|
||||
this.selection.setSelectionRange(selection);
|
||||
this.$blockScrolling -= 1;
|
||||
|
||||
|
||||
return replaced;
|
||||
};
|
||||
|
||||
|
|
@ -1242,11 +1242,11 @@ var Editor = function(renderer, session) {
|
|||
this.$blockScrolling += 1;
|
||||
this.selection.setSelectionRange(range);
|
||||
this.$blockScrolling -= 1;
|
||||
|
||||
|
||||
var cursor = this.getCursorPosition();
|
||||
if (!this.isRowFullyVisible(cursor.row))
|
||||
this.scrollToLine(cursor.row, true);
|
||||
|
||||
|
||||
//@todo scroll X
|
||||
//if (!this.isRowFullyVisible(cursor.row))
|
||||
//this.scrollToLine(cursor.row, true);
|
||||
|
|
|
|||
|
|
@ -60,13 +60,13 @@ dom.importCssString(editorCss, "ace_editor");
|
|||
|
||||
var VirtualRenderer = function(container, theme) {
|
||||
var _self = this;
|
||||
|
||||
|
||||
this.container = container;
|
||||
|
||||
// TODO: this breaks rendering in Cloud9 with multiple ace instances
|
||||
// // Imports CSS once per DOM document ('ace_editor' serves as an identifier).
|
||||
// dom.importCssString(editorCss, "ace_editor", container.ownerDocument);
|
||||
|
||||
|
||||
dom.addCssClass(container, "ace_editor");
|
||||
|
||||
this.setTheme(theme);
|
||||
|
|
@ -74,7 +74,7 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.$gutter = dom.createElement("div");
|
||||
this.$gutter.className = "ace_gutter";
|
||||
this.container.appendChild(this.$gutter);
|
||||
|
||||
|
||||
this.scroller = dom.createElement("div");
|
||||
this.scroller.className = "ace_scroller";
|
||||
this.container.appendChild(this.scroller);
|
||||
|
|
@ -84,8 +84,8 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.scroller.appendChild(this.content);
|
||||
|
||||
this.$gutterLayer = new GutterLayer(this.$gutter);
|
||||
this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
|
||||
|
||||
this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
|
||||
|
||||
this.$markerBack = new MarkerLayer(this.content);
|
||||
|
||||
var textLayer = this.$textLayer = new TextLayer(this.content);
|
||||
|
|
@ -112,12 +112,12 @@ var VirtualRenderer = function(container, theme) {
|
|||
|
||||
this.scrollTop = 0;
|
||||
this.scrollLeft = 0;
|
||||
|
||||
|
||||
event.addListener(this.scroller, "scroll", function() {
|
||||
var scrollLeft = _self.scroller.scrollLeft;
|
||||
_self.scrollLeft = scrollLeft;
|
||||
_self.session.setScrollLeft(scrollLeft);
|
||||
|
||||
|
||||
if (scrollLeft == 0) {
|
||||
_self.$gutter.className = "ace_gutter";
|
||||
}
|
||||
|
|
@ -285,11 +285,11 @@ var VirtualRenderer = function(container, theme) {
|
|||
|
||||
this.setAnimatedScroll = function(shouldAnimate){
|
||||
this.$animatedScroll = shouldAnimate;
|
||||
}
|
||||
|
||||
this.getAnimatedscroll = function(){
|
||||
return this.$animatedScroll
|
||||
}
|
||||
};
|
||||
|
||||
this.getAnimatedScroll = function(){
|
||||
return this.$animatedScroll;
|
||||
};
|
||||
|
||||
this.setShowInvisibles = function(showInvisibles) {
|
||||
if (this.$textLayer.setShowInvisibles(showInvisibles))
|
||||
|
|
@ -369,7 +369,7 @@ var VirtualRenderer = function(container, theme) {
|
|||
// this persists in IE9
|
||||
if (useragent.isIE)
|
||||
return;
|
||||
|
||||
|
||||
if (this.layerConfig.lastRow === 0)
|
||||
return;
|
||||
|
||||
|
|
@ -445,13 +445,13 @@ var VirtualRenderer = function(container, theme) {
|
|||
// horizontal scrolling
|
||||
if (changes & this.CHANGE_H_SCROLL) {
|
||||
this.scroller.scrollLeft = this.scrollLeft;
|
||||
|
||||
|
||||
// read the value after writing it since the value might get clipped
|
||||
var scrollLeft = this.scroller.scrollLeft;
|
||||
this.scrollLeft = scrollLeft;
|
||||
this.session.setScrollLeft(scrollLeft);
|
||||
}
|
||||
|
||||
|
||||
// full
|
||||
if (changes & this.CHANGE_FULL) {
|
||||
this.$textLayer.checkForSizeChanges();
|
||||
|
|
@ -726,7 +726,7 @@ var VirtualRenderer = function(container, theme) {
|
|||
var i = 0;
|
||||
var l = this.STEPS;
|
||||
var steps = [];
|
||||
|
||||
|
||||
var func = function(t, x_min, dx) {
|
||||
if ((t /= .5) < 1)
|
||||
return dx / 2 * Math.pow(t, 3) + x_min;
|
||||
|
|
@ -736,7 +736,7 @@ var VirtualRenderer = function(container, theme) {
|
|||
for (i = 0; i < l; ++i)
|
||||
steps.push(func(i / this.STEPS, fromValue, toValue - fromValue));
|
||||
steps.push(toValue);
|
||||
|
||||
|
||||
return steps;
|
||||
};
|
||||
|
||||
|
|
@ -747,15 +747,14 @@ var VirtualRenderer = function(container, theme) {
|
|||
offset -= this.$size.scrollerHeight / 2;
|
||||
|
||||
if (this.$animatedScroll && Math.abs(offset - this.scrollTop) < 10000) {
|
||||
var i = 0;
|
||||
var _self = this;
|
||||
var steps = _self.$calcSteps(this.scrollTop, offset);
|
||||
|
||||
clearInterval(_self.$timer);
|
||||
|
||||
clearInterval(this.$timer);
|
||||
this.$timer = setInterval(function() {
|
||||
_self.session.setScrollTop(steps[i]);
|
||||
_self.session.setScrollTop(steps.shift());
|
||||
|
||||
if (++i == this.STEPS + 1)
|
||||
if (!steps.length)
|
||||
clearInterval(_self.$timer);
|
||||
}, 10);
|
||||
}
|
||||
|
|
@ -865,7 +864,7 @@ var VirtualRenderer = function(container, theme) {
|
|||
this._loadTheme = function(name, callback) {
|
||||
if (!config.get("packaged"))
|
||||
return callback();
|
||||
|
||||
|
||||
var base = name.split("/").pop();
|
||||
var filename = config.get("themePath") + "/theme-" + base + config.get("suffix");
|
||||
net.loadScript(filename, callback);
|
||||
|
|
@ -877,14 +876,14 @@ var VirtualRenderer = function(container, theme) {
|
|||
this.$themeValue = theme;
|
||||
if (!theme || typeof theme == "string") {
|
||||
var moduleName = theme || "ace/theme/textmate";
|
||||
|
||||
|
||||
var module;
|
||||
try {
|
||||
module = require(moduleName);
|
||||
} catch (e) {};
|
||||
if (module)
|
||||
return afterLoad(module);
|
||||
|
||||
|
||||
_self._loadTheme(moduleName, function() {
|
||||
require([theme], function(module) {
|
||||
if (_self.$themeValue !== theme)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue