'use strict';
(function (factory){
if(typeof define==='function'&&define.amd){
define(['jquery'], factory);
}else if(typeof exports==='object'){
module.exports=factory;
}else{
factory(jQuery);
}}(
function($){
let globDur=400;
let globEse='cubic-bezier(.4,0,.2,1)';
let stylFix=$(document.createElement('style')).appendTo(document.head).addClass('ripple-custom-config')
let stylSet=$(document.createElement('style')).appendTo(document.head).addClass('ripple-coordinates')
let stylObj={};
let stylPos={};
let nowRuns=0;
let pointerdown=('ontouchstart') ? 'mousedown touchstart':'mousedown'
$.fn.ripple=function(opt){
let def={
ease: globEse,
duration: globDur,
onclick: false,
disable: false,
type: 'pointed', // 'centered' | 'icon' | 'trigger' | 'target'
size: 1,
};
let selectorIDX='ripple-'+Math.round(Math.random()*1E9);
$(this).each((i,v)=> {
let $elm=$(v);
if(typeof opt==='string'){
switch(opt){
case 'onmousedown':
$elm[0].rippleVars.ondown=true;
$elm
.unbind('click', $elm[0].rippleVars.callback)
.bind(pointerdown, $elm[0].rippleVars.callback);
break;
case 'onclick':
$elm[0].rippleVars.ondown=false;
$elm
.unbind(pointerdown, $elm[0].rippleVars.callback)
.bind('click', $elm[0].rippleVars.callback);
break;
case 'enable':
$elm
.removeClass('ripple-disabled')
.bind($elm[0].rippleVars.ondown ? pointerdown:'click', $elm[0].rippleVars.callback);
break;
case 'disable':
$elm
.addClass('ripple-disabled')
.unbind('click', $elm[0].rippleVars.callback)
.unbind(pointerdown, $elm[0].rippleVars.callback);
break;
case 'ripple':
$elm
.removeClass('ripple-disabled')
.trigger($elm[0].rippleVars.ondown ? 'mousedown':'click');
break;
case 'dismiss':
$elm
.removeClass('ripple')
break;
default:
break;
}
return;
}
def=$.extend(def, opt);
def.duration=(typeof def.duration=='number' ? def.duration:((/^([2-9]|10)x$/i).test(def.duration) ? def.duration.toLowerCase():globDur))
let rePos=e => {
let rc, x1, y1, px, py;
if(e.type=='touchstart'){
rc=e.currentTarget.getBoundingClientRect()
x1=e.originalEvent.touches[0].clientX - rc.left
y1=e.originalEvent.touches[0].clientY - rc.top
px=e.originalEvent.touches[0].pageX
py=e.originalEvent.touches[0].pageY
}else{
x1=e.offsetX
y1=e.offsetY
px=e.pageX
py=e.pageY
}
if((x1==0&&y1==0)||($elm[0].rippleVars.type=='trigger')) stylPos[$elm[0].rippleVars.rid]=``;
else {
let off=$elm.offset()
stylPos[$elm[0].rippleVars.rid]=`
.ripple-element.${ $elm[0].rippleVars.rid }.ripple::after {
left: ${ 100*((px-off.left)/$elm.outerWidth())-100 }%;
top: ${ 100*((py-off.top)/$elm.outerHeight()) }%;
}`;
}
let stylTxt='';
for(let s in stylPos){
stylTxt +=stylPos[s];
}
stylSet.html(stylTxt);
};
$elm[0].rippleVars={
idx: selectorIDX,
rid: 'ripple-running-'+Math.round(Math.random()*1E9),
size: parseInt(Math.min(Math.max(def.size, 1), 10)),
ease: def.ease,
type: def.type,
time: ((/^([2-9]|10)x$/i).test(def.duration) ? parseInt(def.duration)*globDur:def.duration),
timeout: 0,
ondown: !def.onclick,
callback: (e)=> {
if(e.type=='mousedown'&&'ontouchstart' in document.body) return;
if($elm.hasClass('ripple-disabled')){
return;
}
if($elm[0].rippleVars.timeout==0){
nowRuns++;
if($elm[0].rippleVars.type=='pointed') rePos(e);
$elm.addClass('ripple');
}else{
$elm.removeClass('ripple');
if($elm[0].rippleVars.type=='pointed') rePos(e);
requestAnimationFrame(()=>{
$elm.addClass('ripple');
})
}
clearTimeout($elm[0].rippleVars.timeout);
$elm[0].rippleVars.timeout=setTimeout(()=>{
$elm.removeClass('ripple');
$elm[0].rippleVars.timeout=0;
nowRuns--;
if(nowRuns <=0){
nowRuns=0;
stylPos={};
stylSet.html('');
}}, $elm[0].rippleVars.time+16)
}};
let iconClass='';
switch($elm[0].rippleVars.type){
case 'icon':
iconClass=' ripple-icon'
break;
case 'icon-big':
iconClass=' ripple-icon-big'
break;
case 'icon-small':
iconClass=' ripple-icon-small'
break;
default:
break;
}
$elm
.addClass('ripple-'+(def.type=='trigger' ? 'trigger':'element')+iconClass+(def.disable ? ' ripple-disabled':'')+' '+$elm[0].rippleVars.idx)
.addClass($elm[0].rippleVars.rid)
.addClass($elm[0].rippleVars.size >=2&&$elm[0].rippleVars.size <=10 ? 'ripple-anim-'+$elm[0].rippleVars.size+'x':'')
.addClass((/^([2-9]|10)x$/i).test(def.duration) ? 'ripple-time-'+parseInt(def.duration)+'x':'')
.bind($elm[0].rippleVars.ondown ? pointerdown:'click', $elm[0].rippleVars.callback)
.click(function cl(e){
if($elm[0].rippleVars.timeout==0&&$elm[0].rippleVars.ondown&&e.offsetY==0&&e.offsetX==0) $elm.trigger('mousedown', e);
})
});
if(typeof opt==='object'){
def=$.extend(def, opt);
if((def.duration!==globDur&&(/^([2-9]|10)x$/i).test(def.duration)===false)||def.ease!==globEse) stylObj[selectorIDX] =
`.ripple-${ def.type=='trigger' ? 'trigger':'element' }.${ selectorIDX }.ripple${ def.type=='trigger' ? ' .ripple-target':'' }::after {`+
`${ def.ease!==globEse ? 'animation-timing-function: '+def.ease+';':'' }`+
`${ (def.duration!==globDur&&(/^([2-9]|10)x$/i).test(def.duration)===false) ? 'animation-duration: '+def.duration+'ms;':'' }`+
`}`
let stylTxt='';
for(let s in stylObj){
stylTxt +=stylObj[s];
}
stylFix.html(stylTxt);
}
return this;
}
return $;
}));