From 841a715debad0aae52891947834c9dfe9b4e51ee Mon Sep 17 00:00:00 2001 From: C9 Date: Wed, 12 Sep 2012 14:42:01 -0400 Subject: [PATCH] Updates --- doc/site/js/main.js | 18 +++- doc/site/style.css | 70 +++++++++++--- index.html | 228 ++++++++++++++++++++++++-------------------- 3 files changed, 198 insertions(+), 118 deletions(-) diff --git a/doc/site/js/main.js b/doc/site/js/main.js index 744b6fe4..2b664c29 100644 --- a/doc/site/js/main.js +++ b/doc/site/js/main.js @@ -1,6 +1,12 @@ $(function() { hljs.initHighlighting(); + $("ul.menu-list li").click(function(e) { + if (e.target.tagName === "LI") { + console.log($(this).find("a")); + window.location = $(this).find("a").attr("href"); + } + }); var tabs = $("#tabnav"), tab_a_selector = "a"; @@ -17,10 +23,20 @@ firstLoad = false; setTimeout(function() { $("#top_container").removeClass("collapse"); + scrollIntoPosition(e.target); }, 700); } else { $("#top_container").removeClass("collapse"); + scrollIntoPosition(e.target); + } + } + + function scrollIntoPosition(el) { + if ($("body").scrollTop() > 345) { + $("body").stop().animate({ + scrollTop: ($(el).offset().top - 15) + }, 400); } } @@ -33,7 +49,7 @@ $(window).on("hashchange", function(e) { tabs.each(function() { - var idx = $.bbq.getState("nav") || "embedding"; + var idx = $.bbq.getState("nav") || "about"; $(this).find(tab_a_selector + "[href='#" + idx + "']").triggerHandler('click'); }); }).trigger("hashchange"); diff --git a/doc/site/style.css b/doc/site/style.css index 9f9643c5..5cb69bee 100644 --- a/doc/site/style.css +++ b/doc/site/style.css @@ -2,7 +2,7 @@ body { margin:0; padding:0; background-color:#e6f5fc; - + font-family: Helvetica, Arial; } h1, h2, h3, h4, h5, h6 { @@ -26,14 +26,12 @@ H2 { H3 { font-size:22px; color:#253741; - margin-top:43px; margin-bottom:8px; } H4 { font-size:21px; color:#222222; - margin-bottom:4px; } P { @@ -45,6 +43,7 @@ P { UL{ line-height : 22px; + font-size: 16px; } #header { @@ -137,6 +136,7 @@ UL{ padding: 15px 40px; height: 280px; -webkit-transition: height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out; + -moz-transition: height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out; opacity: 1; margin-top: 25px; } @@ -182,10 +182,14 @@ UL{ } UL.content-list { - padding: 15px 20px; + padding: 15px 0 15px 20px; margin:0; } +UL.content-list li { + padding-left: 10px; +} + ul.menu-list { padding: 0; margin: 15px 0 20px 0; @@ -194,19 +198,55 @@ ul.menu-list { overflow: auto; } -UL.menu-list LI { - color:#2557b4; +ul.menu-list li { + color: #2557B4; font-family: Helvetica, Trebuchet MS; - font-size:12px; + font-size: 12px; padding: 5px; + cursor: pointer; display: block; float: left; margin-right: 15px; - margin-bottom: 15px; + margin-bottom: 20px; width: 100px; - height: 80px; - border: 1px solid #bbb; + height: 90px; border-radius: 5px; + position: relative; + background: rgba(255, 255, 255, 0.7); + margin-left: 22px; + margin-top: 20px; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); + -webkit-transition: box-shadow 0.4s; + -moz-transition: box-shadow 0.4s; + border: 1px solid #999; + background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), + -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), + -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), + + -webkit-linear-gradient(-90deg, hsl(0,0%,78%) 0%, + hsl(0,0%,90%) 47%, + hsl(0,0%,78%) 53%, + hsl(0,0%,70%)100%); +} + +ul.menu-list li:hover { + box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); +} + +UL.menu-list LI a { + position: absolute; + bottom: 3px; + left: 8px; + color: #FFF; + text-align: left; + font-weight: bold; + text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); +} + +UL.menu-list LI a:hover { + text-decoration: none; } A { @@ -286,6 +326,8 @@ UL.menu-footer LI A:hover { text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); box-shadow: 0 0 1px rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1); + -webkit-transition: background 0.2s; + -moz-transition: background 0.2s; } .nav.nav-pills li:first-child > a { @@ -299,6 +341,12 @@ UL.menu-footer LI A:hover { .nav.nav-pills li:last-child > a { border-right: none; + box-shadow: none; + -moz-box-shadow: none; +} + +.tab-content { + margin-bottom: 100px; } .tab-content > .active, .pill-content > .active { @@ -312,6 +360,6 @@ UL.menu-footer LI A:hover { -moz-border-radius: 5px; } -pre .xml .javascript { +pre .xml .javascript, pre .xml .css { opacity: 1; } \ No newline at end of file diff --git a/index.html b/index.html index a8a96389..0ea80571 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,10 @@ - Fork me on GitHub + + Fork me on GitHub +
@@ -35,7 +38,7 @@
  • About
    • -
  • +
  • Embedding Guide
  • @@ -53,13 +56,16 @@
    -

    About ACE

    -

    Ace is a embeddable code editor written in JavaScript. +

    Built for Code

    +

    ACE is a embeddable code editor written in JavaScript. It matches and extends the features, usability and performance of existing native editors such as Sublime, Vim or TextMate. It can be easily embedded in any web page and JavaScript application. ACE is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

    +

    Using ACE

    +

    Want ACE on your own site or web app? Check out our embedding + guide to get started right away!

    Features

    -

    Take Ace for a spin!

    -

    Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.

    +

    Take ACE for a spin!

    +

    The kitchen sink demo + allows you to test all ACE features. You can check out the code for the + demo on GitHub.

    Getting the code

    -

    Ace is a community project. We actively encourage and support - contributions. The Ace source code is hosted on GitHub. - Ace is a community project released under the BSD license ‐ - very simple andis friendly to all kinds of projects, whether OSS - or not. We actively encourage and support contributions. - Take charge of your editor and add your favorite language highlighting and keybindings!

    +

    ACE is a community project. We actively encourage and support + contributions! The ACE source code is hosted on GitHub + and released under the BSD license ‐ + very simple and friendly to all kinds of projects, whether OSS + or not. Take charge of your editor and add your favorite language + highlighting and keybindings!

    git clone git://github.com/ajaxorg/ace.git

    History

    -

    Previously known as “Bespin” or lately “Skywriter” it’s now - known as Ace (Ajax.org Cloud9 Editor)! Bespin and Ace started +

    Skywriter/Bespin and ACE started as two independent projects both aiming to build a no compromise code editor component for the web. Bespin started as part of - Mozilla Labs and was based on the <canvas> tag, while Ace is - the Editor component of the Cloud9 IDE - and is using the DOM for rendering. After the release of Ace at + Mozilla Labs and was based on the <canvas> tag, while ACE is + the Editor component of Cloud9 IDE + and uses the DOM for rendering. After the release of ACE at JSConf.eu 2010 - in Berlin the Skywriter team decided to merge Ace with a simplified - version of Skywriter's plugin system and some of Skywriter's - extensibility points. All these changes have been merged back to Ace + in Berlin the Skywriter team decided to merge ACE with a simplified + version of Skywriter's plugin system and some of Skywriter's + extensibility points. All these changes have been merged back to ACE now, which supersedes Skywriter. Both Cloud9 IDE and Mozilla are actively developing and - maintaining Ace.

    -

    Related Projects

    -

    Embedding ACE in Your Site

    -

    ACE can be easily embedded into any existing web page. You can either use one of - the pre-packaged versions of ace - (just copy one of src* subdirectories somewhere into your project), or - use requireJS to load the contents of - lib/ace as ace.

    -

    Also, take a look at the one of the included demos for how to use Ace:

    +

    ACE can be easily embedded into a web page. After you + test the code below, check out the How-To Guide + for more instructions.

    - - -

    The easiest way to embed ACE is like so:

    - 
    <div id="editor" style="position: absolute; height: 500px; width: 500px">some code</div>
    - 
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript">
+                            
    <!DOCTYPE html>
+<html lang="en">
+<head>
+<title>ACE in Action</title>
+<style type="text/css" media="screen">
+    #editor { 
+        position: absolute;
+        width: 500px;
+        height: 400px;
+    }
+</style>
+</head>
+<body>
+
+<div id="editor">function foo(items) {
+    var x = "All this is syntax highlighted";
+    return x;
+}</div>
+    
+<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
     var editor = ace.edit("editor");
-</script>
-
    
+    editor.setTheme("ace/theme/twilight");
+    editor.getSession().setMode("ace/mode/javascript");
+</script>
+</body>
+</html>
    +

    Now check out the How-To Guide for instructions on + common operations, such as setting a different language mode or + getting the contents from the editor.

    +

    Loading ACE from a Local URL

    +

    The above code is sufficient to get started, but if you want to clone host ACE locally you can + use one of the pre-packaged versions. Just copy + one of src* subdirectories somewhere into your project, or use RequireJS to load the + contents of lib/ace as ace:

    + 
    var ace = require("lib/ace");
    -

    How-To Guide

    -

    This is a collection of common operations developers typically perform - on their ACE instance. In all of these cases ACE has been invoked on an - element with the id set to "editor" like so: -

    - 
    <div id="editor" style="position: absolute; height: 500px; width: 500px">some code</div>
    -

    ...and the editor has been initialized by ACE like so:

    - 
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
-<script>
-    var editor = ace.edit("editor");
-</script>
-
    -

    Setting Theme and Language Modes

    +

    Nearly Everything you Want to do with ACE

    +

    This is a collection of common operations developers perform on ACE. + In all of these cases ACE has been invoked exactly + as shown on the embedding guide.

    +

    Setting Themes

    To change the theme, configure the editor to use the theme using its module name. The theme file will be loaded on demand:

    editor.setTheme("ace/theme/twilight");
    - -

    By default, the editor only supports plain text mode. However, all other language modes are available as separate modules. Modes are also loaded on demand, and can be included like this:

    - -

    Retrieving Editor States

    - -

    Ace keeps all the editor states (selection, scroll position, etc.) in editor.session, which is very useful for making a tabbed editor:

    - + +

    Setting Other Language Modes

    +

    By default, the editor supports plain text mode. All other language modes are available as separate modules. Modes are also loaded on demand like this:

    + + 
    <script src="src/mode-javascript.js" type="text/javascript" charset="utf-8">
    +

    The mode can then be used like this:

    + 
    var javascriptMode = require("ace/mode/javascript").Mode;
+editor.getSession().setMode(new javascriptMode());
    + +

    One Editor, Multiple Sessions

    +

    ACE keeps everything about the state of the editor (selection, scroll position, etc.) + in editor.session. This means you can grab the + session, store it in a var, and set the editor to another session (e.g. a tabbed editor).

    +

    You might accomplish this like so:

    + 
    var EditSession = require("ace/edit_session").EditSession;
 var js = new EditSession("some js code");
 var css = new EditSession(["some", "css", "code here"]);
 // and then to load document into editor, just call
 editor.setSession(js);
    -

    Quickstart

    -

    To set and get content:`

    +

    Common Operations

    +

    Set and get content:`

    editor.setValue("the new text here"); // or session.setValue
 editor.getValue(); // or session.getValue
    -

    To get selected text:

    +

    Get selected text:

    editor.session.getTextRange(editor.getSelectionRange());
    -

    To insert at cursor:

    +

    Insert at cursor:

    editor.insert("Something cool");
    -

    To get the current cursor line and column:

    +

    Get the current cursor line and column:

    editor.selection.getCursor();
    -

    To go to a line:

    +

    Go to a line:

    editor.gotoLine(lineNumber);
    -

    To get total number of lines:

    +

    Get total number of lines:

    editor.session.getLength();
    -

    To set the default tab size:

    +

    Set the default tab size:

    editor.getSession().setTabSize(4);
    -

    To use soft tabs:

    +

    Use soft tabs:

    editor.getSession().setUseSoftTabs(true);
    -

    To set the font size:

    +

    Set the font size:

    document.getElementById('editor').style.fontSize='12px';
    -

    To toggle word wrapping:

    +

    Toggle word wrapping:

    editor.getSession().setUseWrapMode(true);
    -

    To set line highlighting:

    +

    Set line highlighting:

    editor.setHighlightActiveLine(false);
    -

    To set the print margin visibility:

    +

    Set the print margin visibility:

    editor.setShowPrintMargin(false);
    -

    To set the editor to read-only:

    +

    Set the editor to read-only:

    editor.setReadOnly(true);  // false to make it editable
    @@ -282,21 +291,25 @@ editor.replace('bar'); 
    editor.replaceAll('bar');
    -

    (editor.replaceAll uses the needle set by searchoptions.needle.)

    +

    (editor.replaceAll uses the needle set earlier by editor.find('needle', ...)

    Listening to Events

    To listen for an onchange:

    - 
    editor.getSession().on('change', callback);
    + 
    editor.getSession().on('change', function(e) {
+    // e.type, etc
+});

    To listen for an selection change:

    - 
    editor.getSession().selection.on('changeSelection', callback);
    + 
    editor.getSession().selection.on('changeSelection', function(e) {
+});

    To listen for a cursor change:

    - 
    editor.getSession().selection.on('changeCursor', callback);
    + 
    editor.getSession().selection.on('changeCursor', function(e) {
+});

    Adding New Commands and Keybindings

    @@ -311,10 +324,13 @@ editor.replace('bar'); });

    -

    Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

    +

    API Reference

    +

    ACE is awesome.

    -

    Projects Using Ace

    +

    Projects Using ACE

    +

    ACE is used all over the web in all kinds of production applications. Here is + just a small sampling:

    -

    User Resources

    -