Map multiple native events to a semantic application event in Ember.js? - javascript

I have not used Ember.js before, but after reading the part of the guide on views, I wanted to know how the Ember experts out there would handle a situation where multiple native events needed to be mapped to the same "application event".
In the guide, the example given shows mapping the (native) click event to the (application-specific) deleteItem event. In many cases, it is common for many native events to map to one application-specific event. What if a user was using a touch device that also had a keyboard and mouse attached (e.g. soon-to-come Windows 8 tablets), and I needed to map the "touchstart", "click" and "keyup" (e.g. [CTRL]-D) events to the same application-specific event like deleteItem?
Would you just put 3 methods on the view -- touchStart, click and KeyUp -- and have them all call a common 4th method to send the deleteItem event?
Is there anything built into Ember to handle this situation -- specifically, the situation where multiple native events all have the same semantic meaning in an app? I think this will become more and more common as browsers are touch enabled, laptops are touch-enabled and browser APIs can accept input from other hardware like mic, camera, etc... I could imagine a device where 5 or 6 native events all have the same semantic meaning for a given view.
Thanks!

We've been talking about something similar to support 'tap' events.
I think the best approach is to use register jQuery 'special events'. Here's a link to more information: http://benalman.com/news/2010/03/jquery-special-events/
To make a special event work with Ember views, you'll need to register it as a custom event on your Ember.Application instance:
Ember.Application.create({
customEvents: {
// key is the jquery event, value is the name used in views
myeventname: 'myEventName'
}
});

Related

Capture custom Javascript events in Blazor WASM

I am working on a Blazor WASM project where we are using an internal HTML/JS library (a requirement that I can't get around). This library has custom events on it's components that often replace standard events. For example, the <select> control has a valuechanged event that takes the place of a standard change event (the change event is no longer emitted for this custom <select>). It also has completely custom events, such as a sort event on its <table> element.
I need to be able to work with these events, but so far have not been able to. I've tried to follow the guide here: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-6.0#custom-event-arguments, and gotten it set up correctly I believe (because intellisense recognizes the #on____ line), but the code to execute on those events never gets called. I'm not sure if that's because I don't have a browserEventName, or for some other reason. I've also tried the instructions here: https://stackoverflow.com/a/67595043, but again, have not had any success.
Is there a way to wire up listeners/actions to the custom events emitted in the library? The closest I've been able to find on SO to my specific issue is an unanswered question from a few years ago: How to retrieve Web Component custom event result with Blazor.

What is “jQuery.event.special”?

I am new to jQuery and I have been trying to look up the Bootstrap transition.js (line 50) code and figure out how it works in there. I have stumbled across the following:
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
I have read the documentation, but couldn't really understand much except the following:
bindType: // the event you want to bind with
delegateType: // the event you want to delegate with
After some research I have found the following:
Those are the special attributes for the transition end event that are made available for later use in transition.js.
I am trying to figure out things by reading this article, but all I want to know is: what is $.event.special, what is the use of this line? What is it's common usage?
P.S.: I read this question but it has more external links than the answer itself. Is there a clear canonical Q&A about the most basic use of $.event.special?
WHAT is the use of this line?
I'm assuming you meant the first line of code in your question. It basically defines bsTransitionEnd as an alias for the transition end event (the transition end event may vary from browser to browser - that is what the function transitionEnd() does : determine the proper transition end event for the browser. I've used webkitTransitionEnd here on, but it could be something else depending on the browser)
Why use an alias? It insulates any handlers that Bootstrap attaches using this alias (e.g. $('myBootstrapDialog').on('bsTransitionEnd', Bootstrap's handler) from any $('myBootstrapDialog').off('webkitTransitionEnd') that other code (say, your code or maybe another library) does - so the Bootstrap transition end animations would still work!
Why would you or another library do that? The webkitTransitionEnd is a standard event, so let's say you decide to add a transition end animation to a bootstrap dialog - you'd probably do $('myBootstrapDialog').on('webkitTransitionEnd', your handler) and later on you decide to remove the handler you should be going $('myBootstrapDialog').off('webkitTransitionEnd', your handler), but you miscode it as $('myBootstrapDialog').off('webkitTransitionEnd') - this removes all transition end events :-(.
But since Bootstrap attached it's handlers using 'bsTransitionEnd', the only way you could mess up bootstrap would be to do $('myBootstrapDialog').off('bsTransitionEnd') - not something you would do accidentally :-). So voila! Gone be the bugs where Bootstrap inexplicably stops working because of some small miscoding on your part.
The bindType and delegateType basically state that bsTransitionEnd is an alias for transition events attached directly, and ones that are delegated (bubbles). The handle is basically a filter function - all the triggered events basically go through this before the attached Bootstrap event handlers are called (if at all they are)
what is $.event.special?
I'm sure you'd know most of it already - it's a way to hook into jQuery's event handling mechanism allowing you do large scale magic like do X on every attached click event on the page (imagine doing that one by one, at each and every place you've attached an onclick event), define your own events (with all the bubbly goodness and all which comes with it), hook in and spoof events by modifying the event object, etc.
WHAT is its common usage?
I assume this was rhetorical :-) - you already have a couple of really good examples in the Ben Alman blog post you linked to
(paraphrasing) - let's say you do an AJAX submit and want to disable all clicks on the page (you probably don't want the user clicking on and navigating off to some other page via a menu, or changing a checkbox, etc.) and $.event.special.click should help you (of course it might be just easier / traditional to just overlay a transparent / partially transparent div with a Submitting... animation or something or not doing anything - after all, most users wait around to make sure a submit was successful, at least the normal ones :-))
Another use case is the one you saw in the bootstrap code, but like you mentioned, you usually don't have to go in and use this unless you're writing a library or something that you intend to distribute publicly.
$.event.special
The jQuery special events API is a fairly flexible system by which you can specify bind and unbind hooks as well as default actions for custom events. In using this API, you can create custom events that do more than just execute bound event handlers when triggered--these "special" events can modify the event object passed to event handlers, trigger other entirely different events, or execute complex setup and teardown code when event handlers are bound to or unbound from elements.
The jQuery special event hooks are a set of per-event-name functions and properties that allow code to control the behavior of event processing within jQuery. The mechanism is similar to fixHooks in that the special event information is stored injQuery.event.special.NAME, where NAME is the name of the special event. Event names are case sensitive.
As with fixHooks, the special event hooks design assumes it will be very rare that two unrelated pieces of code want to process the same event name. Special event authors who need to modify events with existing hooks will need to take precautions to avoid introducing unwanted side-effects by clobbering those hooks
bindType: // the event you want to bind with
delegateType: // the event you want to delegate with
When defined bindType: String, delegateType: String, these string properties specify that a special event should be handled like another event type until the event is delivered. The bindType is used if the event is attached directly, and the delegateType is used for delegated events. These types are generally DOM event types, and should not be a special event themselves.

Polymer project, touch events

I may be dumb, but can't find any info about it.
If I want to attach a JavaScript function to the event for a mouse up I do it this way:
<div id="div1" on-mouseup={{menuMouseUp}}></div>
What are the key words for touch events? Is it on-touch-start, on-touchstart.. ?
Or it's not supported and we need to use pointers:
http://www.polymer-project.org/platform/pointer-events.html
I'm trying to test it on Ipad and no luck at all.
Cheers!
Today, Polymer implements a set of high-level events that unify a few different underlying event models.
For example, when using Polymer, instead of click you can use tap. Instead of mouseup you can use up. The Polymer equivalents work for mouse or touch.
There is some detailed information here:
https://groups.google.com/forum/#!msg/polymer-dev/ba4aDyOozm8/Hw0GJLvcOCMJ

Trigger global touch/click events in javascript without specific target

Since I'm searching for an answer for a while now and I'm still without any clue, I'll just describe my actual problem:
I need to build up automated touch/mouse gestures (tap,drag,pinch...) which I can fire on a webpage in order to test touch frameworks and their performance. Thus I want to trigger "global" touch/mouse events on a webpage with JavaScript without dispatching them from a specific element.
Does anyone know how I could achieve this or how these events are delegated in general?
If you need this just for the sake of emulating mobile touch actions on your browser, Chrome already has a tool for that. Check out Mobile Emulation.

Where to get the list of event types?

The official documentation only says:
The event's type, such as "click", "blur" or "keypress".
For iOS devices the touchstart is another event which is working. Where can I get the full list of all possible events? I like for example actually to get the event for the <select> event hasChanged(). Is this based on another library?
Meteor doesn't define the events it supports — it simply creates a cross-browser event listener wrapper. If you wanted to create custom events and trigger them, Meteor would pick them up.
The native input events supported depends on the browser: the Mozilla Developer Network reference is a good place to start.
Th docs also says that all the DOM events are also possible in addition to click, focus, blur, etc.
Other DOM events are available as well, but for the events above,
Meteor has taken some care to ensure that they work uniformly in all
browsers.
You can see the list of available Javascript events here and here.

Categories