" + inLabel + "
";
hover.className = 'window';
hover.innerHTML = inHover;
action.onmouseover = function()
{ this.__hover.style.visibility = "visible"; };
action.onmouseout = function()
{ this.__hover.style.visibility = "hidden"; };
actions.appendChild(action);
actions.appendChild(hover);
};
//..........................................................................
//-------------------------------- tooltip ---------------------------------
/**
* Add a tooltip to the given element.
*
* @param inElement the element to add to
* @param inText the text/html to appear in the tooltip
*
*/
gui.tooltip = function(inElement, inText)
{
inElement.__tooltip = document.createElement("span");
inElement.__tooltip.className = "window";
inElement.__tooltip.innerHTML = inText;
inElement.appendChild(inElement.__tooltip);
inElement.onmouseover = function()
{ this.__tooltip.style.visibility = "visible"; }
inElement.onmouseout = function()
{ this.__tooltip.style.visibility = "hidden"; }
}
//..........................................................................
//--------------------------------- reload ---------------------------------
/** Reload the current page.
*
* @param inPage an optional page to use instead of the default one; this
* is only the page, without the path
*
*/
gui.reload = function(inPage)
{
var destination = document.location.pathname;
if(document.location.hash)
destination = document.location.hash.substring(1);
if(inPage)
destination = destination.replace(/^(.*\/).*?$/, "$1" + inPage);
document.location.href = destination;
}
//..........................................................................
//---------------------------------- edit ----------------------------------
/**
* Execute edit on the contained item.
*
* @param inElement the HTML to edit
*
*/
gui.edit = function(inElements)
{
for(var i = 0, element; element = inElements[i]; i++)
gui._edit(element, 98 / inElements.length);
}
gui._edit = function(inElement, inWidth)
{
var id = inElement.getAttribute("id");
var type = inElement.getAttribute("type");
var value = inElement.getAttribute("value");
var key = inElement.getAttribute("key");
var script = inElement.getAttribute("script");
var values = inElement.getAttribute("values");
gui.values[key] = "$undefined$";
if(script)
eval(script);
var unparsed = inElement.__unparsed || "";
// remove the double click event
delete inElement.ondblclick;
delete inElement.oncontextmenu;
// we lose the focus if it is in a field that will be hidden
document.body.focus();
// create the field
var edit = gui.Editable.create(id, key, type, value, values, unparsed);
// add the unedit button
var unedit = document.createElement("img");
unedit.src = "/icons/cancel.png";
unedit.alt = "cancel editing";
unedit.title = "Cancel Editing";
unedit.className = "unedit";
var undefine = document.createElement("img");
undefine.src = "/icons/cancel.png";
undefine.src = "/icons/undefine.png";
undefine.alt = "undefine element";
undefine.title = "Undefine Element";
undefine.className = "undefine";
undefine._edit = edit;
var parent;
// determine the element to attach to
if(inside(inElement, "TD", null, 5))
{
parent = inElement.parentNode;
inElement.style.display = "none";
}
else
if(inElement.firstChild && inElement.firstChild.firstChild
&& inElement.firstChild.firstChild.className == 'table icon')
{
// add it to an icon
if(inElement.firstChild.firstChild && inElement.firstChild.firstChild)
parent = inElement.firstChild.firstChild.firstChild.firstChild;
else
parent = inElement.nextSibling;
}
else
{
// everything else we just format as a sibling
parent = inElement;
inElement.firstChild.style.display = "none";
}
if(edit.type != "list" && edit.type != "multiple")
edit._field.style.width = inWidth + "%";
parent.appendChild(undefine);
parent.appendChild(unedit);
parent.appendChild(edit._element);
unedit.onclick = function() { gui.unedit(edit, unedit, undefine,
inElement); };
unedit.onmouseout = function() { gui.iconNormal(this); };
unedit.onmouseover = function() { gui.iconHighlight(this); };
undefine.onclick = function() { gui.undefine(edit, unedit, undefine,
inElement); };
undefine.onmouseout = function() { gui.iconNormal(this); };
undefine.onmouseover = function() { gui.iconHighlight(this); };
// store the edit field
inElement.__edit = edit;
// set the focus to the element
edit.focus();
// make sure the save button is visible
document.getElementById("save").style.display = "inline";
// prevent accidental moving away from the page
window.onbeforeunload = function()
{
return "You will lose all changes you made so far.\n"
+ "Use the save button first to save all your changes";
}
}
//..........................................................................
//--------------------------------- unedit ---------------------------------
/**
* Unedit the given element.
*
* @param inEdit the edit element
* @param inCancel the cancel button
* @param inUndefine the undefine button
* @param inOld the original element displayed
*
*/
gui.unedit = function(inEdit, inCancel, inUndefine, inOld)
{
// remove the cancel button
inCancel.parentNode.removeChild(inCancel);
// remove the undefine button
inUndefine.parentNode.removeChild(inUndefine);
// remove the edit element
inEdit._element.parentNode.removeChild(inEdit._element);
// make sure the original element is shown again
if(inOld)
{
inOld.style.display = "";
inOld.parentNode.oncontextmenu =
function() { gui.edit(this.__edit); return false; };
inOld.parentNode.ondblclick =
function() { gui.edit(this.__edit); };
}
}
//..........................................................................
//-------------------------------- undefine --------------------------------
/**
* Undefine the given element.
*
* @param inEdit the edit element to undefine
* @param inCancel the cancel button
* @param inCancel the undefine button
* @param inOld the original element displayed
*
*/
gui.undefine = function(inEdit, inCancel, inUndefine, inOld)
{
// remove the cancel button
inCancel.parentNode.removeChild(inCancel);
// remove the undefine button
inUndefine.parentNode.removeChild(inUndefine);
// undefine the value
inEdit.undefine()
}
//..........................................................................
//-------------------------------- unparsed --------------------------------
/** Show that some part of an input field could not be parsed.
*
* @param inKey the name of the key that could not be parsed
* @param inText the text that could not be parsed
*
*/
gui.unparsed = function(inKey, inText)
{
// find the field that could not be parsed
var elements = document.getElementsByTagName("dma.editable");
for(var i = 0, element; element = elements[i]; i++)
if(element.getAttribute("key") == inKey)
{
element.__unparsed = inText;
element.innerHTML += "
" + inText + "";
element.style.display = "";
element.parentNode.removeChild(element.__edit._element);
break;
}
}
//..........................................................................
//------------------------------ makeEditable ------------------------------
/**
* Make all dma.editable entries editable.
*
*/
gui.makeEditable = function()
{
var elements = document.getElementsByTagName("dma.editable");
var targets = [];
for(var i = 0, element; element = elements[i]; i++)
{
var target = gui._locateTarget(element);
if(!target.__edit)
{
if(!element.getAttribute("script"))
targets.push(element);
target.__edit = [];
}
target.__edit.push(element);
target.oncontextmenu = function()
{
gui.edit(this.__edit);
this.oncontextmenu = undefined;
this.ondblclick = undefined;
return false;
}
target.ondblclick = function()
{
gui.edit(this.__edit);
this.oncontextmenu = undefined;
this.ondblclick = undefined;
};
}
if(location.search == "?create")
{
gui.editAll();
document.getElementsByTagName("input")[1].focus();
window.scroll(0, 0);
}
};
//..........................................................................
//--------------------------- gui._locateTarget ----------------------------
/**
* Locate the target for editing.
*
* @param inElement the element to look for its target
*
* @return the target for teh element
*
*/
gui._locateTarget = function(inElement)
{
if(inElement.parentNode.tagName == "TD"
|| inElement.parentNode.tagName == "H1")
return inElement.parentNode;
return inElement;
};
//..........................................................................
//-------------------------------- editAll ---------------------------------
/**
* Edit all values on the page.
*/
gui.editAll = function()
{
var elements = document.getElementsByTagName("dma.editable");
var targets = new Array();
for(var i = 0, element; element = elements[i]; i++)
{
var target = gui._locateTarget(element);
if(!targets.contains(target))
{
gui.edit(target.__edit);
targets.push(target);
}
}
document.getElementsByTagName("INPUT")[0].focus();
}
//..........................................................................
//------------------------------ mouseCoords -------------------------------
/**
* Get the coordinates of the mouse.
*
* @param the event to get the coordinates for
*
* @return x and y coordinates of the mouse as { x:
, y: }
*
*/
gui.mouseCoords = function(inEvent)
{
if(inEvent.pageX || inEvent.pageY)
return { x: inEvent.pageX, y: inEvent.pageY };
return { x: inEvent.clientX + document.body.scrollLeft
- document.body.offsetLeft,
y: inEvent.clientY + document.body.scrollTop
- document.body.offsetTop
};
};
//..........................................................................
//-------------------------------- position --------------------------------
/**
* Get the position of the element.
*
* @param inElement the element to get the position for
* @param inAbsolute if given will compute the absolute position on the
* page, otherwise is the relative position in the
* next relatively positioned parent
*
* @return the position as {x, y}
*
*/
gui.position = function(inElement, inAbsolute)
{
if(inElement == null)
return { x: -1, y: -1 };
var left = 0;
var top = 0;
if(inAbsolute)
{
if(inElement == document.body)
return { x: 0, y: 0 };
var box = inElement.getBoundingClientRect();
left = box.left + document.documentElement.scrollLeft;
top = box.top + document.documentElement.scrollTop;
}
else
{
while(inElement.offsetParent)
{
left += inElement.offsetLeft;
top += inElement.offsetTop;
inElement = inElement.offsetParent;
}
left += inElement.offsetLeft;
top += inElement.offsetTop;
}
return { x: left, y: top };
};
//..........................................................................
//--------------------------------- isOver ---------------------------------
/**
* Check if the given position is over the given element.
*
* @param inElement the element to check over
* @param inPosition the position to check with (as {x: x, y: y})
* @param inFixed true if the element if positioned fixed
*
* @return true if over, false if not
*
*/
gui.isOver = function(inElement, inPosition, inFixed)
{
var pos = gui.position(inElement, inFixed);
var width = parseInt(inElement.offsetWidth);
var height = parseInt(inElement.offsetHeight);
return ((inPosition.x > pos.x) && (inPosition.x < (pos.x + width))
&& (inPosition.y > pos.y) && (inPosition.y < (pos.y + height)));
};
//..........................................................................
//----- Editable -----------------------------------------------------------
/**
* The base object for editable values.
*
* @param inKey the id of the entry edited
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inLeader the text to put in front of the value
* @param inLabel the label for the field
*
*/
gui.Editable = function(inID, inKey, inType, inValue, inLabel)
{
this.id = inID,
this.key = inKey;
this.type = inType;
this.label = inLabel;
this._value = (inValue == "$undefined$" ? "" : inValue);
this._defined = inValue != "$undefined$";
this._element = this._createElement();
this._unlabeled = this._element;
// add the label
if(inLabel)
{
var container = document.createElement("span");
container.style.position = "relative";
this._label = document.createElement("span");
this._label.className = "label";
this._label.innerHTML = inLabel;
container.appendChild(this._element);
container.appendChild(this._label);
this._element = container;
}
this._element.__editable = this;
if(this.key)
gui.Editable.all.push(this);
};
gui.Editable.prototype.getValue = function()
{
return this._getValue();
};
gui.Editable.prototype.isDefined = function()
{
return this._defined;
}
gui.Editable.prototype.undefine = function()
{
this._defined = false;
this._value = "";
this._undefine();
}
gui.Editable.prototype.doUndefine = function()
{
// add something here in derivations
}
gui.Editable.all = [];
gui.Editable.create = function(inID, inKey, inType, inValue, inValues,
inUnparsed, inLabel)
{
var type = inType;
var subtype = null;
var repeat = null;
var types = inType.match(/^((?:\n|.)+?)\#((?:\n|.)+)$/);
if(types)
{
type = types[1];
subtype = types[2];
}
// extract type options, if any
types = type.match(/(.*?)\(((?:\n|.)*)\)(.*)/);
var options = null;
if(types)
{
type = types[1] + types[3];
options = types[2];
}
types = type.match(/(.*)\[(.*)\]/);
var label = null;
if(types)
{
type = types[1];
label = types[2];
}
switch(type)
{
case "string":
return new gui.EditableString(inID, inKey, type, inValue, label);
case "text":
return new gui.EditableParagraph(inID, inKey, type, inValue, label);
case "name":
return new gui.EditableText(inID, inKey, type, inValue, label);
case "suggest":
if(!options)
{
gui.alert("could not find suggestions in type '" + type + "'");
return new gui.EditableText(inID, inKey, type, inValue, label);
}
return new gui.EditableSuggest(inID, inKey, type, inValue, options,
label);
case "suggeststring":
if(!options)
{
alert("could not find suggestions in type '" + type + "'");
return new gui.EditableString(inID, inKey, type, inValue, label);
}
return new gui.EditableSuggestString(inID, inKey, type, inValue,
options, label);
case "selection":
return new gui.EditableSelection(inID, inKey, type, inValue,
inValues ? inValues.split(/\|\|/) : [],
label);
case "dynselection":
return new gui.EditableDynSelection(inID, inKey, type, inValue, options,
label);
case "dynstringselection":
return new gui.EditableDynStringSelection(inID, inKey, type, inValue,
options, label);
case "date":
{
if(!inValue || inValue == "")
{
var now = new Date();
inValue = MONTHS[now.getMonth()] + " " + now.getFullYear();
}
return new gui.EditableSelection(inID, inKey, type, inValue, allDates(),
label);
}
case "number":
if(options)
{
var limits = options.split(/::/);
var start = parseInt(limits[0]);
var end = limits[1] ? parseInt(limits[1]) : null;
return new gui.EditableFiltered(inID, inKey, type, inValue,
"[+-]?\\d*", function()
{
var valid = true;
var value = parseInt(this.value);
if(value >= start && (end == null || value <= end))
gui.removeStyle(this, "invalid");
else
gui.addStyle(this, "invalid");
}, label);
}
else
return new gui.EditableFiltered(inID, inKey, type, inValue,
"[+-]?\\d*", "[+-]?\\d+", label);
case "ranges":
return new gui.EditableFiltered(inID, inKey, type, inValue,
"\\d*-?\\d*(\\\\\\d*-?\\d*)*",
"\\d+(-\\d+)?(\\\\\\d+(-\\d+)?)*",
label);
case "percent":
return new gui.EditableFiltered(inID, inKey, type, inValue,
"[+-]?\\d*%?", "[+-]?\\d+%", label);
case "price":
return new gui.EditableFiltered(inID, inKey, type, inValue,
"[\\$â¬â¡â¢â£â£â¦â§â¨â©âªâ«ââ®â¯]\\s*\\d*\\.?\\d*",
"[\\$â¬â¡â¢â£â£â¦â§â¨â©âªâ«ââ®â¯]\\s*\\d+(\\.\\d+)?",
label);
case "isbn":
return new gui.EditableFiltered(inID, inKey, type, inValue,
"\\d*-?\\d*-?\\d*-?\\d*-?\\d*",
function()
{
// check if isbn is valid
var parts = this.value.match(/^(\d+-\d+-\d+)-([09-xX])$/)
if(parts && this.value.length == 13)
{
var numbers = parts[1].replace(/-/g, "");
var check = parts[2];
var sum = 0;
for(var i = 10, j = 0; i > 1; i--, j++)
sum += numbers.charAt(j) * i;
if(check == "" + (11 - (sum % 11)) % 11)
gui.removeStyle(this, "invalid");
else
gui.addStyle(this, "invalid");
}
else
{
parts = this.value.match(/^(\d+-\d+-\d+-\d+)-(\d)$/)
if(parts && this.value.length == 17)
{
var numbers = parts[1].replace(/-/g, "");
var check = parts[2];
var sum = 0;
for(var i = 0; i < 12; i++)
sum += numbers.charAt(i) * (i % 2 == 0 ? 1 : 3);
if(check == "" + (10 - (sum % 10)) % 10)
gui.removeStyle(this, "invalid");
else
gui.addStyle(this, "invalid");
}
else
gui.addStyle(this, "invalid");
}
}, label);
case "list":
{
var delim = options.trim();
var values = inValue.split(delim);
// fix strings that were split in the middle
for(var i = 0; values.length > 1 && i < values.length - 1; i++)
if(values[i].replace(/[^\"]+/g, "").length % 2)
{
values[i] += values[i + 1];
values.splice(i + 1, 1);
i--; // do this again
}
// trim values
for(var i = 0; i < values.length; i++)
values[i] = values[i].trim();
// ignore lists with only a single, empty element
if(values.length == 1 && values[0].length == 0)
values = [];
return new gui.EditableList(inID, inKey, type, values,
subtype, options, inValues);
}
case "multiple":
return new gui.EditableMultiple(inID, inKey, type, inValue.split(/::/),
subtype.split(/@/),
options ? options.split(/::/) : [],
inValues);
default:
alert("Internal Error: Unknown edit type '" + type + "' encountered "
+ " [type: " + type + ", label: " + label + ", options: "
+ options + ", subtype: " + subtype + "]");
return null;
}
}
//..........................................................................
//----- EditableField ------------------------------------------------------
/**
* The base object for editable values with a single field.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inLabel the label to set
*
*/
gui.EditableField = function(inID, inKey, inType, inValue, inLabel)
{
gui.Editable.call(this, inID, inKey, inType, inValue, inLabel);
if(!this._field)
this._field = this._unlabeled;
this._field.className = "edit " + this.type;
this._field.value = this._value;
this._field.name = this.key;
this._field.id = "field-" + this.key;
this._field.__editable = this;
this._field.onkeypress = function() { this.__editable._defined = true;
gui.removeStyle(this, "undefined"); };
};
extend(gui.EditableField, gui.Editable);
gui.EditableField.prototype._undefine = function()
{
this._field.value = "";
gui.addStyle(this._field, "undefined");
};
/**
* Get the value entered for this editable.
*
* @return A string with the value for this editable.
*
*/
gui.EditableField.prototype._getValue = function()
{
return this._field.value;
};
/**
* Set the width of the field.
*
* @param inWidth the new width to set
*
*/
gui.EditableField.prototype.setWidth = function(inWidth)
{
this._field.style.width = inWidth + "%";
};
/**
* Set the focus to this field.
*
*/
gui.EditableField.prototype.focus = function()
{
this._field.focus();
};
//..........................................................................
//----- EditableText -------------------------------------------------------
/**
* An object representing an editable field.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial
* @param inLabel the field's label
*
*/
gui.EditableText = function(inID, inKey, inType, inValue, inLabel)
{
gui.EditableField.call(this, inID, inKey, inType, inValue.removeNewlines(),
inLabel);
};
extend(gui.EditableText, gui.EditableField);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableText.prototype._createElement = function()
{
return document.createElement("input");
};
//..........................................................................
//----- EditableString -----------------------------------------------------
/**
* An object representing an editable field containing a string (with ").
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inLabel the field's label
*
*/
gui.EditableString = function(inID, inKey, inType, inValue, inLabel)
{
gui.EditableText.call(this, inID, inKey, inType,
inValue.replace(/^\s*\"([\s\S\n]*)\"\s*$/, "$1"),
inLabel);
}
extend(gui.EditableString, gui.EditableText);
gui.EditableString.prototype._getValue = function()
{
return "\"" + this._field.value + "\"";
};
//..........................................................................
//----- EditableParagraph --------------------------------------------------
/**
* An object representing an editable field containing a text paragraph.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inLabel the field's label
*
*/
gui.EditableParagraph = function(inID, inKey, inType, inValue, inLabel)
{
gui.EditableField.call(this, inID, inKey, inType,
inValue.replace(/^\s*\"([\s\S\n]*)\"\s*$/, "$1")
.replace(/\s*[\r\n]\s*[\r\n]\s*/g, "\x01")
.replace(/\s*[\r\n]\s*/g, " ")
.replace(/\x01/g, "\n\n"), "\"", "\"", inLabel);
}
extend(gui.EditableParagraph, gui.EditableString);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableParagraph.prototype._createElement = function()
{
var element = document.createElement("textarea");
element.rows = 5;
return element;
};
//..........................................................................
//----- EditableSelection --------------------------------------------------
/**
* An object representing an editable selection field.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inSelecton an array with all the selectable values (each value can
* be given as x::y, where x will be displayed, but y will
* be stored)
* @param inLabel the field's label
*
*/
gui.EditableSelection = function(inID, inKey, inType, inValue, inSelections,
inLabel)
{
this._selections = inSelections;
gui.EditableText.call(this, inID, inKey, inType, inValue, inLabel);
this._defined = true;
}
extend(gui.EditableSelection, gui.EditableText);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableSelection.prototype._createElement = function()
{
var element = document.createElement("select");
if(this._selections)
for(var i = 0; i < this._selections.length; i++)
{
var option = document.createElement("option");
var parts = this._selections[i].split("::");
var text = parts[0];
var value = parts[0];
if(parts.length > 1)
value = parts[1];
option.innerHTML = text;
option.value = value;
element .appendChild(option);
if(value == this._value)
element .selectedIndex = i;
}
this._field = element;
return element;
};
//..........................................................................
//----- EditableDynSelection -----------------------------------------------
/**
* An object representing an editable selection field with dynamic values.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inSelecton the name where to get the selections from
* @param inLabel the field's label
*
*/
gui.EditableDynSelection = function(inID, inKey, inType, inValue, inSelections,
inLabel)
{
// replace suggestion parameters, if any
var suggestion = inSelections.replace(/(\?|&)(\w+)=(.+?)(?=&|$)/g,
function(_, inLeader, inKey, inMatch)
{
// find the field containing the value
var field = $("field-" + inKey);
if(field)
return inLeader + inKey + "=" + escape(field.value);
return inLeader + inKey + "=" + inMatch;
});
var values;
// get the selections from the server
if(gui.suggestions[suggestion])
values = gui.suggestions[suggestion];
else
{
values = eval(ajax("/ajax/" + suggestion, null));
gui.suggestions[suggestion] = values;
}
gui.EditableSelection.call(this, inID, inKey, inType, inValue, values,
inLabel);
}
extend(gui.EditableDynSelection, gui.EditableSelection);
//..........................................................................
//----- EditableDynStringSelection -----------------------------------------
/**
* An object representing an editable selection field with dynamic values.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inSelecton the name where to get the selections from
* @param inLabel the field's label
*
*/
gui.EditableDynStringSelection = function(inID, inKey, inType, inValue,
inSelections, inLabel)
{
gui.EditableDynSelection.call(this, inID, inKey, inType,
inValue.replace(/^\s*\"([\s\S\n]*)\"\s*$/,
"$1"), inSelections, inLabel);
}
extend(gui.EditableDynStringSelection, gui.EditableDynSelection);
gui.EditableDynStringSelection.prototype._getValue =
gui.EditableString.prototype._getValue;
//..........................................................................
//----- EditableFiltered ---------------------------------------------------
/**
* An object representing an editable field containing a filtered string.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inFilter the pattern to filter keystrokes
* @param inValid the pattern to denote if the value is valid; instead of
* a pattern this can be an arbitrary function to check for
* validity and react accordingly.
* @param inLabel the field's label
* @param inCondition the condition that must be true for the value, if any
*
*/
gui.EditableFiltered = function(inID, inKey, inType, inValue, inFilter,
inValid, inLabel)
{
this.filter = inFilter;
this.valid = inValid;
gui.EditableText.call(this, inID, inKey, inType, inValue, inLabel);
}
extend(gui.EditableFiltered, gui.EditableText);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableFiltered.prototype._createElement = function()
{
var element = this._super._createElement();
var filter = this.filter;
element.onkeypress = function(inEvent)
{ return gui.filterPattern(this, inEvent, filter); }
if(typeof(this.valid) == "function")
element.onkeyup = this.valid;
else
element.onkeyup = function(inValid)
{
if(this.value.match(new RegExp("^" + inValid + "$")))
gui.removeStyle(this, "invalid");
else
gui.addStyle(this, "invalid");
}.bind(element, this.valid);
return element;
};
//..........................................................................
//----- EditableSuggest ----------------------------------------------------
/**
* An object representing an editable field containing a text with a suggest.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inSuggestion the name of the suggestions to use
* @param inLabel the field's label
*
*/
gui.EditableSuggest = function(inID, inKey, inType, inValue, inSuggestion,
inLabel)
{
this._suggestion = inSuggestion;
gui.EditableText.call(this, inID, inKey, inType, inValue, inLabel);
}
extend(gui.EditableSuggest, gui.EditableText);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableSuggest.prototype._createElement = function()
{
this._field = document.createElement("input");
var container = document.createElement("span");
container.style.position = "relative";
container.__field = this._field;
// not yet there, thus we have to load it
var loading = document.createElement("img");
loading.src = "/icons/loading.gif";
loading.alt = "Loading " + this._suggestion + " suggestions...";
loading.title = "Loading " + this._suggestion + " suggestions...";
loading.className = "loading";
container.appendChild(loading);
if(!gui.suggestions[this._suggestion])
gui.suggestions[this._suggestion] = new gui.Suggestion(this._suggestion);
var suggest = gui.suggestions[this._suggestion];
suggest.request(loading);
var box = document.createElement("ul");
box.className = "suggest-box";
this._field.onkeyup = suggest.suggest.bind(suggest, this._field, box);
this._field.__suggestBox = box
this._field.onblur = function(inEvent)
{ this.__suggestBox.style.display = "none"; };
container.appendChild(box);
container.appendChild(this._field);
return container;
};
//..........................................................................
//----- EditableSuggestString ----------------------------------------------
/**
* An object representing an editable field containing a string with a
* suggest.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inSuggestion the name of the suggestions to use
* @param inLabel the field's label
*
*/
gui.EditableSuggestString = function(inID, inKey, inType, inValue,
inSuggestion, inLabel)
{
this._suggestion = inSuggestion;
gui.EditableString.call(this, inID, inKey, inType, inValue, inLabel);
}
// we want to have a string as base value, thus we have to extend from both
extend(gui.EditableSuggestString, gui.EditableSuggest);
extend(gui.EditableSuggestString, gui.EditableString);
// the getValue method is not taken from string, but from suggest...
gui.EditableSuggestString.prototype._getValue =
gui.EditableString.prototype._getValue;
//..........................................................................
//----- EditableList -------------------------------------------------------
/**
* The editable for lists of values.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial value
* @param inSubtype the type of the subvalues
* @param inDelimiter the delimiter between list items
*
*/
gui.EditableList = function(inID, inKey, inType, inValues, inSubtype,
inDelimiter, inSubValues)
{
this.items = [];
this.delimiter = inDelimiter;
this.subtype = inSubtype;
this.subvalues = inSubValues;
gui.Editable.call(this, inID, inKey, inType, inValues);
};
extend(gui.EditableList, gui.Editable);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableList.prototype._createElement = function()
{
var element = document.createElement("div");
if(this._value.length > 0)
for(var i = 0; i < this._value.length; i++)
element.appendChild(this._createLine(this._value[i],
this.subtype)._element);
else
element.appendChild(this._createLine("", this.subtype)._element);
return element;
};
/**
* Create a single line in the list (with images).
*
* @param inValue the value to set to
* @param inType the type of the sub editable
* @param inPrevious the editable to add after, if any
*
* @return the sub editable created
*
*/
gui.EditableList.prototype._createLine = function(inValue, inType, inPrevious)
{
var line = document.createElement("div");
var item = gui.Editable.create(this.id, null, inType, inValue,
this.subvalues, null);
if(inPrevious)
{
var i;
for(i = 0; i < this.items.length; i++)
if(this.items[i] == inPrevious)
{
this.items.splice(i + 1, 0, item);
break;
}
// not found, add it to the end
if(i >= this.items.length)
this.items.push(item);
}
else
this.items.push(item);
line.__field = item._field;
line.appendChild(item._element);
item.setWidth(98);
// add the buttons
var remove = document.createElement("img");
remove.src = "/icons/remove.png";
remove.alt = "Remove";
remove.className = "remove";
remove.onmouseout = "gui.iconNormal(this);";
remove.onmouseover = "gui.iconHighlight(this);";
remove.__element = line;
remove.__list = this;
remove.__editable = item;
remove.onclick = function()
{
this.__list.items.remove(this.__editable);
this.__element.parentNode.removeChild(this.__element);
}
var add = document.createElement("img");
add.src = "/icons/add.png";
add.alt = "Add";
add.className = "add";
add.onmouseout = "gui.iconNormal(this);";
add.onmouseover = "gui.iconHighlight(this);";
add.__type = this.subtype;
add.__container = line;
add.__list = this;
add.__editable = item;
add.onclick = function()
{
var item = this.__list._createLine("", this.__type, this.__editable);
if(this.__container.nextSibling)
this.__container.parentNode.insertBefore(item._element,
this.__container.nextSibling);
else
this.__container.parentNode.appendChild(item._element);
item.focus();
}
line.style.position = "relative";
line.appendChild(remove);
line.appendChild(add);
item._element = line;
return item;
}
/**
* Get the value entered for this editable.
*
* @return A string with the value for this editable.
*
*/
gui.EditableList.prototype._getValue = function()
{
var result = null;
for(var i = 0, item; item = this.items[i]; i++)
if(item.getValue())
if(result)
result += this.delimiter + item.getValue();
else
result = item.getValue();
return result || '$undefined$';
};
/**
* Set the width of the field.
*
* @param inWidth the new width to set (in percents)
*
*/
gui.EditableList.prototype.setWidth = function(inWidth)
{
for(var i = 0, item; item = this.items[i]; i++)
item.setWidth(inWidth * 0.95);
};
/**
* Set the focus to this field.
*
*/
gui.EditableList.prototype.focus = function()
{
this.items[0].focus();
}
gui.EditableList.prototype._undefine = function()
{
this._element.parentNode.removeChild(this._element);
this._element = this._createElement();
alert(this._element.innerHTML);
}
//..........................................................................
//----- EditableMultiple ---------------------------------------------------
/**
* The editable for multiple values.
*
* @param inKey the key uniquely defining the value
* @param inType the type of the editable
* @param inValue the initial values
* @param inSubtypes the types of the subvalues
* @param inDelimiters the delimiter between the multiple items
*
*/
gui.EditableMultiple = function(inID, inKey, inType, inValues, inSubtypes,
inDelimiters, inSubValues)
{
this.items = [];
this.delimiters = inDelimiters;
this.subtypes = inSubtypes;
this.subvalues = inSubValues
gui.Editable.call(this, inID, inKey, inType, inValues);
};
extend(gui.EditableMultiple, gui.Editable);
/**
* Create the element associated with this editable.
*
* @return the html element created
*/
gui.EditableMultiple.prototype._createElement = function()
{
var element = document.createElement("span");
var subvalues = new Array();
if(this.subvalues)
subvalues = this.subvalues.split("::");
for(var i = 0; i < this.subtypes.length; i++)
{
var item = gui.Editable.create(this.id, null, this.subtypes[i],
this._value.length > i
? this._value[i] : "",
subvalues.length > 0
? subvalues[Math.min(i,
subvalues.length - 1)]
: null,
null);
this.items.push(item);
if(item.type != "list")
item.setWidth(100 / this._value.length);
element.appendChild(item._element);
}
return element;
};
/**
* Get the value entered for this editable.
*
* @return A string with the value for this editable.
*
*/
gui.EditableMultiple.prototype._getValue = function()
{
var result = "";
var i = 0;
for(var item; item = this.items[i]; i++)
{
var value = item.getValue();
if(value.length > 0 && value != "$undefined$")
result += this.delimiters[i] + item.getValue();
}
return result + this.delimiters[i];
};
/**
* Set the width of the field.
*
* @param inWidth the new width to set (in percents)
*
*/
gui.EditableMultiple.prototype.setWidth = function(inWidth)
{
for(var i = 0, item; item = this.items[i]; i++)
if(this.items[i].type != "list")
item.setWidth(inWidth * 0.98 / this.items.length);
else
item.setWidth(inWidth);
};
/**
* Set the focus to this field.
*
*/
gui.EditableMultiple.prototype.focus = function()
{
this.items[0].focus();
}
gui.EditableMultiple.prototype._undefine = function()
{
for(var i = 0, item; item = this.items[i]; i++)
this.items[i].undefine();
}
//..........................................................................
//----- Suggestion ---------------------------------------------------------
/** Storage for all suggestions related information. */
gui.suggestions = {}
gui.Suggestion = function(inName)
{
this.name = inName;
this._request = null;
this._loadings = [];
this._index = {};
this._values = null;
}
gui.Suggestion.number = 5;
gui.Suggestion.lead = 10;
/**
* Request some suggestion values.
*
* @param inLoading the html element showing the loading status
*
*/
gui.Suggestion.prototype.request = function(inLoading)
{
// already obtained?
if(this._values)
return;
if(!this._request)
this._request = ajax("/ajax/" + this.name, null, this.store.bind(this));
this._loadings.push(inLoading);
}
/**
* Store the suggestion values.
*
* @param inName the name of the suggestion
* @param inValues the suggestion values
*
*/
gui.Suggestion.prototype.store = function(inValues)
{
// cancel all loading
for(var i = 0, loading; loading = this._loadings[i]; i++)
loading.parentNode.removeChild(loading);
this._request = null;
this._loadings = [];
this._values = eval("(" + inValues + ")");
// store more intelligently (using indexes per staring characters)
var suggestions = {};
for(var i = 0, suggestion; suggestion = this._values[i]; i++)
{
for(var j = 1; j <= gui.Suggestion.lead; j++)
{
var name = suggestion.substr(0, j).toLowerCase();
if(this._index[name])
continue;
this._index[name] = i;
}
}
}
/**
* Create a suggestion menu for selecting a suggestion.
*
* @param inField the field using the suggest
* @param inBox the box containing the suggestions
* @param inEvent the event that started the suggestion request
*
*/
gui.Suggestion.prototype.suggest = function(inField, inBox, inEvent)
{
// handle special keys
if(inEvent.which == 40) // cursor down
for(var node = inBox.firstChild; node; node = node.nextSibling)
{
if(node.className == "current")
{
if(node.nextSibling)
{
node.className = "";
node.nextSibling.className = "current";
}
else
{
node.className = "";
inBox.appendChild(this._createSuggestItem
(node.__index + 1, this._values[node.__index + 1],
true));
inBox.removeChild(inBox.firstChild);
}
return;
}
}
if(inEvent.which == 38) // cursor up
for(var node = inBox.firstChild; node; node = node.nextSibling)
{
if(node.className == "current")
{
if(node.previousSibling)
{
node.className = "";
node.previousSibling.className = "current";
}
else
{
node.className = "";
inBox.insertBefore(this._createSuggestItem
(node.__index + 1, this._values[node.__index + 1],
true), inBox.firstChild);
inBox.removeChild(inBox.lastChild);
}
return;
}
}
if(inEvent.which == 13 || inEvent.which == 9) // enter or tab
{
for(var node = inBox.firstChild; node; node = node.nextSibling)
if(node.className == "current")
{
inField.value = node._value;
break;
}
inBox.style.display = "none";
return;
}
var i =
this._index[inField.value.substr(0, gui.Suggestion.lead).toLowerCase()];
if(!i)
i = 0;
// make sure it is shown
inBox.style.display = "block";
var value = inField.value.toLowerCase();
for(var suggestion; suggestion = this._values[i]; i++)
{
if(value <= suggestion.toLowerCase())
{
// clear any old content
inBox.innerHTML = "";
for(var j = 0; j < gui.Suggestion.number && this._values[i + j]; j++)
{
if(value.toLowerCase()
!= this._values[i + j].substr(0, value.length).toLowerCase())
return;
inBox.appendChild(this._createSuggestItem(i + j, this._values[i + j],
j == 0));
}
return;
}
}
}
/**
* Create a single item in a suggestion list.
*
* @param inIndex the index number of the value
* @param inText the text to display
* @param inIsCurrent flag if this is the currently selected value
*
* @return the create html element
*
*/
gui.Suggestion.prototype._createSuggestItem = function(inIndex, inText,
inIsCurrent)
{
var item = document.createElement("li");
if(inIsCurrent)
item.className = "current";
item.innerHTML = inText;
item.__index = inIndex;
item._value = inText;
return item;
}
//..........................................................................
//----- Busy ---------------------------------------------------------------
/**
* The class represents a busy status to be displayed.
*
* @param inText The text to show for busy (will be followed by steps).
* @param inSteps An array with all the steps to show.
*
*/
gui.Busy = function(inText, inSteps)
{
this.text = inText;
this.steps = inSteps;
this.display = document.createElement('div');
this.display.className = 'busy';
var loading = document.createElement('img');
loading.src = '/icons/loading.gif';
loading.alt = 'Loading...';
this.display.appendChild(loading);
this.content = document.createElement('span');
this.display.appendChild(this.content);
document.body.appendChild(this.display);
this._update();
}
gui.Busy.prototype.add = function(inStep)
{
this.steps.push(inStep);
this._update();
}
gui.Busy.prototype.done = function(inStep)
{
this.steps.remove(inStep);
if(this.steps.length == 0)
document.body.removeChild(this.display);
else
this._update();
}
gui.Busy.prototype._update = function()
{
this.content.innerHTML = this.text + this.steps.join(", ") + "...";
}
//..........................................................................
//----- Draggable ----------------------------------------------------------
/**
* A screen object that is draggable.
*
*
* @param inElement the element to make draggable
* @param inBoundary the element marking the boundary for moving this one
*
*/
gui.Draggable = function(inElement, inBoundary)
{
this._element = inElement;
this._boundary = inBoundary || document.body;
this._offset = null;
this._allowClick = true;
// add the style to make it draggable
gui.addStyle(this._element, "draggable");
// note the handler for mouse down
this._element.onmousedown = this.prepare.bind(this);
this._element._onclick = this._element.onclick;
this._element.onclick = this.click.bind(this);
};
//----- prepare ------------------------------------------------------------
/**
* Prepare for dragging. We don't immediately drag, since a mouse down could
* also simply mean a click...
*
*/
gui.Draggable.prototype.prepare = function(inEvent)
{
// wait 200ms before really dragging anything, but allow moving
this._delayed = gui.delayed(this.initiate.bind(this, inEvent), 200);
document.onmousemove = this.initiate.bind(this, inEvent);
}
//..........................................................................
//----- click --------------------------------------------------------------
/**
* The element was clicked. Now remove the drag init and execute the click.
*
* @param inFunction the original function to call
*
*/
gui.Draggable.prototype.click = function(inEvent)
{
this._stop();
if(!this._allowClick)
{
// mouse up already passed, otherwise we would not be here; we don't want
// this click, but maybe the next
this._allowClick = true;
inEvent.stopPropagation();
return;
}
// do the original click, if any
if(this._element._onclick)
this._element._onclick(inEvent);
}
//..........................................................................
//----- initiate -----------------------------------------------------------
/**
* Initiate the dragging process.
*
*/
gui.Draggable.prototype.initiate = function(inEvent)
{
gui.removeStyle(this._element, "draggable");
gui.addStyle(this._element, "dragged");
document.onmouseup = this.drop.bind(this);
document.onmousemove = this.drag.bind(this);
// prevent text selection
document.body.focus();
// prevent normal clicks
this._allowClick = false;
// compute the boundary values
var pos = gui.position(this._boundary);
this._top = pos.y
+ (this._boundary.style
? number(this._boundary.style.borderTopWidth)
+ number(this._boundary.style.paddingTop)
: 0);
this._bottom = pos.y + this._boundary.offsetHeight
- (this._boundary.style
? number(this._boundary.style.borderBottomWidth)
+ number(this._boundary.style.paddingBottom)
: 0);
this._left = pos.x
+ (this._boundary.style
? number(this._boundary.style.borderLeftWidth)
+ number(this._boundary.style.paddingLeft)
: 0);
this._right = pos.x + this._boundary.offsetWidth
- (this._boundary.style
? number(this._boundary.style.borderRightWidth)
+ number(this._boundary.style.paddingRight)
: 0);
}
//..........................................................................
//----- drag ---------------------------------------------------------------
/**
* Drag the element. This is usually called by the mousemove handler.
*
*/
gui.Draggable.prototype.drag = function(inEvent)
{
// move the element to the current mouse position
var mouse = gui.mouseCoords(inEvent);
if(!this._offset)
{
var doc = gui.position(this._element);
this._offset = { x: mouse.x - doc.x, y: mouse.y - doc.y };
// make elements relative to position wherever we like (we have to do this
// after getting the position or the position will be wrong for float
// elements)
this._element.style.position = "absolute";
}
var top = mouse.y - this._offset.y;
var left = mouse.x - this._offset.x
// check if the movement is inside the allowed boundaries
if(top < this._top)
top = this._top;
else
if(top > this._bottom)
top = this._bottom - 1;
if(left < this._left)
left = this._left;
else
if(left > this._right)
left = this._right - 1;
this._element.style.top = top + "px";
this._element.style.left = left + "px";
}
//..........................................................................
//----- drop ---------------------------------------------------------------
/**
* Drop the element.
*
* @param inEvent the event responsible for the action
*
*/
gui.Draggable.prototype.drop = function(inEvent)
{
this._stop();
gui.removeStyle(this._element, "dragged");
gui.addStyle(this._element, "draggable");
// reinstate all the handlers
delete document.onmousemove;
delete document.onmouseup;
document.body.style.MozUserSelect = "";
this._element.onclick = this.click.bind(this);
// make sure we reset the offset
delete this._offset;
this._offset = null;
}
//..........................................................................
//----- _stop --------------------------------------------------------------
/**
* Stop dragging.
*
*/
gui.Draggable.prototype._stop = function()
{
if(this._delayed)
{
window.clearTimeout(this._delayed.timeout);
delete this._delayed;
delete document.onmousemove;
document.onmousemove = null;
}
}
//..........................................................................
//..........................................................................
//----- Droppable ----------------------------------------------------------
/** An object that that can be dragged & dropped.
*
* @param inElement the element to make droppable (and draggable)
* @param inTargets all possible drop targets (the current object may be among
* the elements given here)
* @param inBoundary the element marking the boundary for moving this one
*
*/
gui.Droppable = function(inElement, inTargets, inBoundary)
{
gui.Draggable.call(this, inElement, inBoundary);
this._targets = inTargets;
}
extend(gui.Droppable, gui.Draggable, "_base");
//----- drag ---------------------------------------------------------------
/**
* Drag the element. Also make sure any drop target moved over is marked.
*
* @param inEvent the event that initiated the drop
*
*/
gui.Droppable.prototype.drag = function(inEvent)
{
this._base.drag.call(this, inEvent);
var mouse = gui.mouseCoords(inEvent);
// determine the current drop target
var target = null;
for(var i = 0; i < this._targets.length; i++)
{
var current = this._targets[i];
if(!current || current == this || !current.isTargeted(mouse))
continue;
if(target)
{
if(isInside(current._element, target._element))
target = current;
}
else
target = current;
}
if(target != null)
target.mark(this, mouse);
else
if(gui.DropTarget.current)
gui.DropTarget.current.unmark(this, mouse);
};
//..........................................................................
//----- drop ---------------------------------------------------------------
/**
* Drop the element.
*
* @param inEvent the event responsible for the action
*
*/
gui.Droppable.prototype.drop = function(inEvent)
{
this._base.drop.call(this, inEvent);
if(gui.DropTarget.current)
{
this._element.parentNode.removeChild(this._element);
gui.DropTarget.current.dropped(this, gui.mouseCoords(inEvent));
}
else
{
// put the element back to where it started
var parent = this._element.parentNode;
var next = this._element.nextSibling;
parent.removeChild(this._element);
parent.insertBefore(this._element, next);
}
this._element.style.top = null;
this._element.style.left = null;
this._element.style.position = null;
}
//..........................................................................
//..........................................................................
//----- DropTarget ---------------------------------------------------------
/**
* A target for a drop operation.
* This standard drop target will add a css style 'dropping' when an element
* is moved over it.
*
* @param inElement the display element for this target
*
*/
gui.DropTarget = function(inElement)
{
this._element = inElement;
};
/** The drop target current selected. */
gui.DropTarget.current = null;
//---------------------------------- mark ----------------------------------
/**
* Mark the target for beeing dropped upon.
*
* @param inSource the object that initiated the marking
* @param inMouse the position of the mouse as {x: x, y: y}
*
* @return true if marked, false if not
*
*/
gui.DropTarget.prototype.mark = function(inSource, inMouse)
{
if(gui.DropTarget.current == this)
return false;
if(gui.DropTarget.current)
gui.DropTarget.current.unmark(inSource, inMouse);
gui.addStyle(this._element, "dropping");
gui.DropTarget.current = this;
return true;
}
//..........................................................................
//--------------------------------- unmark ---------------------------------
/**
* Unmark the target for beeing dropped upon.
*
* @param inSource the object that initiated the unmarking
* @param inMouse the position of the mouse as {x: x, y: y}
*
*/
gui.DropTarget.prototype.unmark = function(inSource, inMouse)
{
gui.removeStyle(this._element, "dropping");
gui.DropTarget.current = null;
};
//..........................................................................
//------------------------------- isTargeted -------------------------------
/**
* Determine if the mouse currently targets this element.
*
* @param inMouse the mouse position
*
*/
gui.DropTarget.prototype.isTargeted = function(inMouse)
{
return this._element && this._element.style.display != "none"
&& gui.isOver(this._element, inMouse);
}
//..........................................................................
//-------------------------------- dropped ---------------------------------
/**
* The element was actually dropped on this.
*
* @param inDroppable the droppable dropped onto this one
* @param inMouse the position of the mouse as {x: x, y: y}
*
*/
gui.DropTarget.prototype.dropped = function(inDroppable, inMouse)
{
if(gui.DropTarget.current)
gui.DropTarget.current.unmark(inMouse);
gui.appear(this._element, 10, 10);
}
//..........................................................................
//..........................................................................
// male all values editable
addOnLoad(gui.makeEditable);
// install scrolling on the page
addOnLoad(gui.initScrolling);
// add the necessary style sheets (if not yet loaded)
gui.delayed(function() { gui.includeCSS("/css/gui.css"); }, 0);
// treat INFO cookies
addOnLoad(gui.checkMessages);