123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- <!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="https://ajaxorg.github.io/ace-builds/src-noconflict"></input><br>
- <br>
- <a href="#" onmouseover="buildBookmarklet()" onmousedown="buildBookmarklet()" class="bookmarkletLink">Ace Bookmarklet Link</a>
- <br>
- <br>
- <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">
- </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 a folder containing ace.js (you can leave the default to load the scripts from GitHub).</li>
- <li>Drag the <a href="#" onmouseover="buildBookmarklet()" onmousedown="buildBookmarklet()" class="bookmarkletLink">"Ace Bookmarklet Link"</a> link to your toolbar or store it somewhere else.</li>
- <li>Click the bookmarklet.</li>
- <li>Click three times on a textarea you want to replace - Ace will replace it.</li>
- <li>To change settings, use <strong>Ctrl-,</strong> shortcut. (<strong>Cmd-,</strong> on mac).</li>
- </ul>
- <textarea cols="80">Test bookmarklet here!</textarea>
- </div>
- </div>
- </div>
- <script>
- function inject(options, callback) {
- var load = function(path, callback) {
- var head = document.getElementsByTagName('head')[0];
- var s = document.createElement('script');
- s.src = options.baseUrl + "/" + path;
- head.appendChild(s);
- s.onload = s.onreadystatechange = function(_, isAbort) {
- if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
- s = s.onload = s.onreadystatechange = null;
- if (!isAbort)
- callback();
- }
- };
- };
- var pending = [];
- var transform = function(el) { pending.push(el) };
- load("ace.js", function() {
- ace.config.loadModule("ace/ext/textarea", function(m) {
- transform = function(el) {
- if (!el.ace)
- el.ace = m.transformTextarea(el, options.ace);
- };
- pending = pending.forEach(transform);
- callback && setTimeout(callback);
- });
- });
- if (options.target)
- return transform(options.target);
- window.addEventListener("click", function(e) {
- if (e.detail == 3 && e.target.localName == "textarea")
- transform(e.target);
- });
- }
- // Call the inject function to load the ace files.
- var textAce;
- inject({
- baseUrl: "../../src-noconflict",
- target: document.querySelector("textarea")
- }, function () {
- // Transform the textarea on the page into an ace editor.
- textAce = document.querySelector("textarea").ace;
- textAce.setDisplaySettings(true);
- buildBookmarklet();
- });
- function buildBookmarklet() {
- var injectSrc = inject.toString().split("\n").join("");
- injectSrc = injectSrc.replace(/\s+/g, " ");
- Function("", injectSrc); // check if injectSrc is still valid js
-
- var options = textAce.getOptions();
- options.baseUrl = document.getElementById("srcURL").value;
- var els = document.querySelectorAll(".bookmarkletLink");
- for (var i = 0; i < els.length; i++)
- els[i].href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
- }
- </script>
- </body>
- </html>
|