Navigation

← Previous Changeset
Next Changeset →

Changeset 6612

Timestamp:

04/28/07 20:14:21 (1 year ago)

Author:

mislav

Message:

Prototype event fixes galore!

element, relatedTarget, findElement now extend the result
findElement now uses Element.up()
better isLeft/Middle/RightClick + tests!

Squeak!

Files:

spinoffs/prototype/branches/event/src/event.js (modified) (7 diffs)
spinoffs/prototype/branches/event/test/functional/event.html (modified) (2 diffs)
spinoffs/prototype/branches/event/TODO (modified) (1 diff)

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

spinoffs/prototype/branches/event/src/event.js

r6596	r6612
17	17
18	18	element: function(event) {
19		var ~~el = event.target \|\| event.srcElemen~~t;
20		return ~~el.nodeType == Node.TEXT_NODE ? el.parentNode : el~~;
	19	var node = event.target;
	20	return Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : node);
21	21	},
22	22
23	23	relatedTarget: function(event) {
	24	var element;
24	25	switch(event.type) {
25		case 'mouseover': ~~return~~ event.fromElement;
26		case 'mouseout': ~~return~~ event.toElement;
	26	case 'mouseover': element = event.fromElement;
	27	case 'mouseout': element = event.toElement;
27	28	default: return null;
28	29	}
29		},
30
31		_isSpecificButton: function(event, ieCode, w3cCode) {
32		return (((event.which) && (event.which == ieCode)) \|\|
33		((event.button) && (event.button == w3cCode)));
34		},
35
36		isLeftClick: function(event) {
37		return this._isSpecificButton(event, 1, 0);
38		},
39
40		isRightClick: function(event) {
41		return this._isSpecificButton(event, 3, 2);
42		},
43
44		isMiddleClick: function(event) {
45		return this._isSpecificButton(event, 2, 1);
	30	return Element.extend(element);
46	31	},
47	32
48	33	pointer: function(event) {
49		var x = event.pageX \|\| (event.clientX +
50		(document.documentElement.scrollLeft \|\| document.body.scrollLeft));
51		var y = event.pageY \|\| (event.clientY +
52		(document.documentElement.scrollTop \|\| document.body.scrollTop));
53		return { x: x, y: y };
54		},
55
56		pointerX: function(event) {
57		return Event.pointer(event).x;
58		},
59
60		pointerY: function(event) {
61		return Event.pointer(event).y;
62		},
	34	return {
	35	x: event.pageX \|\| (event.clientX +
	36	(document.documentElement.scrollLeft \|\| document.body.scrollLeft)),
	37	y: event.pageY \|\| (event.clientY +
	38	(document.documentElement.scrollTop \|\| document.body.scrollTop))
	39	};
	40	},
	41
	42	pointerX: function(event) { return Event.pointer(event).x },
	43	pointerY: function(event) { return Event.pointer(event).y },
63	44
64	45	stop: function(event) {
…	…
70	51	// node the event was triggered on; traverses the DOM upwards
71	52	findElement: function(event, tagName) {
72		var element = this.element(event);
73		while (element.parentNode && (!element.tagName \|\|
74		(element.tagName.toUpperCase() != tagName.toUpperCase())))
75		element = element.parentNode;
76		return element;
	53	var element = Event.element(event);
	54	return element.tagName.toUpperCase() == tagName.toUpperCase() ?
	55	element : element.up(tagName);
77	56	}
78	57	});
…	…
92	71	add: function() {
93	72	if (this.type == 'DOMContentLoaded' && this.element == document) {
94		onReady(this.observer);
	73	Event.onReady(this.observer);
95	74	return;
96	75	}
…	…
162	141	currentTarget: element,
163	142	target: event.srcElement,
164		~~which: event.button,~~
165	143	pageX: Event.pointerX(event),
166	144	pageY: Event.pointerY(event),
…	…
189	167	};
190	168
191		// based on work by Dan Webb, Matthias Miller, Dean Edwards and John Resig
192		var readyCallbacks, timer;
193
194		function domReady() {
	169	// onReady helper stuff
	170	var readyCallbacks, timer, domReady = function() {
195	171	if (arguments.callee.done) return;
196	172	arguments.callee.done = true;
…	…
199	175	readyCallbacks.each(function(f) { f() });
200	176	readyCallbacks = null;
	177	};
	178
	179	if (B.IE) {
	180	var buttonTranslations = { 0:1, 1:4, 2:2 };
	181	var isButton = function(event, code) {
	182	return event.button === buttonTranslations[code];
	183	};
201	184	}
202		function onReady(f) {
203		if (!readyCallbacks) {
204		if (domReady.done) return f();
205
206		if (document.addEventListener) {
207		if (B.WebKit) {
208		timer = setInterval(function() {
209		if (/loaded\|complete/.test(document.readyState)) domReady();
210		}, 10);
211		}
212		else document.addEventListener('DOMContentLoaded', domReady, false);
213		}
214		else if (B.IE) {
215		var dummy = location.protocol == "https:" ? "https://javascript:void(0)" : "javascript:void(0)";
216		document.write("<script id=__ie_onload defer src='" + dummy + "'><\/script>");
217		$("__ie_onload").onreadystatechange = function() { if (this.readyState == "complete") {
218		this.onreadystatechange = null; domReady();
219		}};
220		}
221
222		Event.observe(window, 'load', domReady);
223		readyCallbacks = [];
224		}
225		readyCallbacks.push(f);
226		}
227
	185	else var isButton = function(event, code) { return event.button === code };
	186
228	187	return {
229	188	observe: function(element, type, observer, useCapture) {
…	…
234	193	if (applyToCollection(arguments)) return;
235	194	new Observer(element, type, observer, useCapture).remove();
236		}
	195	},
	196
	197	// based on work by Dan Webb, Matthias Miller, Dean Edwards and John Resig
	198	onReady: function(f) {
	199	if (!readyCallbacks) {
	200	if (domReady.done) return f();
	201
	202	if (document.addEventListener) {
	203	if (B.WebKit) {
	204	timer = setInterval(function() {
	205	if (/loaded\|complete/.test(document.readyState)) domReady();
	206	}, 10);
	207	}
	208	else document.addEventListener('DOMContentLoaded', domReady, false);
	209	}
	210	else if (B.IE) {
	211	var dummy = location.protocol == "https:" ? "https://javascript:void(0)" : "javascript:void(0)";
	212	document.write("<script id=__ie_onload defer src='" + dummy + "'><\/script>");
	213	$("__ie_onload").onreadystatechange = function() { if (this.readyState == "complete") {
	214	this.onreadystatechange = null; domReady();
	215	}};
	216	}
	217
	218	Event.observe(window, 'load', domReady);
	219	readyCallbacks = [];
	220	}
	221	readyCallbacks.push(f);
	222	},
	223
	224	isLeftClick: function(event) { return isButton(event, 0) },
	225	isMiddleClick: function(event) { return isButton(event, 1) },
	226	isRightClick: function(event) { return isButton(event, 2) }
237	227	};
238	228	}());

spinoffs/prototype/branches/event/test/functional/event.html

r6596	r6612
52	52	.passed { color:green; border-color:olive }
53	53	.failed { color:firebrick; border-color:firebrick }
	54	.button { padding:0.2em 0.4em; background:#ccc; border:1px solid #aaa }
54	55	#log { position:absolute; left:35em; top:5em; width:20em; font-size:13px !important }
55	56	h2 { font:normal 1.1em Verdana,Arial,sans-serif; font-style:italic; color:gray; margin-top:-1.2em }
…	…
157	158	<script type="text/javascript">
158	159	$('target').observe('click', function(e){
159		if(Event.element(e) !== this) this.failed()
	160	if(Event.element(e) == this && e.target == this) this.passed()
	161	else this.failed()
	162	log(e)
	163	})
	164	</script>
	165
	166	<p id="currentTarget"><span>Event.currentTarget test</span></p>
	167
	168	<script type="text/javascript">
	169	$('currentTarget').observe('click', function(e){
	170	if(e.currentTarget !== this) this.failed()
160	171	else this.passed()
161	172	log(e)
162	173	})
163	174	</script>
164
165		<p id="currentTarget"><span>Event.currentTarget test</span></p>
166
167		<script type="text/javascript">
168		$('currentTarget').observe('click', function(e){
169		if(e.currentTarget !== $('currentTarget') ) this.failed()
170		else this.passed()
171		log(e)
172		})
173		</script>
174
175		<p id="right"><strong>Left</strong> click this one - Event.isLeftClick() test</p>
176
177		<script type="text/javascript">
178		$('right').observe('click', function(e){
179		if (Event.isLeftClick(e)) this.passed()
	175
	176	<p id="findElement"><span>Event.findElement test</span></p>
	177
	178	<script type="text/javascript">
	179	$('findElement').observe('click', function(e){
	180	if(Event.findElement(e, 'p') == this && Event.findElement(e, 'body') == document.body &&
	181	Event.findElement(e, 'foo') == null) this.passed()
180	182	else this.failed()
	183	log(e)
	184	})
	185	</script>
	186
	187	<p>Mouse click:
	188	<span class="button" id="left">left</span> <span class="button" id="middle">middle</span> <span class="button" id="right">right</span></p>
	189
	190	<script type="text/javascript">
	191	Event.observe($('left', 'middle', 'right'), 'mouseup', function(e){
	192	if (Event['is' + this.id.capitalize() + 'Click'](e)) this.passed('Squeak!')
	193	else this.failed('OH NO!')
181	194	log(e)
182	195	})

spinoffs/prototype/branches/event/TODO

r6609	r6612
1	1	* [done] Event handling (IE) fixes and enhancements, see r6194
2	2	* [done] Remove all event listeners on any element
3		* event.stop() instead of Event.stop(event)
	3	* [wontfix] event.stop() instead of Event.stop(event)
4	4	* [done] Node constants as per DOM/ECMAScript bindings (r6205)
5	5	* [done] isLeft/Middle/RightClick (r6537)
6	6	* [done] support for "DOMContentLoaded"
7		* Event.findElement should extend the result
	7	* [done] Event.findElement should extend the result
8	8	* stopImmediatePropagation
9	9	http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-Event-stopImmediatePropagation

Rails Trac

Navigation

Changeset 6612

Legend:

spinoffs/prototype/branches/event/src/event.js

spinoffs/prototype/branches/event/test/functional/event.html

spinoffs/prototype/branches/event/TODO

Download in other formats: