index.html

---
---

{% assign names = "" | split: "|" %}
{% for benchmark in site.benchmarks %}
  {% for test in benchmark.tests %}
    {% assign names = names | push: test.name %}
  {% endfor %}
{% endfor %}

{% assign names = names | uniq %}

<datalist id="names">
  {% for name in names %}
    <option value="{{ name }}" />
  {% endfor %}
</datalist>

<form method="post" action="https://api.postbot.pw/contents/hasharray/jsperf/benchmarks">
  <section>
    <p>
      Submit a new benchmark to measure and compare the relative performance
      difference between different snippets of JavaScript code.
    </p>

    <dl>
      <dt>
        <label>Title</label>
      </dt>
      <dd>
        <input name="data[title]" required/>
      </dd>
    </dl>

    <dl>
      <dt>
        <label>Title</label>
      </dt>
      <dd>
        <input name="data[slug]" required placeholder="Define the test names below to define the title"/>
      </dd>
    </dl>

    <dl>
      <dt>
        <label>Description</label>
      </dt>
      <dd>
        <textarea name="data[content]" rows="5" placeholder="Describe the benchmark with a few words"></textarea>
      </dd>
    </dl>

    <dl>
      <dt>
        <label>Setup</label>
      </dt>
      <dd>
        <textarea name="data[setup]" rows="5" placeholder="Define the variables and functions that need to be available to the code in the test cases below"></textarea>
      </dd>
    </dl>
  </section>

  <section>
    <h2 id="tests">Tests</h2>
    <ol>
      {% for number in (0...1) %}
        <li>
          <dl>
            <dt>
              <label>Name</label>
            </dt>
            <dd>
              <input name="data[tests][][name]" required placeholder="Define a name for the test case"/>
            </dd>
          </dl>

          <dl>
            <dt>
              <label>Code</label>
            </dt>
            <dd>
              <textarea name="data[tests][][code]" rows="5" required placeholder="Define the code for the test case"></textarea>
            </dd>
          </dl>
        </li>
      {% endfor %}
    </ol>
  </section>

  <section id="actions">
    <button type="submit">Submit</button>
  </section>
</form>

<section>
  <h2>Recent Submissions</h2>
  <ul>
    {% for benchmark in site.benchmarks %}
      {% unless benchmark.title %}
        {% continue %}
      {% endunless %}

      <li>
        <a href="{{ benchmark.url | prepend: site.baseurl }}">{{ benchmark.title }}</a>
      </li>
    {% endfor %}
  </ul>
</section>

<template>
  <form oninput="onInput(event)" onsubmit="onSubmit(event)" method="post" action="https://api.postbot.pw/contents/hasharray/jsperf/benchmarks">
    <input id="redirect" type="hidden" name="redirect_uri" value="{{ site.url | default: site.github.url }}" />
    <input id="slug" type="hidden" name="data[slug]" required/>

    <section>
      <p>
        Submit a new benchmark to measure and compare the relative performance
        difference between different snippets of JavaScript code.
      </p>

      <dl>
        <dt>
          <label>Title</label>
        </dt>
        <dd>
          <input id="title" name="data[title]" rows="5" readonly placeholder="Define the test names below which will automatically fill in the title" data-automatic/>
        </dd>
      </dl>

      <dl>
        <dt>
          <label>Description</label>
        </dt>
        <dd>
          <textarea id="content" name="data[content]" rows="5" placeholder="Describe the benchmark with a few words"></textarea>
        </dd>
      </dl>

      <dl>
        <dt>
          <label>Setup</label>
        </dt>
        <dd>
          <textarea id="setup" oninput="onCodeInput(event)" name="data[setup]" rows="5" placeholder="Define the variables and functions that need to be available to the code in the test cases below"></textarea>
        </dd>
      </dl>
    </section>

    <section>
      <h2 id="tests">Tests</h2>
      <ol>
        {% for number in (0...1) %}
          <li>
            <dl>
              <dt>
                <label>Name</label>
              </dt>
              <dd>
                <input list="names" name="data[tests][{{ number }}][name]" required placeholder="Define a name for the test case"/>
              </dd>
            </dl>

            <dl>
              <dt>
                <label>Code</label>
              </dt>
              <dd>
                <textarea oninput="onCodeInput(event)" name="data[tests][{{ number }}][code]" rows="5" required placeholder="Define the code for the test case"></textarea>
              </dd>
            </dl>
          </li>
        {% endfor %}

        <li>
          <button class="small" onclick="onInsertClick(event)" type="button">Insert code snippet</button>
        </li>
      </ol>
    </section>

    <section id="actions">
      <button type="submit">Submit</button>
    </section>
  </form>

  <template id="item">
    <li>
      <button class="small" onclick="onRemoveClick(event)" type="button">Remove code snippet</button>
      <dl>
        <dt>
          <label>Name</label>
        </dt>
        <dd>
          <small></small>
        </dd>
        <dd>
          <input list="names" name="data[tests][0][name]" required placeholder="Define a name for the test case"/>
        </dd>
      </dl>

      <dl>
        <dt>
          <label>Code</label>
        </dt>
        <dd>
          <textarea oninput="onCodeInput(event)" name="data[tests][0][code]" rows="5" required placeholder="Define the code for the test case"></textarea>
        </dd>
      </dl>
    </li>
  </template>

  <script type="text/javascript">
    var data = {};
    if (localStorage.getItem('form')) {
      data = JSON.parse(localStorage.getItem('form'));
    }

    Object.keys(data).forEach(function(name) {
      var element = document.querySelector('[name="' + name + '"]');
      if (element == null) {
        var template = document.querySelector('#item');
        var container = document.querySelector('#tests + ol');

        var clone = document.importNode(template.content, true);
        container.insertBefore(clone, container.lastElementChild);

        var children = Array.from(container.children);
        children.forEach(function(child, index) {
          var elements = child.querySelectorAll('[name]');

          elements.forEach(function(element) {
            element.name = element.name.replace(/\d/, index);
          });
        });

        element = document.querySelector('[name="' + name + '"]');
      }

      element.value = data[name];
    });

    function onInsertClick(event) {
      var template = document.querySelector('#item');
      var element = event.target.parentElement;
      var container = element.parentElement;

      var clone = document.importNode(template.content, true);
      container.insertBefore(clone, container.lastElementChild);

      var children = Array.from(container.children);
      children.forEach(function(child, index) {
        var elements = child.querySelectorAll('[name]');

        elements.forEach(function(element) {
          element.name = element.name.replace(/\d/, index);
        });
      });
    }

    function onRemoveClick(event) {
      var element = event.target.parentElement;
      var container = element.parentElement;

      container.removeChild(element);

      if (localStorage.getItem('form')) {
        var data = JSON.parse(localStorage.getItem('form'));
        var elements = Array.from(element.querySelectorAll('[name]'));

        elements.forEach(function(element) {
          element.value = '';
          delete data[element.name];
        });

        localStorage.setItem('form', JSON.stringify(data));
      }

      var children = Array.from(container.children);
      children.forEach(function(child, index) {
        var elements = child.querySelectorAll('[name]');

        elements.forEach(function(element) {
          element.name = element.name.replace(/\d/, index);
        });
      });
    }

    function onCodeInput(event) {
      var element = event.target;

      var code = setup.value;
      if (element !== setup) {
        code = setup.value + '\n' + element.value;
      }

      var validate = new Function(code);
      try {
        validate();
        element.setCustomValidity('');
      } catch(error) {
        element.setCustomValidity(error);
      }
    }

    function onInput(event) {
      var element = event.target;

      var data = {};
      if (localStorage.getItem('form')) {
        data = JSON.parse(localStorage.getItem('form'));
      }

      if (/name/.test(element.name)) {
        var elements = Array.from(document.querySelectorAll('[name*=name]'));

        title.value = elements.map(function(element) {
          return element.value;
        }).filter(function(value) {
          return value.length > 0;
        }).join(' vs ');

        data[title.name] = title.value;
      }

      data[element.name] = element.value;
      localStorage.setItem('form', JSON.stringify(data));
    }

    function onSubmit(event) {
      localStorage.removeItem('form');

      var slug = document.querySelector('[name="data[slug]"]');
      slug.value = title.value.replace(/\W+/g, '-').toLowerCase();

      var redirect = document.querySelector('[name="redirect_uri"]');
      redirect.value = location.href + slug.value;

      var elements = Array.from(document.querySelectorAll('[name]'));
      elements.forEach(function(element) {
        element.name = element.name.replace(/\d/, '');
      });

      var tests = Array.from(document.querySelectorAll('ol li')).filter(function(element) {
        return element.querySelector('textarea');
      });

      localStorage.setItem(slug.value, JSON.stringify({
        setup: setup.value,
        content: content.value,
        tests: tests.map(function(element) {
          return {
            name: element.querySelector('input').value,
            code: element.querySelector('textarea').value,
          };
        }).filter(Boolean),
      }));
    }
  </script>
</template>

<script type="text/javascript">
  document.querySelector('form').parentElement.replaceChild(
    document.importNode(document.querySelector('template').content, true),
    document.querySelector('form')
  );
</script>