perlbuut-pastebin/templates/editor.html

[% BLOCK body_style %]
<style type="text/css" media="screen">
    #editor {
      margin: auto;
      position: relative !important;
      width: 100%;
      height: 500px;
      display: none;
      font-variant-ligatures: none;
    }

    #paste {
      font-family: 'monospace'
    }

    html, body, #content {
      width: 100%;
    }
    @font-face {
      font-family: "AnonymousPro";
      src: url("/static/fonts/AnonymousPro-Regular.woff2") format('woff2');
    }

    .options label {
      padding-right: 0.5em;
    }
    .options label:not(:first-child) {
      padding-left: 2em;
    }
  </style>
  <script>
    $(function() {
     var hostname = $(location).attr('hostname');
     var channel = $(location).attr('hash');

     // console.log("host: " + hostname + " channel: " + channel);

     // fuck parsing the hostname
     var servers = {
       "f.perlbot.pl":        "localhost:perlbot:",
       "freenode.perlbot.pl": "localhost:perlbot:",
       "m.perlbot.pl":        "localhost:perlbot-magnet:",
       "magnet.perlbot.pl":   "localhost:perlbot-magnet:",
       "o.perlbot.pl":   "localhost:perlbot-oftc:",
       "oftc.perlbot.pl":   "localhost:perlbot-oftc:",
       "f.perl.bot":        "localhost:perlbot:",
       "freenode.perl.bot": "localhost:perlbot:",
       "m.perl.bot":        "localhost:perlbot-magnet:",
       "magnet.perl.bot":   "localhost:perlbot-magnet:",
       "o.perl.bot":   "localhost:perlbot-oftc:",
       "oftc.perl.bot":   "localhost:perlbot-oftc:",
     };

     if (channel && servers[hostname]) { // only do this if we have a channel and a valid server
      // console.log("found default channel to post: "+servers[hostname]+channel);
       var option = $("option[value='"+servers[hostname]+channel+"']");
      // console.log(option);
       option.prop('selected', true);
     }
     if (servers[hostname]) {
       var badoptions = $("select#channel option:not([value^='"+servers[hostname]+"'])");
       console.log(badoptions);
       badoptions.remove();
     }
    });
  </script>
[% END %]

[% BLOCK page_header %]
<div class="row">
  <div class="col-md-3">
    <label for="username">Who: </label>
    <input size="20" name="username" placeholder="Anonymous" />
  </div>
  <div class="col-md-3">
    <label for="channel">Where: </label>
    <select name="channel" id="channel">
        <option value="">-- IRC Channel --</option>
    [% FOREACH channel = channels %]
        <option value="[% channel.key %]">[% channel.value %]</option>
    [% END %]
    </select>
  </div>
  <div class="col-md-5">
    <label for="desc">What: </label>
    <input size="40" name="description" placeholder="I broke this" maxlength="40"/>
    <input type="button" value="Show supported modules" id="showmodules" style="float:right"/>
  </div>
  <div class="col-md-1">
    <a href="http://www.cafepress.com/perlbot">Perlbot Merch</a>
  </div>
</div>
[% END %]

[% BLOCK body %]
<form action="/api/v1/paste" method="POST" id="form">
    <input type="hidden" name="redirect" value="1" />
    <div id="content" class="container">
      <div class="panel">
        <div class="panel-heading">
         [% PROCESS page_header %]
        </div>
      </div>
      <div class="panel-body">

        <div class="row">
          <div id="editors" class="col-md-12">
            <div class="options">
              <label>Raw Editor</label>
              <input type="checkbox" id="raw_editor"/>
              <!-- TODO this should come from the eval server somehow -->
              <label>Language</label>
              <select name="language" id="language">
		[% FOREACH lang IN languages %]
                  <option value="[% lang.name %]" data-lang="[% lang.mode %]">[% lang.description %]</option>
                [% END %]
              </select>
              <label>Expire in</label>
              <select name="expire">
                <option value="1">1 hour</option>
                <option value="8">8 hours</option>
                <option value="24">24 hours</option>
                <option value="48">2 days</option>
                <option value="168" selected>1 week</option>
                <option value="720">1 month</option>
                <option value="8760">1 year</option>
                <option value="">Never</option>
              </select>
            </div>
            <textarea name="paste" id="paste" cols="80" rows="25">[% pastedata | html %]</textarea>
            <pre id="editor">
            </pre>
          </div>
          <div id="evalcol" class="hidden">
            <h3>Program Output:</h3>
            <pre id="eval">[% eval | html %]</pre>
          </div>
          <div id="modules" class="hidden">
            <h3>Supported modules</h3>
            <ul><!-- TODO make this work via the cpanfile -->
              <li><a href="https://metacpan.org/module/arybase">arybase</a></li>
              <li><a href="https://metacpan.org/module/bigint">bigint</a></li>
              <li><a href="https://metacpan.org/module/experimental">experimental</a></li>
              <li><a href="https://metacpan.org/module/indirect">indirect</a></li>
              <li><a href="https://metacpan.org/module/utf8">utf8</a></li>
              <li><a href="https://metacpan.org/module/BSD::Resource">BSD::Resource</a></li>
              <li><a href="https://metacpan.org/module/Cpanel::JSON::XS">Cpanel::JSON::XS</a></li>
              <li><a href="https://metacpan.org/module/Data::Dumper">Data::Dumper</a></li>
              <li><a href="https://metacpan.org/module/Data::Munge">Data::Munge</a></li>
              <li><a href="https://metacpan.org/module/Date::Parse">Date::Parse</a></li>
              <li><a href="https://metacpan.org/module/DateTime">DateTime</a></li>
              <li><a href="https://metacpan.org/module/Digest::MD5">Digest::MD5</a></li>
              <li><a href="https://metacpan.org/module/Digest::SHA">Digest::SHA</a></li>
              <li><a href="https://metacpan.org/module/Encode">Encode</a></li>
              <li><a href="https://metacpan.org/module/Errno">Errno</a></li>
              <li><a href="https://metacpan.org/module/File::Glob">File::Glob</a></li>
              <li><a href="https://metacpan.org/module/Function::Parameters">Function::Parameters</a></li>
              <li><a href="https://metacpan.org/module/JSON">JSON</a></li>
              <li><a href="https://metacpan.org/module/JSON::MaybeXS">JSON::MaybeXS</a></li>
              <li><a href="https://metacpan.org/module/JSON::XS">JSON::XS</a></li>
              <li><a href="https://metacpan.org/module/List::MoreUtils">List::MoreUtils</a></li>
              <li><a href="https://metacpan.org/module/List::Util">List::Util</a></li>
              <li><a href="https://metacpan.org/module/List::UtilsBy">List::UtilsBy</a></li>
              <li><a href="https://metacpan.org/module/Math::BigInt">Math::BigInt</a></li>
              <li><a href="https://metacpan.org/module/Moose">Moose</a></li>
              <li><a href="https://metacpan.org/module/POSIX">POSIX</a></li>
              <li><a href="https://metacpan.org/module/Regexp::Common">Regexp::Common</a></li>
              <li><a href="https://metacpan.org/module/Scalar::MoreUtils">Scalar::MoreUtils</a></li>
              <li><a href="https://metacpan.org/module/Scalar::Util">Scalar::Util</a></li>
              <li><a href="https://metacpan.org/module/Time::HiRes">Time::HiRes</a></li>
              <li><a href="https://metacpan.org/module/Time::Piece">Time::Piece</a></li>
              <li><a href="https://metacpan.org/module/URI">URI</a></li>
              <li><a href="https://metacpan.org/module/URI::Encode">URI::Encode</a></li>
            </ul>
          </div>
        </div>
        <div class="panel-footer">
          <input value="Submit" type="submit" id="submit" />
          <input value="Check Eval" type="button" id="evalme" />
        </div>

    </div>
</form>

<script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>

  var showingmodules = 0;
  var showingeval = 0;

   var editor;

    var use_editor = function() {
      if ($("#raw_editor").is(":checked")) {
        if (editor) {
          $("#paste").val(editor.getValue());
        }
	$("#editor").hide();
	$("#paste").show();
      } else {
	$("#paste").hide();
	$("#editor").show();
        if (!editor) {
	  $("#editor").text($("#paste").val());
        } else {
          editor.setValue($("#paste").val(),0);
          editor.clearSelection();
        }
      }
    };
 
    use_editor();
    $("#raw_editor").on("change", use_editor);
    editor = ace.edit("editor");
    //editor.setTheme("ace/theme/twilight");

    //safely delete all bindings
    var save_keys={};
    Object.keys(editor.keyBinding.$defaultHandler.commandKeyBinding)
        .filter((value) => value.match(/(?:(?:backspac|hom)e|d(?:elete|own)|(?:righ|lef)t|end|up|tab)/))
        .forEach((key) => save_keys[key] = editor.keyBinding.$defaultHandler.commandKeyBinding[key]); 

    editor.keyBinding.$defaultHandler.commandKeyBinding = save_keys;


    $("#language").on('change', function () {
      var language = $('#language option').filter(':selected').attr('data-lang');
      console.log("language: ", language);
      editor.session.setMode("ace/mode/" + language);
    });
    
    var channel = $(location).attr('hash');
    if (channel == "#perl6") {
     $("#language").val("perl6").change();
    } else if (channel == "#cobol") {
     $("#language").val("cobol").change();
    }

    editor.session.setMode("ace/mode/perl");

//    editor.setOptions({fontFamily: ['AnonymousPro', 'monospace', 'mono']});


    function setup_columns() {
      if (showingeval && showingmodules) {
        $("#editors").removeClass().addClass('col-md-6');
        $("#evalcol").removeClass().addClass('col-md-4');
        $("#modules").removeClass().addClass('col-md-2');
      } else if (showingeval) {
        $("#editors").removeClass().addClass('col-md-10');
        $("#evalcol").removeClass().addClass('col-md-2');
        $("#modules").removeClass().addClass('hidden');
      } else if (showingmodules) {
        $("#editors").removeClass().addClass('col-md-10');
        $("#evalcol").removeClass().addClass('hidden');
        $("#modules").removeClass().addClass('col-md-2');
      } else {
        $("#editors").removeClass().addClass('col-md-12');
        $("#evalcol").removeClass().addClass('hidden');
        $("#modules").removeClass().addClass('hidden');
      }
    };

    function resizeAce() {
      var h = window.innerHeight;
      if (h > 360) {
        $('#editor').css('height', (h - 175).toString() + 'px');
      }
    };
    $(window).on('resize', function () {
      resizeAce();
    });
    resizeAce();

    $("#submit").on('click', function () {
      var code = $("#raw_editor").is(":checked") ?
                 $("#paste").val() :
                 editor.getValue();
      $("#paste").text(code); // copy to the textarea
    });

    $('#evalme').on('click', function () {
      showingeval = 1;
      $('#eval').text("Evaluating...");
      
      setup_columns();

      var code = $("#raw_editor").is(":checked") ?
                 $("#paste").val() :
                 editor.getValue();

      var language = $('#language option').filter(':selected').val();

      $.ajax('/eval', {
        method: 'post',
        data: {code: code, language: language},
        dataType: "json",
        success: function(data, status) {
	  console.log("data out", data);
	  var keys = Object.keys(data.evalout);
	  var outputarr = [];

          if (keys.length > 1) {
            outputarr = $.map(data.evalout, function(output, lang) {
             return "[[ "+lang+" ]]\n"+output+"\n\n";
	    });
          } else {
            outputarr = [data.evalout[keys[0]]];
          }
          console.log("outputarr", outputarr);
	  console.log(outputarr.join("\n"));

	  $('#eval').text(outputarr.join("\n"));
        }
      });
    });

  $("#showmodules").on('click', function() {
    showingmodules = 1 - showingmodules;

    setup_columns();
  });

</script>
[% END %]