builder-field.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

	code.push("\t</div>\n\n");

	return code.join("");
}

/**
 * Show controls for given field.
 */
Zapatec.FormBuilder.Field.prototype.showControls = function(){
	// hide existing controls
	if(this.config.builder.activeField && this.activeField != this){
		this.config.builder.activeField.hideControls();
	}

	if(this.fieldConfig.elementRef.className.indexOf("highlighted") == -1){
		var className = this.fieldConfig.elementRef.className;
		
		if(!className){
			className = "";
		}
		
		this.fieldConfig.elementRef.className = className + " highlighted";
	}
	
	this.config.builder.activeField = this;

//	this.editButton.container.style.display = "block";
}

Zapatec.FormBuilder.Field.prototype.hideControls = function(){
	this.fieldConfig.elementRef.className = this.fieldConfig.elementRef.className.replace(/ ?\bhighlighted\b/, "");

//	this.editButton.container.style.display = "none";
	
	if(this.config.builder.activeField == this){
		this.config.builder.activeField = null;
	}
}

Zapatec.FormBuilder.Field.prototype.showEditWindow = function(){
	var tabsConfig = {tabs:[
		{
			id: "properties",
			content: this.getPropertiesText(),
			contentType: "html/text",
			linkInnerHTML: "HTML properties",
			tabType: "div"
		},
		{
			id: "features",
			content: this.getFeaturesText(),
			contentType: "html/text",
			linkInnerHTML: "Zapatec.Form properties",
			tabType: "div"
		}
	]};

	var additionalPane = this.getAdditionalText();
	
	if(additionalPane){
		tabsConfig.tabs.push({
			id: "additional",
			content: additionalPane,
			contentType: "html/text",
			linkInnerHTML: "Additional",
			tabType: "div"
		});
	}
	
	var winContent = [];
	
	winContent.push('<form id="editForm">');
	winContent.push('<div id="editTabBar" style="width: 500px"></div>');
	winContent.push('<div id="editTabs" style="height: 300px"></div>');
	winContent.push('</form>');
	winContent.push("<input type='button' value='Save & close' onclick='");
	winContent.push("Zapatec.Widget.getWidgetById(" + this.id + ").saveState();");
	winContent.push("Zapatec.Widget.getWidgetById(" + this.id + ").editWindow.close();");
	winContent.push("' />");
	winContent.push("<input type='button' value='Delete field...' onclick='");
	winContent.push("Zapatec.Widget.getWidgetById(" + this.id + ").confirmRemoveField();");
	winContent.push("' />");
	
	var self = this;
	
	this.editWindow = Zapatec.Window.setup({
		modal: true,
		left: "center",
		top: "center",
		width: "550",
		height: "450",
		content: winContent.join(""),
		eventListeners: {
			onContentLoad: function(){
				new Zapatec.Tabs({
					tabBar: "editTabBar",
					tabs: "editTabs",
					theme: "default",
					sourceType: "json",
					source: tabsConfig,
					changeUrl: false,
					overflow: "auto"
				});
				
//				new Zapatec.Form({
//					form: "editForm",
//					theme: "default"
//				});
//				
				var fieldConfig = self.fieldConfig;

				if(fieldConfig.options){
					function populateValues(element, option){
						if(!option){
							return;
						}
						
						var inputs = element.getElementsByTagName("input");
						
						inputs[0].value = option.title;
						inputs[1].value = option.value;
					}

					var parent = document.getElementById("option_parent");
					populateValues(parent, self.fieldConfig.options[0]);
					Zapatec.Form.Utils.initMultipleField(parent, true);
					
					for(var ii = 1; ii < self.fieldConfig.options.length; ii++){
						var clone = Zapatec.Form.Utils.cloneElement(parent);
						populateValues(clone, self.fieldConfig.options[ii]);
					}
					
					var element = document.getElementById("options_list");

					for(var ii = 0; ii < fieldConfig.options.length; ii++){
						if(fieldConfig.options[ii].selected){
							element.childNodes[ii].getElementsByTagName("input")[2].checked = true;
						}
					}
				}
			},
			onClose: function(){
				self.saveState();
			}
		}
	});
}

Zapatec.FormBuilder.Field.prototype.saveState = function(){
	if(this.fieldConfig.type == 'select'){
		var optionsList = document.getElementById("options_list");
	
		this.fieldConfig.options = [];
		
		for(var ii = 0; ii < optionsList.childNodes.length; ii++){
			var inputs = optionsList.childNodes[ii].getElementsByTagName("input");
			
			this.fieldConfig.options.push({
				title: inputs[0].value,
				value: inputs[1].value,
				selected: inputs[2].checked
			});
		}

		this.config.builder.doPreview();
	}
}

Zapatec.FormBuilder.Field.prototype.getAdditionalText = function(){
	if(this.fieldConfig.type != "select"){
		return null;
	}
	
	var paneContent = [];
	paneContent.push("<div id='options_list'>")
	paneContent.push("<div id='option_parent' class='option_parent zpFormMultipleInside'>")
	paneContent.push("<div><label>Name</label><input type='text' name='option_name' /></div>");
	paneContent.push("<div><label>Value</label><input type='text' name='option_value' /></div>");
	paneContent.push("<div><label>Selected</label><input type='radio' name='option_selected' /></div>");
	paneContent.push("</div>")
	paneContent.push("</div>")
	
	return paneContent.join("");
}

Zapatec.FormBuilder.Field.prototype.getPropertiesText = function(){
	var winContent = ["<div>"];
	var self = this;
	var fieldAttrs = this.fieldConfig.attributes;
	
	function generateTextField(name, label, value){
		if(!value){
			value = "";
		}
		
		return "<div><label for='property_" + name + "'>" + label + "</label>"+
			"<input type='text' class='zpIgnoreField' id='property_" + name + "' name='" + name + "' value=\""+ value + "\"" + 
			"onchange='Zapatec.Widget.callMethod("+ self.id +", \"editFieldProperty\", "+
			"this.name, this.value)' /></div>";
	}
	
	function generateCheckbox(name, label, checked){
		return "<div><input type='checkbox' class='zpIgnoreField' id='property_" + name + "' name='" + name + "' "+ (checked ? "checked='checked'" : "") + 
			"onchange='Zapatec.Widget.callMethod("+ self.id +", \"editFieldProperty\", "+
			"this.name, this.checked)' /><label for='property_" + name + "'>" + label + "</label></div>";
	}

	switch(this.fieldConfig.type){
		case "input-text":
			winContent.push(generateTextField("name", "Name", fieldAttrs.name));
			winContent.push(generateTextField("class", "CSS class name", fieldAttrs['class']));
			winContent.push(generateTextField("size", "Size", fieldAttrs.size));
			winContent.push(generateTextField("value", "Predefined value", fieldAttrs.value));
			winContent.push(generateTextField("maxlength", "Max length", fieldAttrs.maxlength));
			winContent.push(generateTextField("id", "ID", fieldAttrs.id));
			winContent.push(generateCheckbox("readonly", "Readonly", fieldAttrs.readonly));
			winContent.push(generateCheckbox("disabled", "Disabled", fieldAttrs.disabled));
			break;
		case "input-checkbox":
			winContent.push(generateTextField("name", "Name", fieldAttrs.name));
			winContent.push(generateTextField("class", "CSS class name", fieldAttrs['class']));
			winContent.push(generateTextField("value", "Predefined value", fieldAttrs.value));
			winContent.push(generateTextField("id", "ID", fieldAttrs.id));
			winContent.push(generateCheckbox("checked", "Checked", fieldAttrs.checked));
			winContent.push(generateCheckbox("readonly", "Readonly", fieldAttrs.readonly));
			winContent.push(generateCheckbox("disabled", "Disabled", fieldAttrs.disabled));
			break;
		case "input-radio":
			winContent.push(generateTextField("name", "Name", fieldAttrs.name));
			winContent.push(generateTextField("class", "CSS class name", fieldAttrs['class']));
			winContent.push(generateTextField("value", "Predefined value", fieldAttrs.value));
			winContent.push(generateTextField("id", "ID", fieldAttrs.id));
			winContent.push(generateCheckbox("checked", "Checked", fieldAttrs.checked));
			winContent.push(generateCheckbox("readonly", "Readonly", fieldAttrs.readonly));
			winContent.push(generateCheckbox("disabled", "Disabled", fieldAttrs.disabled));
			break;
		case "textarea":
			winContent.push(generateTextField("name", "Name", fieldAttrs.name));
			winContent.push(generateTextField("class", "CSS class name", fieldAttrs['class']));
			winContent.push(generateTextField("value", "Predefined value", fieldAttrs.value));
			winContent.push(generateTextField("id", "ID", fieldAttrs.id));
			winContent.push(generateTextField("cols", "Columns", fieldAttrs.cols));
			winContent.push(generateTextField("rows", "Rows", fieldAttrs.rows));
			winContent.push(generateCheckbox("readonly", "Readonly", fieldAttrs.readonly));
			winContent.push(generateCheckbox("disabled", "Disabled", fieldAttrs.disabled));
			break;
		case "select":
			winContent.push(generateTextField("name", "Name", fieldAttrs.name));
			winContent.push(generateTextField("class", "CSS class name", fieldAttrs['class']));
			winContent.push(generateTextField("id", "ID", fieldAttrs.id));
			winContent.push(generateTextField("size", "Size", fieldAttrs.size));
			winContent.push(generateCheckbox("multiple", "Multiple selection", fieldAttrs.multiple));
			winContent.push(generateCheckbox("readonly", "Readonly", fieldAttrs.readonly));
			winContent.push(generateCheckbox("disabled", "Disabled", fieldAttrs.disabled));

			//TODO edit options here
			break;
	}
	
	winContent.push("</div>");
	
	return winContent.join("");
}

Zapatec.FormBuilder.Field.prototype.getFeaturesText = function(){
	var winContent = ["<div>"];
	var self = this;
	var fieldFeatures = this.fieldConfig.features;
	
	function generateTextField(name, label, value){
		if(!value){
			value = "";
		}
		var txt = "<div><input type='checkbox' class='zpIgnoreField' id='feature_" + name + "'"+ 
			(value ? "checked='checked'" : "") +
			" onclick='var valEl = document.getElementById(\"feature_value_" + name + "\"); "+
			"valEl.style.visibility = this.checked ? \"visible\" : \"hidden\"; "+
			"Zapatec.Widget.callMethod("+ self.id +", \"editFieldFeature\", \""+
			name + "\", this.checked ? valEl.value : null)' />\n" +
			"<label for='feature_" + name + "'>" + label + "</label>\n: <input type='text' id='feature_value_" + name + "' name='" + name + "' value=\""+ value + "\"" + 
			" onchange='Zapatec.Widget.callMethod("+ self.id +", \"editFieldFeature\", "+
			"this.name, this.value)' style='" + (value ? "" : "visibility: hidden") + "'/>\n</div>";
		return txt;
	}
	
	function generateCheckbox(name, label, checked){
		return "<div><input type='checkbox' class='zpIgnoreField' id='feature_"+ name +"' name='" + name + "' "+ (checked ? "checked='checked'" : "") + 
			"onchange='Zapatec.Widget.callMethod("+ self.id +", \"editFieldFeature\", "+
			"this.name, this.checked)' /> <label for='feature_" + name + "'>" + label + "</label></div>";
	}

	switch(this.fieldConfig.type){
		case "input-text":
			winContent.push(generateCheckbox("zpFormRequired", "Is required", fieldFeatures.zpFormRequired));
			winContent.push(generateTextField("zpFormMask", "Masked input", fieldFeatures.zpFormMask));
			winContent.push(generateTextField("zpFormDate", "Must be valid date (US format)", fieldFeatures.zpFormDate));
			winContent.push(generateCheckbox("zpFormUrl", "Must be an URL", fieldFeatures.zpFormUrl));
			winContent.push(generateCheckbox("zpFormEmail", "Must be an email", fieldFeatures.zpFormEmail));
			winContent.push(generateCheckbox("zpFormCreditCard", "Must be valid credit card number", fieldFeatures.zpFormCreditCard));
			winContent.push(generateCheckbox("zpFormUSPhone", "Must be valid US phone number", fieldFeatures.zpFormUSPhone));
			winContent.push(generateCheckbox("zpFormInternationalPhone", "Must be valid international phone number", fieldFeatures.zpFormInternationalPhone));
			winContent.push(generateCheckbox("zpFormUSZip", "Must be valid US zip code", fieldFeatures.zpFormUSZip));
			winContent.push(generateCheckbox("zpFormInt", "Must be an integer number", fieldFeatures.zpFormInt));
			winContent.push(generateCheckbox("zpFormFloat", "Must be a float number", fieldFeatures.zpFormFloat));
			break;
		case "input-checkbox":
			winContent.push(generateCheckbox("zpFormRequired", "Is required", fieldFeatures.zpFormRequired));
			break;
		case "input-radio":
			winContent.push(generateCheckbox("zpFormRequired", "Is required", fieldFeatures.zpFormRequired));
			break;
		case "textarea":
			winContent.push(generateCheckbox("zpFormRequired", "Is required", fieldFeatures.zpFormRequired));
			break;
		case "select":
			winContent.push(generateCheckbox("zpFormRequired", "Is required", fieldFeatures.zpFormRequired));
			break;
	}
	
	winContent.push("</div>");
	
	return winContent.join("");
}

Zapatec.FormBuilder.Field.prototype.editFieldProperty = function(property, value){
	if(value == false){
		this.fieldConfig.inputElement.removeAttribute(property);
	} else {
		this.fieldConfig.inputElement.setAttribute(property, value);
	}

	this.fieldConfig.attributes[property] = value;

	if(property == "value"){
		this.fieldConfig.inputElement.value = value;		
	}

	if(property == "name"){
		this.fieldConfig.name = value;		
	}

	if(property == "class"){
		for(var feature in this.fieldConfig.features){
			if(!this.fieldConfig.features[feature]){
				continue;
			}
			
			value += " " + feature;
			
			if(typeof(this.fieldConfig.features[feature]) == "string"){
				value += "=" + fieldConfig.features[feature].replace(/ /, "\\ ");
			}
		}

		this.fieldConfig.inputElement.className = value;
				
	}
}

Zapatec.FormBuilder.Field.prototype.editFieldFeature = function(feature, value){
	this.fieldConfig.features[feature] = value;
	
	// Refresh whole form
	// TODO refresh only this field
	this.config.builder.doPreview();
}