/**
* @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;
}