I would like to make a tooltip that will respond to the keys (left / right). How do I add an event in a similar way:
$.jqplot.eventListenerHooks.push(['jqplotClick', handleClick]);
I need to get the 'plot' object in event.
You might want to start by checking out one of my other answers and see the code sample there. It presents a way of listening for keyboard events.
It comes down to the following code:
$(document).keydown(function(e) {
if (e.keyCode == 37) {
//on left arrow key down
}
else if (e.keyCode == 39) {
//on right arrow key down
}
});
Remember that to have the sample respond to keys the 'Result' area on the jsfiddle must be selected.
Personally, for the tooltip I would use a custom one, to have a better control over it. How to do it is, for example, presented in this answer.
Related
I'm using event sources with FullCalendar 5. I need the cells containing events from one of the event sources to not be clickable.
I realize I can use eventClassNames or className to add a class for a given event source, but that class is added to the event text, not the cell, and nothing about the event source seems to be present as a selector at the cell level, either.
To summarize, the calendar is being used for reservations. If the date is present in a given event source, it is not available, so the cell should not be clickable. How do I accomplish that?
You could perform a check against existing events in the select callback - https://fullcalendar.io/docs/select-callback
so check that there is event(s) within the date range, and some custom property that identifies the source you wish to check for.
So when you import your events, have something like.
sourceType: "a" / sourceType: "b"
Then in the select, do a check, here blocking selection if an event of sourceType "b" is found within the cell.
select: function( selectionInfo ) {
if(calendar.getEvents().filter(x => (x.start >= selectionInfo.start && x.end <= selectionInfo.end && x.extendedProps.sourceType == "b").length > 0) ) {
calendar.unselect();
selectionInfo.jsEvent.stopPropagation();
return false;
}
// your handler if selection is allowed goes here
}
I have an NSTextField in my window and 4 menu items with key equivalents ←↑→↓.
When the text field is selected and I press an arrow key, I would expect the cursor to move in the text field but instead the corresponding menu item action is performed.
So there has to be an issue in the responder chain. To figure out what's wrong I've watched WWDC 2010 Session 145 – Key Event Handling in Cocoa Applications mentioned in this NSMenuItem KeyEquivalent space " " bug thread.
The event flow for keys (hotkeys) is shown in the session as follows:
So I checked the call stack with a menu item which has keyEquivalent = K (just any normal key) and for a menu item which has keyEquivalent = → (right arrow key)
First: K key event call stack; Second: Right arrow key event call stack
So when pressing an arrow key, the event is sent directly to mainMenu.performKeyEquivalent, but it should actually be sent to the keyWindow right?
Why is that and how can I fix this behavior so that my NSTextField receives the arrow key events before the mainMenu does?
Interesting observation about the call stack difference. Since arrow keys play the most important role in navigation they are probably handled differently from the rest of keys, like you saw in the NSMenuItem KeyEquivalent space " " bug thread. Again, it's one of those cases when AppKit takes care of everything behind the scenes to make your life easier in 99.9% situations.
You can see the actual difference in behaviour by pressing k while textfield has the focus. Unlike with arrows, the menu item's key equivalent doesn't get triggered and input goes directly into the control.
For your situation you can use NSMenuItemValidation protocol to override the default action of enabling or disabling a specific menu item. AFAIK this can go into any responder in a chain, e.g., view controller, window, or application. So, you can enable/disable your menu items in a single place when the window's first responder is a textfield or any other control that uses these events to properly operate.
extension ViewController: NSMenuItemValidation {
func validateMenuItem(_ menuItem: NSMenuItem) -> Bool {
// Filter menu item by it's assigned action, just as an exampe.
if menuItem.action != #selector(ViewController.menuActionLeftArrowKey(_:)) { return true }
Swift.print("Validating menu item:", menuItem)
// Disable the menu item if first responder is text view.
let isTextView = self.view.window?.firstResponder is NSTextView
return !isTextView
}
}
This will get invoked prior displaying the menu in order to update item state, prior invoking menu item key equivalent in order to check if action needs sending or not, and probably in other cases when AppKit needs to check the item's state – can't think of any from the top of my head.
P.S. Above the first responder check is done against NSTextView not NSTextField, here's why.
This is the solution I've chosen, which resulted from the comments from #Willeke.
I've created a subclass of NSWindow and overridden the keyDown(with:) method. Every Window in my application (currently 2) subclass this new NavigationWindow, so that you can use the arrow keys in every window.
class NavigationWindow: NSWindow {
override func keyDown(with event: NSEvent) {
if event.keyCode == 123 || event.keyCode == 126 || event.specialKey == NSEvent.SpecialKey.pageUp {
print("navigate back")
} else if event.keyCode == 124 || event.keyCode == 125 || event.specialKey == NSEvent.SpecialKey.pageDown {
print("navigate forward")
} else {
super.keyDown(with: event)
}
}
}
This implementation registers all four arrow keys plus the page up and down keys for navigation.
These are the key codes
123: right arrow
124: left arrow
125: down arrow
126: up arrow
jsfiddle: http://jsbin.com/wamunoside/1/edit?html,output
jsfiddle
This is taken from the example given on the Bootstrap 4 docs site:
just adding a 2nd dropdown to this example below the 1st dropdown found here:
https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown
So in the jsfiddle this is how you cause the issue:
1.) reduce the width of the output tab so that it shows the menu for mobile (991px or less)
2.) You will see two 'dropdown link', click on the top one which expands the submenu.
3.) click on the other 'dropdown link' below the currently expanded one.
Notice both dropdowns are now closed - should have opened the 2nd dropdown.
ended up issue being my code...
I added the following if event.type == "mouseleave" and that seems to have fixed the issue reasonably well, still not perfect (for desktop):
http://jsbin.com/yiyohatequ/edit?html,css,js,output
I'm basically struggling with the best way to get dropdown-menu to appear 'on hover' for desktop and dropdown to appear 'on click' for tablet/mobile. so that is why I wrote this code in the 1st place.
/* Prevent more than 1 dropdown showing up at once*/
$('.nav-link').hover(function (event) {
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave"
if (event.type == "mouseleave") {
var hovered = this.nextElementSibling;//.dropdown-menu
var navdropdowns = $('.dropdown-menu');
navdropdowns.each(function (a, b) {
if (hovered != b) {
$(b).removeClass('show');
}
});
}
})
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();
On my toolbar in Qt, I have several QMenus (all of which align to the left by default). I would like to make one of them align to the right side, but I can't seem to find the correct way to do this. Any ideas?
QMotifStyle gave me the answer. In that style, after adding a separator in the menubar, subsequent menus are added to the right hand side of the menu. The solution was to use write a QStyle proxy class, but overload one method: styleHint, to return true on SH_DrawMenuBarSeparator (which is what QMotifStyle does).
int MyStyle::styleHint( StyleHint hint,
const QStyleOption * option,
const QWidget * widget,
QStyleHintReturn * returnData) const
// Return true on menu bar separator so subsequent menu bars are
// drawn on the right side of the bar!
if ( hint == SH_DrawMenuBarSeparator)
return true;
else
return style->styleHint(hint, option, widget, returnData);