prototype.js

应用泛型以及反射编写的单表操作框架

/*--------------------------------------------------------------------------*/

Form.Element = {
	focus: function(element) {
		$(element).focus();
		return element;
	},

	select: function(element) {
		$(element).select();
		return element;
	}
}

Form.Element.Methods = {
	serialize: function(element) {
		element = $(element);
		var method = element.tagName.toLowerCase();
		var parameter = Form.Element.Serializers[method](element);

		if (parameter) {
			var key = encodeURIComponent(parameter[0]);
			if (key.length == 0) return;

			if (parameter[1].constructor != Array)
				parameter[1] = [parameter[1]];

			return parameter[1].map(function(value) {
				return key + '=' + encodeURIComponent(value);
			}).join('&');
		}
	},

	getValue: function(element) {
		element = $(element);
		var method = element.tagName.toLowerCase();
		var parameter = Form.Element.Serializers[method](element);

		if (parameter)
			return parameter[1];
	},

	clear: function(element) {
		$(element).value = '';
		return element;
	},

	present: function(element) {
		return $(element).value != '';
	},

	activate: function(element) {
		element = $(element);
		element.focus();
		if (element.select)
			element.select();
		return element;
	},

	disable: function(element) {
		element = $(element);
		element.disabled = '';
		return element;
	},

	enable: function(element) {
		element = $(element);
		element.blur();
		element.disabled = 'true';
		return element;
	}
}

Object.extend(Form.Element, Form.Element.Methods);
var Field = Form.Element;

/*--------------------------------------------------------------------------*/

Form.Element.Serializers = {
	input: function(element) {
		switch (element.type.toLowerCase()) {
			case 'checkbox':
			case 'radio':
				return Form.Element.Serializers.inputSelector(element);
			default:
				return Form.Element.Serializers.textarea(element);
		}
		return false;
	},

	inputSelector: function(element) {
		if (element.checked)
			return [element.name, element.value];
	},

	textarea: function(element) {
		return [element.name, element.value];
	},

	select: function(element) {
		return Form.Element.Serializers[element.type == 'select-one' ?
										'selectOne' : 'selectMany'](element);
	},

	selectOne: function(element) {
		var value = '', opt, index = element.selectedIndex;
		if (index >= 0) {
			opt = element.options[index];
			value = opt.value || opt.text;
		}
		return [element.name, value];
	},

	selectMany: function(element) {
		var value = [];
		for (var i = 0; i < element.length; i++) {
			var opt = element.options[i];
			if (opt.selected)
				value.push(opt.value || opt.text);
		}
		return [element.name, value];
	}
}

/*--------------------------------------------------------------------------*/

var $F = Form.Element.getValue;

/*--------------------------------------------------------------------------*/

Abstract.TimedObserver = function() {
}
Abstract.TimedObserver.prototype = {
	initialize: function(element, frequency, callback) {
		this.frequency = frequency;
		this.element = $(element);
		this.callback = callback;

		this.lastValue = this.getValue();
		this.registerCallback();
	},

	registerCallback: function() {
		setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
	},

	onTimerEvent: function() {
		var value = this.getValue();
		if (this.lastValue != value) {
			this.callback(this.element, value);
			this.lastValue = value;
		}
	}
}

Form.Element.Observer = Class.create();
Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
	getValue: function() {
		return Form.Element.getValue(this.element);
	}
});

Form.Observer = Class.create();
Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
	getValue: function() {
		return Form.serialize(this.element);
	}
});

/*--------------------------------------------------------------------------*/

Abstract.EventObserver = function() {
}
Abstract.EventObserver.prototype = {
	initialize: function(element, callback) {
		this.element = $(element);
		this.callback = callback;

		this.lastValue = this.getValue();
		if (this.element.tagName.toLowerCase() == 'form')
			this.registerFormCallbacks();
		else
			this.registerCallback(this.element);
	},

	onElementEvent: function() {
		var value = this.getValue();
		if (this.lastValue != value) {
			this.callback(this.element, value);
			this.lastValue = value;
		}
	},

	registerFormCallbacks: function() {
		var elements = Form.getElements(this.element);
		for (var i = 0; i < elements.length; i++)
			this.registerCallback(elements[i]);
	},

	registerCallback: function(element) {
		if (element.type) {
			switch (element.type.toLowerCase()) {
				case 'checkbox':
				case 'radio':
					Event.observe(element, 'click', this.onElementEvent.bind(this));
					break;
				default:
					Event.observe(element, 'change', this.onElementEvent.bind(this));
					break;
			}
		}
	}
}

Form.Element.EventObserver = Class.create();
Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
	getValue: function() {
		return Form.Element.getValue(this.element);
	}
});

Form.EventObserver = Class.create();
Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
	getValue: function() {
		return Form.serialize(this.element);
	}
});
if (!window.Event) {
	var Event = new Object();
}

Object.extend(Event, {
	KEY_BACKSPACE: 8,
	KEY_TAB:	   9,
	KEY_RETURN:   13,
	KEY_ESC:	  27,
	KEY_LEFT:	 37,
	KEY_UP:	   38,
	KEY_RIGHT:	39,
	KEY_DOWN:	 40,
	KEY_DELETE:   46,
	KEY_HOME:	 36,
	KEY_END:	  35,
	KEY_PAGEUP:   33,
	KEY_PAGEDOWN: 34,

	element: function(event) {
		return event.target || event.srcElement;
	},

	isLeftClick: function(event) {
		return (((event.which) && (event.which == 1)) ||
				((event.button) && (event.button == 1)));
	},

	pointerX: function(event) {
		return event.pageX || (event.clientX +
							   (document.documentElement.scrollLeft || document.body.scrollLeft));
	},

	pointerY: function(event) {
		return event.pageY || (event.clientY +
							   (document.documentElement.scrollTop || document.body.scrollTop));
	},

	stop: function(event) {
		if (event.preventDefault) {
			event.preventDefault();
			event.stopPropagation();
		} else {
			event.returnValue = false;
			event.cancelBubble = true;
		}
	},

// find the first node with the given tagName, starting from the
// node the event was triggered on; traverses the DOM upwards
	findElement: function(event, tagName) {
		var element = Event.element(event);
		while (element.parentNode && (!element.tagName ||
									  (element.tagName.toUpperCase() != tagName.toUpperCase())))
			element = element.parentNode;
		return element;
	},

	observers: false,

	_observeAndCache: function(element, name, observer, useCapture) {
		if (!this.observers) this.observers = [];
		if (element.addEventListener) {
			this.observers.push([element, name, observer, useCapture]);
			element.addEventListener(name, observer, useCapture);
		} else if (element.attachEvent) {
			this.observers.push([element, name, observer, useCapture]);
			element.attachEvent('on' + name, observer);
		}
	},

	unloadCache: function() {
		if (!Event.observers) return;
		for (var i = 0; i < Event.observers.length; i++) {
			Event.stopObserving.apply(this, Event.observers[i]);
			Event.observers[i][0] = null;
		}
		Event.observers = false;
	},

	observe: function(element, name, observer, useCapture) {
		element = $(element);
		useCapture = useCapture || false;

		if (name == 'keypress' &&
			(navigator.appVersion.match(/Konqueror|Safari|KHTML/)
					|| element.attachEvent))
			name = 'keydown';

		Event._observeAndCache(element, name, observer, useCapture);
	},

	stopObserving: function(element, name, observer, useCapture) {
		element = $(element);
		useCapture = useCapture || false;

		if (name == 'keypress' &&
			(navigator.appVersion.match(/Konqueror|Safari|KHTML/)
					|| element.detachEvent))
			name = 'keydown';

		if (element.removeEventListener) {
			element.removeEventListener(name, observer, useCapture);
		} else if (element.detachEvent) {
			try {
				element.detachEvent('on' + name, observer);
			} catch (e) {
			}
		}
	}
});

/* prevent memory leaks in IE */
if (navigator.appVersion.match(/\bMSIE\b/))
	Event.observe(window, 'unload', Event.unloadCache, false);
var Position = {
// set to true if needed, warning: firefox performance problems
// NOT neeeded for page scrolling, only if draggable contained in
// scrollable elements
	includeScrollOffsets: false,

// must be called before calling withinIncludingScrolloffset, every time the
// page is scrolled
	prepare: function() {
		this.deltaX = window.pageXOffset
				|| document.documentElement.scrollLeft
				|| document.body.scrollLeft
				|| 0;
		this.deltaY = window.pageYOffset
				|| document.documentElement.scrollTop
				|| document.body.scrollTop
				|| 0;
	},

	realOffset: function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.scrollTop || 0;
			valueL += element.scrollLeft || 0;
			element = element.parentNode;
		} while (element);
		return [valueL, valueT];
	},

	cumulativeOffset: function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.offsetTop || 0;
			valueL += element.offsetLeft || 0;
			element = element.offsetParent;
		} while (element);
		return [valueL, valueT];
	},

	positionedOffset: function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.offsetTop || 0;
			valueL += element.offsetLeft || 0;
			element = element.offsetParent;
			if (element) {
				p = Element.getStyle(element, 'position');
				if (p == 'relative' || p == 'absolute') break;
			}
		} while (element);
		return [valueL, valueT];
	},

	offsetParent: function(element) {
		if (element.offsetParent) return element.offsetParent;
		if (element == document.body) return element;

		while ((element = element.parentNode) && element != document.body)
			if (Element.getStyle(element, 'position') != 'static')
				return element;

		return document.body;
	},

// caches x/y coordinate pair to use with overlap
	within: function(element, x, y) {
		if (this.includeScrollOffsets)
			return this.withinIncludingScrolloffsets(element, x, y);
		this.xcomp = x;
		this.ycomp = y;
		this.offset = this.cumulativeOffset(element);

		return (y >= this.offset[1] &&
				y < this.offset[1] + element.offsetHeight &&
				x >= this.offset[0] &&
				x < this.offset[0] + element.offsetWidth);
	},

	withinIncludingScrolloffsets: function(element, x, y) {
		var offsetcache = this.realOffset(element);

		this.xcomp = x + offsetcache[0] - this.deltaX;
		this.ycomp = y + offsetcache[1] - this.deltaY;
		this.offset = this.cumulativeOffset(element);

		return (this.ycomp >= this.offset[1] &&
				this.ycomp < this.offset[1] + element.offsetHeight &&
				this.xcomp >= this.offset[0] &&
				this.xcomp < this.offset[0] + element.offsetWidth);
	},

// within must be called directly before
	overlap: function(mode, element) {
		if (!mode) return 0;
		if (mode == 'vertical')
			return ((this.offset[1] + element.offsetHeight) - this.ycomp) /
				   element.offsetHeight;
		if (mode == 'horizontal')
			return ((this.offset[0] + element.offsetWidth) - this.xcomp) /
				   element.offsetWidth;
	},

	page: function(forElement) {
		var valueT = 0, valueL = 0;

		var element = forElement;
		do {
			valueT += element.offsetTop || 0;
			valueL += element.offsetLeft || 0;

			// Safari fix
			if (element.offsetParent == document.body)
				if (Element.getStyle(element, 'position') == 'absolute') break;

		} while (element = element.offsetParent);

		element = forElement;
		do {
			if (!window.opera || element.tagName == 'BODY') {
				valueT -= element.scrollTop || 0;
				valueL -= element.scrollLeft || 0;
			}
		} while (element = element.parentNode);

		return [valueL, valueT];
	},

	clone: function(source, target) {
		var options = Object.extend({
			setLeft:	true,
			setTop:	 true,
			setWidth:   true,
			setHeight:  true,
			offsetTop:  0,
			offsetLeft: 0
		}, arguments[2] || {})

		// find page position of source
		source = $(source);
		var p = Position.page(source);

		// find coordinate system to use
		target = $(target);
		var delta = [0, 0];
		var parent = null;
		// delta [0,0] will do fine with position: fixed elements,
		// position:absolute needs offsetParent deltas
		if (Element.getStyle(target, 'position') == 'absolute') {
			parent = Position.offsetParent(target);
			delta = Position.page(parent);
		}

		// correct by body offsets (fixes Safari)
		if (parent == document.body) {
			delta[0] -= document.body.offsetLeft;
			delta[1] -= document.body.offsetTop;
		}

		// set position
		if (options.setLeft)   target.style.left = (p[0] - delta[0] + options.offsetLeft) + 'px';
		if (options.setTop)	target.style.top = (p[1] - delta[1] + options.offsetTop) + 'px';
		if (options.setWidth)  target.style.width = source.offsetWidth + 'px';
		if (options.setHeight) target.style.height = source.offsetHeight + 'px';
	},

	absolutize: function(element) {
		element = $(element);
		if (element.style.position == 'absolute') return;
		Position.prepare();

		var offsets = Position.positionedOffset(element);
		var top = offsets[1];
		var left = offsets[0];
		var width = element.clientWidth;
		var height = element.clientHeight;

		element._originalLeft = left - parseFloat(element.style.left || 0);
		element._originalTop = top - parseFloat(element.style.top || 0);
		element._originalWidth = element.style.width;
		element._originalHeight = element.style.height;

		element.style.position = 'absolute';
		element.style.top = top + 'px';
		;
		element.style.left = left + 'px';
		;
		element.style.width = width + 'px';
		;
		element.style.height = height + 'px';
		;
	},

	relativize: function(element) {
		element = $(element);
		if (element.style.position == 'relative') return;
		Position.prepare();

		element.style.position = 'relative';
		var top = parseFloat(element.style.top || 0) - (element._originalTop || 0);
		var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);

		element.style.top = top + 'px';
		element.style.left = left + 'px';
		element.style.height = element._originalHeight;
		element.style.width = element._originalWidth;
	}
}

// Safari returns margins on body which is incorrect if the child is absolutely
// positioned.  For performance reasons, redefine Position.cumulativeOffset for
// KHTML/WebKit only.
if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) {
	Position.cumulativeOffset = function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.offsetTop || 0;
			valueL += element.offsetLeft || 0;
			if (element.offsetParent == document.body)
				if (Element.getStyle(element, 'position') == 'absolute') break;

			element = element.offsetParent;
		} while (element);

		return [valueL, valueT];
	}
}

Element.addMethods();