I have to access to button's onClick event, something like event.target. When adding button to toolbar we have onAction handler that doesn't expose onClick event but have only isEnabled and setEnabled methods. I can access to window.event, but that is deprecated. So the code would be something like:
editor.ui.registry.addButton('button', {
text: 'Button text',
icon: 'icon',
onAction: (api:ToolbarButtonInstanceApi) => { // Here I have access to only button
//api, but I need access to event as
//well so I can use it as event.currentTarget
},
});```
How could I access to `onClick event`?
I've been researching this too as I needed to do something similar, or at least find a way of accessing the button node when it's clicked, so far I've not come up with anything that can be used inside the onAction handler, and attempting to access .this inside that arrow head function will give you the global window details. I feel there must be some way!
Related
Is it possible to have a TabNavigator with a tab bar button that launched a modal screen? Basically mimic the behavior of Instagram's center "Share" button.
Assuming you are clear with the concepts of react-redux. You can use it to achieve this task. On the click of the tab perform an action that will set/unset the props that you can use to show/hide the modal.
Your reducer for this will be like,
case SET_MODAL_VISIBILITY:
state = {
...state,
modalVisible: !state.modalVisible,
}
the above case will set/unset the modalVisible prop which can be used in a component that is exported with connect keyword of react-redux.
Than your modal will be like
<Modal
visible={this.props.modalVisible}
onRequestClose={() => //any function you want to call}
//any other attributes you want to use
>
<View>
//any view you want to give your modal to
</View>
<Modal/>
How can I get a reference to the click handler of an element in JQuery?
Here is what I am trying to do:
Store the click handler,
Change the click handler for the next click,
Restore the original click handler
var originalClick = $(settings.currentTarget).click;
$(settings.currentTarget).off("click");
$(settings.currentTarget).click(function (e) {
e.preventDefault();
settings.model.modal.close();
$(settings.currentTarget).off("click");
$(settings.currentTarget).click(originalClick);
});
The above code works the first time, however, when I click on the element again it fails:
Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'on'
Update:
I now realize that this is a really bad design that I am trying to do. I have resolved this issue by maintaining a visibility boolean in my viewmodel, if it is true, don't re-open the modal.
$(...).click is the jQuery click() method, not your event handler.
You can use an undocumented internal API to get the list of event handlers:
jQuery._data( elem, "events" );
What happens if you try it this way?
var originalClick = $(settings.currentTarget).click;
$(settings.currentTarget).off("click");
$(settings.currentTarget).on("click",function (e) {
e.preventDefault();
settings.model.modal.close();
$(settings.currentTarget).off("click");
$(settings.currentTarget).click(originalClick);
});
I have a problem with the Dojo Dijit Dialog .hide() method during the animation sequence. I am using Dojo 1.7 with Tundra theme. I have a cancel button in my dialog that closes the dialog.
var global_welcome = new Dialog({
id: 'global_welcome',
style: "width: 750px",
draggable: false,
content: '<button type="button" id="global_welcomeCancel"> Cancel </button>',
onShow : function () {
on(dojo.byId('global_welcomeCancel'), "click", function (evt) {
dojo.stopEvent(evt);
global_welcome.hide();
});
});
}
});
This produces the following error on Firebug:
exception in animation handler for: onEnd fx.js (line 152)
TypeError: this._fadeOutDeferred is undefined
this._fadeOutDeferred.callback(true);
Previous answers to this error but with destroyRecursive instead of hide suggests it has to do with the dialog being destroyed before the animation finishes. I tried using dojo.hitch() and setTimeOut but that didn't seem to work. Also what is puzzling is that the first time I open this dialog using global_welcome.show() (called by another button), and press the cancel button, it works without error. The second time and afterwards, it produces the above error message. Additionally, the default close button for dojo dialogs on the top right corner never causes this error. Perhaps I could just have onShow call the methods that the close button calls?
Can someone help me out please? Thanks in advance!
The problem is in your onShow method. You wire up to the click event to hide, but never disconnect it. When you open the dialog the again, you wire the click method to hide the dialog again. The result is that hide will be called twice when you try to close the dialog for the second time. The error gets thrown with the second call to hide because the animations have already been destroyed.
Try this:
var signal = on(dojo.byId('global_welcomeCancel'), "click", function (evt) {
dojo.stopEvent(evt);
signal.remove();
global_welcome.hide();
});
I have a simple ExtJS application that is written MVC style (much of my information from here).
My application creates a viewport, and has a view with a form, some fields and a button.
The application has a controller with a 'loginButtonClick" function, and the controller watches the click event with a:
this.control({
'loginwindow button[action=save]': {
click: this.loginButtonClick
}
}
That works great, but now when the login window is showing, I want the enter key to also execute the loginButtonClick method.
I have tried all kinds of things, but the basic issue I am having is WHERE to put the code for creating the keymap, and how to bind it to the proper instances.
For example, if I create the keymap in the controller (which is my preference), I need to get the specific view instance for that controller (I might have multiple windows open of the same kind).
So, How would you create a key map (or?) from within a controller for it's view (window), calling a local method (this.loginButtonClick) when the enter key is pressed?
What you can do is bind the code that initializes the keyMap to the login window afterrender event like this:
this.control{(
'loginwindow' : {
afterrender: this.initializeKeyMap
}
Then make a function that sets up the keyNav:
initializeKeyMap: function(window, options) {
this.keyNav = Ext.create('Ext.util.KeyNav', window.el, {
enter: this.loginButtonClick,
scope: this
});
}
Now when the dialog is loaded if the user presses the Enter key, it should execute your function.
You could setup all these things on your window render event. So when it is rendered you add an eventlistener for the enter key, and in the handler you call programatically click on the login button.
You can achieve this by adding the following listeners to your text/password fields in the form
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var form = this.up('form').getForm();
submitLoginForm(form);
}
}
}
Here 'form' is your form and 'submitLoginForm' is the function called at form submit which I guess is loginButtonClick in your case.
Hope this helps.
I'm having some trouble with blur and click events in backbone. I have a view (code below) that creates a little search entry div with a button. I pop open this div and put focus on the entry field. If someone clicks off (blur) I notify a parent view to close this one. If they click on the button I'll initiate a search.
The blur behavior works fine, however when I click on the button I also get a blur event and can't get the click event. Have I got this structured right?
BTW, some other posts have suggested things like adding timers to the div in case its being closed before the click event fires. I can comment out the close completely and still only get the blur event. Do these only fire one at a time on some kind of first-com-first-served basis?
PB_SearchEntryView = Backbone.View.extend({
template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
events: {
"click button": "find",
"blur #part": "close"
},
initialize: function(args) {
this.dad = args.dad;
},
render: function(){
$(this.el).html(this.template());
return this;
},
close: function(event){ this.dad.close(); },
find: function() {
alert("Find!");
}
});
I am not sure what the problem was, but here is the jsbin code.