Unblock widget without lose focus - qooxdoo

I have a focused widget and a blocked widget, when I unblock the blocked widget, the focus is stolen
Look this example (click once on the run button) : http://www.qooxdoo.org/current/playground/#%7B%22code%22%3A%22var%2520field%2520%253D%2520new%2520qx.ui.form.TextField()%253B%250A%250Avar%2520button%2520%253D%2520new%2520qx.ui.form.Button(%2522A%2520button%2522)%253B%250A%250Avar%2520blocker%2520%253D%2520new%2520qx.ui.core.Blocker(button)%253B%250A%250Athis.getRoot().add(field%252C%2520%257Btop%253A%252010%252C%2520left%253A%252010%257D)%253B%250Athis.getRoot().add(button%252C%2520%257Btop%253A100%252C%2520left%253A10%257D)%253B%250A%250Ablocker.block()%253B%250Afield.focus()%253B%250Ablocker.unblock()%253B%22%2C%20%22mode%22%3A%22ria%22%7D

I'm not quite sure that what you try to achieve is what the qx.ui.core.Blocker was intended for. The implementation does not take in account that the focus is moved during the block.
If you call the method block the code tries to determine the widget which was focused before the block is done and saves that widget, then sets the focus to the widget to be blocked and restores the focus to the saved widget when unblocking.
With a small addition in a subclass, you could avoid that focus save/restore:
qx.Class.define("qx.ui.core.MyBlocker",
{
extend : qx.ui.core.Blocker,
properties : {
backupActiveWidget :
{
check : "Boolean",
init : true
}
},
members : {
// overridden
_backupActiveWidget : function() {
if(this.getBackupActiveWidget() === false) {
return
}
this.base(arguments);
}
}
});
and use the blocker this way:
var blocker = new qx.ui.core.MyBlocker(widgetToBeBlocked);
blocker.setBackupActiveWidget(false);
This should prevent the blocker from stealing the focus which may be set during the block.

Related

electron + react + redux communication between two windows freezes PC?

I'm trying to update state in another window depedning on state changes in the first window but ipc communcation doesn't work as expected for me.
In my first window, I have:
onStatsSelect(event, menuItem, index) {
const selectedStatsCopy = this.state.selectedStats.slice();
const itemIndex = selectedStatsCopy.indexOf(menuItem.props.primaryText);
if (itemIndex > -1) {
delete selectedStatsCopy[itemIndex];
} else {
selectedStatsCopy[index] = menuItem.props.primaryText;
}
// Update state
this.setState({ selectedStats: selectedStatsCopy });
// Notify worker window of change
if (!(this.props.isReport)) {
console.log('in renderer main window');
ipcRenderer.send("updateSelectedStatsMain", event, selectedStatsCopy);
}
}
This is a callback for updating selectedStats state. It will also notify worker window of this update as seen in the last lines. if (!(this.props.isReport)) This is an important check since both windows share the same component and so I use property isReport to distinguish between the two.
In my main process, I have:
// Selected Stats have changed in main window
ipcMain.on('updateSelectedStatsMain', (event, selectedStatsCopy) => {
console.log('in main');
// Send to worker window
workerWindow.webContents.send('updateSelectedStatsRen', event, selectedStatsCopy);
});
This code will communicate back to worker window with the new state selectedStatsCopy.
In my comoponentDidMount, I have:
componentDidMount() {
// Register listening to message in case this is the worker window
if (this.props.isReport) {
console.log('in renderer worker window');
ipcRenderer.on("updateSelectedStatsRen", (event, selectedStatsCopy) => {
console.log('in renderer worker window event');
this.setState({ selectedStats: selectedStatsCopy });
});
}
}
This is supposed to work but electron hangs at line ipcRenderer.send("updateSelectedStatsMain", event, selectedStatsCopy); making main window hangs for a while and it continues using resources until PC freezes.
What is the problem here?
I figured out the error which I still don't know why it did freeze electron.
Basically I was doing
ipcRenderer.send("updateSelectedStatsMain", event, selectedStatsCopy);
This make absolutely no sense since I'm passing the event as a parameter. I don't even have an event variable to pass.
Updating this:
ipcRenderer.send("updateSelectedStatsMain",event, selectedStatsCopy);
to this:
ipcRenderer.send("updateSelectedStatsMain", selectedStatsCopy);
and this:
workerWindow.webContents.send('updateSelectedStatsRen', event, selectedStatsCopy);
to this:
workerWindow.webContents.send('updateSelectedStatsRen', selectedStatsCopy);
fxied the issue for me.

When accordion is open or collapsed (transition ended)

is it possible to know or intercept when an accordion is open or closed with angular-ui-bootstrap, only when transition is ended?
So, when one accordion content is open i can refresh iScroll instance.
Looking at
https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js
There does not seem to be any event triggered on collapseDone() or expandDone() that you can hook into.
The only way you can really do this is to watch when the class 'collapsing' exists (meaning collapsing is happening), then you know collapsing is over when that class goes away.
$scope.$watch(function() {
return $('.panel-collapse').hasClass('collapsing');
}, function(status) {
if ($scope.collapsing && !status) {
console.log('done collapsing');
}
$scope.collapsing = status;
});
Similar question: AngularJS - Find end of collapse animation

backbone model getting created multiple times with rapid clicks

When the user clicks this camera icon the get a snapshot of the page in a modal. If they click repeatedly it will make multiple snapshots before the modal has loaded and essentially blocked the camera icon.
Is there a way that I can say if a snapshot modal has just been created do not create another one?
events: {
'click .snapshot-camera' : 'clickCamera'
}
clickCamera: (event) ->
event.preventDefault()
#snapshot = new ******.Models.Snapshot({ user_id: ******.State.get('signInUser').id })
You can use underscore's debounce method which prevents double submissions.
// prevent double-click
$('button.my-button').on('click', _.debounce(function() {
console.log('clicked');
/* .. code to handle form submition .. */
}, 500, true);
Have a look into the below article
http://jules.boussekeyt.org/2012/backbonejs-tips-tricks.html

InteractionRequest<Confirmation>: the focus stays on the clicked button

Would anybody know how do I give the focus to the Cancel button of a Prism InteractionRequest?
What happens at the moment, is that given you've pressed enter on a button in a main window and the InteractionRequestTrigger fired, if you press enter again, you are in trouble as the focus stayed on the parent window and InteractionRequestTrigger fires a second time...
Thanks for your help
Focus on Confirmation dialog should be set automatically after firing the InteractionRequestTrigger.
You may find helpful the following State-Based Navigation Prism Quickstart:
State-Based Navigation
A Raise() method is invoked in the QuickStart for showing the InteractionRequest's dialog at ChatViewModel's SendMessage() method by setting the proper ViewModel context and its callback:
public IInteractionRequest SendMessageRequest
{
get { return this.sendMessageRequest; }
}
public void SendMessage()
{
var contact = this.CurrentContact;
this.sendMessageRequest.Raise(
new SendMessageViewModel(contact, this),
sendMessage =>
{
if (sendMessage.Result.HasValue && sendMessage.Result.Value)
{
this.SendingMessage = true;
this.chatService.SendMessage(
contact,
sendMessage.Message,
result =>
{
this.SendingMessage = false;
});
}
});
}
In addition, the ChatView detects the interaction request and the PopupChildWindowAction displays the SendMessageChildWindow pop-up window:
<prism:InteractionRequestTrigger SourceObject="{Binding SendMessageRequest}">
<prism:PopupChildWindowAction>
<prism:PopupChildWindowAction.ChildWindow>
<vs:SendMessageChildWindow/>
</prism:PopupChildWindowAction.ChildWindow>
</prism:PopupChildWindowAction>
</prism:InteractionRequestTrigger>
I hope this helps.
Ah! I should have marked my Popup as Focusable!

Backbone.js View events disable enable

If I have a View in backbone.js and it has an event in the events list:
events: {
'click #somebutton': 'clicked'
},
clicked: function () {
console.log('clicked');
}
How can I then disable/enable that event? So for instance if its clicked then
the event is removed (the button remains on screen but is greyed out etc). When some other part of the view is updated or whatever the event
enabled. Sure I can use jquery but I want to know if this functionality is available in backbone.
Thanks for any answers
Paul
You can always use delegateEvents() and undelegateEvents() to redo your event binding between the DOM and your Backbone View. That said, I usually just keep the event handler and add a conditional in the handler.
// .disabled class (CSS) grays out the button
clicked: function(event) {
var buttonEl = $(event.currentTarget);
if (buttonEl.hasClass('disabled')) {
// Do nothing
} else {
// Do something AND...
buttonEl.addClass('disabled');
}
}
Then you can have your other view or code simply removeClass('disabled') when you want to restore functionality.
UPDATE - disabled property
See comments, but a simpler, much better solution is to use the disabled property disabled="disabled" of buttons.
Use delegateEvents and undelegateEvents for binding and unbinding events. Check for reference: delegateEvents

Resources