Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

file 115 lines (97 sloc) 3.987 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Ace Bookmarklet Builder</title>
</head>
<body>

<div id="wrapper">

<div class="content" style="width: 950px">
    <div class="column1" style="margin-top: 47px">
        <textarea id="textarea" style="width:300px; height:300px">
/**
 * This is Ace injected using a bookmarklet.
 */
function foo() {
    var bar = true;
}</textarea><br>
        SourceUrl: <br>
        <input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/textarea/src/"></input><br>
        <button id="buBuild">Build Link</button> <br> <a href="#"></a>
        <a href="https://github.com/ajaxorg/ace/">
            <div class="fork_on_github" ></div>
        </a>
    </div>
    <div class="column2">
        <h1>Ace Bookmarklet Builder</h1>

        <p id="first">
        <strong>WARNING:</strong> Currently, this is only supported in non IE browsers.
        </p>

        <h2>How to use it:</h2>
        <ul>
            <li>Select the options as you want them to be by default.</li>
            <li>Enter the "SourceUrl". This has to be the URL pointing to build/textarea/src/ (you can leave the default to server the scripts from GitHub).</li>
            <li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
            <li>Drag the generated link to your toolbar or store it somewhere else.</li>
            <li>Go to a page with a textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
            <li>Click three times on the textarea you want to replace - Ace will replace it.</li>
            <li>To change settings, just click the red icon in the bottom right corner.</li>
        </ul>
    </div>
</div>
</div>

<script>

function inject(callback) {
    var baseUrl = "src/";
    
    var load = window.__ace_loader__ = function(path, module, callback) {
        var head = document.getElementsByTagName('head')[0];
        var s = document.createElement('script');
    
        s.src = baseUrl + path;
        head.appendChild(s);
        
        s.onload = function() {
            window.__ace_shadowed__.require([module], callback);
        };
    };

    load('ace-bookmarklet.js', "ace/ext/textarea", function() {
        var ace = window.__ace_shadowed__;
        
        ace.options.mode = "javascript";
        var Event = ace.require("ace/lib/event");
        var areas = document.getElementsByTagName("textarea");
        for (var i = 0; i < areas.length; i++) {
            Event.addListener(areas[i], "click", function(e) {
                if (e.detail == 3) {
                    ace.transformTextarea(e.target, load);
                }
            });
        }
        callback && callback();
    });
}

// Call the inject function to load the ace files.
var textAce;
inject(function () {
    // Transform the textarea on the page into an ace editor.
    var ace = window.__ace_shadowed__;
    var t = document.querySelector("textarea");
    textAce = ace.transformTextarea(t, window.__ace_loader__);
    setTimeout(function(){textAce.setDisplaySettings(true)});
});


document.getElementById("buBuild").onclick = function() {
    var injectSrc = inject.toString().split("\n").join("");
    injectSrc = injectSrc.replace('baseUrl = "src/"', 'baseUrl="' + document.getElementById("srcURL").value + '"');

    var aceOptions = textAce.getOptions();
    var opt = [];
    for (var option in aceOptions) {
        opt.push(option + ":'" + aceOptions[option] + "'");
    }
    injectSrc = injectSrc.replace('ace.options.mode = "javascript"', 'ace.options = { ' + opt.join(",") + ' }');
    injectSrc = injectSrc.replace(/\s+/g, " ");

    var a = document.querySelector("a");
    a.href = "javascript:(" + injectSrc + ")()";
    a.innerHTML = "Ace Bookmarklet Link";
}

</script>

</body>
</html>
Something went wrong with that request. Please try again.