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;
    }

    #paste {
      font-family: 'mono'
    }

    html, body, #content {
      width: 100%;
    }
  </style>
[% END %]

[% BLOCK page_header %]
<div class="row">
  <div class="col-md-3">
    <label for="name">Who: </label>
    <input size="20" name="name" placeholder="Anonymous" />
  </div>
  <div class="col-md-3">
    <label for="chan">Where: </label>
    <select name="chan" id="chan">
        <option value="">-- IRC Channel --</option>
    [% FOREACH channel = channels %]
        <option value="[% channel.key %]">[% channel.value %]</option>
    [% END %]
    </select>
  </div>
  <div class="col-md-6">
    <label for="desc">What: </label>
    <input size="40" name="desc" placeholder="I broke this" />
  </div>
</div>
[% END %]

[% BLOCK body %]
<form action="/paste" method="POST" id="form">
    <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">
            <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>Program Output:</h3>
            <ul>
              <li>Moose</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>
    $("#paste").hide();
    $("#editor").show();
    $("#editor").text($("#paste").text());
    var editor = ace.edit("editor");
    //editor.setTheme("ace/theme/twilight");
    editor.session.setMode("ace/mode/perl");

    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 () {
        $("#paste").text(editor.getValue()); // copy to the textarea
    });

    $('#evalme').on('click', function () {
      $('#eval').text("Evaluating...");
      $('#evalcol').removeClass();

      if (1) { // Eval, no docs
        $('#evalcol').addClass('col-md-6');
        $('#editors').removeClass().addClass('col-md-6');
        $.ajax('/eval', {
          method: 'post',
          data: {code: editor.getValue()},
          dataType: "json",
          success: function(data, status) {
            $('#eval').text(data.evalout);
          }
        });
      } else if (0) { // Eval with docs
      }
    });

</script>
[% END %]