Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Enhanced Pseudos:keys and new Pseudos:stop #245

Open
wants to merge 3 commits into
from
@@ -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
@@ -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);
+ });
+});
+
+})();
@@ -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();
+ });
+
+ });
+
+});
View
@@ -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',
View
@@ -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"