First Acelet

README.md

@@ -1,4 +1,5 @@
-acelet
+Acelet
 ======
 
-Edit code snippets in your browser
+Acelet is a bookmarklet that allows you to edit selected text and code snippets
+in an advanced code editor, right in your browser.

acelet.bookmarklet

@@ -0,0 +1,71 @@
+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');}());