[CB] RPG Posting Template

This script allows you to create multiple posting templates on the Modify Profile page under the added section titled "Posting Templates". Once you have created some templates (which are automatically saved as you type them, although you still need to press the Modify Profile button when you are finished), they will be available to you on the posting page and quick reply. All you have to do is click on a template and it's contents will be automatically inserted into your post.

Previews
- Modify Profile Page
- Posting Page
- Quick Reply

Since this code uses an HTML 5 feature, your browser needs to be the following version at a minimum.

Internet Explorer	8.0+
Firefox			3.5+
Safari			4.0+
Chrome			4.0+
Opera			10.5+
iPhone			2.0+
Android			2.0+

The templates are stored on your computer by your browser which gives a limited amount of space per domain (website): 5MB per domain in Mozilla Firefox, Google Chrome, and Opera, 10MB per storage area in Internet Explorer. If you clear all browser history then the templates will also be cleared.

Global Footer

<script type="text/javascript">
<!--

/*
 * Posting Template
 * Created By Jordan a.k.a. Triad
 * support.proboards.com
 */

function PostingTemplate()
{
      this.templates = {};
      this.obj = {};
      this.init();
}

PostingTemplate.prototype.init = function()
{
      if(!localStorage)
            return false;

      if(pb_action == "modifyprofile" && document.modifyForm)
      {
            this.getTemplates();
            this.addFields();
            this.addEvent(document.modifyForm, this.saveTemplates);

            this.obj["ubbc"] = this.$("template_ubbc");
            this.obj["list"] = this.$("template_list");
      }
      else if(document.postForm || (pb_action == "display" && location.href.match(/(thread|board)=/i)))
      {
            this.getTemplates();
            this.addTemplateList();

            this.obj["list"] = this.$("template_list");
      }
}

PostingTemplate.prototype.$ = function(id)
{
      if(id) return document.getElementById(id);
      return false;
}

PostingTemplate.prototype.addEvent = function(form, func)
{
      if(document.addEventListener)
            form.addEventListener("submit", func, false);
      else if(document.attachEvent)
            form.attachEvent("onsubmit", func);
      else
            form.onsubmit = func;
}

PostingTemplate.prototype.addTemplate = function()
{
      if(this.obj.list.options.selectedIndex > 0)
      {
            var id = this.obj.list.options[this.obj.list.options.selectedIndex].value;
            if(this.templates[id].ubbc.length > 0)
                  document.getElementsByName("message")[0].value += this.templates[id].ubbc;
      }
}

PostingTemplate.prototype.selectTemplate = function()
{
      if(this.obj.list.options.selectedIndex > 0)
            this.obj.ubbc.value = this.templates[this.obj.list.options[this.obj.list.options.selectedIndex].value].ubbc;
      else
            this.obj.ubbc.value = "";
}

PostingTemplate.prototype.addSelectOptions = function(click)
{
      var html = "";

      for(key in this.templates)
      {
            html += '<option value="' + key + '">' + key + '</option>';
      }

      return html;
}

PostingTemplate.prototype.createTemplate = function()
{
      var name = prompt("Enter the name of the template below.","");

      if(!name.match(/^[a-zA-Z0-9]+$/i))
      {
            alert("Please only use the standard alpha letters and numbers for the template name. No commas, spaces, underscores, periods, semi-colons etc.");
            return false;
      }

      for(key in this.templates)
      {
            if(name == key && this.templates[key].del == 0)
            {
                  alert("This template name is already taken.");
                  return false;
            }
      }

      if(name)
      {
            var option = document.createElement("option");
                  option.value = name;
                  option.innerHTML = name;

            this.obj.list.appendChild(option);
            this.obj.list.options.selectedIndex = this.obj.list.options.length-1;
            this.obj.ubbc.value = "";

            this.templates[this.obj.list.options[this.obj.list.options.selectedIndex].value] = {
                  ubbc: "",
                  del: 0
            };
      }
}

PostingTemplate.prototype.saveUBBC = function()
{
      for(key in this.templates)
      {
            this.templates[this.obj.list.options[this.obj.list.options.selectedIndex].value].ubbc = this.obj.ubbc.value;
            return true;
      }
}

PostingTemplate.prototype.getTemplates = function()
{
      var key = "";

      for(x = 0; x < localStorage.length; x++)
      {
            key = localStorage.key(x);

            if(key.match(new RegExp("^pT_" + pb_username + "_","i")))
            {
                  this.templates[key.split("_")[2]] = {
                        ubbc: decodeURI(localStorage[key]),
                        del: 0
                  };
            }
      }
}

PostingTemplate.prototype.saveTemplates = function()
{
      for(key in pT.templates)
      {
            if(pT.templates[key].del)
                  localStorage.removeItem("pT_" + pb_username + "_" + key);
            else
                  localStorage.setItem("pT_" + pb_username + "_" + key, encodeURI(pT.templates[key].ubbc));
      }
}

PostingTemplate.prototype.deleteTemplate = function()
{
      var option = this.obj.list.options[this.obj.list.options.selectedIndex];

      if(this.obj.list.options.selectedIndex > 0)
      {
            if(confirm("Are you sure you want to delete the \"" + option.value + "\" template?"))
            {
                  this.templates[option.value].del = 1;
                  this.obj.list.removeChild(option);
                  this.obj.list.options.selectedIndex = 0;
                  this.obj.ubbc.value = "";
            }
      }
}

PostingTemplate.prototype.addTemplateList = function()
{
      if(document.postForm)
      {
            var table = document.postForm.getElementsByTagName("table")[0].getElementsByTagName("table")[0];
            var row = table.insertRow(document.postForm.message.parentNode.parentNode.parentNode.rowIndex);

            var cell = row.insertCell(0);
                  cell.width = "30%";
                  cell.className = "windowbg2";
                  cell.innerHTML = '<font size="2">Posting Template:</font>';

            cell = row.insertCell(1);
                  cell.width = "70%";
                  cell.className = "windowbg2";
                  cell.innerHTML = '<font size="1"><select id="template_list" onchange="pT.addTemplate();"><option>--------------------</option>' + this.addSelectOptions() + '</select></font>';
      }
      else
      {
            var target = document.getElementsByName("message")[0].parentNode;
            var font = document.createElement("font");
                  font.size = 1;
                  font.innerHTML = '<select id="template_list" onchange="pT.addTemplate();" style="margin-left: 10px;"><option>--------------------</option>' + this.addSelectOptions() + '</select>';

            target.parentNode.insertBefore(
                  font,
                  target.previousSibling
            );
      }
}

PostingTemplate.prototype.addFields = function()
{
      if(document.modifyForm && pb_username == document.modifyForm.user.value)
      {
            var container = document.createElement("div");
                  container.innerHTML = '<font size="-1"><b>Posting Templates</b></font><hr size="1" />';

            var table = document.createElement("table");
                  table.appendChild(document.createElement("tbody"));

            var row = table.insertRow(0);

            var cell = row.insertCell(0);
                  cell.width = "160";
                  cell.vAlign = "top";
                  cell.className = "windowbg";
                  cell.innerHTML = '<font size="-1">UBBC Template:</font>';
            cell = row.insertCell(1);
                  cell.width = "245"
                  cell.vAlign = "top";
                  cell.className = "windowbg";
                  cell.innerHTML = '<table width="100%" cellspacing="0" cellpadding="0"><tr>' +
                        '<td width="1%" valign="middle"><font size="-1">' +
                              '<a href="Javascript:void(0);" onclick="pT.createTemplate();">Create</a><br />' +
                              '<a href="Javascript:void(0);" onclick="pT.deleteTemplate();">Delete</a>' +
                        '</font></td>' +
                        '<td width="99%" align="center" valign="middle"><font size="-1"><select id="template_list" onchange="pT.selectTemplate();"><option>--------------------</option>' + this.addSelectOptions() + '</select></font></td>' +
                  '</tr></table>';
            cell = row.insertCell(2);
                  cell.width = "245"
                  cell.vAlign = "top";
                  cell.className = "windowbg";
                  cell.innerHTML = '<font size="1">Click on an option to manage your posting templates.</font>';

            row = table.insertRow(1);

            cell = row.insertCell(0);
                  cell.width = "160";
                  cell.vAlign = "top";
                  cell.className = "windowbg";
                  cell.innerHTML = '<font size="-1">UBBC:</font>';
            cell = row.insertCell(1);
                  cell.width = "245";
                  cell.vAlign = "top";
                  cell.className = "windowbg";
                  cell.innerHTML = '<font size="-1"><textarea rows="5" cols="32" id= "template_ubbc" onkeyup="pT.saveUBBC();"></textarea></font>';
            cell = row.insertCell(2);
                  cell.width = "245";
                  cell.vAlign = "top";
                  cell.className = "windowbg";
                  cell.innerHTML = '<font size="-2">The UBBC you add here will be available to you to insert into your posts on the posting page as well as in the quick reply section.</font>';

            container.appendChild(table);

            document.modifyForm.insertBefore(
                  container,
                  document.modifyForm.getElementsByTagName("hr")[1].previousSibling
            );
      }
}

var pT = new PostingTemplate();

//-->
</script>

November 8, 2010: Code Compatibility ~ Jordan