fixed bower & added dependencies & cleanup

This commit is contained in:
Kevin Jahns
2016-02-23 15:41:22 +01:00
parent 54529ab1e7
commit 2f7349b712
2934 changed files with 957878 additions and 3 deletions

View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--
Animate Code Folding Experiment
Animates closing of folds in Chrome and WebKit. Requires 3D CSS and CSS
transitions.
TODO
* animate opening
* fix closing at the bottom of the file
* support folding with closed folds on the screen (rows are off)
* support more browsers
* speed
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
pre {
margin: 0;
}
#editor {
position: absolute;
height: 100%;
width: 100%;
}
#container {
-webkit-transform: scaleZ(0.0000001);
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.ace_slide {
position: absolute;
width: 100%;
overflow: hidden;
background-image: url(zenbg.png);
/* ease in sine */
-webkit-transition: height 500ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-webkit-perspective: 2000;
-webkit-perspective-origin: 50% 50%;
}
.ace_anim_slide_top {
z-index: -1;
background-color: white;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.05) 50%);
top: 0;
-webkit-transition: -webkit-transform 500ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: top;
-webkit-transform: rotateX(0deg);
}
.ace_anim_slide_bottom {
background-color: white;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.05) 100%);
bottom: 0;
-webkit-transition: -webkit-transform 500ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(0deg);
}
.ace_anim_hidden .ace_anim_slide_top {
-webkit-transform: rotateX(-90deg);
}
.ace_anim_hidden .ace_anim_slide_bottom {
-webkit-transform: rotateX(90deg);
}
.ace_anim_bottom {
/* ease in sine */
-webkit-transition: top 500ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-webkit-transform: scaleZ(0.0000001);
}
</style>
</head>
<body>
<div id="container">
<div id="editor"></div>
</div>
<script src="../build/src/ace-uncompressed.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
<script id="main">
window.onload = function() {
var editor = ace.edit("editor");
var JavaScriptMode = require("ace/mode/javascript").Mode;
var EditSession = require("ace/edit_session").EditSession;
var lang = require("ace/lib/lang");
var Range = require("ace/range").Range;
editor.getSession().setMode(new JavaScriptMode());
editor.getSession().setValue(document.getElementById("main").innerHTML);
function cloneSession(session) {
var s = new EditSession(session.getDocument(), session.getMode());
// Copy over 'settings' from the session.
s.setTabSize(session.getTabSize());
s.setUseSoftTabs(session.getUseSoftTabs());
s.setOverwrite(session.getOverwrite());
s.setBreakpoints(session.getBreakpoints());
s.setUseWrapMode(session.getUseWrapMode());
s.setUseWorker(false);
s.setWrapLimitRange(session.$wrapLimitRange.min, session.$wrapLimitRange.max);
s.$foldData = session.$cloneFoldData();
return s;
}
function animateFold(editor, placeholder, range) {
var session = editor.getSession();
var ed = document.getElementById("editor");
var parent = ed.parentNode;
var clone = ed.cloneNode();
var cloneEd = ace.edit(clone);
var renderer = cloneEd.renderer;
cloneEd.setSession(cloneSession(session));
cloneEd.setTheme(editor.getTheme());
renderer.scrollToY(editor.renderer.getScrollTop());
parent.appendChild(clone);
cloneEd.resize();
renderer.$size = lang.copyObject(cloneEd.renderer.$size);
renderer.layerConfig = lang.copyObject(cloneEd.renderer.layerConfig);
renderer.$textLayer.$characterSize = lang.copyObject(editor.renderer.$textLayer.$characterSize);
renderer.$textLayer._emit("changeCharaterSize", {data: renderer.$textLayer.$characterSize});
renderer.$loop.onRender(renderer.$loop.changes);
// top area
var clone2 = clone.cloneNode(true);
var topHeight = range.start.row * renderer.lineHeight - renderer.scrollTop
clone2.style.height = topHeight + "px";
parent.appendChild(clone2);
// middle
cloneEd.scrollToRow(range.start.row);
renderer.$loop.onRender(renderer.$loop.changes);
var middleHeight = (range.end.row - range.start.row) * renderer.lineHeight;
var slide = document.createElement("div");
slide.className = "ace_slide";
slide.style.top = topHeight + "px";
slide.style.height = middleHeight + "px";
var clone3 = clone.cloneNode(true);
clone3.className += " ace_anim_slide_top";
clone3.style.height = middleHeight + "px";
slide.appendChild(clone3);
renderer.scrollToY(renderer.scrollTop + Math.floor(middleHeight / 2));
renderer.$loop.onRender(renderer.$loop.changes);
var clone3 = clone.cloneNode(true);
clone3.className += " ace_anim_slide_bottom";
clone3.style.top = null;
clone3.style.height = (middleHeight / 2) + "px";
slide.appendChild(clone3);
parent.appendChild(slide);
// bottom
cloneEd.scrollToRow(range.start.row)
cloneEd.getSession().addFold(placeholder, range);
renderer.$loop.onRender(renderer.$loop.changes);
var clone4 = clone.cloneNode(true);
clone4.className += " ace_anim_bottom";
clone4.style.top = (topHeight + middleHeight) + "px";
parent.appendChild(clone4);
cloneEd.destroy();
parent.removeChild(clone);
ed.style.left = "-10000px";
setTimeout(function() {
clone4.style.top = topHeight + "px";
slide.style.height = 0;
slide.className += " ace_anim_hidden";
setTimeout(function() {
ed.style.left = 0;
setTimeout(function() {
parent.removeChild(clone2);
parent.removeChild(slide);
parent.removeChild(clone4);
}, 0);
}, 500);
}, 0);
}
var origOnFoldWidgetClick = EditSession.prototype.onFoldWidgetClick;
EditSession.prototype.onFoldWidgetClick = function() {
var orig = EditSession.prototype.addFold;
EditSession.prototype.addFold = function(placeholder, range) {
EditSession.prototype.addFold = orig;
animateFold(editor, placeholder, range);
this.addFold(placeholder, range);
}
var ret = origOnFoldWidgetClick.apply(this, arguments);
return ret;
}
};
</script>
</body>
</html>

View File

@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<title> </title>
<style type="text/css" media="screen">
#container {
position: absolute;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#top {
position: absolute;
width: 100%;
height: 150px;
background: green;
}
#slide {
position: absolute;
width: 100%;
top: 150px;
height: 0;
background: orange;
overflow: hidden;
-webkit-transition: height 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-webkit-perspective: 360;
-webkit-perspective-origin: 50% 50%;
}
#slide-top {
position: absolute;
width: 100%;
top: 0;
height: 100px;
background-color: yellow;
/* easeOutSine */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 100%);
-webkit-transition: -webkit-transform 5000ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: top;
-webkit-transform: rotateX(-90deg);
}
.visible #slide-top {
-webkit-transform: rotateX(0deg);
}
.visible #slide-bottom {
-webkit-transform: rotateX(0deg);
}
#slide-bottom {
position: absolute;
width: 100%;
top: auto;
bottom: 0;
height: 200px;
z-index: -1;
background-color: blue;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 50%);
-webkit-transition: -webkit-transform 5000ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(90deg);
}
#bottom {
position: absolute;
width: 100%;
top: 150px;
height: 500px;
background: red;
/* easeOutSine */
-webkit-transition: top 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
</style>
</head>
<body>
<div id="container">
<div id="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas
humanitatis per seacula quarta decima et quinta decima. Eodem
modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
in futurum.</div>
<div id="slide">
<div id="slide-top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas
humanitatis per seacula quarta decima et quinta decima. Eodem
modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
in futurum.</div>
<div id="slide-bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas
humanitatis per seacula quarta decima et quinta decima. Eodem
modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
in futurum.</div>
</div>
<div id="bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas
humanitatis per seacula quarta decima et quinta decima. Eodem
modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
in futurum.</div>
</div>
<script>
setTimeout(function() {
document.getElementById("bottom").style.top = "350px";
document.getElementById("slide").style.height = "200px";
document.getElementById("slide").className += " visible";
}, 1000);
</script>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!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">
<meta name="author" content="Fabian Jakobs">
<!-- Date: 2010-04-07 -->
<style type="text/css" media="screen">
#juhu {
width: 100px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div id="juhu">
</div>
<script src="../src/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var el = document.getElementById("juhu");
ace.addListener(el, "mousedown", function(e) {
el.innerHTML = ace.getDocumentX(e) + " " + ace.getDocumentY(e);
ace.capture(
el,
function(e) {
el.innerHTML = ace.getDocumentX(e) + " " + ace.getDocumentY(e);
}, function() {
el.innerHTML = "";
}
);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,105 @@
<!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>Text Events</title>
<meta name="author" content="Fabian Jakobs">
<style type="text/css" media="screen">
#container {
border: 1px solid black;
width: 600px;
}
#canvas {
border: 1px solid black;
margin: 4px;
width: 590px;
height: 400px;
}
</style>
</head>
<body>
<div id="container">
<textarea id="text"></textarea>
<div id="canvas"></div>
</div>
<input type="button" value="Clear" id="some_name" onclick="document.getElementById('logger').innerHTML = ''">
<div id="logger">
</div>
<script type="text/javascript" charset="utf-8">
if (!window.console) window.console = {};
if (!console.log) {
var logger = document.getElementById("logger");
console.log = function() {
logger.innerHTML += Array.prototype.join.call(arguments, ", ") + "<br>";
}
}
function addListener(elem, type, callback) {
if (elem.addEventListener) {
return elem.addEventListener(type, callback, false);
}
if (elem.attachEvent) {
elem.attachEvent("on" + type, function() {
callback(window.event);
});
}
}
var container = document.getElementById("container");
var canvas = document.getElementById("canvas");
var text = document.getElementById("text");
function log(e) {
console.log(e.type, e);
}
function logKey(e) {
console.log(e.type, e.charCode, e.keyCode, e);
}
addListener(text, "keydown", logKey, false);
addListener(text, "keyup", logKey, false);
addListener(text, "keypress", logKey, false);
addListener(text, "textInput", function(e) {
console.log(e.type, e.data, e);
}, false);
function fillSelection() {
text.value = "Juhu Kinners";
text.select();
}
addListener(text, "copy", fillSelection, false);
addListener(text, "paste", log, false);
addListener(text, "cut", fillSelection, false);
addListener(text, "beforecopy", log, false);
addListener(text, "beforepaste", log, false);
addListener(text, "beforecut", log, false);
addListener(text, "compositionstart", log, false);
addListener(text, "compositionupdate", log, false);
addListener(text, "compositionend", log, false);
addListener(text, "propertychange", function(e) {
console.log(e.type, e.propertyName, e);
}, false);
</script>
</body>
</html>

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="../demo/kitchen-sink/require.js"></script>
<script type="text/javascript">
require.config({
paths: { ace: "../lib/ace" },
waitSeconds: 0
});
</script>
</head>
<body>
<p><button onclick="toggleEditor()">Toggle editor</button></p>
<div id="container"></div>
<script>
var editor;
var counter = 0
function toggleEditor() {
if (!editor) {
var root = document.createElement("div");
root.style.height = "100px";
root.setAttribute("id", "editor");
root.textContent = "function foo(items) {\nvar x = 'All this is syntax highlighted';\nreturn x;\n}";
document.getElementById("container").appendChild(root);
editor = ace.edit(root);
if (counter++ % 2)
editor.setTheme("ace/theme/monokai");
else
editor.setTheme("ace/theme/clouds");
editor.session.setMode("ace/mode/javascript");
} else {
editor.destroy();
var el = editor.container;
el.parentNode.removeChild(el);
editor.container = null
editor.renderer = null
editor = null;
var root = document.getElementById("editor")
if (root)
root.parentNode.removeChild(root);
}
}
require(["ace/ace"], function(ace) {
window.ace = ace;
toggleEditor();
})
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!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>triple_click</title>
<meta name="author" content="Fabian Jakobs">
</head>
<body>
<div id="juhu">
Juhu Kinners
</div>
<script src="../src/ace/lib/core.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/ace/lib/event.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var el = document.getElementById("juhu");
ace.addTripleClickListener(el, function() {
console.log("triple");
});
ace.addListener(el, "selectstart", function(e) {
return ace.preventDefault(e);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,33 @@
<!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>worker</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Fabian Jakobs">
<!-- Date: 2010-04-08 -->
</head>
<body>
<script type="text/javascript" charset="utf-8">
var worker = new Worker("worker.js");
worker.onmessage = function(e) {
console.log(e.data);
};
worker.onerror = function(e) {
console.log(e.data);
};
worker.postMessage("postMessage('juhu')");
worker.postMessage("postMessage('juhu')");
</script>
</body>
</html>

View File

@@ -0,0 +1,3 @@
onmessage = function(e) {
onmessage = new Function("e", e.data);
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB