www/extjs3-ace/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Windows Example</title>

    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" charset="utf-8">

    <link rel="stylesheet" type="text/css" href="/extjs3/resources/css/ext-all.css" />
    <script type="text/javascript" src="/extjs3/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/extjs3/ext-all-debug.js"></script>

    <script type="text/javascript">
        var url = "/extjs3-ace/Component.js";
        if (/^\?\.*?build=true/.test(document.location.search))
        {
            url = "/build" + url;
            bravojs = {
                url: window.location.protocol + '//' + window.location.host + '/build/extjs3-ace/Component.js'
            };
        }
        document.write('<script type="text/javascript" src="' + url + '"><' + '/script>');
    </script>
    <script type="text/javascript">

Ext.onReady(function()
{
    // Editor

    var editor;

    new Ext.Window({
        title: 'ACE Editor',
        x: 10,
        y: 150,
        width: 850,
        height: 400,
        layout: "fit",
        items: [
            (editor = new Ext.ux.AceEditor())
        ]
    }).show();


    // Editor Tests

    new Ext.Window({
        title: 'ACE Editor Tests',
        x: 10,
        y: 10,
        width: 850,
        height: 130,
        layout: "fit",
        contentEl: "ace-editor-tests"
    }).show();
    
    function bindCheckbox(id, callback, fire) {
        var el = document.getElementById(id);
        var onCheck = function() {
            callback(!!el.checked);
        };
        el.onclick = onCheck;
        if (typeof fire == "undefined" || fire === true)
            onCheck();
    }

    function bindDropdown(id, callback, fire) {
        var el = document.getElementById(id);
        var onChange = function() {
            callback(el.value);
        };
        el.onchange = onChange;
        if (typeof fire == "undefined" || fire === true)
            onChange();
    }

    var modeEl = document.getElementById("mode");
    var wrapModeEl = document.getElementById("soft_wrap");
    
    function syncWrap(doc)
    {
        if (!doc.getUseWrapMode())
            wrapModeEl.value = "off";
        else
            wrapModeEl.value = doc.getWrapLimitRange().min || "free";
    }

    bindDropdown("doc", function(name)
    {
        // TODO: This should happen via a listener on the component
        modeEl.value = name

        editor.setValue(document.getElementById(name + "text").innerHTML, {
            mode: name,
            callback: function(doc)
            {
                syncWrap(doc);
            }
        });
    });

    bindDropdown("mode", function(name)
    {
        editor.setMode(name, {
            callback: function(doc)
            {
                syncWrap(doc);
            }
        });
    }, false);

    bindDropdown("theme", function(value)
    {
        editor.setTheme(value);
    }, false);

    bindDropdown("keybinding", function(value)
    {
        var options = {};
        if (value == "custom") {
            value = "hash_handler";
            options = {
                "gotoright": "Tab"
            };
        } else
        if (value == "ace") {
            value = null;
        }
        editor.setKeyboardHandler(value, options);
    }, false);

    bindDropdown("fontsize", function(value)
    {
        editor.setFontSize(value);
    }, false);

    bindDropdown("soft_wrap", function(value)
    {
        var session = editor.getSession();
        var renderer = editor.getRenderer();
        switch (value) {
            case "off":
                session.setUseWrapMode(false);
                renderer.setPrintMarginColumn(80);
                break;
            case "40":
                session.setUseWrapMode(true);
                session.setWrapLimitRange(40, 40);
                renderer.setPrintMarginColumn(40);
                break;
            case "80":
                session.setUseWrapMode(true);
                session.setWrapLimitRange(80, 80);
                renderer.setPrintMarginColumn(80);
                break;
            case "free":
                session.setUseWrapMode(true);
                session.setWrapLimitRange(null, null);
                renderer.setPrintMarginColumn(80);
                break;
        }
    }, false);

    bindCheckbox("select_style", function(checked) {
        editor.getEditor().setSelectionStyle(checked ? "line" : "text");
    }, false);

    bindCheckbox("highlight_active", function(checked) {
        editor.getEditor().setHighlightActiveLine(checked);
    }, false);

    bindCheckbox("show_hidden", function(checked) {
        editor.getEditor().setShowInvisibles(checked);
    }, false);

    bindCheckbox("show_gutter", function(checked) {
        editor.getRenderer().setShowGutter(checked);
    }, false);

    bindCheckbox("show_print_margin", function(checked) {
        editor.getRenderer().setShowPrintMargin(checked);
    }, false);

    bindCheckbox("highlight_selected_word", function(checked) {
        editor.getEditor().setHighlightSelectedWord(checked);
    }, false);

    bindCheckbox("show_hscroll", function(checked) {
        editor.getRenderer().setHScrollBarAlwaysVisible(checked);
    }, false);
});

    </script>
</head>
<body>

<div id="ace-editor-tests">

    <table border="0">
      <tr>
      <td align="right">
        <label for="doc">Document:</label>
        <select id="doc" size="1">
          <option value="javascript">JavaScript Document</option>
          <option value="html">HTML Document</option>
          <option value="css">CSS Document</option>
          <option value="coffee">CoffeeScript Document</option>
          <option value="python">Python Document</option>
          <option value="ruby">Ruby Document</option>
          <option value="perl">Perl Document</option>
          <option value="php">PHP Document</option>
          <option value="java">Java Document</option>
          <option value="csharp">C# Document</option>
          <option value="c_cpp">C++ Document</option>
          <option value="svg">SVG Document</option>
          <option value="textile">Textile Document</option>
          <option value="text">Text Document</option>
        </select>
      </td>
      <td align="right">
        <label for="theme">Theme:</label>
        <select id="theme" size="1">
          <option value="textmate">TextMate</option>
          <option value="eclipse">Eclipse</option>
          <option value="dawn">Dawn</option>
          <option value="idle_fingers">idleFingers</option>
          <option value="pastel_on_dark">Pastel on dark</option>
          <option value="twilight">Twilight</option>
          <option value="clouds">Clouds</option>
          <option value="clouds_midnight">Clouds Midnight</option>
          <option value="kr_theme">krTheme</option>
          <option value="mono_industrial">Mono Industrial</option>
          <option value="monokai">Monokai</option>
          <option value="merbivore">Merbivore</option>
          <option value="merbivore_soft">Merbivore Soft</option>
          <option value="vibrant_ink">Vibrant Ink</option>
        </select>
      </td>
      <td align="right">
        <label for="fontsize">Font Size:</label>
        <select id="fontsize" size="1">
          <option value="10px">10px</option>
          <option value="11px">11px</option>
          <option value="12px" selected="selected">12px</option>
          <option value="14px">14px</option>
          <option value="16px">16px</option>
          <option value="20px">20px</option>
          <option value="24px">24px</option>
        </select>
      </td>
      <td></td>
      <td align="right" valign="top" rowspan="4">
        <img src="logo.png">
      </td>
      </tr>
      <tr>
      <td align="right">
        <label for="mode">Mode:</label>
        <select id="mode" size="1">
          <option value="text">Text</option>
          <option value="javascript">JavaScript</option>
          <option value="xml">XML</option>
          <option value="html">HTML</option>
          <option value="css">CSS</option>
          <option value="python">Python</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="ruby">Ruby</option>
          <option value="c_cpp">C/C++</option>
          <option value="coffee">CoffeeScript</option>
          <option value="perl">Perl</option>
          <option value="csharp">C-Sharp</option>
          <option value="svg">SVG</option>
          <option value="textile">Textile</option>
        </select>
      </td>
      <td align="right">
        <label for="keybinding">Key Binding:</label>
        <select id="keybinding" size="1">
          <option value="ace">Ace</option>
          <option value="vim">Vim</option>
          <option value="emacs">Emacs</option>
          <option value="custom">Custom</option>
        </select>
      </td>
      <td align="right">
        <label for="soft_wrap">Soft Wrap:</label>
        <select id="soft_wrap" size="1">
          <option value="off">Off</option>
          <option value="40">40 Chars</option>
          <option value="80">80 Chars</option>
          <option value="free">Free</option>
        </select>
      </td>
      <td></td>
      </tr>
      <tr>
      <td align="right">
        <label for="select_style">Full Line Selection</label>
        <input type="checkbox" name="select_style" id="select_style" checked>
      </td>
      <td align="right">
        <label for="highlight_active">Highlight Active Line</label>
        <input type="checkbox" name="highlight_active" id="highlight_active" checked>
      </td>
      <td align="right">
        <label for="show_hidden">Show Invisibles</label>
        <input type="checkbox" name="show_hidden" id="show_hidden">
      </td>
      <td align="right">
        <label for="show_hscroll">Persistent HScroll</label>
        <input type="checkbox" name="show_hscroll" id="show_hscroll">
      </td>
      </tr>
      <tr>
      <td align="right">
        <label for="show_gutter">Show Gutter</label>
        <input type="checkbox" id="show_gutter" checked>
      </td>
      <td align="right">
        <label for="show_print_margin">Show Print Margin</label>
        <input type="checkbox" id="show_print_margin" checked>
      </td>
      <td align="right">
        <label for="highlight_selected_word">Highlight selected word</label>
        <input type="checkbox" id="highlight_selected_word" checked>
      </td>
      <td></td>
      </tr>
    </table>

</div>


<script type="text/editor" id="csharptext">public void HelloWorld() {
   //Say Hello!
   Console.WriteLine("Hello World");
}</script>

<script type="text/editor" id="javascripttext">function foo(items) {
    for (var i=0; i<items.length; i++) {
        alert(items[i] + "juhu");
    }
}
// A magic character: >> ぁ <<
</script>

    <script type="text/editor" id="csstext">.text-layer {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12px;
    cursor: text;
}</script>

    <script type="text/editor" id="htmltext"><html>
<head>

<style type="text/css">
.text-layer {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12px;
    cursor: text;
}
</style>

</head>
<body>
    <h1 style="color:red">Juhu Kinners</h1>
</body>
</html></script>

    <script type="text/editor" id="javatext">public class InfiniteLoop {

    /*
     * This will cause the program to hang...
     *
     * Taken from:
     * http://www.exploringbinary.com/java-hangs-when-converting-2-2250738585072012e-308/
     */
    public static void main(String[] args) {
        double d = Double.parseDouble("2.2250738585072012e-308");

        // unreachable code
        System.out.println("Value: " + d);
    }
}</script>

    <script type="text/editor" id="pythontext">#!/usr/local/bin/python

import string, sys

# If no arguments were given, print a helpful message
if len(sys.argv)==1:
    print 'Usage: celsius temp1 temp2 ...'
    sys.exit(0)

# Loop over the arguments
for i in sys.argv[1:]:
    try:
        fahrenheit=float(string.atoi(i))
    except string.atoi_error:
        print repr(i), "not a numeric value"
    else:
        celsius=(fahrenheit-32)*5.0/9.0
        print '%i\260F = %i\260C' % (int(fahrenheit), int(celsius+.5))
</script>

    <script type="text/editor" id="phptext"><?php

function nfact($n) {
  if ($n == 0) {
    return 1;
  }
  else {
    return $n * nfact($n - 1);
  }
}

echo "\n\nPlease enter a whole number ... ";
$num = trim(fgets(STDIN));

// ===== PROCESS - Determing the factorial of the input number =====
$output = "\n\nFactorial " . $num . " = " . nfact($num) . "\n\n";
echo $output;

?></script>

  <script type="text/editor" id="texttext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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. 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. 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 eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
</script>

    <script type="text/editor" id="rubytext">#!/usr/bin/ruby

# Program to find the factorial of a number
def fact(n)
    if n == 0
        1
    else
        n * fact(n-1)
    end
end

puts fact(ARGV[0].to_i)
</script>

<script type="text/editor" id="c_cpptext">// compound assignment operators

#include <iostream>
using namespace std;

int main ()
{
    int a, b=3; /* foobar */
    a = b;
    a+=2; // equivalent to a=a+2
    cout << a;
    return 0;
}
</script>

<script type="text/editor" id="coffeetext">#!/usr/bin/env coffee

try
    throw URIError decodeURI(0xC0ffee * 123456.7e-8 / .9)
catch e
    console.log 'qstring' + "qqstring" + '''
        qdoc
    ''' + """
        qqdoc
    """

do ->
    ###
    herecomment
    ###
    re = /regex/imgy.test ///
        heregex  # comment
    ///imgy
    this isnt: `just JavaScript`
    undefined

var illegal</script>

<script type="text/editor" id="perltext">
#!/usr/bin/perl
use strict;
use warnings;
my $num_primes = 0;
my @primes;

# Put 2 as the first prime so we won't have an empty array
$primes[$num_primes] = 2;
$num_primes++;

MAIN_LOOP:
for my $number_to_check (3 .. 200)
{
    for my $p (0 .. ($num_primes-1))
    {
        if ($number_to_check % $primes[$p] == 0)
        {
            next MAIN_LOOP;
        }
    }

    # If we reached this point it means $number_to_check is not
    # divisable by any prime number that came before it.
    $primes[$num_primes] = $number_to_check;
    $num_primes++;
}

for my $p (0 .. ($num_primes-1))
{
    print $primes[$p], ", ";
}
print "\n";

</script>

<script type="text/editor" id="svgtext"><svg 
  width="800" height="600" 
  xmlns="http://www.w3.org/2000/svg"
  onload="StartAnimation(evt)">

  <title>Test Tube Progress Bar</title>
  <desc>Created for the Web Directions SVG competition</desc>

  <script type="text/ecmascript"><![CDATA[
    var timevalue = 0;
    var timer_increment = 1;
    var max_time = 100;
    var hickory;
    var dickory;
    var dock;
    var i;

    function StartAnimation(evt) {
        hickory  = evt.target.ownerDocument.getElementById("hickory");
        dickory = evt.target.ownerDocument.getElementById("dickory");
        dock = evt.target.ownerDocument.getElementById("dock");

        ShowAndGrowElement();
    }
    function ShowAndGrowElement() {
        timevalue = timevalue + timer_increment;
        if (timevalue > max_time)
            return;
        // Scale the text string gradually until it is 20 times larger
        scalefactor = (timevalue * 650) / max_time;

        if (timevalue < 30) {
            hickory.setAttribute("display", "");
            hickory.setAttribute("transform", "translate(" + (600+scalefactor*3*-1 ) + ", -144 )");
        }

        if (timevalue > 30 && timevalue < 66) {
            dickory.setAttribute("display", "");
            dickory.setAttribute("transform", "translate(" + (-795+scalefactor*2) + ", 0 )");
        }
        if (timevalue > 66) {
            dock.setAttribute("display", "");
            dock.setAttribute("transform", "translate(" + (1450+scalefactor*2*-1) + ", 144 )");
        }

        // Call ShowAndGrowElement again <timer_increment> milliseconds later.
        setTimeout("ShowAndGrowElement()", timer_increment)
    }
    window.ShowAndGrowElement = ShowAndGrowElement
  ]]>&lt;/script>

  <rect 
    fill="#2e3436" 
    fill-rule="nonzero" 
    stroke-width="3" 
    y="0" 
    x="0" 
    height="600" 
    width="800" 
    id="rect3590"/>

    <text
       style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
       x="50"
       y="350"
       id="hickory"
       display="none">
        Hickory,</text>
    <text
       style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
       x="50"
       y="350"
       id="dickory"
       display="none">
        dickory,</text>
    <text
       style="font-size:144px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans;-inkscape-font-specification:Bitstream Vera Sans Bold"
       x="50"
       y="350"
       id="dock"
       display="none">
        dock!</text>
</svg></script>
<script type="text/editor" id="textiletext">h1. Textile document

h2. Heading Two

h3. A two-line
    header

h2. Another two-line
header

Paragraph:
one, two,
thee lines!

p(classone two three). This is a paragraph with classes

p(#id). (one with an id)

p(one two three#my_id). ..classes + id

* Unordered list
** sublist
* back again!
** sublist again..

# ordered

bg. Blockquote!
    This is a two-list blockquote..!

</script>


</body>
</html>