QuickForm = function QuickForm( event, eventType ) {
this.root = new QuickForm.element( { type: 'form', event: event, eventType:eventType } );
var cssNode = document.createElement('style');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.appendChild( document.createTextNode("")); // Safari bugfix
document.getElementsByTagName("head")[0].appendChild(cssNode);
var styles = cssNode.sheet ? cssNode.sheet : cssNode.stylesSheet;
styles.insertRule("form.quickform { width: 96%; margin:auto; padding: .5em; vertical-align: middle}", 0);
styles.insertRule("form.quickform * { font-family: sans-serif; vertical-align: middle}", 0);
styles.insertRule("form.quickform select { width: 30em; border: 1px solid gray; font-size: 1.1em}", 0);
styles.insertRule("form.quickform h5 { border-top: 1px solid gray;}", 0);
styles.insertRule("form.quickform textarea { width: 100%; height: 6em }", 0);
styles.insertRule("form.quickform .tooltipButtonContainer { position: relative; width: 100%; }", 0);
styles.insertRule("form.quickform .tooltipButton { padding: .2em; color: blue; font-weight: bold; cursor:help;}", 0);
styles.insertRule(".quickformtooltip { z-index: 200; position: absolute; padding: .1em; border: 1px dotted red; background-color: Linen; font: caption; font-size: 10pt; max-width: 800px}", 0);
}
QuickForm.prototype.render = function QuickFormRender() {
return this.root.render();
}
QuickForm.prototype.append = function QuickFormAppend( data ) {
return this.root.append( data );
}
QuickForm.element = function QuickFormElement( data ) {
this.data = data;
this.childs = [];
this.id = QuickForm.element.id++;
}
QuickForm.element.id = 0;
QuickForm.element.prototype.append = function QuickFormElementAppend( data ) {
if( data instanceof QuickForm.element ) {
var child = data;
} else {
var child = new QuickForm.element( data );
}
this.childs.push( child );
return child;
}
QuickForm.element.prototype.render = function QuickFormElementRender() {
var currentNode = this.compute( this.data );
for( var i = 0; i < this.childs.length; ++i ) {
currentNode[1].appendChild( this.childs[i].render() );
}
return currentNode[0];
}
QuickForm.element.prototype.compute = function QuickFormElementCompute( data ) {
var node;
var childContainder = null;
var label;
var id = 'node_' + this.id;
if( data.adminonly && !userIsInGroup( 'sysop' ) ) {
// hell hack alpha
data.type = hidden;
}
switch( data.type ) {
case 'form':
node = document.createElement( 'form' );
node.setAttribute( 'name', 'id' );
node.className = "quickform";
node.setAttribute( 'action', 'javascript:void(0);');
if( data.event ) {
node.addEventListener( data.eventType || 'submit', data.event , false );
}
break;
case 'select':
node = document.createElement( 'div' );
node.setAttribute( 'id', 'div_' + id );
if( data.label ) {
label = node.appendChild( document.createElement( 'label' ) );
label.setAttribute( 'for', id );
label.appendChild( document.createTextNode( data.label ) );
}
var select = node.appendChild( document.createElement( 'select' ) );
if( data.event ) {
select.addEventListener( 'change', data.event, false );
}
if( data.multiple ) {
select.setAttribute( 'multiple', 'multiple' );
}
if( data.size ) {
select.setAttribute( 'size', data.size );
}
select.setAttribute( 'name', data.name );
if( data.list ) {
for( var i = 0; i < data.list.length; ++i ) {
var current = data.list[i];
if( current.list ) {
current.type = 'optgroup';
} else {
current.type = 'option';
}
var res = this.compute( current );
select.appendChild( res[0] );
}
}
childContainder = select;
break;
case 'option':
node = document.createElement( 'option' );
node.setAttribute( 'value', data.value );
if( data.selected ) {
node.setAttribute( 'selected', 'selected' );
}
if( data.disabled ) {
node.setAttribute( 'disabled', 'disabled' );
}
node.setAttribute( 'label', data.label );
node.appendChild( document.createTextNode( data.label ) );
break;
case 'optgroup':
node = document.createElement( 'optgroup' );
node.setAttribute( 'label', data.label );
if( data.list ) {
for( var i = 0; i < data.list.length; ++i ) {
var current = data.list[i];
current.type = 'option'; //must be options here
var res = this.compute( current );
node.appendChild( res[0] );
}
}
break;
case 'field':
node = document.createElement( 'fieldset' );
label = node.appendChild( document.createElement( 'legend' ) );
label.appendChild( document.createTextNode( data.label ) );
if( data.name ) {
node.setAttribute( 'name', data.name );
}
break;
case 'checkbox':
case 'radio':
node = document.createElement( 'div' );
if( data.list ) {
for( var i = 0; i < data.list.length; ++i ) {
var cur_id = id + '_' + i;
var current = data.list[i];
cur_node = node.appendChild( document.createElement( 'div' ) );
var input = cur_node.appendChild( document.createElement( 'input' ) );
input.setAttribute( 'value', current.value );
input.setAttribute( 'name', current.name || data.name );
input.setAttribute( 'type', data.type );
input.setAttribute( 'id', cur_id );
if( current.checked ) {
input.setAttribute( 'checked', 'checked' );
}
if( current.disabled ) {
input.setAttribute( 'disabled', 'disabled' );
}
if( data.event ) {
input.addEventListener( 'change', data.event, false );
}
var label = cur_node.appendChild( document.createElement( 'label' ) );
label.appendChild( document.createTextNode( current.label ) );
label.setAttribute( 'for', cur_id );
if( current.tooltip ) {
QuickForm.element.generateTooltip( label, current );
}
}
}
break;
case 'input':
node = document.createElement( 'div' );
if( data.label ) {
label = node.appendChild( document.createElement( 'label' ) );
label.appendChild( document.createTextNode( data.label ) );
label.setAttribute( 'for', id );
}
var input = node.appendChild( document.createElement( 'input' ) );
if( data.value ) {
input.setAttribute( 'value', data.value );
}
input.setAttribute( 'name', data.name );
input.setAttribute( 'type', 'text' );
if( data.size ) {
input.setAttribute( 'size', data.size );
}
if( data.disabled ) {
input.setAttribute( 'disabled', 'disabled' );
}
if( data.readonly ) {
input.setAttribute( 'readonly', 'readonly' );
}
if( data.maxlength ) {
input.setAttribute( 'maxlength', data.maxlength );
}
if( data.event ) {
input.addEventListener( 'keyup', data.event, false );
}
break;
case 'hidden':
var node = document.createElement( 'input' );
node.setAttribute( 'type', 'hidden' );
node.setAttribute( 'value', data.value );
node.setAttribute( 'name', data.name );
break;
case 'header':
node = document.createElement( 'h5' );
node.appendChild( document.createTextNode( data.label ) );
break;
case 'div':
node = document.createElement( 'div' );
break;
case 'submit':
node = document.createElement( 'span' );
childContainder = node.appendChild(document.createElement( 'input' ));
childContainder.setAttribute( 'type', 'submit' );
if( data.label ) {
childContainder.setAttribute( 'value', data.label );
}
childContainder.setAttribute( 'name', data.name || 'submit' );
if( data.disabled ) {
childContainder.setAttribute( 'disabled', 'disabled' );
}
break;
case 'button':
node = document.createElement( 'span' );
childContainder = node.appendChild(document.createElement( 'input' ));
childContainder.setAttribute( 'type', 'button' );
if( data.label ) {
childContainder.setAttribute( 'value', data.label );
}
childContainder.setAttribute( 'name', data.name );
if( data.disabled ) {
childContainder.setAttribute( 'disabled', 'disabled' );
}
if( data.event ) {
childContainder.addEventListener( 'click', data.event, false );
}
break;
case 'textarea':
node = document.createElement( 'div' );
if( data.label ) {
label = node.appendChild( document.createElement( 'label' ) );
label.appendChild( document.createTextNode( data.label ) );
label.setAttribute( 'for', id );
}
node.appendChild( document.createElement( 'br' ) );
textarea = node.appendChild( document.createElement( 'textarea' ) );
textarea.setAttribute( 'name', data.name );
if( data.cols ) {
textarea.setAttribute( 'cols', data.cols );
}
if( data.rows ) {
textarea.setAttribute( 'rows', data.rows );
}
if( data.disabled ) {
textarea.setAttribute( 'disabled', 'disabled' );
}
if( data.readonly ) {
textarea.setAttribute( 'readonly', 'readonly' );
}
break;
}
if( childContainder == null ) {
childContainder = node;
}
if( data.tooltip ) {
QuickForm.element.generateTooltip( label || node , data );
}
if( data.extra ) {
childContainder.extra = extra;
}
childContainder.setAttribute( 'id', id );
return [ node, childContainder ];
}
QuickForm.element.generateTooltip = function QuickFormElementGenerateTooltip( node, data ) {
var tooltipButtonContainer = node.appendChild( document.createElement( 'span' ) );
tooltipButtonContainer.className = 'tooltipButtonContainer';
var tooltipButton = tooltipButtonContainer.appendChild( document.createElement( 'span' ) );
tooltipButton.className = 'tooltipButton';
tooltipButton.appendChild( document.createTextNode( '?' ) );
var tooltip = document.createElement( 'div' );
tooltip.className = 'quickformtooltip';
tooltip.appendChild( document.createTextNode( data.tooltip ) );
tooltipButton.tooltip = tooltip;
tooltipButton.showing = false;
tooltipButton.interval = null;
tooltipButton.addEventListener( 'mouseover', QuickForm.element.generateTooltip.display, false );
tooltipButton.addEventListener( 'mouseout', QuickForm.element.generateTooltip.fade, false );
}
QuickForm.element.generateTooltip.display = function QuickFormElementGenerateTooltipDisplay(e) {
window.clearInterval( e.target.interval );
e.target.tooltip.style.setProperty( '-moz-opacity', 1, null);
e.target.tooltip.style.setProperty( 'opacity', 1, null);
e.target.tooltip.style.left = (e.pageX - e.layerX + 24) + "px";
e.target.tooltip.style.top = (e.pageY - e.layerY + 12) + "px";
document.body.appendChild( e.target.tooltip );
e.target.showing = true;
}
QuickForm.element.generateTooltip.fade = function QuickFormElementGenerateTooltipFade( e ) {
e.target.opacity = 1.2;
e.target.interval = window.setInterval(function(e){
e.target.tooltip.style.setProperty( '-moz-opacity', e.target.opacity, null);
e.target.tooltip.style.setProperty( 'opacity', e.target.opacity, null);
e.target.opacity -= 0.1;
if( e.target.opacity <= 0 ) {
window.clearInterval( e.target.interval );
document.body.removeChild( e.target.tooltip );e.target.showing = false;
}
},50,e);
}
