Open kristfal opened 7 years ago
This is true in a scrollable container like the iron-list.
The api provide mechanisms to solve the problem though.
<a id="lnk" style="display:none"></a>
<iron-list id="listCompanies" items="[[_getListItems(category.items)]]"
as="item" scroll-target="[[scrollTarget]]" selection-enabled>
<template>
<div on-tap="_onItemSelected">
<!-- 1. disable the ripple by default -->
<paper-ripple recenters noink on-transitionend="_onTransitionEnd"></paper-ripple>
<a link="[[_getItemHref(item)]]" on-tap="_onItemSelected">
<custom-element />
</a>
</div>
</template>
</iron-list>
_getRipple: function (parent) {
var ripple = undefined;
// not optimal but work in all browsers
Polymer.dom(parent).children.forEach(function (child) {
if (child.tagName.toLowerCase() === 'paper-ripple') {
ripple = child;
return;
}
});
return ripple;
},
_onItemSelected: function (e) {
//2. prevent default the tap event
e.preventDefault();
3. find your link and related ripple object
var polymerTarget = Polymer.dom(e.target);
var lnk = polymerTarget.node;
var tagName = polymerTarget.node.tagName.toLowerCase();
switch (tagName) {
case 'custom-element':
lnk = polymerTarget.parentNode;
break;
case 'div':
var parent = undefined;
if (polymerTarget.parentNode.host && polymerTarget.parentNode.host.tagName.toLowerCase() === 'q-image') {
lnk = polymerTarget.parentNode.host.parentNode.parentNode;
}
break;
}
var ripple = this._getRipple(lnk.parentNode);
// 4. fire the ripple programmatically
if (ripple) {
ripple.downAction(e);
this.async(function () {
this.$.lnk.link = lnk.link;
ripple.upAction(e);
}, 1);
}
},
_onTransitionEnd: function (e) {
//5. perform the action on ripple's transition end
this.$.lnk.href = this.$.lnk.link;
this.$.lnk.click();
this.$.lnk.href = this.$.lnk.link = '';
},
Hope this help.
In my opinion this is quite a serious issue, the ripples look quite silly on our buttons, navigation tabs etc.
I don't like to build workaround like the above everywhere. What are the plans regarding this?
+1
Any plans?
Description
paper-ripple
currently animates onmousedown
, which means that on mobile devices, the ripple effect is playing when you drag a finger over the ripple-able container. When usingpaper-ripple
in anon-tap
context, such as when adding anon-tap
listener topaper-button
, the ripple may fire without firing theon-tap
event.During 'regular use' a user may attempt to tap on a button, but accidentally drag her/his finger slightly. In this case, the ripple will fire, but the on-tap event will not fire. This is highly confusing for the user, as the ripple indicates that element was activated.
Native implementations of ripple effects in material design apps (Google Maps, Inbox etc.) does not play on drag. Instead, they follow the pattern of Polymer's
on-tap
gesture handler, and wait for a small duration to verify that the intended input was an actual tap before playing. If the user drags on the element after the initial wait, the ripple effect is cancelled.Expected outcome
Dragging touch events should not play the ripple-effect. The implementation should follow that of Google Maps or Google Inbox. This option may be active by default or added by an element property.
Actual outcome
Dragging touch events activate the paper-ripple effect.
Live Demo
https://elements.polymer-project.org/elements/paper-ripple?view=demo:demo/index.html&active=paper-ripple
Steps to reproduce
paper-button
on-tap
event will notBrowsers Affected
– [X] Mobile Safari – [X] Mobile Chrome