[Mapbender-commits] r4028 - in trunk/mapbender/http: img javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Wed Jun 17 05:56:19 EDT 2009
Author: christoph
Date: 2009-06-17 05:56:19 -0400 (Wed, 17 Jun 2009)
New Revision: 4028
Added:
trunk/mapbender/http/img/help.png
Modified:
trunk/mapbender/http/javascripts/mod_digitize_tab.php
Log:
category tabs
Added: trunk/mapbender/http/img/help.png
===================================================================
(Binary files differ)
Property changes on: trunk/mapbender/http/img/help.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: trunk/mapbender/http/javascripts/mod_digitize_tab.php
===================================================================
--- trunk/mapbender/http/javascripts/mod_digitize_tab.php 2009-06-17 09:09:26 UTC (rev 4027)
+++ trunk/mapbender/http/javascripts/mod_digitize_tab.php 2009-06-17 09:56:19 UTC (rev 4028)
@@ -131,7 +131,60 @@
try {if(nonTransactionalEditable){}}catch(e) {nonTransactionalEditable = false;}
try {if(addCloneGeometryButton){}}catch(e) {addCloneGeometryButton = false;}
+function toggleTabs(tabId) {
+ if(!initialTab) {
+ return;
+ }
+ var tabHeaders = wfsWindow.document.getElementsByTagName('a');
+ var tabs = wfsWindow.document.getElementsByTagName('div');
+
+ for(var i = 0; i < tabHeaders.length; i++) {
+ if(tabHeaders[i].id.indexOf('tabheader') != -1) {
+ tabHeaders[i].className = 'tabheader';
+ }
+ }
+
+ for(var i = 0; i < tabs.length; i++) {
+ if(tabs[i].className === 'tabcontent') {
+ tabs[i].style.visibility = 'hidden';
+ tabs[i].style.display = 'none';
+ }
+ }
+
+ wfsWindow.document.getElementById('tabheader_' + tabId).className += ' active';
+
+ wfsWindow.document.getElementById('tab_' + tabId).style.visibility = 'visible';
+ wfsWindow.document.getElementById('tab_' + tabId).style.display = 'block';
+
+ return false;
+}
+
+function showHelptext(helptextId) {
+ hideHelptext();
+ wfsWindow.document.getElementById('helptext' + helptextId).style.visibility = 'visible';
+ wfsWindow.document.getElementById('helptext' + helptextId).style.display = 'block';
+
+ return false;
+}
+
+function hideHelptext(helptextId) {
+ if(helptextId) {
+ wfsWindow.document.getElementById('helptext' + helptextId).style.visibility = 'hidden';
+ wfsWindow.document.getElementById('helptext' + helptextId).style.display = 'none';
+ }
+
+ var helptext = wfsWindow.document.getElementsByTagName('div');
+
+ for(var i = 0; i < helptext.length; i++) {
+ if(helptext[i].className === 'helptext') {
+ helptext[i].style.visibility = 'hidden';
+ helptext[i].style.display = 'none';
+ }
+ }
+
+ return false;
+}
function getMousePosition(e) {
parent.mb_getMousePos(e, mod_digitize_target);
var currentPos = null;
@@ -1321,19 +1374,26 @@
function validBoxEntrySelected(form){
var isCorrect = true;
var errorMessage = "";
+ var name = "";
for (var i = 0; i < form.childNodes.length && isCorrect; i++) {
if (form.childNodes[i].nodeName.toUpperCase() == "SELECT") {
- if (parseInt(form.childNodes[i].selectedIndex) == 0) {
- return {"isCorrect":false, "errorMessage":errorMessage};
+ name += form.childNodes[i].name;
+ if (parseInt(form.childNodes[i].selectedIndex) == 0 && form.childNodes[i].getAttribute("mandatory") == "true") {
+ var msg = name + ": " + msgObj.messageSelectAnOption + "\n"
+ var categ = form.childNodes[i].getAttribute("category");
+ if (typeof(categ) != "undefined") {
+ msg = categ + " => " + msg;
+ }
+ return {"isCorrect":false, "errorMessage":msg};
}
}
else if (form.childNodes[i].hasChildNodes()) {
- isCorrect = validBoxEntrySelected(form.childNodes[i]).isCorrect;
+ var res = validBoxEntrySelected(form.childNodes[i]);
+ errorMessage = res.errorMessage + errorMessage;
+ isCorrect = res.isCorrect;
+
}
}
- if (!isCorrect) {
- errorMessage = msgObj.messageSelectAnOption + "\n";
- }
return {"isCorrect":isCorrect, "errorMessage":errorMessage};
}
@@ -1554,8 +1614,9 @@
//
var onChangeText = "document.getElementById('elementForm').innerHTML = ";
- onChangeText += "window.opener.buildElementForm(this.value , " + geometryIndex + ");";
+ onChangeText += "window.opener.buildElementForm(this.value, " + geometryIndex + ");";
onChangeText += "window.opener.setWfsWindowStyle(this.value);";
+ onChangeText += "$('.hasDatepicker').datepicker();";
str += "\t<select name='wfs' size='" + wfsConf.length + "'";
str += " onChange=\""+ onChangeText +"\"";
@@ -1577,25 +1638,155 @@
str += "</select>\n\t\t</form>\n\t";
- str += "<div id='elementForm'>\n</div>";
+ var elForm = "";
if (defaultIndex != -1) {
- wfsWindow.document.writeln("<html><head><meta http-equiv='Content-Type' content='text/html; charset=<?php echo CHARSET;?>'><style type='text/css'>"+wfsConf[defaultIndex]['g_style']+"</style></head><body></body></html>");
- wfsWindow.document.write(str);
- wfsWindow.document.close();
- wfsWindow.document.getElementById("elementForm").innerHTML = buildElementForm(defaultIndex, geometryIndex);
+ elForm = buildElementForm(defaultIndex, geometryIndex);
+
+ var headStr = "<html><head><style type='text/css'>" + wfsConf[defaultIndex]['g_style'] + "</style>";
+ headStr += '<link rel="stylesheet" type="text/css" href="../extensions/theme/ui.all.css" />';
+ headStr += '<style type="text/css">'
+ headStr += 'a.tabheader { margin: 0 3px 0 0;padding: 1px 5px;text-decoration: none;color: #999;background-color: #F5F5F5;border: 1px solid #999;border-bottom: 0; }';
+ headStr += 'a.tabheader.active { color: #666;background-color: transparent;border-color: #666;border-bottom: 1px solid #FFF;cursor: default; }';
+ headStr += 'div.tabcontent { visibility: hidden;display: none;margin: -3px 0 5px 0;padding: 5px;border: 1px solid #666; }';
+ headStr += 'div.helptext { visibility: hidden;display: none;position: absolute;top: 5%;left: 5%;width: 85%;padding: 5px;color: #000;background-color: #CCC;border: 1px solid #000; }';
+ headStr += 'div.helptext p { margin: 0 ; }';
+ headStr += 'div.helptext p a.close { display: block;margin: 5px auto;text-align: center; }';
+ headStr += 'a img { vertical-align: middle;border: 0; }';
+ headStr += '</style>';
+ headStr += '</head><body onload="window.opener.toggleTabs(\''+initialTab+'\'); var $dp = $(\'.hasdatepicker\');$dp.datepicker();">';
+ wfsWindow.document.write(headStr);
}
else {
- wfsWindow.document.writeln("<html><head><meta http-equiv='Content-Type' content='text/html; charset=<?php echo CHARSET;?>'><style type='text/css'></style></head><body></body></html>");
- wfsWindow.document.write(str);
- wfsWindow.document.close();
+ var headStr = "<html><head><style type='text/css'></style></head><body>";
+ wfsWindow.document.write(headStr);
}
+ str += "<div id='elementForm'>\n" + elForm + "</div>";
+ str += "<script type='text/javascript' src='../extensions/jquery-1.3.2.min.js'><\/script>";
+ str += "<script type='text/javascript' src='../extensions/jquery-ui-1.7.1.w.o.effects.min.js'><\/script>";
+ str += "</body></html>";
+ wfsWindow.document.write(str);
+ wfsWindow.document.close();
+
+// toggleTabs(initialTab);
+
}
function setWfsWindowStyle(wfsConfIndex) {
wfsWindow.document.getElementsByTagName("style")[0].innerHTML = wfsConf[wfsConfIndex]['g_style'];
}
+function prepareSelectBox (formElementHtml, categoryName, isMandatory, elementLabel, elementValue) {
+ // set category
+ if (categoryName) {
+ var patternString = "<select";
+ var pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " category='" + categoryName + "' ");
+ }
+
+ if (isMandatory) {
+ // set border if mandatory
+ patternString = "<select";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " mandatory='true' style='border:1px solid red' ");
+ }
+
+ // set name of select box to elementlabel
+ patternString = "name\s*=\s*\\*'\w+\\*'";
+ pattern = new RegExp(patternString);
+ if (pattern.test(formElementHtml)) {
+ formElementHtml = formElementHtml.replace(pattern, "name='" + elementLabel + "'");
+ }
+ else {
+ patternString = "<select";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, "<select name='" + elementLabel + "'");
+ }
+
+ // preselect the correct entry of the box
+ patternString = "option value='"+elementValue+"'";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString+" selected");
+
+ return formElementHtml;
+}
+
+function prepareDatepicker (formElementHtml, categoryName, isMandatory, elementLabel, elementValue) {
+ // set category
+ if (categoryName) {
+ var patternString = "<input";
+ var pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " category='" + categoryName + "' ");
+ }
+
+ if (isMandatory) {
+ // set border if mandatory
+ patternString = "<input";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " mandatory='true' style='border:1px solid red' ");
+ }
+
+ // set name of select box to elementlabel
+ patternString = "name\s*=\s*\\*'\w+\\*'";
+ pattern = new RegExp(patternString);
+ if (pattern.test(formElementHtml)) {
+ formElementHtml = formElementHtml.replace(pattern, "name='" + elementLabel + "'");
+ }
+ else {
+ patternString = "<input";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, "<input name='" + elementLabel + "'");
+ }
+
+ // preselect the correct entry of the box
+ patternString = "<input";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " value='"+elementValue+"'");
+
+ return formElementHtml;
+}
+
+function prepareTextArea (formElementHtml, categoryName, isMandatory, elementLabel, elementValue) {
+ // set category
+ if (categoryName) {
+ var patternString = "<textarea";
+ var pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " category='" + categoryName + "' ");
+ }
+
+ if (isMandatory) {
+ // set border if mandatory
+ patternString = "<textarea";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, patternString + " mandatory='true' style='border:1px solid red' ");
+ }
+
+ // set name of select box to elementlabel
+ patternString = "name\s*=\s*\\*'\w+\\*'";
+ pattern = new RegExp(patternString);
+ if (pattern.test(formElementHtml)) {
+ formElementHtml = formElementHtml.replace(pattern, "name='" + elementLabel + "'");
+ }
+ else {
+ patternString = "<textarea";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, "<textarea name='" + elementLabel + "'");
+ }
+
+ // preselect the correct entry of the box
+ patternString = "<\/textarea>";
+ pattern = new RegExp(patternString);
+ formElementHtml = formElementHtml.replace(pattern, elementValue + patternString);
+
+ return formElementHtml;
+}
+
+
+
+// Returns a form with the elements of a selected WFS grouped in tabs
+// (if the original WFS is the selected WFS, the values are set too)
+var initialTab = false;
+
// returns a form with the elements of a selected wfs
// (if the original wfs is the selected wfs, the values are set too)
function buildElementForm(wfsConfIndex, memberIndex){
@@ -1613,78 +1804,161 @@
}
if (typeof(featureTypeArray["element"]) !== "undefined") {
-
- str += "<form id='"+featureTypeElementFormId+"'>\n\t<table>\n";
featureTypeElementArray = featureTypeArray["element"];
-
- //
- // 2. add rows to form
- //
- for (var i = 0 ; i < featureTypeElementArray.length ; i ++) {
- var featureTypeElement = featureTypeElementArray[i];
- var elementName = featureTypeElement['element_name'];
- var elementType = featureTypeElement['element_type'];
- var isEditable = (parseInt(featureTypeElement['f_edit']) == 1);
- var isMandatory = (parseInt(featureTypeElement['f_mandatory']) == 1);
- var isGeomColumn = (parseInt(featureTypeElement['f_geom']) == 1);
- var elementLabelExists = (featureTypeElement['f_label'] != "");
- var elementLabel = "";
- if (elementLabelExists) {
- elementLabel = featureTypeElement['f_label'];
+ // Check if there are categories given and
+ // build the form in tabs if necessary
+ var elementCategories = [];
+ for(var i = 0; i < featureTypeElementArray.length; i++){
+ var categoryName = featureTypeElementArray[i].f_category_name;
+ var categoryNameIsUnique = true;
+
+ if(categoryName.length === 0) { continue; }
+
+ for(var j = 0; j < elementCategories.length; j++) {
+ if(elementCategories[j] == categoryName) {
+ categoryNameIsUnique = false;
+ }
}
- var elementLabelStyle = featureTypeElement['f_label_id'];
+
+ if(categoryNameIsUnique) {
+ elementCategories.push(categoryName);
+ }
+ }
- if (!isGeomColumn) {
- if (isEditable) {
- str += "\t\t<tr>\n";
- str += "\t\t\t<td>\n\t\t\t\t<div class = '"+elementLabelStyle+"''>" + elementLabel + "</div>\n\t\t\t</td>\n";
- str += "\t\t\t<td>\n";
+ str += "<form id='"+featureTypeElementFormId+"'>\n\t";
+
+ var hasCategories = (elementCategories.length > 0);
+ if (hasCategories) {
+ elementCategories.sort();
+
+ initialTab = elementCategories[0];
+ for (var currentCategory = 0; currentCategory < elementCategories.length; currentCategory++) {
+ str += '<a href="#" id="tabheader_' + elementCategories[currentCategory] + '" class="tabheader" onclick="return window.opener.toggleTabs(\'' + elementCategories[currentCategory] + '\')">' + elementCategories[currentCategory] + '</a>';
+ }
+ }
+
+ for (var currentCategory = 0; currentCategory < elementCategories.length || !hasCategories; currentCategory++) {
+ if (hasCategories) {
+ str += '<div id="tab_' + elementCategories[currentCategory] + '" class="tabcontent">';
+ }
+ str += '<table>';
- var elementValue = "";
- if (!featureTypeMismatch) {
- for (var j = 0 ; j < memberElements.count() ; j ++) {
- if (memberElements.getName(j) == featureTypeElement['element_name']) {
- elementValue = memberElements.getValue(j);
+ //
+ // 2. add rows to form
+ //
+ for (var i = 0 ; i < featureTypeElementArray.length ; i++) {
+ var featureTypeElement = featureTypeElementArray[i];
+
+ var elementName = featureTypeElement['element_name'];
+ var elementType = featureTypeElement['element_type'];
+ var isEditable = (parseInt(featureTypeElement['f_edit']) == 1);
+ var isMandatory = (parseInt(featureTypeElement['f_mandatory']) == 1);
+ var isGeomColumn = (parseInt(featureTypeElement['f_geom']) == 1);
+
+ if(hasCategories && featureTypeElement.f_category_name != elementCategories[currentCategory] && !isGeomColumn) {
+ continue;
+ }
+
+
+ var elementLabelExists = (featureTypeElement['f_label'] != "");
+ var elementLabel = "";
+ if (elementLabelExists) {
+ elementLabel = featureTypeElement['f_label'];
+ }
+ var elementLabelStyle = featureTypeElement['f_label_id'];
+
+ if (!isGeomColumn) {
+ if (isEditable) {
+ str += "\t\t<tr>\n";
+ if(elementLabelExists) {
+ str += "\t\t\t<td>\n\t\t\t\t<div class = '"+elementLabelStyle+"''>" + elementLabel + "</div>\n\t\t\t</td>\n";
+ str += "\t\t\t<td>\n";
+ }
+ else {
+ str += '<td colspan="2">';
+ }
+
+ var elementValue = "";
+ if (!featureTypeMismatch) {
+ for (var j = 0 ; j < memberElements.count() ; j ++) {
+ if (memberElements.getName(j) == featureTypeElement['element_name']) {
+ elementValue = memberElements.getValue(j);
+ }
}
}
- }
- var formElementHtml = featureTypeElement['f_form_element_html'];
- if (!formElementHtml || !formElementHtml.match(/<select/)) {
- str += "\t\t\t\t<input id = 'datatype_mb_digitize_form_" + elementName + "' name='datatype' type='hidden' value = '" + elementType + "'>\n";
- str += "\t\t\t\t<input id = 'mandatory_mb_digitize_form_" + elementName + "' name='mandatory' type='hidden' value = '" + isMandatory + "'>\n";
- str += "\t\t\t\t<input id = 'mb_digitize_form_" + elementName + "' name='" + elementLabel + "' type='text' class = '"+featureTypeElement['f_style_id']+"' size=20 value = '" + elementValue + "'>\n";
- }
- else {
+ var formElementHtml = featureTypeElement['f_form_element_html'];
+ if (!formElementHtml) {
+ mandatoryHint = '';
+ var mandatoryHint = (parseInt(featureTypeElement['f_mandatory']) == 1) ? ' style="border:1px solid red;"' : '';
+
+ str += "\t\t\t\t<input id = 'datatype_mb_digitize_form_" + elementName + "' name='datatype' type='hidden' value = '" + elementType + "'>\n";
+ str += "\t\t\t\t<input id = 'mandatory_mb_digitize_form_" + elementName + "' name='mandatory' type='hidden' value = '" + isMandatory + "'>\n";
+ if (!hasCategories) {
+ str += "\t\t\t\t<input id = '" + elementName + "' name='" + elementLabel + "' type='text' " + mandatoryHint + " class = '"+featureTypeElement['f_style_id']+"' size=20 value = '" + elementValue + "'>\n";
+ }
+ else {
+ str += "\t\t\t\t<input category='"+elementCategories[currentCategory]+"' id = 'mb_digitize_form_" + elementName + "' name='" + elementLabel + "' type='text' " + mandatoryHint + " class = '"+featureTypeElement['f_style_id']+"' size=20 value = '" + elementValue + "'>\n";
+ }
+ }
+ else {
while (formElementHtml.match(/\\/)) {
formElementHtml = formElementHtml.replace(/\\/, "");
}
- str += "\t\t\t\t<input id = 'datatype_" + elementName + "' name='datatype' type='hidden' value = '" + elementType + "'>\n";
- str += "\t\t\t\t<input id = 'mandatory_" + elementName + "' name='mandatory' type='hidden' value = '" + isMandatory + "'>\n";
- // preselect the correct entry of the box
- var patternString = "option value( )*=( )*'"+elementValue+"'";
- var pattern = new RegExp(patternString);
- var patternStringForReplace = "option value = '"+elementValue+"'";
- formElementHtml = formElementHtml.replace(pattern, patternStringForReplace+" selected");
- formElementHtml = formElementHtml.replace(/</g,'<');
- formElementHtml = formElementHtml.replace(/>/g,'>');
- formElementHtml = formElementHtml.replace(/'/g,'\'');
-
+
+ var isMandatory = (parseInt(featureTypeElement['f_mandatory']) == 1);
+
+ var patternString = "<select";
+ pattern = new RegExp(patternString);
+ if (pattern.test(formElementHtml)) {
+ formElementHtml = prepareSelectBox(formElementHtml, "", isMandatory, elementLabel, elementValue);
+ }
+ var patternString = "hasdatepicker";
+ pattern = new RegExp(patternString);
+ if (pattern.test(formElementHtml)) {
+ formElementHtml = prepareDatepicker(formElementHtml, "", isMandatory, elementLabel, elementValue);
+ }
+ var patternString = "<textarea";
+ pattern = new RegExp(patternString);
+ if (pattern.test(formElementHtml)) {
+ formElementHtml = prepareTextArea(formElementHtml, "", isMandatory, elementLabel, elementValue);
+ }
str += formElementHtml;
+ }
+
+ if(featureTypeElement.f_helptext.length > 0) {
+ str += ' <a href="#" onclick="return window.opener.showHelptext(' + i + ')"><img src="../img/help.png" width="16" height="16" alt="?" /></a> ';
+ str += '<div id="helptext' +i+ '" class="helptext">';
+ str += '<p>';
+ str += featureTypeElement.f_helptext.replace(/(http:\/\/\S*)/g,'<a href="$1" target="blank">$1<\/a>');
+ str += '<a href="#" class="close" onclick="return window.opener.hideHelptext(' + i + ')">close</a>';
+ str += '</p>';
+ str += '</div>';
+ }
+
+ str += "\t\t\t</td>\n\t\t</tr>\n";
}
- str += "\t\t\t</td>\n\t\t</tr>\n";
}
+ else {
+ hasGeometryColumn = true;
+ }
}
- else {
- hasGeometryColumn = true;
+
+ str += '</table>';
+ str += '</div>';
+
+ // if no categories exist, the for loop would be
+ // infinite without this break
+ if (!hasCategories) {
+ break;
}
}
//
// 3. add buttons "save", "update", "delete"
//
- str += "</table><table>";
+ str += "<table>";
var isTransactional = (featureTypeArray['wfs_transaction']);
if (isTransactional) {
str += "\t\t<tr>\n";
More information about the Mapbender_commits
mailing list