zptime-core.js

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

// $Id: zptime-core.js 7198 2007-05-21 08:21:08Z slip $
/**
 *
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 *
 * The TimeSelector object constructor. Call it, for example, like this:
 *
 * \code
 *   var selector = new Zapatec.TimeSelector({
 *   	showSeconds : false
 *   });
 * \endcode
 *
 * The above creates a new TimeSelector object.  The TimeSelector isn't displayed
 * instantly; using the "selector" variable, the programmer can now set certain
 * configuration variables, hook his own event handlers and then display the
 * window using Zapatec.TimeSelector.create() and Zapatec.TimeSelector.show().
 *
 * @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
 *  -------------------------------------------------------------------------------------------------
 *    parent         | {HTML element or string} element or its id where the time selector 
 *                   | will be placed. Default document.body
 *    showHours      | {boolean} if true hours selector will be shown, otherwise omitted. 
 *                   | Default true.
 *    showMinutes    | {boolean} if true minutes selector will be shown, otherwise omitted. 
 *                   | Default true.
 *    showSeconds    | {boolean} if true seconds selector will be shown, otherwise omitted. 
 *                   | Default false.
 *    timeFormat     | {string} "12" or "24", determines whether it is 24 or 12 hours format.
 *                   | default "12".
 *    timeStatus     | {function} callback to disable certain time selection.
 *    separator      | {string} string to be used as separator. Default ":".
 *    date           | {Date object} Date object to be controlled, parsed and printed. 
 *                   | Default "new Date()" expression.
 *    timeInterval   | {number} a number of minutes to which the time can be increased or decreased.
 *                   | Can be - 1, 2, 3, 4, 5, 6, 10, 15, 30,  60, 120, 180, 240, 300, 360.
 *                   | If omitted, minute arrows increment for five and all others for 1.
 */
Zapatec.TimeSelect = function(config) {
	//container of all HTML part
	this.container = null;
	//area filled with string "Time"
	this.timeText = null;
	//a button to select hours
	this.hoursSelect = null;
	//a button to increase hours
	this.hoursUp = null;
	//a button to decrease hours
	this.hoursDown = null;
	//a button to select minutes
	this.minutesSelect = null;
	//a button to increase minutes
	this.minutesUp = null;
	//a button to decrease minutes
	this.minutesDown = null;
	//a button to select seconds
	this.secondsSelect = null;
	//a button to increase seconds
	this.secondsUp = null;
	//a button to decrease seconds
	this.secondsDown = null;
	//ampm selector button
	this.ampmSelect = null;
	//array of separator elements
	this.createProperty(this, "separators", []);
	//empty separator between ampm control and las select
	this.emptySeparator = null;
	//type of the widget - time-selector in our case :)
	this.widgetType = "time-selector";
	//this variable points the state of the widget in general.
	//The widget has a set of states 4 of them should go one after another ('created' -> 'inited' -> 'loaded' -> 'ready')
	//and point to the stage of creation of widget. Last one should be 'ready', 
	//which means a fully ready for work widget. Each of the methods can require
	//the state to be not lower than it needs. So we will also define a method
	//to work with this variable - stateReached(state) - to get true if state reached or passed.
	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 : 7,
		//states priorities
		destroyed : 0,
		created : 1,
		inited : 2,
		loaded : 3,
		ready : 4,
		hidden : 5,
		shown : 6
	};
	//state of the time select
	this.state = {
		shiftKey : false,
		overSelect : null
	};
	//calling super constructor
	Zapatec.TimeSelect.SUPERconstructor.call(this, config);
	//need a restorer object
	this.restorer = new Zapatec.SRProp(this);
};

Zapatec.TimeSelect.id = "Zapatec.TimeSelect";

//Inheriting Zapatec.Widget class
Zapatec.inherit(Zapatec.TimeSelect, Zapatec.Widget);

/**
 * This function inits the config object and loads HTML structure
 * of the time selector, not to waste time :)
 * @param config [object] - object which holds the configuration, same as for constructor
 */
Zapatec.TimeSelect.prototype.init = function(config) {
	// processing Widget functionality
	Zapatec.TimeSelect.SUPERclass.init.call(this, config);
	//changing state to "inited"
	this.changeState("inited");
	//loading template for TimeSelector
	this.loadData({object : this, action : "loadTemplate"});
};

/**
 * Sets the default configuration of the object and
 * inits it with user defined values.
 * @param config {object} configuration parameters.
 */
Zapatec.TimeSelect.prototype.configure = function(config) {
	//parent element for the object
	this.defineConfigOption("parent", document.body);
	//if we show hours
	this.defineConfigOption("showHours", true);
	//if we show minutes
	this.defineConfigOption("showMinutes", true);
	//if we show seconds
	this.defineConfigOption("showSeconds", false);
	//time format 24 or 12 hours
	this.defineConfigOption("timeFormat", "12");
	//callback for disabling time
	this.defineConfigOption("timeStatus", null);
	//separator charackter
	this.defineConfigOption("separator", ":");
	//date object to control
	this.defineConfigOption("date", new Date());
	//time interval
	this.defineConfigOption("timeInterval", null);
	//we need the HTML part of our window to be loaded, so defining the source and sourceType
	this.defineConfigOption("template", Zapatec.TimeSelect.path + "struc.html");
	//callback source function
	this.defineConfigOption("callbackSource", function(args) {
		//getting time-selector object that requested the load
		var selector = args.object;
		//not a Zapatec.TimeSelect - no load
		if (!selector || selector.widgetType != "time-selector") {
			return null;
		}
		switch (args.action) {
			//action is loading template
			case "loadTemplate" : {
				return {source : selector.getConfiguration().template, sourceType : "html/url"};
			}
		}
		return null;
	});
	// processing Widget functionality
	Zapatec.TimeSelect.SUPERclass.configure.call(this, config);
	config = this.getConfiguration();
	//checking time interval.
	if (config.timeInterval) {
	    if ((config.timeInterval !== Math.floor(config.timeInterval)) || 
		    ((60 % config.timeInterval !== 0) && (config.timeInterval % 60 !== 0)) || 
		    (config.timeInterval > 360)) {
				Zapatec.Log({description : "timeInterval option can only have the following number of minutes:\n1, 2, 3, 4, 5, 6, 10, 15, 30,  60, 120, 180, 240, 300, 360!"});
				config.timeInterval = null;
		}
	}
	//checking date
	if (!Zapatec.isDate(config.date)) {
		Zapatec.Log({description : "Wrong date object passed!"});
		config.date = new Date();
	}
	//checking time status function
	if (config.timeStatus && typeof config.timeStatus != "function") {
		Zapatec.Log({description : "Wrong timeStatus parameter passed!"});
		config.timeStatus = null;
	}
	//checking time format
	if (config.timeFormat != "24") {
		config.timeFormat = "12";
	}
};

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

/**
 * We overwrite the zpwidgets loadDataHtml method to parse 
 * needed values from given HTML source.
 * @param el [HTML element] - DOM representation of or HTML part.
 */
Zapatec.TimeSelect.prototype.loadDataHtml = function(el) {
	var self = this;
	var toggleShift = function() {
		self._toggleShift();
	};
	//a button to replace element with button.
	function replaceButton(but, idPrefix, func, select) {
		var button = new Zapatec.Button({
			//copying class name
			className : but.className,
			//if its is not selector using internal 
			//possibility of Zapatec.Button for hovering
			overClass : !select ? "zpTimeSelectHovered" : null,
			//active class
			downClass : "zpTimeSelectActive",
			//if it is selector we need to implement tricky behaviour
			//when button can be disabled if shift is not pressed, but
			//is enabled when it is pressed, and vice versa
			overAction : !select ? null : function(ev) {
				self.state.shiftKey = ev.shiftKey;
				self.state.overSelect = button;
				toggleShift();
			},
			outAction : !select ? null : function() {
				self.state.overSelect = null;
				Zapatec.Utils.removeClass(button.getInternalContainer(), "zpTimeSelectHovered");
			},
			//we use internal classes for making theme
			theme : null,
			//ids for teting
			idPrefix : idPrefix,
			//simple click action
			clickAction : func
		});
		//if it is selector we need to fully enable it first
		if (select) {
			button.shiftEnabled = true;
			button.noShiftEnabled = true;
			button.getInternalContainer = function() {
				return this.internalContainer;
			};
			Zapatec.Utils.addEvent(button.getContainer(), "mouseout", function() {
				button.enable();
				self.state.overSelect = null;
				Zapatec.Utils.removeClass(button.getInternalContainer(), "zpTimeSelectHovered");
			});
		}
		//replacing
		var nxtSbl = but.nextSibling;
		var par = but.parentNode;
		par.removeChild(but);
		par.insertBefore(button.getContainer(), nxtSbl);
		return button;
	}
	//el is an DOM element created from the struct.html file, which contains HTML part of this widget.
	if (this.parseDom(el)) {
		//replacing buttons
		this.hoursSelect = replaceButton(this.hoursSelect, "zpTime" + this.id + "HoursSelect", function(ev) {
			var step = ev.shiftKey ? -1 : 1;
			self.setHours(self.getHours() + step);
		}, true);
		this.hoursUp = replaceButton(this.hoursUp, "zpTime" + this.id + "HoursUpButton", function(ev) {
			self.setHours(self.getHours() + self._getStep("hours", "plus"));
		});
		this.hoursDown = replaceButton(this.hoursDown, "zpTime" + this.id + "HoursDownButton", function(ev) {
			self.setHours(self.getHours() - self._getStep("hours", "minus"));
		});
		this.minutesSelect = replaceButton(this.minutesSelect, "zpTime" + this.id + "MinutesSelect", function(ev) {
			var step = ev.shiftKey ? -1 : 1;
			self.setMinutes(self.getMinutes() + step);
		}, true);
		this.minutesUp = replaceButton(this.minutesUp, "zpTime" + this.id + "MinutesUpButton", function(ev) {
			self.setMinutes(self.getMinutes() + self._getStep("minutes", "plus"));
		});
		this.minutesDown = replaceButton(this.minutesDown, "zpTime" + this.id + "MinutesDownButton", function(ev) {
			self.setMinutes(self.getMinutes() - self._getStep("minutes", "minus"));
		});
		this.secondsSelect = replaceButton(this.secondsSelect, "zpTime" + this.id + "SecondsSelect", function(ev) {
			var step = ev.shiftKey ? -1 : 1;
			self.setSeconds(self.getSeconds() + step);
		}, true);
		this.secondsUp = replaceButton(this.secondsUp, "zpTime" + this.id + "SecondsUpButton", function(ev) {
			self.setSeconds(self.getSeconds() + self._getStep("seconds", "plus"));
		});
		this.secondsDown = replaceButton(this.secondsDown, "zpTime" + this.id + "SecondsDownButton", function(ev) {
			self.setSeconds(self.getSeconds() - self._getStep("seconds", "minus"));
		});
		this.ampmSelect = replaceButton(this.ampmSelect, "zpTime" + this.id + "AMPMSelect", function(ev) {
			var val = self.ampmSelect.getText();
			self.setHours(self.getHours() + (val.toLowerCase() == "am" ? 12 : -12));
		});
		//we need to trace shift key
		Zapatec.Utils.addEvent(document, "keydown", function() {
			self.state.shiftKey = true;
			toggleShift();
		});
		Zapatec.Utils.addEvent(document, "keyup", function() {
			self.state.shiftKey = false;
			toggleShift();
		});
		this.changeState("loaded");
	}
};

/**
 * Gets the container.
 */
Zapatec.TimeSelect.prototype.getContainer = function() {
	return this.container;
};

/**
 * This function appends the loaded structure to the parent element,
 * sets all the parameters of the visual elements.
 * All its actions are closely connected with config options.
 */
Zapatec.TimeSelect.prototype.create = function() {
	if (!this.fireOnState("body_loaded", function() {this.create();}) || !this.fireOnState("loaded", function() {this.create();})) {
		return;
	}
	//getting configuration
	var config = this.getConfiguration();
	//checking parent option
	config.parent = Zapatec.Widget.getElementById(config.parent);
	if (!Zapatec.isHtmlElement(config.parent)) {
		Zapatec.Log({description : "Wrong parent specified!"});
		return false
	}
	//adding theme selector class namme
	Zapatec.Utils.addClass(this.getContainer(), this.getClassName({prefix : "zpTimeSelect", suffix : "Container"}));
	//reconfigurating
	this.reconfig();
	//setting default time
	this.setFirstEnabledTime();
	//appending element
	config.parent.appendChild(this.getContainer());
	//changing state to ready
	this.changeState("ready");
};