Enhanced Pseudos:keys and new Pseudos:stop

Docs/Element/Element.Event.Pseudos.Stop.md

@@ -0,0 +1,90 @@
+Element.Event.Pseudo.Stop {#Pseudos}
+=====================================
+
+Defines `:stopPropagation`, `:preventDefault` and `:stop` Element Event Pseudo.
+
+### See Also
+
+- [Element.Event.Pseudos][]
+- [Element.Event.Pseudos.Keys][]
+
+Pseudo: stopPropagation {#Pseudos:stopPropagation}
+----------------------------
+
+The event will fires normally and be already be prevented from propagating.
+
+### Example
+
+#### HTML:
+
+	<div id="myElement">
+		<div id="myChild"></div>
+	</div>
+
+#### JavaScript
+
+	document.id('myElement').addEvent('click:stopPropagation', function(event){
+		// we don't need to event.stopPropagation() anymore
+		alert('myElement has been clicked');
+	});
+
+	document.id('myChild').addEvent('click:stopPropagation', function(event){
+		alert('myChild has been clicked but myElement won't fire up');
+	});
+
+### See Also:
+
+- [Event:stopPropagation][]
+
+
+Pseudo: preventDefault {#Pseudos:preventDefault}
+----------------------------
+
+The event will fires normally and be already be prevented from running the default action of the event.
+
+### Example
+
+#### HTML:
+
+	<form>
+		<input id="myCheckbox" type="checkbox" />
+	</form>
+
+##### JavaScript
+
+	document.id('myCheckbox').addEvent('click:preventDefault', function(event){
+		// we don't need to event.preventDefault() anymore
+		alert('The checkbox has been clicked but wont get checked');
+	});
+
+### See Also:
+
+- [Event:preventDefault][]
+
+
+Pseudo: stop {#Pseudos:stop}
+----------------------------
+
+The event will fires normally without the need of preventDefault and stopPropagation.
+
+### Examples
+
+	myTextarea.addEvent('keydown:stop', function(){
+		console.log('Nothing I press appears in the textarea');
+	});
+
+	myLink.addEvent('click:stop', function(){
+		alert('You clicked a link which is not redirecting.');
+	});
+
+### See Also:
+
+- [Event:stop][]
+
+
+
+[Element.Event.Pseudos]: /more/Element/Element.Event.Pseudos
+[Element.Event.Pseudos.Keys]: /more/Element/Element.Event.Pseudos.Keys
+[Event:stopPropagation]: /core/Types/Event#Event:preventDefault
+[Event:preventDefault]: /core/Types/Event#Event:preventDefault
+[Event:stop]: /core/Types/Event#Event:stop

Source/Element/Element.Event.Pseudos.Stop.js

@@ -0,0 +1,30 @@
+/*
+---
+
+name: Element.Event.Pseudos.Stop
+
+description: Adds the functionality to preventDefault and stopPropagation on events
+
+license: MIT-style license
+
+authors:
+  - Djamil Legato
+  - Arian Stolwijk
+
+requires: [Element.Event.Pseudos]
+
+provides: [Element.Event.Pseudos.Stop]
+
+...
+*/
+
+(function(){
+
+['stop', 'preventDefault', 'stopPropagation'].each(function(method){
+	Event.definePseudo(method, function(split, fn, args){
+		args[0][method]();
+		fn.apply(this, args);
+	});
+});
+
+})();

Specs/1.3/Element/Element.Event.Pseudos.Stop.js

@@ -0,0 +1,77 @@
+
+// Only run this spec in browsers other than IE6-8 because they can't properly simulate key events
+if (window.addEventListener) describe('Element.Event.Pseudos.Stop', function(){
+
+	it('stop: should prevent propagating events', function(){
+
+		var called = false, called2 = false;
+
+		var inputs = {
+			pseudo: new Element('input[value=limonata]').inject(document.body),
+			normal: new Element('input[value=limonata]').inject(document.body)
+		},
+		checkboxes = {
+			pseudo: new Element('input[type=checkbox]').inject(document.body),
+			normal: new Element('input[type=checkbox]').inject(document.body)
+		},
+		divs = {
+			pseudo: {
+				element: new Element('div').inject(document.body),
+				child: new Element('div').inject(document.body)
+			},
+			normal: {
+				element: new Element('div').inject(document.body),
+				child: new Element('div').inject(document.body)
+			}
+		};
+
+		// stop
+		inputs.pseudo.addEvent('keydown:stop', function(){});
+		inputs.normal.addEvent('keydown', function(){});
+
+		simulateEvent('type', ['#', inputs.pseudo], function(){
+			expect(inputs.pseudo.get('value')).toEqual('limonata');
+			$(inputs.pseudo).destroy();
+		});
+
+		simulateEvent('type', ['#', inputs.normal], function(){
+			expect(inputs.normal.get('value')).toEqual('limonata#');
+			$(inputs.normal).destroy();
+		});
+
+		// preventDefault
+		checkboxes.pseudo.addEvent('click:preventDefault', function(){});
+		checkboxes.normal.addEvent('click', function(){});
+
+		simulateEvent('click', [{}, checkboxes.pseudo], function(){
+			expect(checkboxes.pseudo.get('checked')).toBe(false);
+			$(checkboxes.pseudo).destroy();
+		});
+
+		simulateEvent('click', [{}, checkboxes.normal], function(){
+			expect(checkboxes.normal.get('checked')).toBe(true);
+			$(checkboxes.normal).destroy();
+		});
+
+		// stopPropagation
+		divs.pseudo.child.inject(divs.pseudo.element);
+		divs.normal.child.inject(divs.normal.element);
+
+		divs.pseudo.element.addEvent('click:stopPropagation', function(){ called = true; });
+		divs.pseudo.child.addEvent('click:stopPropagation', function(){});
+		divs.normal.element.addEvent('click', function(){ called2 = true; });
+		divs.normal.child.addEvent('click', function(){});
+
+		simulateEvent('click', [{}, divs.pseudo.child], function(){
+			expect(called).toBe(false);
+			$(divs.pseudo.element).destroy();
+		});
+
+		simulateEvent('click', [{}, divs.normal.child], function(){
+			expect(called2).toBe(true);
+			$(divs.normal.element).destroy();
+		});
+
+	});
+
+});

Specs/Configuration.js

@@ -53,7 +53,7 @@ Configuration.sets = {
 		files: [
 			'Class/Class.Occlude',
 			'Element/Element.Forms', 'Element/Element.Measure', 'Element/Elements.From', 'Element/Element.Shortcuts',
-			'Element/Element.Event.Pseudos', 'Element/Element.Event.Pseudos.Keys', 'Element/Element.Delegation', 'Element/Element.Pin', 'Element/Element.Position',
+			'Element/Element.Event.Pseudos', 'Element/Element.Event.Pseudos.Keys', 'Element/Element.Event.Pseudos.Stop', 'Element/Element.Delegation', 'Element/Element.Pin', 'Element/Element.Position',
 			'Types/URI', 'Types/URI.Relative', 'Types/Object.Extras_client',
 			'Interface/Keyboard', 'Interface/Keyboard.Extras', 'Interface/HtmlTable', 'Interface/HtmlTable.Sort', 'Interface/HtmlTable.Select', 'Interface/Htmltable.Zebra',
 			'Forms/Form.Validator',
@@ -171,6 +171,7 @@ Configuration.source = {
 
 			'Element/Element.Event.Pseudos',
 			'Element/Element.Event.Pseudos.Keys',
+			'Element/Element.Event.Pseudos.Stop',
 			'Element/Element.Delegation',
 
 			'Element/Element.Pin',

package.yml

@@ -36,6 +36,7 @@ sources:
   - "Source/Element/Elements.From.js"
   - "Source/Element/Element.Event.Pseudos.js"
   - "Source/Element/Element.Event.Pseudos.Keys.js"
+  - "Source/Element/Element.Event.Pseudos.Stop.js"
   - "Source/Element/Element.Delegation.js"
   - "Source/Element/Element.Measure.js"
   - "Source/Element/Element.Pin.js"