builder-field.js

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

/* $Id: builder-field.js 7028 2007-04-26 10:40:38Z andrew $ */
/**
 * @fileoverview Zapatec form builder
 *
 * <pre>
 * Copyright (c) 2004-2007 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * </pre>
 */

/**
 * Zapatec form builder
 *
 * @constructor
 * @extends Zapatec.Widget
 * @param {object} objArgs User configuration
 */
Zapatec.FormBuilder.Field = function(objArgs) {
  // Call constructor of superclass
  Zapatec.FormBuilder.Field.SUPERconstructor.call(this, objArgs);
};

/**
 * Unique static id of the widget class. 
 * @private
 */
Zapatec.FormBuilder.Field.id = 'Zapatec.FormBuilder.Field';

// Inherit Widget
Zapatec.inherit(Zapatec.FormBuilder.Field, Zapatec.Widget);

/**
 * Initialize object.
 *
 * @param {object} objArgs User configuration
 */
Zapatec.FormBuilder.Field.prototype.init = function(objArgs) {
	// Call init method of superclass
	Zapatec.FormBuilder.Field.SUPERclass.init.call(this, objArgs);
	
	this.fieldConfig = {
		id: this.id,
		elementRef: null,
		inputElement: null,
		labelElement: null,
		type: this.config.fieldType,
		label:	"Double-click to edit label",
		name: "",
		attributes: {},
		features: {}
	};

	if(this.config.fieldType == 'select'){
		this.fieldConfig.options = [];
	}
	
	var containerEl = Zapatec.Utils.convertHTML2DOM(this.getFieldFromConfig(true));
	
	if(this.config.insertBeforeEl){
		var insertBeforeIndex = Zapatec.Array.indexOf(this.config.builder.fieldsOrder, this.config.insertBeforeEl.id.replace(/[^\d]*/g, "")); // TODO check this
		this.config.builder.fieldsOrder.splice(insertBeforeIndex, 0, this.id);
		this.config.insertBeforeEl.parentNode.insertBefore(containerEl, this.config.insertBeforeEl);
	} else {
		// add at form start
		this.config.builder.fieldsOrder.splice(0, 0, this.id);
		this.config.builder.readyForm.container.insertBefore(containerEl, this.config.builder.readyForm.container.firstChild);
	}

	this.config.builder.fields[this.id] = this;

	var self = this;
	
	this.editButton = new Zapatec.Button({
		image: "edit_button.gif",
		className: "editButton",
		clickAction: function(){
			self.showEditWindow();
		}
	});
	
	this.editButtonStatusContainer = this.editButton.statusContainer;
	this.editButtonInternalContainer = this.editButton.internalContainer;
	this.editButtonContent = this.editButton.internalContainer.firstChild;
	
	this.editInline = new Zapatec.EditInline({
		editAsText: true,
		eventListeners: {
			showStart: function(){
				this.activeField = self;
			},
			saveContent: function(content){
				if(this.activeField){
					this.activeField.fieldConfig.label = content;
				}
			}
		}
	});
	
	this.updateLinks();
	
	this.showControls();
};

/**
 * Reconfigures the widget with new config options after it was initialized.
 * May be used to change look or behavior of the widget after it has loaded
 * the data. In the argument pass only values for changed config options.
 * There is no need to pass config options that were not changed.
 *
 * @param {object} objArgs Changes to user configuration
 */
Zapatec.FormBuilder.Field.prototype.reconfigure = function(objArgs) {
	// Call parent method
	Zapatec.FormBuilder.Field.SUPERclass.reconfigure.call(this, objArgs);
};

/**
 * Configures the widget. Gets called from init and reconfigure methods of
 * superclass.
 *
 * @private
 * @param {object} objArgs User configuration
 */
Zapatec.FormBuilder.Field.prototype.configure = function(objArgs) {
	this.defineConfigOption('builder', null);
	this.defineConfigOption('fieldType', null);
	this.defineConfigOption('insertBeforeEl', null);
	// Call parent method
	Zapatec.FormBuilder.Field.SUPERclass.configure.call(this, objArgs);
};

/**
 * Update references inside internal config. This is needed before form is 
 * created using innerHTML and references to old elements are lost. 
 * @private
 */
Zapatec.FormBuilder.Field.prototype.updateLinks = function(){
	var containerEl = document.getElementById("fieldId-" + this.id);

	if(
		this.fieldConfig.type == "input-text" || 
		this.fieldConfig.type == "input-checkbox" || 
		this.fieldConfig.type == "input-radio"
	){
		this.fieldConfig.inputElement = containerEl.getElementsByTagName("input")[0];
	} else if(this.fieldConfig.type == "textarea"){
		this.fieldConfig.inputElement = containerEl.getElementsByTagName("textarea")[0];
	} else if(this.fieldConfig.type == "select"){
		this.fieldConfig.inputElement = containerEl.getElementsByTagName("select")[0];
	} else {
		alert("impossible");
	}
	
	this.fieldConfig.elementRef = containerEl;
	this.fieldConfig.labelElement = containerEl.getElementsByTagName("label")[0];

	if(this.editButton.container.childNodes.length == 0){
		this.editButtonInternalContainer.appendChild(this.editButtonContent);
		this.editButtonStatusContainer.appendChild(this.editButtonInternalContainer);
		this.editButton.container.appendChild(this.editButtonStatusContainer);
	}
	
	containerEl.appendChild(this.editButton.container);
}

Zapatec.FormBuilder.Field.prototype.confirmRemoveField = function(){
	var win1 = new Zapatec.ConfirmWindow(
		"Are you sure you want to delete this field?", 
		{
			title:"Confirm delete", 
			modal: true, 
			width :180, 
			theme : "winxp", 
			themePath: "../../zpwin/themes/", 
			top: "center", 
			left: "center"
		}
	);
	
	var self = this;
	
	win1.getResponse(function (res) {
		if (res == true){ 
			self.removeField();
		}
	}); 
}

/**
 * Destroy field with given ID 
 */
Zapatec.FormBuilder.Field.prototype.removeField = function(){
	Zapatec.Utils.destroy(this.fieldConfig.elementRef);
	this.config.builder.fieldsOrder = Zapatec.Array.without(this.config.builder.fieldsOrder, this.id);

	if(this.config.builder.activeField == this){
		this.config.builder.activeField = null;
	}
	
	if(this.editWindow){
		this.editWindow.close();
	}

	this.discard();
}


/**
 * Get HTML code to create new field from given config.
 * @private
 * @param {boolean} addControls If true - some control elements will be added. 
 * To get code for resulting form - set this option to false.
 * @return HTML code to create new form field from given config.
 * @type String
 */
Zapatec.FormBuilder.Field.prototype.getFieldFromConfig = function(addControls){
	var code = [];

	code.push("\t<div");

	if(addControls){
		code.push(" id='fieldId-");
		code.push(this.id);
		code.push("'");
		

		code.push(" class='elementHolder'");
		code.push(" onmouseover='Zapatec.Widget.callMethod(");
		code.push(this.id);
		code.push(", \"showControls\", this, ");
		code.push(this.id);
		code.push(");'");
	}

	code.push(">\n");

	if(addControls){
		code.push("<div class='dragHandle' title='Drag and drop me to put this field to the other place'></div>");
	}

	if(this.fieldConfig.type != "input-checkbox" && this.fieldConfig.type != "input-radio"){
		code.push("\t\t<label class=''");
		
		if(addControls){
			code.push(" ondblclick='Zapatec.Widget.getWidgetById(");
			code.push(this.id);
			code.push(").editInline.show(this)'");
		}
		
		code.push(">"+ this.fieldConfig.label +"</label>\n"); // TODO add zpFormLabel
	}
	
	code.push("\t\t<");
	
	switch(this.fieldConfig.type){
		case "input-text":
			code.push("input type='text'");
			break;
		case "input-checkbox":
			code.push("input type='checkbox'");
			break;
		case "input-radio":
			code.push("input type='radio'");
			break;
		case "textarea":
			code.push("textarea");
			break;
		case "select":
			code.push("select");
			break;
	}
	
	for(var attr in this.fieldConfig.attributes){
		if(
			!this.fieldConfig.attributes[attr] ||
			attr == "name" ||
			attr == "class"
		){
			continue;
		}
		
		code.push(" ");
		code.push(attr);
		code.push("='");
		code.push(this.fieldConfig.attributes[attr]);
		code.push("'");
	}
	
	var classContent = [];
	
	if(this.fieldConfig.attributes["class"]){
		classContent.push(this.fieldConfig.attributes["class"]);
	}

	for(var feature in this.fieldConfig.features){
		if(!this.fieldConfig.features[feature]){
			continue;
		}
		
		if(classContent.length != 0){
			classContent.push(" ");
		}
		
		classContent.push(feature);
		
		if(typeof(this.fieldConfig.features[feature]) == "string"){
			classContent.push("=");
			classContent.push(this.fieldConfig.features[feature].replace(/ /, "\\ "));
		}
	}

	if(classContent.length > 0){
		code.push(" class='");
		code.push(classContent.join(""));
		code.push("'");
	}
	
	code.push(" name='");
	code.push(this.fieldConfig.name);
	code.push("'");
	
	code.push(">");

	if(this.fieldConfig.type == "select" && this.fieldConfig.options){
		for(var ii = 0; ii < this.fieldConfig.options.length; ii++){
			var option = this.fieldConfig.options[ii];
			
			code.push("\n\t\t\t<option");
			
			if(option.value){
				code.push(" value='");
				code.push(option.value);
				code.push("'");
			}
			
			if(option.selected){
				code.push(" selected='selected'")
			}
			
			code.push(">");
			code.push(option.title);
			code.push("</option>");
		}
	}
	
	if(this.fieldConfig.type == "textarea"){
		code.push("</textarea>");
	} else if(this.fieldConfig.type == "select"){
		code.push("\n\t\t</select>");
	}
	code.push("\n")

	if(this.fieldConfig.type == "input-checkbox" || this.fieldConfig.type == "input-radio"){
		code.push("\t\t<label class=''");
		
		if(addControls){
			code.push(" ondblclick='Zapatec.Widget.getWidgetById(");
			code.push(this.id);
			code.push(").editInline.show(this)'");
		}
		
		code.push(">"+ this.fieldConfig.label +"</label>\n"); // TODO add zpFormLabel
	}