Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a way for services to autowire up events like modules #47

Closed
nzakas opened this issue Apr 23, 2015 · 6 comments
Closed

Create a way for services to autowire up events like modules #47

nzakas opened this issue Apr 23, 2015 · 6 comments

Comments

@nzakas
Copy link
Contributor

nzakas commented Apr 23, 2015

People seem to really like using the autowiring of events in modules and behaviors, and when they get to modules, they are disappointed that they need to wire up their own event handlers the old-fashioned way. It would be nice to provide some facility for services to do declarative event handling in the same way behaviors and modules do.

@priyajeet
Copy link
Contributor

One downside with autowiring might be the inability to do an optimization like this:

Say I am writing a scrubber bar plugin (widget) for media seeking / volume slider. Multiple of these can exist visually on a given page. I need to handle a mousedown --> mousemove --> mouseup to get the scrubber handle drag behavior. The mousedown happens on the scrubber handle, but the other two need to happen on the whole document. So I essentially only want to bind/listen to those events after mousedown has happened otherwise we are essentially firing a lot of mousemove and mouseup events in the document's context (or another nearby scrubber's context) thats nothing to do with the scrubber handle that the user clicked.

@nzakas
Copy link
Contributor Author

nzakas commented Apr 26, 2015

Then you wouldn't use this capability, you would just do what you're already doing. :)

@nzakas
Copy link
Contributor Author

nzakas commented Apr 28, 2015

So here's what I'm thinking for this. We want services to mostly be free-form, which means we also don't want to enforce any sort of interface on them. However, we can provide some low-level building blocks that let services do some common tasks. For instance, we already have Box.EventTarget, which our internal services tend to use in order to incorporate custom events.

What I'm thinking is something like Box.DOMEventDelegate that encapsulates the functionality currently exposed through modules and behaviors, such that you can do this:

var element = document.querySelector('.some.element');
var delegate = new Box.DOMEventDelegate(element, {
    onclick: function(event, element, elementType) {
        // handle clicks
    }
});

delegate.attachEvents();   // attach all events

//later
delegate.detachEvents();  // clean it all up

This would allow you to incorporate module-like event handling into a service by using an instance of Box.DOMEventDelegate to manage events in a single area. We could then refactor application.js so that modules and behaviors use this to implement event handling.

Thoughts?

@j3tan
Copy link
Contributor

j3tan commented Apr 29, 2015

I think this is a good strategy that provides module-like event delegation if someone wants it. I assume that the list of events supported will probably be kept internal to the DOMEventDelegate object.

@nzakas
Copy link
Contributor Author

nzakas commented Apr 29, 2015

Yeah, I'm envisioning moving all the event-related functionality into DOMEventDelegate so it all lives in one place.

@Duan112358
Copy link

awesome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants