I want to create a button-like component with ripple animation and it looks like this:
<div>Button</div>
<material-ripple></material-ripple>
In the past, this works fine because when I click on this custom element, I actually clicks on material-ripple and the click event bubbles to the host element.
As of angular_components 0.5.1, material-ripple shows a centered ripple on keypress. This is different from clicking because the event target is the host element itself and not the ripple component.
Is there a way that I can pass a keypress event down to the material-ripple, so that the ripple animation would be played? Or is there a way to play the animation programmatically?
After some research, I've come up with a solution using dart:html.
#ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;
#HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
(materialRipple.nativeElement as HtmlElement).dispatchEvent(
new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
.wrapped);
}
Although this does not work in Dartium due to some bugs around KeyEvent and KeyboardEvent, it works fine in Chrome.
Related
I am currently working on Wes Bos' JavaScript 30 project, and in this drumkit project, I was hoping to add to his finished code by allowing user to click on the button rather than only through 'keydown' event.
After adding to the playSound function to detect
event.path[1].dataset.key || event.path[0].dataset.key
so that the click event would be able to grab the button's attribute, which contains the keyCode, and use that to detect which audio to play. Then I wrote this:
window.addEventListener('click', playSound);
and it worked great on desktop, it also worked great on my android smart phone, but for some reason the button doesn't work on an iphone.
So after looking through some similar results on stackoverflow, here's what I've tried:
window.addEventListener('touchstart', playSound)
and
window.addEventListener('DOMContentLoaded', (event) => {
window.addEventListener('touchstart', playSound)
});
but neither of them seems to work on iphone. Is there something special about iphone that doesn't allow me to click a button using their touch screen? Android doesn't seems to have this issue at all.
it turns out all i needed to do is use document.addEventListener instead of window.addEventListener for iOS
I'm starting to automate a test suite for a mobile app coded in NativeScript (it used to be a hybrid Cordova app) and it's proving difficult to locate some elements.
I'm trying to locate a TextView widget that's outside of the visible screen space (AKA viewport) using UiSelector:
#AndroidFindBy(uiAutomator = "new UiSelector().textContains(\"CFT\")")
private MobileElement labelCFT;
When I try to interact with such element, the result is the following message:
org.openqa.selenium.NoSuchElementException: Can't locate an element
by this strategy: By.chained({By.AndroidUIAutomator:
new UiSelector().textContains("CFT")})
The logic conclusion would be that the element does not exist or my locator strategy is faulty. But here is the thing, when I change the text to find for that of an element that's inside the visible space/viewport, the locator works flawlessly. Example:
#AndroidFindBy(uiAutomator = "new UiSelector().textContains(\"loans\")")
private MobileElement labelCFT;
And then:
public void whatText() {
System.out.println("Text of the label: " + labelCFT.getText());
}
I get the correct "Text of the label: These are your loans".
Apparently, it's a limitation of the UiSelector or at least the way Appium works with it.
The only option I imagine is to scroll the whole screen and then trigger #AndroidFindBy, then repeat until there's no scroll left.
Is this suppose to be how UiSelector and textContains() work?
Is it another solution for this?
Many thanks.
I have faced similar type of problems in automation. The only way around I found was to scroll up or down till the element is visible on screen and then access the element by "name". you can use the following command for scrolling.
driver.findElementByAndroidUIAutomator("new UiScrollable(new UiSelector()).scrollIntoView(text(\"Your Element\"));");
After your desired element is visible on the screen you can access that element easily.
Thanks
In Android App you can only click or do any actions on the elements which are visible on the screen if you want to perform any actions on element which are not visible you can use touch action method where you need to specify x and y cordinated i think this might help you in my case this works
TouchAction ta = new TouchAction(driver);
ta.press(PointOption.point(207, 582)).moveTo(PointOption.point(8, -360)).release().perform();
We are trying to scroll an element on our iOS web app while preventing the window itself from scrolling. We are capturing the touchmove event on the window, scrolling the element programmatically and (trying to) prevent the window itself from scroll by calling preventDefault on the event.
Unfortunately this doesn't work in Mobile Safari. The window continues to scroll underneath our element. The issue sounds exactly like the Webkit bug described in https://bugs.webkit.org/show_bug.cgi?id=163207, but that issue was supposedly fixed in iOS 10.3 whereas I am running 11.3.
Catching touchforcestart and calling preventDefault does seem to prevent scrolling of the window, but we are calling it in touchstart, which seems to be "too late" since the window still scrolls. Scrolling is only prevented next time touchstart is called.
Any ideas about what is going on? We are baffled since this is clearly a bug but it seems to have been fixed some time ago.
I recently ran into this same problem. You'll need to pass { passive: false } when registering the touchmove event listener. e.g.
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
This is because document touch event listeners are now passive by default in Safari 11.1, which is bundled with iOS 11.3. This change is documented in the Safari 11.1 release notes:
Web APIs
[...]
Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes.
You need to bind preventDefault to two events: touchmove and touchforcechange to make it work in ios 11, e.g.
document.addEventListener('touchmove', this.preventDefault, {passive: false});
document.addEventListener('touchforcechange', this.preventDefault, {passive: false});
And you should bind them before touchstart
If you bind them inside your touchstart or dragStart handler, they can only prevent scroll in the next dragging.
What worked for me was to pass the {passive:false} option to addEventListener (explanation), and you also need to make sure you execute e.preventDefault() on touchmove and touchstart:
window.addEventListener("touchstart", e=>e.preventDefault(), {passive:false});
window.addEventListener("touchmove", e=>e.preventDefault(), {passive:false});
I am creating an iPad app in which I have a textInput component that when it is in focus is suppose to call a callout with a spinner in it. The problem is that the softkeyboard is showing up every time I touch the textInput component. I have tried everything I could find which includes the following:
private function onActivating(event:SoftKeyboardEvent):void
{
event.preventDefault();
}
<s:TextInput softKeyboardActivating="onActivating(event)" />
and
<s:TextInput needsSoftKeyboard = "False"/>
Both of these examples are still having the softkeyboard show up.
Have you tried to simply disable the TextInput and change the styles so it doesn't look disabled? Touch events may not trigger though but short of styling a label [as suggested above] you'll have to do some trickery one way or another.
I'm using a GRAILS UI (1.2-SNAPSHOT) an it's implementation of the YUI menubar (YUI 2.7.0.1). I am seeing flakey mouseover behavior in IE (Firefox is ok). When I mouse over the menu item with a submenu, it will show. As I try to mouse over the sub-menu, the submenu disappears before I can click. This happends in a pattern I haven't fully figured out. Usually the first time I select a menu it's fine but if I move around the menu back to a menu item, the submenu begins to display this behavior. By clicking and holding the mouse button I can usually get the sub-menu to stick around.
I've palyed with various configurations like keepopen and automenudisplay but they don't seem to change the behavior. I have not seen much posted about this. But I also don't see menu's documented in the UI plugin either. I could really use some feedback if UI menu is not ready for primetime yet or I'm missing something else. I've not worked with much AJAX before.
Below is the code with the added options I played with that did not have a positive impact.
<gui:menubar id='menubar' renderTo='mainmenu' autosubmenudisplay="false" shadow="true" keepopen="true">
<gui:menuitem url="/esmzone">Home</gui:menuitem>
<gui:submenu label='Profile'>
<gui:menuitem url="${createLink(controller:'memberProfile', action:'view')}">View</gui:menuitem>
<gui:menuitem url="${createLink(controller:'memberProfile', action:'profile')}">Edit</gui:menuitem>
<gui:menuitem url="${createLink(controller:'user', action:'account')}">Settings</gui:menuitem>
<gui:menuitem url="#">Subscription</gui:menuitem>
</gui:submenu>
Here is the code generated by the plugin:
<script>
YAHOO.util.Event.onDOMReady(function() {
GRAILSUI.menubar = new YAHOO.widget.MenuBar("menubar_div", {'autosubmenudisplay': false,
'shadow': true,
'keepopen': true});
GRAILSUI.menubar.render('mainmenu');
});
</script>
I made some progress on this by researching the YUI library. There is a documented bug with IE7. Apparently the grails-ui plugin does not address the fix. I'm testing with IE8 but I assume it's still there.
http://developer.yahoo.com/yui/menu/#knownissues
It appears that you should set the zoom property to 1 (zoom:1) for the bd class.
I added the following code to my style sheet
div.yuimenubar .bd {
zoom: 1;
}
and it seems to help. I see no side effect in Firefox but I didn't dynamically check for the version of browser as I would need to hack the code that generates the YUI javascript and put in
if (YAHOO.env.ua.ie === 7) {
YAHOO.util.Dom.addClass(document.body, "ie7");
}
after the render() call. Then instead of the style I added you could do an IE7 (probably >=7) style.
This is what the Yahoo site had to say about it:
The following application of
"zoom:1" sets the "hasLayout"
property to "true" and prevents
first tier submenus of a MenuBar
from hiding when the mouse is moving
from an item in a MenuBar to a
submenu in IE 7.
For more on the "hasLayout" property:
http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx