As per the polymer documentation there are 2 methods to add Gesture events:
1. Annotated event listener
Extend the element using
class TestEvent extends Polymer.GestureEventListeners(Polymer.Element) {
and add annotation for the element
<div id="dragme" on-track="handleTrack">Drag me!</div>
when i try this , though events get triggered native handling of browser events stop. Though I call Polymer.Gestures.setTouchAction(this,"auto"); inside ready it fails.
Please suggest how should I go about adding gesture events in annotation form and still allowing native browser handling.
Related
I've seen people adding the event listener on the "ready" function and others on "connectedCallback". My question is, what are the pros and cons of each place? On connected we are responsible to remove it; in ready, it will stay there, and I'm unsure if it is a problem.
Should I do this:
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', this.myFunction.bind(this));
}
disconnectedCallback() {
super.disconnetedCallback();
this.removeEventListener('click', this.myFunction);
}
Or this:
ready() {
super.ready();
this.addEventListener('click', this.myFunction.bind(this));
}
Up until Polymer 1.x.whatever , the ready callback in the life cycle of an element, was called, once
the element registered its shadow DOM
any <content>'s were distributed
and then, post ready , attached was fired
So, you could possibly have used ready as a one time callback after everything was indeed ready
With Polymer 2.0 onwards, there have been contractual changes to how callbacks are fired, and
The ready callback no longer is guaranteed to execute after the new <slots> are distributed meaning, there is no surety that the ready itself will wait for content / light DOM distribution.
attached is now the new connectedCallback and is essentially useful for element level DOM manipulations such as setting attributes , appending children etc. This is a lifecycle change that happens after the slot nodes are distributed and the element itself is attached in the DOM hierarchy, but not necessarily after a paint.
SO, for any event that does not rely on any ::slotted content, use the ready callback
for anything that requires a knowledge of all distributed content along with the shadow DOM, use the connectedCallback
However, when possible, use the afterNextRender method of the super class Polymer , within your element's callback to add event listeners
these are what I could possibly think of.
All this and much more, if it helps, here
I haven't yet read about us having to remove an event listener from a lifecycle callback, or anything as such.
If you are referring to cases where, the element itself may be connected and disconnected dynamically / or in the flow of things,
And, with that in mind, you are adding an event listener on a global / native element within your element's life cycle callbacks ,
like attaching an event listener on the window inside your custom-element's ready or connectedCallback ,
Only in such cases, does polymer advise you to remove the event listener on disconnect
I need to know when a document(screen) is popped off the stack in an Apple tvOS app. I thought detecting the Menu button press would be the simplest way, but I'm using TVJS and have not been able to figure out how to write the event handler.
Please help me write an event handler that will fire on document removal, menu button press or offer an alternative solution.
Subscribe to the event unload - it's triggered whenever a page disappears after being popped from the stack:
doc.addEventListener("unload", Presenter.onUnload.bind(Presenter));
[...]
onUnload: function(event) {
console.log("onUnload");
},
There is such thing of a handler for onDocumentRemoval or similar. What you can do, instead, is create a global select handler:
doc.addEventListener("select", self.doThing.bind(self));
And then check if the fired event comes from one of the buttons used to remove an element of the stack (let's suppose those buttons have a class named delete:
doThing: function(event){
var element = event.target;
if (element.getAttribute("class").contains("delete")){
//enter code here
}
EDIT 1:
I found the possible events the TVMLKit handles (I know it is in Swift/Objective-C, but the events are the same):
TVElementTypePlay
A play event has been dispatched.
TVElementTypeSelect
A select event has been dispatched.
TVElementTypeHoldSelect
A hold event has been dispatched.
TVElementTypeHighlight
A highlight event has been dispatched.
TVElementTypeChange
A change event has been dispatched.
Those events are only attachable to a template as far as I could test. I guessed the change event would be perfect if I could attach it to the navigationDocument to listen for changes, but those two options won't work and both fire errors:
Attached to the global:
navigationDocument.addEventListener("change", function(event){console.log(event)});
Attached to the documents array:
navigationDocument.documents.addEventListener("change", function(event){console.log(event)});
There is no built-in method for those above to listen for any change. The event, though, will work on a template listening to internal changes. But it won't fire when the template is pushed to or popped from the stack.
I am guessing you will need to re-design your app in order to achieve what you are looking for.
Is it possible to add an event listener for Alert.show?
So that every time an alert box is shown I can call a function to hide an iframe.
I think you will get stuck since event dispatching/listening will require using an instance of a class to be the dispatcher, which is not the case when using the static .show().
However, I guess you could manually dispatch an event every time you want to close your iframe and display an alert (both could be done by the event dispatched).
You could as well create your own class that would have a .showAlert function performing both the event dispatching and the regular Alert.show(). This requires your custom class to be instantiated but the instance could also be stored in a Singleton so you don't have to recreate a new one every time you want to display your Alert.
Alert.show will return you the instance of the alert object. Use the object to add event listeners on the alert.
var alert:Alert = Alert.show("contente");
alert.addEventListener(Event.Close, function(e:Event):void{
// TODO
);
I've embedded a qooxdoo widget (the table) within an existing web app using inline integration (http://qooxdoo.org/documentation/0.8/ui_inline).
Is it possible to raise an event in the widget that can be handled externally within the main web app? Specifically I want to raise a "row selected" event when the user selects an item in the table.
Thanks,
Paul
afaik the table selection model has the event "changeSelection".
tableInstance.getSelectionModel().addListener("changeSelection", yourListener, yourContext);
With this event you can get the necessary infos within your listener method and fire an event to a DOM element which any JS library can use to listen to.
qx.event.Registration.fireEvent(document.body, "rowSelected", qx.event.type.Event);
You can fire the event at every DOM element you like to. In your case you can use jQuery to listen to the event and get the infos.
Hope that helps you further.
Regards,
Alex
I want to attach my own key event handler to an INPUT that already has another event handler attached to onkeydown. Essentially, I want to receive a key event before all the other handlers and check if the user pressed a certain key -- if yes, I want to perform some functions and discard the event, if no, I want to pass it along to the other handler(s).
How can I do this with jQuery?
If you are loading a 3rd party script or jQuery addon you can just load your script or function first. If you do that then you can use something like this without the mess of unbinding and rebinding event handlers.
// your possible interceptor code
$("#awesome").keydown(function(e) {
if (e.keyCode < 70) {
e.stopImmediatePropagation();
console.log("BLOCKED!!!");
};
});
// possible 3rd party event code loaded after your code
$("#awesome").keydown(function(e) {
console.log("3rd party:"+e.keyCode);
});
Example webpage => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-key-event-interception.html
Example output of Firebug console
jQuery stopImmediatePropagation() documentation
According to the jQuery bind() documentation:
"When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound."
So it looks like you will have to unbind the other handlers, bind yours and then add the others back if you want yours to run first.
There is some good information in this thread with respect to that:
jQuery: Unbind event handlers to bind them again later