paneset-core.js

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

//$Id: paneset-core.js 6575 2007-03-09 09:32:42Z slip $
/**
 * PaneSet widget constructor. Call it, for example, like this:
 *
 * \code
 *   var paneSet = new Zapatec.PaneSet({
 *   	panes : panesObj,
 *      orientation : "vertical"
 *   });
 * \endcode
 *
 * @param config [object] - all parameters are passed as the properties of this object.
 * 
 * Constructor recognizes the following properties of the config object
 * \code
 *    prop. name     | description
 *  -------------------------------------------------------------------------------------------------
 *   panes           | [mixed] After parsing this will be array which holds the child panes configuration and 
 *                   | count (can include child PaneSets). This option depends on dataType property.
 *   dataType        | [string] String containing the type of the "panes" property, see Zapatec.Widget comments 
 *                   | for possible values
 *   orientation     | [string] Orientation of Panes/PaneSets in the PaneSet, can be "vertical" or "horizontal".
 *   breadth         | [number] breadth of the PaneSet, this property depends on the orientation. If orientation is
 *                   | "horizontal" it is height, otherwise it is width. The opposite dimension is 
 *                   | calculated as the sum of sizes of child Panes/PaneSets.
 *   parent          | [HTML element or string] HTML element where the PaneSet should be placed or its ID.
 *   reuseContainer  | [HTML element or string] HTML element that can be used as a PaneSet container or
 *                   | its ID. This parameter is optional, if you ommit it new one will be created.
 *   length          | [number] length of the PaneSet in pixels, depends on orientation.
 *   id              | [string] id of this PaneSet. Is used for seeking Pane by ID.
 *   resizable       | [boolean] is PaneSet resizable by DnD. Default is false.
 *   
 * \endcode
 *
 * "panes" array has the following structure: [paneObj1, paneObj1, ...], the number of child 
 * Panes/PaneSets is not limited, but must be more than one (use Pane object if you need just one :) )!
 * Set of properties for the paneObj object depends on whether its Pane or child PaneSet.
 * For Pane paneObj object can have the following properties which define its configuration:
 * \code
 *    prop. name     | description
 *  -------------------------------------------------------------------------------------------------
 *    breadth        | [number] breadth of the Pane, this property depends on orientation of the parent PaneSet.
 *                   | If orientation is "horizontal" it is width, otherwise it is height. The opposite 
 *                   | dimension is equal to parent's PaneSet breadth.
 *    containerType  | [string] Type of the container, can be "iframe", "div" or "current". If you specify "current"
 *                   | you also need to specify the "el" property, which must hold the pointer to the
 *                   | HTML element that will be used as container or its ID.
 *    el             | [HTML element] HTML element to be used as Pane container, makes sence only if 
 *                   | containerType is "current".
 *    content        | [mixed] The content of the Pane, depends on contentType property. Can be URL (for contentType
 *                   | "html/url"), HTML element ("html") or string ("html/text").
 *    contentType    | [string] Type of the content hold in the "content" property. Can be "html", "html/url" or 
 *                   | "html/text".
 *    id             | [string] Optionally you can mark Pane with some string to easily find it then, by 
 *                   | using getPane or setPaneContent methods of PaneSet.
 *   
 * \endcode
 * For the PaneSet paneObj object can have the same properties as config object for constructor. Except
 * pointing the orientation is useless as it will always be opposite to the orientation of parent PaneSet,
 * and parent will also be overwritten by the parent PaneSet. So briefly speaking you can only use "panes"
 * and "breadth" properties :)
 */
 Zapatec.PaneSet = function(config) {
	//type of the widget - paneset in our case :)
	this.widgetType = "paneset";
	//widget state on the stage of calling constructor
	this.widgetState = "created";
	//array of priorities for states, in other words its the number which points the order
	// of states to be passed.
	this.priorities = {
		//the number of states supported
		count : 8,
		//states priorities
		destroyed : 0,
		created : 1,
		inited : 2,
		prepared : 3,
		loaded : 4,
		ready : 5,
		hidden : 6,
		shown : 7
	};
	//array of child Panes/PaneSets
	this.panes = [];
	//array of dividers
	this.dividers = [];
	//system events - are executed first of all
	this.systemEventsOn = false;
	//state object
	this.state = {};
	//calling super constructor
 	Zapatec.PaneSet.SUPERconstructor.call(this, config);
 };
 
Zapatec.PaneSet.id = "Zapatec.PaneSet";

 //Inheriting Zapatec.Widget class
Zapatec.inherit(Zapatec.PaneSet, Zapatec.Widget);
/**
 * inits the PaneSet with config object and creates all
 * child objects.
 * 
 * @param config [object] - config object from the constructor.
 */
Zapatec.PaneSet.prototype.init = function(config) {
	// processing Widget functionality
	Zapatec.PaneSet.SUPERclass.init.call(this, config);
	//loading needed data
	this.loadData({object : this, action : "loadTemplate"});
	//initing child panes/PaneSets
	var self = this;
	Zapatec.PaneSet.loadPanesObject({
		from : this.config.panes, 
		type : this.config.dataType, 
		paneSet : this,
		onSuccess : function(data) {
			self.config.panes = data;
			self.config.dataType = "json";
			self.initChildPanes();
		},
		onFailure : function() {
			Zapatec.Log({description : "Can't load the data for PaneSet with ID - '" + this.id + "'!"});
		}
	});
};

/**
 * Sets the default configuration of the object and
 * inits it with user defined values.
 * @param config {object} configuration parameters.
 */
Zapatec.PaneSet.prototype.configure = function(config) {
	//orientation of the PaneSet (default value is horizontal)
	this.defineConfigOption("orientation", "horizontal");
	//array of child panes, this property is actually a parsed
	//config.panes value; parsing type is defined in dataType
	//config option.
	this.defineConfigOption("panes", null);
	//type of the data passed in config.panes property.
	this.defineConfigOption("dataType", "json");
	//breadth of the pane set (depends on orientation)
	this.defineConfigOption("breadth", null);
	//parent element for our PaneSet
	this.defineConfigOption("parent", null);
	//ID of this PaneSet
	this.defineConfigOption("id", null);
	//this param determines whether we already have an HTML 
	//element, which we can use as the container of our PaneSet,
	//still it should be direct child of parent and will
	//be moved there if not.
	this.defineConfigOption("reuseContainer", null);
	//length of the PaneSet, dimension opposite to "breadth" meaning.
	this.defineConfigOption("length", null);
	//prefix for the className of container
	this.defineConfigOption("prefix", "zpPaneSet");
	//is PaneSet resiziable
	this.defineConfigOption("resizable", false);
	//we need the HTML part of our window to be loaded, so defining the source and sourceType
	this.defineConfigOption("template", Zapatec.PaneSet.path + "h-divider.html");
	//callback source function
	this.defineConfigOption("callbackSource", function(args) {
		//getting window object that requested the load
		var paneSet = args.object;
		//not a Zapatec.Window - no load
		if (!paneSet || paneSet.widgetType != "paneset") {
			return null;
		}
		switch (args.action) {
			//action is loading template
			case "loadTemplate" : {
				return {source : paneSet.getConfiguration().template, sourceType : "html/url"};
			}
		}
		return null;
	});
	// processing Widget functionality
	Zapatec.PaneSet.SUPERclass.configure.call(this, config);
	//need to load proper template
	if (this.config.orientation != "horizontal") {
		this.config.template = Zapatec.PaneSet.path + "v-divider.html";
	}
};

/**
 * Reconfigures the object with new parameters.
 * @param config {object} new configuration parameters.
 */
Zapatec.PaneSet.prototype.reconfigure = function(config) {
	// Call parent method
	Zapatec.PaneSet.SUPERclass.reconfigure.call(this, config);
};

/**
 * Creates all child objects (calls constructor for each 
 * child from the config).
 */
Zapatec.PaneSet.prototype.initChildPanes = function() {
	//there must be more than one Pane
	if (!this.config.panes) {
		Zapatec.Log({description: "No Pane objects passed!"});
		return null;
	} else if (this.config.panes.length < 2) {
		Zapatec.Log({description: "There must be at least two Panes! You should use Pane in such case."});
		return null;
	}
	var item, i, pWidth, pHeight;
	//here we create all child objects to be ready
	//for later creation. I think this speeds up things.
	for(i = 0; i < this.config.panes.length; ++i) {
		item = this.config.panes[i];
		//if panes property was defined then this must be PaneSet :)
		if (item.panes) {
			//the orientation of the child PaneSet should be oposite to this PaneSet
			item.orientation = this.config.orientation == "vertical" ? "horizontal" : "vertical";
			//parent is our PaneSet object.
			item.parent = this;
			//we need to restrict the length of the child PaneSet
			item.length = this.config.breadth;
			//is PaneSet resizale
			item.resizable = this.config.resizable;
			//creating new PaneSet and adding it to our panes array
			item.eventListeners = this.config.eventListeners;
			this.panes.push(new this.constructor(item));
		} else {
			//if containerType is not "current" - "el" property does not makes sence 
			if (item.containerType != "current") {
				item.el = null;
			}
			//determining dimensions of Pane
			if (this.config.orientation == "vertical") {
				pWidth = this.config.breadth;
				pHeight = item.breadth;
			} else {
				pHeight = this.config.breadth;
				pWidth = item.breadth;
			}
			//creating of Pane object, it will be just inited, we'll create all HTML later
			var oPaneset = this;
			this.panes.push(new Zapatec.Pane({
				containerType : item.containerType,
				source : item.content,
				sourceType : item.contentType,
				onlyInit : true,
				width : pWidth,
				height : pHeight,
				parent : item.el || this,
				eventListeners: {
				  onReady: function() {
				    oPaneset.fireEvent('paneInitialized', this.container.id);
				  }
				}
			}));
			//adding our own config options.
			this.panes[this.panes.length - 1].config.id = item.id;
			this.panes[this.panes.length - 1].config.breadth = item.breadth;
			this.panes[this.panes.length - 1].config.length = this.config.breadth;
		}
	}
	//changing state to inited
	this.changeState("inited");