Cycle.js Fundamentals
Fine-grained Control over the DOM Source in Cycle.js
What if we wanted to change the behavior of our app reset the timer every time the mouse hovers over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.
[00:00] We just improved our DOM driver to be able to receive these objects describing what elements we want to create on the DOM. We didn't touch yet the DOM source, which still describes all of the clicks happening on the document.
[00:15] In our application here, whenever we click somewhere on the DOM, it should reset the timer. What if we want to achieve a different feature, where every time you hover over the span, just hovering is enough to reset the timer.
[00:31] That feature certainly sounds like application logic, and we know that logic should live in the main. Currently, the logic of clicks is hard-coded here in the DOM driver. We don't want to hard-code this anymore. How can we achieve that?
[00:49] The API that we're seeking for is something that looks like this. From the DOM source, we want to be able to select events on the span of type of click. Once we're able to specify that we want clicks, we could also specify something else, like let's say mouseover. Then we're going to be able to achieve our future.
[01:11] We need to do the following. The DOM source should be an object that has the method selectEvents. Let's do that. Instead of being a stream hard-coded, it's going to be an object that has the method, selectEvents, which is a function that takes a tag name and an event type.
[01:32] Then it's going to return the stream of events of type event type. Then we're going to filter for events that are happening on this target that matches the tag name that we provided. The tag name to uppercase first.
[01:56] This tag name came from the arguments. All that we're saying here is I want a stream of events of this type happening on an element with this tag name. Now, we have this method, and we can use it. We just pass these arguments, and it should work like before.
[02:15] When we click on the span now, it will reset the timer. If we want to achieve the hovering feature, all that we need to do is just change here from click to mouseover. Now, this is a mouseover stream that we're going to use to reset the timer.
[02:35] Now, just hovering should be enough to reset the timer. That's what we wanted, to specify this type of logic in the main, and not hard-code it in the driver.