[wp-trac] [WordPress Trac] #21170: JavaScript actions and filters

[WordPress Trac]

#21170: JavaScript actions and filters
----------------------------+--------------------------
 Reporter:  koopersmith     |       Owner:  koopersmith
     Type:  task (blessed)  |      Status:  new
 Priority:  normal          |   Milestone:  3.5
Component:  General         |     Version:  3.4
 Severity:  normal          |  Resolution:
 Keywords:                  |
----------------------------+--------------------------

Comment (by CaptainN):

 Just thought I'd offer a somewhat different model (especially since you
 don't want to go with a standard DOM implementation).

 The idea is modeled after Robert Penner's AS3Signals, which itself if
 modeled after C#'s event model. It has a couple of advantages compared
 with DOM style events (and  some disadvantages - propagation would need to
 be implemented - that's not as much of an issue for WP style filters and
 actions though) - the primary benefit IMO is it uses properties instead of
 strings for event types (louder errors when you type something wrong).

 Here is a tiny implementation of Signals in JS:[[BR]]
 https://github.com/CaptainN/SignalsLite.js/blob/master/src/SignalLite.js

 This library doesn't have the requirements listed in the ticket, but they
 could be added pretty easily (I'll probably add them this weekend, cause
 they seem like nice features to have).

 Here's the primary difference in syntax for the end user:

 {{{
 // DOM style events:
 /* event is of type Event */
 wphooks.actions.addEventListener( "click.namespace", function( event ) {},
 2 /* priority */);
 // or
 function funcRef( event ) {}
 wphooks.actions.addEventListener( "click.namespace", funcRef, 2  /*
 priority */);
 wphooks.actions.removeEventListener( "click.namespace", funcRef );

 // signals (with unimplemented priority and namespacing):
 /* obj is of whatever type you want it to be - much more like WP filters
 */
 wphooks.actions.clicked.add( "namespace", function( obj ) {}, 2 /*
 priority */ );

 // or
 function funcRef( obj ) {}
 wphooks.actions.clicked.add( funcRef, 2 /* priority */ );

 // removes all namespaced listeners by string
 wphooks.actions.clicked.remove( "namespace" );

 // removes only the one listener by reference (DOM style)
 wphooks.actions.clicked.remove( funcRef );
 }}}

 You'd construct it like so:

 {{{
 window.wphooks = {
     actions: {
         clicked: new SignalLite(),
         other_custom_action: new SignalLite()
     }
     filters: {
         some_filter: new SignalLite(),
         some_other_filter: new SignalLite()
     }
 }

 // add additional hooks elsewhere (you could do an addAction abstraction
 too).
 wphooks.actions.my_added_action = new SignalLite();
 }}}

 dispatch works like this:

 {{{
 // maps "this" in the listener to thisObj
 wphooks.actions.clicked.target = thisObj;
 // obj is whatever you need it to be for this hook
 wphooks.actions.clicked.dispatch( obj  );
 }}}

 This may be out of left field, but I thought I'd throw it in the
 discussion. :-)

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21170#comment:17>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software