/**
* cssSelector.js
*
* Erstellt die noetigen Dialoge zur Auswahl und Speicherung der css-Definitionen in einer Box
*
* benoetigt:
*
*
* TODO:
* Mehrere Select-Boxen gleichzeitig ermöglichen
* Code-Minimizer fertig stellen um default-Werte raus zu werfen
*
*/
function CssSelector (cssXmlPath, containerName, previewName, defName)
{
// Parameterverarbeitung
this.cssXmlPath = cssXmlPath; // Pfad zur CSS-XML-Datei
this.containerName = containerName; // Id oder Name des Kontainers in welche die einzelnen divs gelegt werden sollen
this.previewName = previewName; // Id oder Name des Vorschauelements
this.defName = defName; // Id oder Name der Box in welcher die Tags gespeichert werden
// Attribute
this.curObj = null; // Speicherung des zuletzt erzeugten Objekts nach Laden einer Box
this.element = null; // Name + Objekt der einzelnen div's
this.xml = null // XML-daten
this.nextElement = { // liefert anhand eines Tags den naechsten Tag in der Hierarchie
'undefined': 'category',
'category' : 'trait',
'trait' : 'values',
'values' : 'value'
}
// Konfiguration
this.minBoxSize = 2; // Minimale Hoehe der auszugebenden Select-Box
this.maxBoxSize = 10; // Maximale Hoehe der auszugebenden Select-Box
/**
* Bereitet die noetigten Daten vor
* @return void
*/
this.prepare = function ( )
{
// Elemente initialisieren
this.element = {
'boxCategory' : this.addObject(),
'boxTrait' : this.addObject(),
'boxValueKind' : this.addObject(),
'boxValue' : this.addObject()
};
// Boxen erstellen
newthis = this;
$.each(this.element, function(key, val) {
$(containerName).append('
'+key+'
');
});
// XML Daten lesen und abspeichern
$(document).ready(function(){
$.get(newthis.cssXmlPath, {}, function(data){
newthis.xml = data;
newthis.afterPrepare();
});
});
}
this.afterPrepare = function ( )
{
newthis = this;
this.addEventHandler();
//var doit=true;
$(this.xml).find('ref').each(function() {
$(this).replaceWith(newthis.getXmlByReferenz($(this).text()));
});
obj = this.getXmlByAttrRek(this.xml, {})
$('#boxCategory').html(this.getContentBox(obj));
$('#boxCategory').css({display: 'inline'});
/*
$(obj['object']).find('value').each(function() {
$(previewName).html($(previewName).html()+', '+$(this).text());
});
*/
}
/**
* Fuehrt ein Highlighting anhand eines regulaeren Ausdrucks durch
* @param regExpr : Regulaere Ausdruck
* @param string : string welcher auf gueltigkeit geprueft werden soll
* @param highlightObject : das Objekt, welches ge-highlighted werden soll
* @return bool
*/
this.pregMatchHighlighting = function(regExpr, string, highlightObject)
{
if(this.isValid(regExpr, string) == true) { // passed
$(highlightObject).css({'background-color' : '#0F0'}); // green
return true;
} else { // failed
$(highlightObject).css({'background-color' : '#F00'}); // red
return false;
}
}
/**
* Prueft ob ein String dem entspr. regulaeren Ausdruck genuegt
* @return bool
*/
this.isValid = function(regExpr, string)
{
if (regExpr != null) {
if(string.match(regExpr) == null) { // failed
return false;
} else { // passed
return true;
}
}
return true;
}
/**
* Sucht rekursiv
* @param xml : XML-Object
* @param jsonXmlObject : XML-Objekt im Json-Stiel
* @return xmlobj
*/
this.getXmlByAttrRek = function(xml, jsonXmlObject)
{
obj = {'object' : this.xml};
for( var key in jsonXmlObject ) {
//alert(key+arrFind[key]);
obj = this.getXmlByAttr(obj['object'], key, jsonXmlObject[key]);
if (obj == null) {
return null;
}
}
return obj;
}
/**
* Liefert die gewuenschten XML-Daten
* @param xml : XML-Object
* @param findTag : Suche alle Tags im XML-Objekt
* @param value : Suche den Tag mit name="value"
* wenn value == null, dann wird nur das letzte Objekt ausgegeben
* @return xmlobj
*/
this.getXmlByAttr = function(xml, findTag, value)
{
var obj = null;
var newthis = this;
$(xml).find(findTag).each(function(){
var name = $(this).attr('name');
var desc = $(this).attr('desc');
var text = $(this).text();
var regExpr = null;
var init = '';
var comb = '';
var before = '';
var after = '';
// Attribute nur bei Values ermitteln
if (value == 'input') {
var init = $(this).attr('initial');
var comb = $(this).attr('combinable');
regExpr = $(this).find('regExpr').text();
before = $(this).find('before').text();
if (before == null) before = '';
after = $(this).find('after').text();
if (after == null) after = '';
}
// Werte in Objekt speichern
if (name == value || value == null) {
obj = {
'object' : this,
'name' : name,
'desc' : desc,
'initial' : init,
'combinable' : comb,
'tag' : findTag,
'regExpr' : regExpr,
'before' : before,
'after' : after
};
}
});
return obj;
}
/**
* Liefert einen Datensatz anhand einer in XML definierten Referenz
* Referenz-Tag muss wie folg aufgebaut sein: Path1|Path2|Path3
* @param strRef : Referenzstring im Format Pathq|Path2|Path3
* @return xmlobj
*/
this.getXmlByReferenz = function (strRef)
{
result = '';
$(this.xml).find('referenz').each(function(){
var name = $(this).attr('name');
if (name == strRef) {
//alert($(this).attr('name'));
result = $(this).clone(true);
}
});
return result;
}
/**
* Erstellt ein Object zur Abfrage offnen/schliessen einer Box
* @return object
*/
this.addObject = function ( )
{
obj = new Object();
obj['selected'] = '';
obj['lastSelected'] = '';
obj['lastX'] = ''; // Letzte X-Position beim Mausklick
return obj;
}
/**
* Gibt die entsprechende Box aus
* @param XML-Objekt
* @return string
*/
this.getContentBox = function(obj)
{
if ( obj == null) {
return null;
}
tag = this.nextElement[obj['tag']];
if (tag == 'value') {
if ($('#values').val() == 'input') {
return this.getInputBox(obj);
}
}
return this.getSelectBox(obj);
}
/**
* Liefert durch Uebergabe des XML-Objekts den Inhalt in einer Select-Box aus
* @param obj : XML Objekt
* @return string
*/
this.getSelectBox = function(obj)
{
var result = '';
var size = 0;
elName = this.nextElement[obj['tag']];
// Options
$(obj['object']).find(elName).each(function() {
size++;
if (elName == 'value') { // Datenermittlung fur den entgueltigen Wert
key = $(this).text();
val = $(this).text();
} else { // Datenermittlung fuer alle Schritte, welche vor dem Value-Schritt passieren
key = $(this).attr('desc');
val = $(this).attr('name');
}
result += ''+"\n";
});
// Boxhoehe
if (size > this.maxBoxSize) {
size = this.maxBoxSize;
}
if (size < this.minBoxSize) {
size = this.minBoxSize;
}
return '';
}
/**
* Liefert durch Uebergabe des XML-Objekts den Inhalt in einer Input-Box aus
* @param obj : XML Objekt
* @return string
*/
this.getInputBox = function(obj)
{
elName = this.nextElement[obj['tag']];
init = $(obj['object']).find('value').text();
val = this.getInputValue($(this.defName).text(), $('#trait').val(), init);
return '';
}
/**
* Erstellt die noetigen Daten
* @param collector : Id/Name des Elements in welches die einzelnen genierierten CSS-Elemente geschrieben werden sollen
* @return void
*/
this.show = function ( )
{
newthis = this; // behebt das JavaScript/JQuery-this Problem
this.prepare();
}
/**
* Fuegt die EventHandler hinzu
* @return void
*/
this.addEventHandler = function ( )
{
newthis = this;
jQuery(document).ready(function(){
// ===== Boxen-Events =====
$("#category").live('click', function(e){
jsonObject = {
'category' : $('#category').val()
};
newthis.loadBox(e, 'boxCategory', 'boxTrait', 'category', jsonObject, '');
});
$("#trait").live('click', function(e){
jsonObject = {
'category' : newthis.element['boxCategory']['selected'],
'trait' : $('#trait').val()
};
newthis.loadBox(e, 'boxTrait', 'boxValueKind', 'trait', jsonObject, '');
});
$("#values").live('click', function(e){
additional = '';
additional += '