How to use/link "esc" key to web pages? - modal-dialog

A window/popup in web page can be provided with close (X) button at top-right corner to close that. How to make one closed with 'escape' key pressed?
Facebook chat boxes will be closed with the "esc" key pressed. How to do that?
Thanks.

It's totally depends on which window dialog/popup are you using. Because different dialog/popup can be handled by differently.
But you can use keyboard key press event(key code :27) to detect when use clicked ESC key.
Here is the example:
Suppose, you're using jquery dialog to show your content then you can handle ESC key event.
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode == 27) {
window.close();
}
});
Hope this helps!

Related

Protractor : How to select an item from list when right-clicked

I am trying to Right click on an element and then select an option "Rename" from the list. I have got "right clicking" working but can't select option from the list. Referred links 1, 2
Note 1:
1: On right click the menu options that are visible are native context menus. So, they don't appear in my DOM that I can see.
2: The App runs only in Chrome browser(not sure if it is a browser issue)
I have tried the following code:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).perform();
Consider, "Rename" to be the third option in the list.
Note 2:
If I am just running the app and enter 'R' from my keyboard, it selects the "Rename" option. But when I tried to run it in my test, it doesn't select the "Rename" option. See below code I tried:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.ARROW_RIGHT).sendKeys('R',protractor.Key.ENTER).perform();
None of the above code works. Let me know if more information is required.
EDIT:
I am guessing the following to be happening:
once I mouse over, the script "right clicks" and after that the "tooltip" is displayed. Since the "tooltip" is displayed after "right click" I think the menu list goes to the background(the list is still visible along with the tool-tip), which is why the arrow down keys aren't working. Is this possible? If yes, how can I wait for the tooltip to be invisible and then right click?
Input: I tried to wait for tool-tip to be invisible and then right click, but still the "Arrow_down" doesn't work.
Is there a way to bring the menu list in the front once we have right clicked?
IMPORTANT:
I took a screenshot after I right clicked on the element, and the screenshot doesn't show the "menu list". Below is the code for screenshot:
browser.actions().click(protractor.Button.RIGHT).perform()
.then(function() {
browser.takeScreenshot().then(function(screenShot) {
writeScreenShot(screenShot, "image.png");
});
});
//writeScreenShot takes two variables actual screenshot data and the file name. And the screenshot is saved as "image.png"
What needs to be done?
When you send ARROW keys to the browser, you have to send them as keys instead of passing them to click() function and the ARROW_DOWN key is part of Key object and not BUTTON. Here's how -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).perform();
For your second try, you should send RIGHT in the place of protractor.Button.ARROW_RIGHT to right click. When you send two actions/keys to sendKeys() function, you have to join them using chord object which combines the action of pressing two keys at a time(ex: CTRL+C for copy). But in your case i don't think its really necessary. Here's how to use it -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.chord("r", protractor.Key.ENTER).perform(); //Not necessary as you wont be pressing R+ENTER in your keyboard
OR
browser.actions().click(protractor.Button.RIGHT).sendKeys('R').sendKeys(protractor.Key.ENTER).perform();
Hope this helps.
use XPath to solve your problem
browser.actions().mouseMove(target).perform();
browser.actions().click(protractor.Button.RIGHT).perform();
element(by.xpath('//*[#id="context-menu"]/ul/li[1]')).click();
In your case it will be "//*[#id="context-menu"]/ul/li[3]" most probably.

Add a popup Pane to crossrider add-on icon and bliking icons to the add-on icon

I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]

Closing fancybox on escape form iframe

i know fancybox supports close on esc. but when you have the form and focus on one of the text box, then you cannot press "esc" key again to close the fancybox.
anyone has a clue how to solve this?
Try a keyup event that triggers Fancybox close: (haven't tested this myself)
$("input").keyup(function(e) {
if (e.keyCode == 27) { //Escape button
$.fancybox.close();
}
});
This should do the trick:
parent.jQuery.fancybox.close();
or else follow this.
http://www.moorewebexposure.com/web-design/how-to-close-fancybox-from-an-iframe/

Detect ctrl+click on button in pygtk

I want to detect if ctrl is held down when the user clicks a button. The 'clicked' signal doesn't seem to pass enough information to the callback to work this out.
If you can connect to either button-press-event or button-release-event instead of clicked, the event passed to the callback can be used to get the modifier state (using get_state) and check if control key is pressed. For ex.
def button_release_callback(widget, event, data=None):
if event.get_state() & gtk.gdk.CONTROL_MASK:
print "Ctrl held"
else:
print "Ctrl not held"
...
button.connect("button-release-event", button_release_callback)
Hope this helps!

Delete keyboard button hit in GWT

How would we know if "Delete" button on key board is pressed in GWT?
i tried keydown handler ,key press but i cant find methods like "isDeleteKeyDown()".
Thanks
If the keydown event is firing properly for you on press of delete then you can compare the keycode to figure out if the delete key has been pressed. Basically,
if(event.getNativeKeyCode() == KeyCodes.KEY_DELETE)
{ // Delete key pressed, do you stuff }