Bookmarklet Converter

by zerippe

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="input-group">
  <span class="input-group-addon">Read as</span>
  <select id="kind" class="form-control">
      <option value="local">File from Local</option>
      <option value="web">File from Web</option>
      <option value="dd">File Drag and Drop</option>
      <option value="text">Text</option>
  </select>
</div>
<div id="web" class="input-group kinds">
  <span class="input-group-addon">test</span>
  <input id="external-source" class="form-control" type="text" value="http://darekonoko.github.io/dareko.js" placeholder="http://www.hoge.com/script.js">
</div>
<div id="text" class="input-group kinds">
  <span class="input-group-addon">test</span>
  <textarea id="text-source" class="form-control" placeholder="var i = 10; alert(i);"></textarea>
</div>
<textarea id="code" class="form-control" readonly></textarea>
<a id="bl" class="btn btn-success btn-block" href="">Bookmarklet Link</a>
<button id="compress" class="btn btn-primary btn-block">Compress</button>

CSS

body{
    padding: 10px;
}
#code{
    width: 100%;
    height: 100px;
    font-family: meiryo;
}

JavaScript

$("#kind").on("change", function(e) {
    var selected = e.target.value;
    $(".kinds").hide();
    $("#" + selected).show();
});

var compress = function() {
    var source = $('input[name="source"]:checked').val();
    var value = $("#" + source).val();
    if (source == "external-source") {
        source = "code_url";
    } else if (source == "text-source") {
        source = "js_code";   
    } else {
        return;
    }
    var data = {
        "compilation_level": "SIMPLE_OPTIMIZATIONS",
        "output_format": "json",
        "output_info": "compiled_code",
    };
    data[source] = value;

    $.ajax({
        type: "post", dataType: "json",
        url: "http://closure-compiler.appspot.com/compile",
        data: data,
        beforeSend: function() {
            $("#compress").attr("disabled", "disabled").text("Waiting ...");
        },
        success: function(data) {
            $("#compress").removeAttr("disabled").text("Compress");
            var code = "javascript:(function(){" + data.compiledCode + "})()";
            $("#code").text(code);
            $("#bl").attr("href", code);
            console.log(data);
        }
    });
};

$("#compress").on("click", compress);