* @access public
*/
this.init = function() {
var textarea, // textarea element in current document.
div, // main div.
tb, // div containing buttons.
newarea; // alias for textarea.
if ( !(textarea = document.getElementById('reactionArea')) ) return true;
// set main elements for editor.
div = document.createElement('div');
// the with the buttons for applying bold, italic and inserting a link
tb = document.createElement('div');
tb.setAttribute('id', 'tb');
tb.style.width = (getWidth(textarea) || 300) + 'px';
tb = this.populateTb(tb);
div.appendChild(tb);
textarea.parentNode.replaceChild(div, textarea);
newarea = textarea;
newarea.setAttribute('name', textarea.getAttribute('name'));
addEvent(newarea, 'focus', reactionArea.getTarget);
addEvent(newarea, 'select', reactionArea.storeCursor);
addEvent(newarea, 'keyup', reactionArea.storeCursor);
addEvent(newarea, 'click', reactionArea.storeCursor);
target = newarea;
div.appendChild(newarea);
} // this.init()
/**
* Create a toolbar buttons for applying bold, italic and inserting a link.
*
* @author R.J.T. de Vries
* @param object item DOM div item
* @return object item populated toolbar
* @access private
*/
this.populateTb = function(toolbar) {
var btn;
// Create bold button and add to toolbar
btn = this.createBtn('/cms/graphics/reactionArea/bold.gif', reactionArea.applyBold);
toolbar.appendChild(btn);
// Create italic button and add to toolbar
btn = this.createBtn('/cms/graphics/reactionArea/italic.gif', reactionArea.applyItalic);
toolbar.appendChild(btn);
// Create link button and add to toolbar
btn = this.createBtn('/cms/graphics/reactionArea/link.gif', reactionArea.insertLink);
toolbar.appendChild(btn);
// return populated toolbar
return toolbar;
} // this.createSelect()
/**
* Create a button with given img-src and given (onmouseup) event.
*
* @author R.J.T. de Vries
* @param string imgsrc src for image in button
* @param string event function to execute on mouseup event
* @return object generated button
* @access private
*/
this.createBtn = function(imgsrc, event) {
var btn = document.createElement('a');
var img = document.createElement('img');
img.setAttribute('src', imgsrc);
img.style.border = '0px';
btn.appendChild(img);
addEvent(btn, 'mouseup', eval(event));
if ( btn.style.cssFloat ) img.style.cssFloat = 'left';
if ( btn.style.styleFloat ) img.style.styleFloat = 'left';
return btn;
} // this.createBtn()
/**
* Apply bold tags to the selected text or (when no current selection) insert
* bold tags.
*
* @author R.J.T. de Vries
* @return void
* @access public
*/
this.applyBold = function() {
reactionArea.apply('b');
} // this.applyBold()
/**
* Apply italic tags to the selected text or (when no current selection) insert
* italic tags.
*
* @author R.J.T. de Vries
* @return void
* @access public
*/
this.applyItalic = function() {
reactionArea.apply('i');
} // this.applyItalic()
/**
* Insert link.
*
* @author R.J.T. de Vries
* @return void
* @access public
*/
this.insertLink = function() {
reactionArea.apply('url=');
} // this.insertLink()
/**
* Get target textarea
*
* @author R.J.T. de Vries
* @param object e event object
* @return
* @access public
*/
this.getTarget = function(e) {
if ( !e ) var e = window.event;
target = getEventSrc(e);
} // this.getTarget()
/**
* Store the cursor-position.
*
* @author R.J.T. de Vries
* @param object e event object
* @return void
* @access public
*/
this.storeCursor = function(e) {
if ( !e ) var e = window.event;
var eventSrc = getEventSrc(e);
if (document.all && eventSrc.createTextRange) {
eventSrc.cursorPos = document.selection.createRange().duplicate();
}
} // this.storeCursor()
/**
* Put given string into the target area.
*
* @author R.J.T. de Vries
* @param string text string to insert into the area
* @return void
* @access public
*/
this.putStr = function(text) {
if (target) {
if (document.all && target.cursorPos) {
target.cursorPos.text = text;
} else if ( typeof(target.selectionStart) != 'undefined' ) {
var sStart = target.selectionStart;
var sEnd = target.selectionEnd;
target.value = target.value.substr(0, sStart) + text + target.value.substr(sEnd, target.value.length);
target.selectionStart = (sStart == sEnd)? sStart + text.length:sStart;
target.selectionEnd = sStart + text.length;
} else {
target.value += text;
}
target.focus();
this.storeCursor(target);
}
} // this.putStr()
/**
* Apply given style to the target area.
*
* @author R.J.T. de Vries
* @param string style style to apply
* @return void
* @access public
*/
this.apply = function(style) {
var selectedtext, // text that was selected in textarea.
url; // url to insert.
if ( !target ) {
alert('No target defined!');
return false;
}
if (document.all && target.cursorPos) {
selectedtext = target.cursorPos.text;
} else if (typeof(target.selectionStart) != 'undefined') {
selectedtext = target.value.substr(target.selectionStart, target.selectionEnd - target.selectionStart);
}
if ( !selectedtext ) selectedtext = '';
if ( style == 'url=' ) {
url = prompt('Naar welke url moet deze link verwijzen?', 'http://');
if ( !url ) return true;
if ( !selectedtext ) var selectedtext = url;
selectedtext = '[url='+url+']'+selectedtext+'[/url]';
} else {
selectedtext = '['+style+']' + selectedtext + '[/'+style+']';
}
this.putStr(selectedtext);
} // this.apply()
} // end of object ReactionArea
var reactionArea = new ReactionArea();
/**
* Function to show/hide the reactionform.
*
* @param boolean force if set, force visibility to given value (true/false)
* @return void
* @access global
*/
function toggleReactionForm(force) {
var el, display;
if ( !(el = document.getElementByAttribute('toggleme', 'reaction')) ) return;
if ( force === false ) display = 'none';
else if ( force === true ) display = 'block';
else display = el.style.display != 'block' ? 'block' : 'none';
return el.style.display = display;
} // toggleReactionForm()