Load remote script, small bookmarklet

tsi · Mar 9, 2013 · 2c0db43 · 2c0db43
1 parent 1e0f118
commit 2c0db43
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 72 deletions.
diff --git a/acelet.bookmarklet b/acelet.bookmarklet
@@ -1,71 +1,12 @@
 javascript:(function(){
-  function encodeString(string) {
-    return encodeURIComponent(string
-           .replace(/\\/g,"\\\\")
-           .replace(/\"/g, '\\"')
-           .replace(/\n\r?/g, '\\n')
-           .replace(/%/g, 'U0025')
-           .replace(/</g, '\\<')
-           .replace(/>/g, '\\>')
-           .replace(/script/ig, 'scr\"\+\"ipt')
-    );
-  }
-  var aceletValue = encodeString(window.getSelection().toString());
-  window.open('
-data:text/html;charset=utf-8,
-<title>Acelet</title>
-<link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/>
-<style>
-  body {margin: 0; background: #000;}
-  #editor {font-size: 18px; width: 100%; height: 90%; height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); border: none; outline: none}
-  button, #footer, #mode, .mode {border: none; background: none; padding: 0 10px; margin: 0; color: #ccc; font: 13px/20px Arial, sans-serif; text-align: center;}
-  button:hover {cursor: pointer; color: #fff;}
-  span.mode {float: right;}
-  a, a:visited {text-decoration: none; color: crimson;}
-  select {cursor: pointer;}
-  option {color: black;}
-</style>
-<button onClick="saveToFile()">Save as...</button>
-<span class="mode">Syntax: <select id="mode" onchange="changeMode(this)" size="1"><option value="abap">ABAP</option><option value="asciidoc">AsciiDoc</option><option value="c9search">C9Search</option><option value="coffee">CoffeeScript</option><option value="coldfusion">ColdFusion</option><option value="csharp">C#</option><option value="css">CSS</option><option value="curly">Curly</option><option value="dart">Dart</option><option value="diff">Diff</option><option value="dot">Dot</option><option value="glsl">Glsl</option><option value="golang">Go</option><option value="groovy">Groovy</option><option value="haxe">haXe</option><option value="haml">HAML</option><option value="html">HTML</option><option value="c_cpp">C/C++</option><option value="clojure">Clojure</option><option value="jade">Jade</option><option value="java">Java</option><option value="jsp">JSP</option><option value="javascript">JavaScript</option><option value="json">JSON</option><option value="jsx">JSX</option><option value="latex">LaTeX</option><option value="less">LESS</option><option value="lisp">Lisp</option><option value="liquid">Liquid</option><option value="lua">Lua</option><option value="luapage">LuaPage</option><option value="lucene">Lucene</option><option value="makefile">Makefile</option><option value="markdown">Markdown</option><option value="objectivec">Objective-C</option><option value="ocaml">OCaml</option><option value="perl">Perl</option><option value="pgsql">pgSQL</option><option value="php">PHP</option><option value="powershell">Powershell</option><option value="python">Python</option><option value="r">R</option><option value="rdoc">RDoc</option><option value="rhtml">RHTML</option><option value="ruby">Ruby</option><option value="scad">OpenSCAD</option><option value="scala">Scala</option><option value="scss">SCSS</option><option value="sh">SH</option><option value="sql">SQL</option><option value="stylus">Stylus</option><option value="svg">SVG</option><option value="tcl">Tcl</option><option value="tex">Tex</option><option value="text">Text</option><option value="textile">Textile</option><option value="typescript">Typescript</option><option value="vbscript">VBScript</option><option value="xml">XML</option><option value="xquery">XQuery</option><option value="yaml">YAML</option></select></span>
-<div id="editor"></div>
-<div id="footer"><a href="https://gist.github.com/tsi/5089758">Acelet</a> - Powered by <a href="http://ace.ajax.org" taget="_blank">Ace</a></div>
-<script src="http://ajaxorg.github.com/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
-<script>
-  var syntax = "scss";
-  var e = ace.edit("editor");
-  e.setShowInvisibles(true);
-  e.setTheme("ace/theme/monokai");
-  e.getSession().setMode("ace/mode/" + syntax);
-  document.getElementById("mode").value = syntax;
-  e.getSession().setUseWrapMode(true);
-  e.getSession().setTabSize(2);
-  e.setValue(decodeString("'+aceletValue+'"), -1);
-  e.focus();
-  function decodeString(string) {
-    return decodeURIComponent(string)
-           .replace(/%C2%A0/ig, "\\%20")
-           .replace(/U0025/ig, "\%");
-  }
-  function saveToFile() {
-    window.location = "data:application/octet-stream," + escape(e.getSession().getValue());
-  }
-  function changeMode(mode) {
-    e.getSession().setMode("ace/mode/" + mode.options[mode.selectedIndex].value);
-  }
-
-  /*
-  inspired by the discussion on https://coderwall.com/p/lhsrcq
-  Written by Tsachi Shlidor (@shlidor)
-  GPL Licenced
-
-  Possible improvements:
-  * Improve encoding/decoding
-  * New
-  * Load
-  * Save (not save as)
-  * Live HTML preview - https://coderwall.com/p/lhsrcq#comment_3609
-  * Files sidebar (drag&drop)
-  */
-
-</script>
-', '_blank');}());
+  var aceletTab = window.open('about:blank', 'Acelet');
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.onload = function(){
+    aceletTab.location = acelet();
+    aceletTab.focus();
+  };
+  script.src = 'acelet.min.js';
+  document.body.appendChild(script);
+}());
diff --git a/acelet.js b/acelet.js
@@ -0,0 +1,72 @@
+function acelet() {
+  function encodeString(string) {
+    return encodeURIComponent(string
+           .replace(/\\/g,"\\\\")
+           .replace(/\"/g, '\\"')
+           .replace(/\n\r?/g, '\\n')
+           .replace(/%/g, 'U0025')
+           .replace(/</g, '\\<')
+           .replace(/>/g, '\\>')
+           .replace(/script/ig, 'scr\"\+\"ipt')
+    );
+  }
+  var aceletValue = encodeString(window.getSelection().toString());
+  return '
+    data:text/html;charset=utf-8,
+    <title>Acelet</title>
+    <link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/>
+    <style>
+      body {margin: 0; background: #000;}
+      #editor {font-size: 18px; width: 100%; height: 90%; height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); border: none; outline: none}
+      button, #footer, #mode, .mode {border: none; background: none; padding: 0 10px; margin: 0; color: #ccc; font: 13px/20px Arial, sans-serif; text-align: center;}
+      button:hover {cursor: pointer; color: #fff;}
+      span.mode {float: right;}
+      a, a:visited {text-decoration: none; color: crimson;}
+      select {cursor: pointer;}
+      option {color: black;}
+    </style>
+    <button onClick="saveToFile()">Save as...</button>
+    <span class="mode">Syntax: <select id="mode" onchange="changeMode(this)" size="1"><option value="abap">ABAP</option><option value="asciidoc">AsciiDoc</option><option value="c9search">C9Search</option><option value="coffee">CoffeeScript</option><option value="coldfusion">ColdFusion</option><option value="csharp">C#</option><option value="css">CSS</option><option value="curly">Curly</option><option value="dart">Dart</option><option value="diff">Diff</option><option value="dot">Dot</option><option value="glsl">Glsl</option><option value="golang">Go</option><option value="groovy">Groovy</option><option value="haxe">haXe</option><option value="haml">HAML</option><option value="html">HTML</option><option value="c_cpp">C/C++</option><option value="clojure">Clojure</option><option value="jade">Jade</option><option value="java">Java</option><option value="jsp">JSP</option><option value="javascript">JavaScript</option><option value="json">JSON</option><option value="jsx">JSX</option><option value="latex">LaTeX</option><option value="less">LESS</option><option value="lisp">Lisp</option><option value="liquid">Liquid</option><option value="lua">Lua</option><option value="luapage">LuaPage</option><option value="lucene">Lucene</option><option value="makefile">Makefile</option><option value="markdown">Markdown</option><option value="objectivec">Objective-C</option><option value="ocaml">OCaml</option><option value="perl">Perl</option><option value="pgsql">pgSQL</option><option value="php">PHP</option><option value="powershell">Powershell</option><option value="python">Python</option><option value="r">R</option><option value="rdoc">RDoc</option><option value="rhtml">RHTML</option><option value="ruby">Ruby</option><option value="scad">OpenSCAD</option><option value="scala">Scala</option><option value="scss">SCSS</option><option value="sh">SH</option><option value="sql">SQL</option><option value="stylus">Stylus</option><option value="svg">SVG</option><option value="tcl">Tcl</option><option value="tex">Tex</option><option value="text">Text</option><option value="textile">Textile</option><option value="typescript">Typescript</option><option value="vbscript">VBScript</option><option value="xml">XML</option><option value="xquery">XQuery</option><option value="yaml">YAML</option></select></span>
+    <div id="editor"></div>
+    <div id="footer"><a href="https://gist.github.com/tsi/5089758">Acelet</a> - Powered by <a href="http://ace.ajax.org" taget="_blank">Ace</a></div>
+    <script src="http://ajaxorg.github.com/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script>
+      var syntax = "scss";
+      var e = ace.edit("editor");
+      e.setShowInvisibles(true);
+      e.setTheme("ace/theme/monokai");
+      e.getSession().setMode("ace/mode/" + syntax);
+      document.getElementById("mode").value = syntax;
+      e.getSession().setUseWrapMode(true);
+      e.getSession().setTabSize(2);
+      e.setValue(decodeString("'+aceletValue+'"), -1);
+      e.focus();
+      function decodeString(string) {
+        return decodeURIComponent(string)
+               .replace(/%C2%A0/ig, "\\%20")
+               .replace(/U0025/ig, "\%");
+      }
+      function saveToFile() {
+        window.location = "data:application/octet-stream," + escape(e.getSession().getValue());
+      }
+      function changeMode(mode) {
+        e.getSession().setMode("ace/mode/" + mode.options[mode.selectedIndex].value);
+      }
+
+      /*
+      inspired by the discussion on https://coderwall.com/p/lhsrcq
+      Written by Tsachi Shlidor (@shlidor)
+      GPL Licenced
+
+      Possible improvements:
+      * Improve encoding/decoding
+      * New
+      * Load
+      * Save (not save as)
+      * Live HTML preview - https://coderwall.com/p/lhsrcq#comment_3609
+      * Files sidebar (drag&drop)
+      */
+
+    </script>
+  ';
+}
diff --git a/acelet.min.bookmarklet b/acelet.min.bookmarklet
@@ -0,0 +1 @@
+javascript:(function(){var aceletTab=window.open('about:blank', 'Acelet');var script=document.createElement('script');script.type='text/javascript';script.async=true;script.onload=function(){aceletTab.location=acelet();aceletTab.focus();};script.src='acelet.min.js';document.body.appendChild(script);}());
diff --git a/acelet.min.js b/acelet.min.js
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -18,8 +18,9 @@
 </head>
 <body>
 
-  <a title="Acelet" class="acelet" href="#">Acelet</a>
-  <p>tl;dr - Select some text/code. Press the button. Hack.</p>
+
+  <a title="Acelet" class="acelet" href="javascript:(function(){var aceletTab=window.open('about:blank', 'Acelet');var script=document.createElement('script');script.type='text/javascript';script.async=true;script.onload=function(){aceletTab.location=acelet();aceletTab.focus();};script.src='acelet.min.js';document.body.appendChild(script);}());">Acelet</a>
+  <p>tl;dr - Select some text/code. Push the button. Hack.</p>
   <p class="intro">Ever wished you could just click to edit a code snippet? in the browser??</p>
   <p>Acelet is a bookmarklet that allows you to edit selected text and code snippets
 in an advanced code editor, right in your browser.</p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		javascript:(function(){var aceletTab=window.open('about:blank', 'Acelet');var script=document.createElement('script');script.type='text/javascript';script.async=true;script.onload=function(){aceletTab.location=acelet();aceletTab.focus();};script.src='acelet.min.js';document.body.appendChild(script);}());