Skip to content
Browse files

add tree demo

  • Loading branch information...
1 parent 87bfb14 commit e58e44de8860855eb6e8f32c74b59de7bc8c603d @fjakobs fjakobs committed Jan 14, 2011
Showing with 194 additions and 0 deletions.
  1. +92 −0 demo/tree-demo.js
  2. +102 −0 editor-tree.html
View
92 demo/tree-demo.js
@@ -0,0 +1,92 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla Skywriter.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla.
+ * Portions created by the Initial Developer are Copyright (C) 2009
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ * Fabian Jakobs <fabian AT ajax DOT org>
+ * Kevin Dangoor (kdangoor@mozilla.com)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+
+define(function(require, exports, module) {
+
+exports.launch = function(env) {
+ var Editor = require("ace/editor").Editor;
+ var Renderer = require("ace/virtual_renderer").VirtualRenderer;
+ var Document = require("ace/document").Document;
+ var JavaScriptMode = require("ace/mode/javascript").Mode;
+ var UndoManager = require("ace/undomanager").UndoManager;
+
+ var doc = new Document(document.getElementById("jstext").innerHTML);
+ doc.setMode(new JavaScriptMode());
+ doc.setUndoManager(new UndoManager());
+
+ var container = document.getElementById("editor");
+ env.editor = new Editor(new Renderer(container));
+
+ tree = new Tree(doc.toString());
+
+ doc.addEventListener("changeDelta", function(e) {
+ var change = e.data;
+
+ if (change.action == "insertText") {
+ var start = change.range.start;
+ var offset = doc.getLines(0, start.row-1).join("\n").length + start.column;
+ var path = tree.pathOf(offset);
+ tree.insertAfter(path, change.text);
+ }
+
+ if (change.action == "removeText") {
+ var start = change.range.start;
+ var end = change.range.end;
+ var pathStart = tree.pathOf(doc.getLines(0, start.row-1).join("\n").length + start.column);
+ var pathEnd = tree.pathOf(doc.getLines(0, end.row-1).join("\n").length + end.column);
+ tree.removeRange(pathStart, pathEnd);
+ }
+
+ console.log(tree + "")
+ })
+
+ env.editor.setDocument(doc);
+
+
+ function onResize() {
+ container.style.width = (document.documentElement.clientWidth - 4) + "px";
+ container.style.height = (document.documentElement.clientHeight - 55 - 4 - 23) + "px";
+ env.editor.resize();
+ };
+
+ window.onresize = onResize;
+ onResize();
+};
+
+});
View
102 editor-tree.html
@@ -0,0 +1,102 @@
+<!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">
+
+ html {
+ height: 100%;
+ overflow: hidden;
+ }
+
+ body {
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
+ font-size: 12px;
+ background: rgb(14, 98, 165);
+ color: white;
+ }
+
+ #editor {
+ top: 55px;
+ left: 0px;
+ background: white;
+ }
+
+ #controls {
+ width: 100%;
+ height: 55px;
+ }
+
+ #jump {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ border: 1px solid red;
+ z-index: 10000;
+ display: none;
+ }
+
+ #cockpitInput {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+
+ border: none; outline: none;
+ font-family: consolas, courier, monospace;
+ font-size: 120%;
+ }
+
+ #cockpitOutput {
+ padding: 10px;
+ margin: 0 15px;
+ border: 1px solid #AAA;
+ -moz-border-radius-topleft: 10px;
+ -moz-border-radius-topright: 10px;
+ border-top-left-radius: 4px; border-top-right-radius: 4px;
+ background: #DDD; color: #000;
+ }
+ </style>
+</head>
+<body>
+ <div id="editor">
+ </div>
+
+ <script type="text/editor" id="jstext">function foo(items) {
+ for (var i=0; i<items.length; i++) {
+ alert(items[i] + "juhu");
+ }
+}</script>
+</script>
+
+ <script src="demo/require.js" type="text/javascript" charset="utf-8"></script>
+ <script src="support/harmony/tree.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+ var config = {
+ paths: {
+ demo: "../demo",
+ ace: "../lib/ace",
+ cockpit: "../support/cockpit/lib/cockpit",
+ pilot: "../support/pilot/lib/pilot"
+ }
+ };
+
+ var deps = [ "pilot/fixoldbrowsers", "demo/tree-demo" ];
+
+ require(config);
+ require(deps, function() {
+ require("demo/tree-demo").launch({});
+ });
+ </script>
+
+</body>
+</html>

0 comments on commit e58e44d

Please sign in to comment.
Something went wrong with that request. Please try again.