1  ==============
  2  Testing Ground
  3  ==============
  4  
  5  Input is being processed on the fly by a friendly web service and output is
  6  updated as you type.
  7  
  8  .. raw:: html
  9    <section id="testingground">
 10      <table style="width: 100%; table-layout: fixed">
 11        <thead>
 12          <tr>
 13            <th>Input</th>
 14            <th>Output</th>
 15          </tr>
 16        </thead>
 17        <tbody>
 18          <tr>
 19            <td style="width: 50%; height: 550px; vertical-align: top;">
 20              <textarea id="yaml-input" style="width: 100%; height: 100%">
 21    - test some
 22    - {YAML: here}
 23    - foo: bar
 24      ? [1, 2, 3]
 25      : !!str "string"
 26    -
 27      ? &amp;a anchor
 28      : !!bool yes
 29      ? reference to anchor
 30      : *a</textarea>
 31            </td>
 32            <td style="width: 50%; vertical-align: top; height: 550px; padding-left: 10px">
 33              <div style="width:100%; height:100%; overflow: scroll">
 34                <pre id="yaml-output" style="width: 100%"/>
 35              </div>
 36            </td>
 37          </tr>
 38        </tbody>
 39      </table>
 40      <div id="style-options">
 41        <div class="style-option">Output style:</div>
 42        <div class="style-option">
 43          <input type="radio" name="style" id="style-minimal" value="minimal"/>
 44          <label for="style-minimal">Minimal</label>
 45        </div>
 46        <div class="style-option">
 47          <input type="radio" name="style" id="style-default" value="default"/>
 48          <label for="style-default">Default</label>
 49        </div>
 50        <div class="style-option">
 51          <input type="radio" name="style" id="style-explanatory" value="explanatory" checked="checked"/>
 52          <label for="style-explanatory">Explanatory</label>
 53        </div>
 54        <div class="style-option">
 55          <input type="radio" name="style" id="style-block" value="block"/>
 56          <label for="style-block">Block Only</label>
 57        </div>
 58        <div class="style-option">
 59          <input type="radio" name="style" id="style-json" value="json"/>
 60          <label for="style-json">JSON</label>
 61        </div>
 62        <div class="style-option">
 63          <input type="radio" name="style" id="style-tokens" value="tokens"/>
 64          <label for="style-tokens">Tokens</label>
 65        </div>
 66      </div>
 67    </section>
 68    <script type="text/javascript">
 69      function setTextContent(element, text) {
 70        element.innerHTML = text;
 71      }
 72      function parse() {
 73        var r = new XMLHttpRequest();
 74        var params = "style=" + encodeURIComponent(document.querySelector(
 75          "input[name=style]:checked").value) + "&input=" + encodeURIComponent(
 76          document.getElementById("yaml-input").value);
 77        r.open("POST", "/webservice/", true);
 78        r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 79        r.onreadystatechange = function() {
 80          if (r.readyState == 4) {
 81            var output = document.getElementById("yaml-output");
 82            if (r.status == 200) {
 83              var result = JSON.parse(r.responseText);
 84              switch(result.code) {
 85              case 0:
 86                setTextContent(output, result.output);
 87                output.style.color = "black";
 88                break;
 89              case 1:
 90                setTextContent(output, "Parser error at line " + result.line +
 91                    ", column " + result.column + ":\n" + result.message +
 92                    "\n\n" + result.detail);
 93                output.style.color = "orange";
 94                break;
 95              case 2:
 96                setTextContent(output, "Presenter error:\n" + result.message);
 97                output.style.color = "orange";
 98                break;
 99              }
100            } else if (r.status == 0) {
101              setTextContent(output,
102                "YAML parser server does not seem to be available.");
103              output.style.color = "red";
104            } else {
105              setTextContent(output, "Status: " + r.status +
106                "\nException occurred on server:\n\n" + r.responseText);
107              output.style.color = "red";
108            }
109          }
110        }
111        r.send(params);
112      }
113      document.getElementById("yaml-input").addEventListener('input', parse,
114          false);
115      var radios = document.querySelectorAll("input[name=style]");
116      for (var i = 0; i < radios.length; ++i) {
117        radios[i].onclick = parse;
118      }
119      parse();
120    </script>