Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Enhanced Pseudos:keys and new Pseudos:stop #245

Open
wants to merge 3 commits into from

6 participants

@w00fz
Collaborator

The Pseudos:keys now supports multiple key combinations element.addEvent('keydown:keys('shift+a, ,, delete, esc', myFun); and there's a new Pseudos:stop element.addEvent('click:stop', myFun);

@w00fz w00fz - support for multiple key-combos for Pseudos:keys - new Pseudos:sto…
…p , prevents propagation of events directly from the pseudo - updated docs - added more specs for both Pseudos:keys and new Pseudos:stop
418800c
@cpojer
Owner

I like the extension to Keyboard, but I dislike the :stop pseudo. It's a good idea but we shouldn't encourage our users to use event.stop() when you really want event.preventDefault(). There are only few cases where you want to stop propagating. I'm in favor of adding click:preventDefault instead of click:stop. I might agree to adding all three, ie. click:stop, click:stopPropagation, click:preventDefault.

@arian
Owner

Pretty sweet! Usually I just use event.stop() but that might not be best practice. Adding preventDefault and stopPropagation might solve that: http://jsfiddle.net/v2Wbs/

@cpojer
Owner

Usually when you say event.stop() you really mean event.preventDefault()

@seanmonstar

#234 anyone?

w00fz added some commits
@w00fz w00fz Revert " - support for multiple key-combos for Pseudos:keys - new Pse…
…udos:stop , prevents propagation of events directly from the pseudo - updated docs - added more specs for both Pseudos:keys and new Pseudos:stop"

This reverts commit 418800ca320a947effde80a52e8b23fe738e8910.
4a72128
@w00fz w00fz - enhancing Pseudos.Stop to include all 3 :stop, :stopPropagation an…
…d :preventDefault

 - added Specs for all 3 pseudos
 - updated docs
1558e51
@w00fz
Collaborator

I have reverted my multiple keys support on the Pseudo.Keys (should pull from @seanmonstar, I haven't seen it was there already, sorry about that) and Pseudos.Stop now has support for all 3 :stopPropagation, :preventDefault, :stop.
In the Docs they are in that order, with :stop as last, just for @cpojer .

@arian
Owner

I approve

@cpojer
Owner

@arian then merge it

@arian
Owner
@anutron
Owner

blerg to merges.

@arian
Owner

This should be pushed / merged / rebased / whatever together with #234. A week ago I did that, but @timwienk has some improved branch, so I reverted that again. However it should still be pushed.

@timwienk
Owner

Specifically this branch.

@timwienk
Owner

I just pulled w00fz' pseudos on top of my branch. I did another commit, which I think is a good idea.

I think that if we're going to add these pseudos, it's a good idea to make them a bit more flexible and check the first argument. If you guys don't agree, I can obviously push without that commit.

Specs seem to pass in Chrome.

@w00fz
Collaborator
@arian
Owner

@timwienk, @w00fz, @seanmonstar: what's the status of this? is it pushable?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 23, 2011
  1. @w00fz

    - support for multiple key-combos for Pseudos:keys - new Pseudos:sto…

    w00fz authored
    …p , prevents propagation of events directly from the pseudo - updated docs - added more specs for both Pseudos:keys and new Pseudos:stop
Commits on May 26, 2011
  1. @w00fz

    Revert " - support for multiple key-combos for Pseudos:keys - new Pse…

    w00fz authored
    …udos:stop , prevents propagation of events directly from the pseudo - updated docs - added more specs for both Pseudos:keys and new Pseudos:stop"
    
    This reverts commit 418800ca320a947effde80a52e8b23fe738e8910.
  2. @w00fz

    - enhancing Pseudos.Stop to include all 3 :stop, :stopPropagation an…

    w00fz authored
    …d :preventDefault
    
     - added Specs for all 3 pseudos
     - updated docs
This page is out of date. Refresh to see the latest.
View
90 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
View
30 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);
+ });
+});
+
+})();
View
77 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();
+ });
+
+ });
+
+});
View
3  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',
View
1  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"
Something went wrong with that request. Please try again.