API Docs for: 1.0.0
Show:

File: texteditbox.js

/**
 *  @module Intro2JavaScript
 *  @author Richard S. Mitchell
 */
/**
 *  Text-edit box is a widget that marks up text with HTML and special span tags for
 *  code markup, e.g. function, string, keyword, etc.
 *  @class TextEditBox
 *  @constructor
 *  @param  {String} id element id of text-edit textarea
 *  @return {void}
 *  @uses   default.js
 */
function TextEditBox(id)
{
  /**
   *  Text-edit textarea element
   *  @property editBox
   *  @type     {HTMLElement}
   *  @default  "editbox"
   */
  this.editBox = getEl(id || "editbox");

  /**
   *  Data for the code markup buttons.
   *  @property spanButtons
   *  @type     {Array}
   */
  this.spanButtons = [
    {
      className : "attr",
      id : "",
      style : "",
      title : "element attribute",
      value : " attr "
    },
    {
      className : "comment",
      id : "",
      style : "",
      title : "comment",
      value : " comment "
    },
    {
      className : "function_name",
      id : "",
      style : "",
      title : "function name",
      value : " function "
    },
    {
      className : "keyword",
      id : "",
      style : "",
      title : "keyword",
      value : " keyword "
    },
    {
      className : "string",
      id : "",
      style : "",
      title : "string value",
      value : " string "
    },
    {
      className : "tag",
      id : "",
      style : "",
      title : "tag name",
      value : " tag "
    },
    {
      className : "value",
      id : "",
      style : "",
      title : "constant values",
      value : " value "
    }
  ];
}

/**
 *  Adds markup to selected text.
 *  @method addMarkup
 *  @param  {String} tagName
 *  @param  {boolean} empty   whether element is empty (e.g. img element)
 *  @param  {Object} [attrs]  optional object containing add'l element attributes
 *  @return {void}
 */
TextEditBox.prototype.addMarkup = function (tagName, empty) {
  var startTxt;
  var selTxt;
  var endTxt;
  var s;
  var attrs = (arguments.length == 3) ? arguments[2] : {};

  if (!document.all) {
    var selLength = this.editBox.selectionEnd - this.editBox.selectionStart;

    startTxt = this.editBox.value.substr(0, this.editBox.selectionStart);
    selTxt = this.editBox.value.substring(this.editBox.selectionStart, this.editBox.selectionEnd);
    endTxt = this.editBox.value.substr(this.editBox.selectionEnd);

    if (!empty) {
      s = startTxt;
      s += "<" + tagName;

      for (item in attrs) {
        s += " " + item + "=\"" + attrs[item] + "\"";
      }

      s += ">" + selTxt + "</" + tagName + ">";
      s += endTxt;
      tagSize = 2 * tagName.length + 5;
    }
    else {
      s = startTxt + selTxt + "<" + tagName;

      for (item in attrs) {
        s += " " + item + "=\"" + attrs[item] + "\"";
      }

      s += " />" + endTxt;
      tagSize = tagName.length + 4;
    }

    newEnd = this.editBox.selectionEnd + tagSize;
    this.editBox.value = s;
    this.editBox.focus();
    this.editBox.setSelectionRange(newEnd, newEnd);
  }
  else {  // IE branch
    var txtRange;
    var txtBookmark;

    switch (document.selection.type.toLowerCase()) {
      case "text":
        txtRange = document.selection.createRange();
        txtBookmark = txtRange.getBookmark();
        selTxt = txtRange.text;
        txtRange.text = this._makeMarkup(tagName, empty, selTxt, attrs);
        this.editBox.focus();
        txtRange.moveToBookmark(txtBookmark);
        break;

      default:
        if (empty) {
          alert("For 'empty' elements, select some\ntext up to the insertion point.");
        }
        else {
          alert("Select text before adding markup.");
        }

        return;
    }

    txtRange.collapse();
  }
}

/**
 *  Helper function for IE branch of addMarkup().
 *  @method _makeMarkup
 *  @private
 *  @param  {String} tagName
 *  @param  {boolean} empty
 *  @param  {String} text
 *  @param  {Object} attrs
 *  @return {String}
 */
TextEditBox.prototype._makeMarkup = function (tagName, empty, text, attrs) {
  var s;

  if (arguments.length < 4) {
    text = ""
  }

  if (!empty) {
    s = "<" + tagName;

    for (item in attrs) {
      s += " " + item + "=\"" + attrs[item] + "\"";
    }

    s += ">" + text + "</" + tagName + ">";
  }
  else {
    s = text + "<" + tagName

    for (item in attrs) {
      s += " " + item + "=\"" + attrs[item] + "\"";
    }

    s += " />";
  }

  return s;
}