I'm looking to build something similar to what is outlined here: How to override the dragging events in C3.js, but instead of overwriting the drag event I just want to call a function when the drag end occurs, in order to get all selected elements.
I see C3 offers this option here but there is no mention of an event which occurs at the end of the selection.
Is there a way to capture the end of the event in order to run the selected items through a function?
C3 has the start of allowing custom callbacks in the documentation, but according to https://github.com/masayuki0812/c3/issues/798 the ondragstart / ondragend callbacks do not do anything.
Related
In an effort to add favoriting to a application menu, I'm working on getting onMouseEnter events to fire only on the element that is currently hovered. The problem is that due to these items being nested, onMouseEnter will fire on both the child element and the onMouseEnter of the parent element will also fire.
Ie:
HTML Nesting
The ideal behavior would be this:
Ideal Behavior
But the actual behavior is this:
Actual Behavior
I have already tried stopPropogation, but the problem is that there is a separate event listener on each of the menu items (both the L1 and the L2 have their own on mouse enter listeners). As such, capturing the event at the L2 level doesn't stop the event from firing at the L1 level.
Does anyone know of a way to only trigger the L2 event? Ideally, we wanted to be able to keep hover state specific to each item (ie don't have to have pass handlers for "setIsChildElementHovered"), but open to any ideas people have.
Did you try to add the event only on the child element ? If you have some snippets code might to answer your question. thanks :)
I am building a calendar like this one fullcalendar external dragging. What I want to achieve sounds easy, but I found is not. I need, while dragging one of the external events to one specific day in day view, that if overlapping is detected the event changes its color immediately, but color must switch back if overlapping is no longer detected. I thought that in the drop callback(not dropEvent callback) I could be able to make some sort of comparisson, but looks like if the drop listener were outside of the scope of the calendar because I cant access to the ObjectEvent, or at least I dont know how.
In essence, change the color while dragging an external event into the calendar if, for instance, overlapping is detected
I think this is a weird requirement. Ideally, the color should be customizable per event.
However, I would suggest something that validates your event. Basically, save the original state of the event object. Trigger a validation when it hovers over a zone. Revert back when you leave the zone.
I'm not exactly sure you to see the list of events already in the day.
It's not a great solution but it should work.
I found it. There is an event which handles it in fullCalendar: EventReceive.
Basically it is called after drop() and is the one that builds the calendar'event object right after the drop event ends.
So, if you are dragging an external eventObject to the calendar and you need, for instance, checking overlapping for this external object, this is the man, I mean, the event.
I know that using the template syntax I could use the standard angular 2 (mouseover) event listener to listen for a mouse over event for a specific column. I was wondering if there is a way to listen for mouseover events for an entire row and be able to get the index for that row.
I am trying to a achieve an mouse over hover action the triggers on one row at a time, without having to use multiple <template> tags on each column.
Any help is much appreciated. If there is a better approach then I am all ears.
It is possible to handle the row mouse events from within the 'consuming' component. You should check following GH issue for a runnable sample of such approach: https://github.com/telerik/kendo-angular2/issues/21#issuecomment-247941402
I'm making the step-by-step-filled form-like page now (hope it was grammatically correct ☺ ).
The main idea here is quite simple: while step one isn't done, step two is unavailable.
I need it to be truly unavailable, not just CSS-hidden (like opacity: 0; or visibility: hidden;).
So, here is the question: in JavaScript is there any way to dynamically pause (and unpause later) all eventListeners of some element?
P.S.: Event is for example onwheel || onmousewheel.
Here is the image (sorry for cyrillic):
(It's about scoresheet-typing.)
You see the <input type="range"> element here. Mouse scrolling on it will change it's value.
The first step of a form isn't done yet; so the second one have to be unavailable, and mouse scrolling on input range element should not work.
But this time I managed to it with opacity: .3;.
So all works fine, but the picture is kinda translucent, that's all.
It is bad.
It shouldn't react on mouse wheel at all (just usual page-scrolling).
And opacity must be full (opacity: 1;).
So, we return to the initial question.
There is no way in JavaScript to even list all event listeners for an element, so to stop them is an even taller order.
In short, the answer to your question is: there's no general way to pause all event listeners.
However, there are some things you may try that could help achieve your intent.
Plan A - HTML / CSS + a little JS: If your intent is simply to prevent the events from reaching the unactivated step, you may try a hack: create a transparent "blocker" element of the exact same dimensions. When you "disable" your step, "enable" your blocker to be right on top of it - probably using absolute positioning, e.g.
// Disable step 2
step2.style.opacity = '0.3'; // could also be a CSS class toggle, or an JS animation
step2_blocker.style.display = 'block'; // make your blocker show up on top of step2
You may use HTML+CSS to create the blocker, provided you know the position/dimensions. If not, you can use JS to create the blocker at run-time after computing step2's position/dimensions.
Plan B - JS only: If for some reason, you can't change HTML or CSS and you need a JS-only solution that doesn't alter the DOM, or if you are truly trying to solve the generic problem of "How can I pause event listeners?", then you probably only have one solution - keep track of your listeners. Essentially, you will be building your own event-binding/tracking library. The API consists of on(), off(), pause(), resume().
on(HTMLElement, eventType, callback): you should push the listener callback into a registry - an array of listener objects, where listener objects contain HTMLElement and its corresponding eventType and event listener callback.
off(HTMLElement, eventType, callback): remove listener object from registry.
pause(HTMLElement, eventType, callback): find listener object from registry and set it to paused state, i.e. stop the actual listener.
resume(HTMLElement, eventType, callback): find listener object from registry and rebind the element to the event listener.
Of course, the API can be made to be flexible/smart enough to accept different number of parameters (simulate function overloading), so that pause(elem) can pause all events on the element, and pause(elem, 'click') can pause all click events on that element.
Then, rather than use addEventListener() in your code, always remember to use on() in the library you created. You may have to refactor all your event binding and listener code.
This plan is slightly elaborate, but is probably the only way to keep track of event listeners. I have done this before, so I know this really works.
P/S: You may try to take a look at the source of some popular libraries out there to see how they keep track of events. I don't think any of them has any kind of support for pause() and resume() (yet), so it'd only be for some code inspiration.
In the context of a problem, I may just addEventListener after correct passing the step one, of course.
It is not the answer though.
You can set the disabled attribute of the inputs to true initially. Then as each input is filled in and/or validated, you can set the disabled attribute of the next one to false, to make it available.
Edit: given the update to the question, this answer doesn't seem to work. Setting disabled on an <input type="range"> does not seem to prevent wheel events from firing, at least in chrome.
Ive written some code so that i can drag an object, but eventually i wish to place this on a particular object and then call some functions.
How do i add a listener to the destination object, when i dont know which actual object will be dropped onto it?
In simple way you must attach some function on mousemove. This function must get round all dom elements and find your element. But it is DOM, and it so long. You must cache elemetns position and it will be fine.
i highly recommend using jquery ui draggable and droppable. no need to re-invent the wheel for this!
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
There are a couple ways that I've handled this in the past. They both depend on the cursor being outside the element you're dragging.
First, you could define a mouseup event handler on the document level, and determine which element was the target of the event. That element will be the element that your draggable item was dropped on to, and you can handle the event from there.
Second, you could define a mouseup event handler for each droppable area. This allows easier customization of the handler.
Keep in mind that both of these solutions rely on the cursor being outside the element you're dragging. Otherwise, the target of the event will always be the element you're dragging.
Do you simply want to have a 'drop' event on DOM elements but think you need to care what is being dropped onto them?
My initial approach to similar issues started with the 'drop', not the drag, but found that the 'ondrop' event is not very portable, implying I should use a framework like jQuery instead. See:
See here for a jQuery UI framework approach with demo:
http://jqueryui.com/demos/droppable/
See here for a less framework oriented approach with some disscusion on the topic:
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/