vuetify
Version:
Vue.js 2 Semantic Component Framework
175 lines (171 loc) • 6.7 kB
JavaScript
function transform(el, value) {
el.style['transform'] = value;
el.style['webkitTransform'] = value;
}
function opacity(el, value) {
el.style['opacity'] = value.toString();
}
var calculate = function calculate(e, el) {
var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var offset = el.getBoundingClientRect();
var localX = e.clientX - offset.left;
var localY = e.clientY - offset.top;
var radius = 0;
var scale = 0.3;
if (el._ripple && el._ripple.circle) {
scale = 0.15;
radius = el.clientWidth / 2;
radius = value.center ? radius : radius + Math.sqrt(Math.pow(localX - radius, 2) + Math.pow(localY - radius, 2)) / 4;
} else {
radius = Math.sqrt(Math.pow(el.clientWidth, 2) + Math.pow(el.clientHeight, 2)) / 2;
}
var centerX = (el.clientWidth - radius * 2) / 2 + 'px';
var centerY = (el.clientHeight - radius * 2) / 2 + 'px';
var x = value.center ? centerX : localX - radius + 'px';
var y = value.center ? centerY : localY - radius + 'px';
return { radius: radius, scale: scale, x: x, y: y, centerX: centerX, centerY: centerY };
};
var ripple = {
/* eslint-disable max-statements */
show: function show(e, el) {
var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
if (!el._ripple || !el._ripple.enabled) {
return;
}
var container = document.createElement('span');
var animation = document.createElement('span');
container.appendChild(animation);
container.className = 'v-ripple__container';
if (value.class) {
container.className += ' ' + value.class;
}
var _calculate = calculate(e, el, value),
radius = _calculate.radius,
scale = _calculate.scale,
x = _calculate.x,
y = _calculate.y,
centerX = _calculate.centerX,
centerY = _calculate.centerY;
var size = radius * 2 + 'px';
animation.className = 'v-ripple__animation';
animation.style.width = size;
animation.style.height = size;
el.appendChild(container);
var computed = window.getComputedStyle(el);
if (computed.position === 'static') {
el.style.position = 'relative';
el.dataset.previousPosition = 'static';
}
animation.classList.add('v-ripple__animation--enter');
animation.classList.add('v-ripple__animation--visible');
transform(animation, 'translate(' + x + ', ' + y + ') scale3d(' + scale + ',' + scale + ',' + scale + ')');
opacity(animation, 0);
animation.dataset.activated = String(performance.now());
setTimeout(function () {
animation.classList.remove('v-ripple__animation--enter');
animation.classList.add('v-ripple__animation--in');
transform(animation, 'translate(' + centerX + ', ' + centerY + ') scale3d(1,1,1)');
opacity(animation, 0.25);
setTimeout(function () {
animation.classList.remove('v-ripple__animation--in');
animation.classList.add('v-ripple__animation--out');
opacity(animation, 0);
}, 300);
}, 0);
},
hide: function hide(el) {
if (!el || !el._ripple || !el._ripple.enabled) return;
var ripples = el.getElementsByClassName('v-ripple__animation');
if (ripples.length === 0) return;
var animation = ripples[ripples.length - 1];
if (animation.dataset.isHiding) return;else animation.dataset.isHiding = 'true';
var diff = performance.now() - Number(animation.dataset.activated);
var delay = Math.max(200 - diff, 0);
setTimeout(function () {
animation.classList.remove('v-ripple__animation--out');
setTimeout(function () {
var ripples = el.getElementsByClassName('v-ripple__animation');
if (ripples.length === 1 && el.dataset.previousPosition) {
el.style.position = el.dataset.previousPosition;
delete el.dataset.previousPosition;
}
animation.parentNode && el.removeChild(animation.parentNode);
}, 300);
}, delay);
}
};
function isRippleEnabled(value) {
return typeof value === 'undefined' || !!value;
}
function rippleShow(e) {
var value = {};
var element = e.currentTarget;
if (!element) return;
value.center = element._ripple.centered;
if (element._ripple.class) {
value.class = element._ripple.class;
}
ripple.show(e, element, value);
}
function rippleHide(e) {
ripple.hide(e.currentTarget);
}
function updateRipple(el, binding, wasEnabled) {
var enabled = isRippleEnabled(binding.value);
if (!enabled) {
ripple.hide(el);
}
el._ripple = el._ripple || {};
el._ripple.enabled = enabled;
var value = binding.value || {};
if (value.center) {
el._ripple.centered = true;
}
if (value.class) {
el._ripple.class = binding.value.class;
}
if (value.circle) {
el._ripple.circle = value.circle;
}
if (enabled && !wasEnabled) {
if ('ontouchstart' in window) {
el.addEventListener('touchend', rippleHide, false);
el.addEventListener('touchcancel', rippleHide, false);
}
el.addEventListener('mousedown', rippleShow, false);
el.addEventListener('mouseup', rippleHide, false);
el.addEventListener('mouseleave', rippleHide, false);
// Anchor tags can be dragged, causes other hides to fail - #1537
el.addEventListener('dragstart', rippleHide, false);
} else if (!enabled && wasEnabled) {
removeListeners(el);
}
}
function removeListeners(el) {
el.removeEventListener('mousedown', rippleShow, false);
el.removeEventListener('touchend', rippleHide, false);
el.removeEventListener('touchcancel', rippleHide, false);
el.removeEventListener('mouseup', rippleHide, false);
el.removeEventListener('mouseleave', rippleHide, false);
el.removeEventListener('dragstart', rippleHide, false);
}
function directive(el, binding) {
updateRipple(el, binding, false);
}
function unbind(el) {
delete el._ripple;
removeListeners(el);
}
function update(el, binding) {
if (binding.value === binding.oldValue) {
return;
}
var wasEnabled = isRippleEnabled(binding.oldValue);
updateRipple(el, binding, wasEnabled);
}
export default {
bind: directive,
unbind: unbind,
update: update
};
//# sourceMappingURL=ripple.js.map