/** * @private * @since 6.5.0 */Ext.define('Ext.mixin.ItemRippler', { mixinId: 'itemrippler', config: { /** * @cfg {Boolean/Object} itemRipple * @cfg {String} itemRipple.color The background color of the ripple. * Default ripple {@link Ext.Widget#ripple} settings for each item in the data view * * For complex items, individual elements can suppress ripples by adding the * `x-no-ripple` class to disable rippling for a tree of elements. * @since 6.5.0 */ itemRipple: null }, shouldRippleItem: function(item, e) { var itemRipple, ripple; if (e.getTarget(this.noItemRippleSelector, this.element)) { return false; } itemRipple = item && this.getItemRipple(); if (itemRipple && item.isWidget) { ripple = item.shouldRipple(e); if (ripple) { itemRipple = Ext.apply({}, itemRipple, ripple); } } return itemRipple; }, rippleItem: function(item, e) { if (!item) { return; } // eslint-disable-next-line vars-on-top var me = this, start = e.type.match(me.rippleStateRe), itemRipple = me.shouldRippleItem(item, e), release = itemRipple && itemRipple.release, isRelease = release === true, el = item.isWidget ? item.el : item, pos, delta, rs, rippledItems; // If this is a release based ripple lets track the start point // so we can ignore the ripple if this becomes a drag if (itemRipple && start && isRelease) { me.$rippleStart = e.getXY(); } // Should we ripple? // Do we have a ripple config? // Are we in the right event (start or end)? // do we have an element to ripple with? if (itemRipple && el && ((!start && isRelease) || (start && release !== true))) { rippledItems = me.$rippledItems || (me.$rippledItems = []); rs = me.$rippleStart; if (rs) { pos = e.getXY(); // determine the distance from the start point delta = Math.sqrt(Math.pow((pos[0] - rs[0]), 2) + Math.pow((pos[1] - rs[1]), 2)); if (delta <= 8) { el.ripple(e, itemRipple); rippledItems.push(el); } } else { el.ripple(e, itemRipple); rippledItems.push(el); } me.$rippleStart = null; } }, destroyAllRipples: function() { var items; for (items = this.$rippledItems; items && items.length;) { items.pop().destroyAllRipples(); } }, privates: { noItemRippleSelector: '.' + Ext.baseCSSPrefix + 'item-no-ripple, ' + '.' + Ext.baseCSSPrefix + 'item-no-tap', rippleStateRe: /start|down/ }});