How to require explicit dismissal of a yui popup menu? - events

I have a page with a couple of widgets on it, each of which, when clicked, brings up a yui popup menu: If I click on widget 1, its menu comes up. If I now click on widget 2, widget 1's menu gets a hide event, and widget 2's menu gets a show event and comes up. I'd like to change this so that, when widget 1's menu is up, it must be explicitly dismissed by a click on the page background (and/or, perhaps, another click on the widget or the escape key) before the menu attached to widget 2 is allowed to appear.
I've set up some beforeShowEvent and beforeHideEvent handlers on the menus, hoping to be able to use some method (a global variable? ick) of keeping track of when a menu is present and showing or hiding accordingly, but it's not working -- these handlers can't tell the difference between a click on the page background and a click on widget 2 (at least, not as I've done it so far). Is there any way to do what I'm trying to do? Thanks!

I think that a combination of clicktohide: false
Boolean indicating if the Menu will automatically be hidden if the user clicks outside of it. This property is only applied when the "position" configuration property is set to dynamic and is automatically applied to all submenus.
and keepopen: true
Boolean indicating if the menu should remain open when clicked.
will take care of this.
http://developer.yahoo.com/yui/menu/#configref

Related

Show NSSearchFields clear button at all times

I want to use the clear ✖️ button of an NSSearchField to close a search pane. Therefore I have manually set the action and target of the clear button cell. Now the button only appears when the search field has text in it and I can't find a way to override this behavior.
Is it possible to show the clear button at all times, wether there is text or not?

Drop-down menu in NSToolbar like Mail.app

I'd like a toolbar button with an attached dropdown menu, like the "Flag" button in the toolbar in Mail.app:
I'd hoped that making a normal NSMenuItem and adding a menu as the menuFormRepresentation would do the trick, but that menu only appears when the button goes into overflow mode.
I had also hoped that adding an NSPopupButton as a custom view would work, but that makes the whole view a menu, whereas I want the left part of the component to behave like a normal button, and the right dropdown part bring up the menu.
Is there some trick to making the NSToolbarItem show a component like this, or is this two custom views stuck together?
There's nothing magical about NSToolbar here. That's just one of the ways you can set up NSSegmentedControl, regardless of whether it appears as a toolbar item's custom view or on its own.
You can't set this up in Interface Builder (storyboard), but NSSegmentedControl has APIs for assigning menus to segments:
segmentControl.setMenu(myMenu, forSegment: 1)
segmentControl.setShowsMenuIndicator(true, forSegment: 1) // for the little arrow
You probably want to set the tracking mode to momentary, since your segment control is acting as a set of visually-connected buttons, not a choose-one-of-N selector.
When the user clicks either segment, your action method will need to use the selectedSegment to decide whether to perform the action associated with the "button" side or ignore the click (letting the menu show for the other side).

change ListView item image at runtime (firemonkey)

I need the ability for a user to press and set an ListView item's checkbox independently of clicking on the item. If they press on the checkbox I will add/remove the checkmark and take some action. If they press on the item text I can take another action.
I can do this with a ListBox no problem with built in functionality. I can't figure out how to do it with a ListView. How is it done?
I can put the following code in the ListView1ItemClickEx to know when the user is clicking on the image. Maybe I can just change the image to a checkmark?
if (ItemObject->Name == "I") {
ShowMessage("Item Image clicked");
}
But I don't know how to change that particular items image (e.g. I could just toggle between a checkmark image and an unchecked image) at runtime.
The picture below is for clarity. Clicking anywhere in the red box will change the items checkbox. For the ListBox clicking anywhere in the blue box will fire the OnClick event and not change the checkbox. I want that same behavior in the ListView.
Ok, Remy answered this related question and it helped me solve this issue. Now I can make the ListView have a checkbox that functions like that of the ListBox. I do it by toggling the item image whenever the user presses (or clicks on) the image area of an item.
When the user clicks an items image I trap it (per Remy's code in the ListView1ItemClickEx event) and toggle it from 0->1 or 1->0 in a vector at reference ItemIndex (e.g. myVector[ItemIndex] = 0) and then I completely rebuild the ListView (clear it and build from scratch).
I thought I'd have to remember where in the list I had scrolled down to and after refreshing the ListView I'd have to scroll to that point in code - but, that isn't the case. I don't know why but after the refresh I'm still at the point in the list where I clicked an item image. It makes it work and feel exactly like a check box.
It works great in iOS, Android, and Windows.
p.s. I forgot to mention that you need to treat any Header's like they are items in your vector that keeps up with each items' image (0 or 1). Otherwise adding headers gets you out of sync and clicking an item's image will toggle some other item's image.

How to auto-activate cocoa window so you don't need to click twice?

I have two windows: A main window and an inspector panel. Both have sliders and draggable items.
You have to click twice every time you work in the other window. First click activates the window. Second click allows a drag to start.
Is it possible to have a click in a window automatically activate it AND allow the event to pass through to the controls so you don't need to do it twice all the time when switching between an inspector panel and main window?
The first thing to try is to set the panel's becomesKeyOnlyIfNeeded property to true. That way, you main window will remain key even if the user clicks and drags on controls within the panel.
Otherwise, you have to handle this in each different view class. A view should override -acceptsFirstMouse: to return true if it wants to handle the same mouse event that activates the window. For custom view classes, this is straightforward. If you're using standard controls and they don't already implement -acceptsFirstMouse: to return true, you'll need to subclass them and use those subclasses instead.

Kendo UI Toolbar and Grid - strange save behavior when triggered from Toolbar control

I have some pages where I have a kendo ui grid (wired up to full CRUD services), but use a separate Kendo UI Toolbar control (as opposed to the toolbar configuration in the grid itself). I have a number of different buttons/menus on the toolbar, but am seeing a strange behavior when calling saveChanges() on the grid. If a cell is being edited when the save button is clicked, the grid is saved, but the edited value is lost (it reverts back to where it was). The following details what I see in different situations:
When using a save button configured in the grid (command: "save"), any changes in a cell being edited are committed with the save.
When using a plain html button that calls the saveChanges() method of the grid, any changes in a cell being edited are committed with the save.
When using a save button configured in a toolbar control, the changes in a cell being edited are LOST when saveChanges() is called.
The following jsbin shows the behavior of all three:
http://jsbin.com/jazobexatu/2/edit?html,js,output
I have tried calling the save from the toolbar button a number of different ways (even trying to trigger the click event of the external button), but nothing seems to correct the behavior. I also tried calling closeCell() on the grid (to try to force the value back into the data, but that doesn't work either). I haven't been able to debug the javascript enough to figure out what is different. I'm hoping someone with a deeper understanding of these controls can help me out.
For some reason, the mouse down event on the toolbar button doesn't cause a blur on the editor.
You can try it yourself by clicking in the cell to edit it, then click and hold the mouse button down on the "normal" button. The editor closes on mouse down, causing a blur of the editor, and persists the change.
If you do the same thing, click and hold mouse down, on the toolbar button, the editor stays open.
I've been poking through the source, but haven't figured out exactly why this happens. My best guess would be that the mousedown handler on the toolbar prevents the event from bubbling or running its default action and the editor doesn't blur.
Additional detail: On mousedown on the grid header button and the normal button, the focused element changes (which is what causes the editor blur). But on mousedown of the toolbar button, the editor input element still has the focus.
Shifting the focus on mousedown of the toolbar might be a workaround.
Sort of a weird hack, but this works in Chrome (any should in any browser that supports activeElement
click: function (e) {
$(document.activeElement).blur();
$("#grid").data("kendoGrid").saveChanges();
}

Resources