MapleStory Bug Reporter (NONANGULARJS)

For formatting MapleStory Bug Report forum topics.

by MegaScience

HTML

<script src="https://cdn.rawgit.com/nfrasser/linkify-shim/v2.0.3/linkify.js"></script>
<script src="https://cdn.rawgit.com/nfrasser/linkify-shim/v2.0.3/linkify-string.js"></script>
<form id="bugReport" name="bugReport" method="post" onsubmit="return submitPost();">
  <table>
    <tr>
      <th colspan="2">Formatting-Aid for MapleStory Bug Reporting</th>
    </tr>
    <tr>
      <th>Bug Type:</th>
      <td>
        <input type="text" name="bugType" required data-prefix="[b]Bug type:[/b] " />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="hidden" value="section">
      </td>
    </tr>
    <tr>
      <th>Brief bug summary:</th>
      <td>
        <textarea type="text" name="bugSummary" required data-prefix="[b]Brief bug summary:[/b] "></textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="hidden" value="section">
      </td>
    </tr>
    <tr>
      <th>More details:</th>
      <td>
        <textarea name="moreDetails" placeholder="(anything not included in the other sections of your report)" data-prefix="[b]More details:[/b] "></textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="hidden" value="section">
      </td>
    </tr>
    <tr>
      <th>Steps to reproduce:</th>
      <td>
        <input type="hidden" value="list" data-part="[b]Steps to reproduce:[/b]">
        <input type="hidden" value="list" data-part="[list=1]">
        <ol id="reproductionList">
          <li>
            <button type="button" tabindex="-1" onclick="addListItem(this)" data-belongs="reproductionList">+</button><span><input type="text" name="reproduction" placeholder="(if not covered in the summary)" data-prefix="[*] " data-belongs="reproductionList"></span></li>
          <!--<li>
            <input type="text" name="reproduction" placeholder="(if not covered in the summary)" data-prefix="[*] " /><a href="#" id="add" onclick="alert('test');">+</a>
          </li>-->
        </ol>
        <input...

CSS

html,
body {
  background-color: #ccccc4;
  //background-image: url("http://nxcache.nexon.net/maplestory/assets-new/img/bg_section_ghosted_grey_variation_8.jpg");
  //background-image: url("http://nxcache.nexon.net/maplestory/assets-new/img/bg_section_ghosted_grey.jpg");
  //background-position: 50% 0;
  //background-repeat: no-repeat;
  min-height: 100%;
  margin: 0;
  font-family: arial, sans-serif;
  font-size: 14px;
}

th[colspan="2"] {
  padding: 5px 0;
  font-size: 24px;
}

th:not([colspan="2"]) {
  text-align: left;
  vertical-align: top;
  width: 14em;
  padding-left: 3px;
}

form {
  max-width: 960px;
  margin: 5px auto;
  min-height: calc(100% - 35px);
  background-color: #FFF;
  border-radius: 25px;
  padding-bottom: 25px;
  //background-color: rgba(255, 255, 255, 0.35);
}

table {
  width: 100%;
  border-collapse: collapse;
}

input,
button,
select,
textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ol {
  margin: 0;
  padding-left: 0;
  list-style-position: outside;
}

input,
select,
textarea {
  width: 100%;
}

li span {
  display: block;
  overflow: hidden;
}

li button {
  float: right;
  padding: 0;
  width: 1.65em;
  height: 1.65em;
}

textarea[name="output"] {
  min-height: 14em;
}

textarea {
  resize: vertical;
}

form .cleared:invalid {
  box-shadow: none;
}

.controls input, .controls button {
  display: inline-block;
}

.controls input {
  width: 70%;
}

.controls button {
  width: 15%;
}

JavaScript

//defFields: ["bugType", "bugSummary", "moreDetails", "reproduction", "charName", "charLevel", "charJob", "worldName", "timeDate"]

function addListItem(source, array) {
  array = array || [""];
  for (var i = 0, len = array.length; i < len; i++) {
    var elem = [document.createElement("li"),
      document.createElement("input"),
      document.createElement("button"),
      document.createElement("span")
    ];
    elem[2].setAttribute("type", "button");
    elem[2].setAttribute("tabIndex", "-1");
    elem[2].innerHTML = "-";
    elem[2].onclick = function() {
      this.parentNode.remove();
    };
    elem[1].setAttribute("type", "text");
    elem[1].setAttribute("name", "reproduction");
    elem[1].setAttribute("data-prefix", "[*] ");
    elem[1].setAttribute("data-belongs", "reproductionList");
    elem[1].onkeydown = delayedSave;
    elem[1].value = array[i];
    elem[0].appendChild(elem[2]);
    elem[3].appendChild(elem[1]);
    elem[0].appendChild(elem[3]);
    document.getElementById(source.dataset.belongs).appendChild(elem[0]);
  }
}

function storeData() {
  //var elements = document.querySelectorAll('form [name]:not([data-omit="true"])'),
  var elements = document.forms.bugReport.elements,
    data = {};
  if(elements.length <= 0) {
  	clearInterval(MBRData.storageCycle);
    return false;
  }
  for (var i = 0, len = elements.length, elem; i < len; i++) {
    elem = elements[i];
    if(elem.dataset.omit) continue;
    if (elem.dataset.belongs) {
      if (data[elem.dataset.belongs])
        data[elem.dataset.belongs].push(elem.value || "");
      else
        data[elem.dataset.belongs] = [elem.value || ""];
    } else {
      data[elem.getAttribute("name")] = elem.value || "";
    }
  }
  //console.log(data);
  localStorage.setItem("MapleBugReportData", JSON.stringify(data));
  echoReport("Saved.", true);
  return true;
}

function loadData() {
  var data = JSON.parse(localStorage.getItem("MapleBugReportData")) || {},
    elements =...