Программно вызывать rippleJs

Question

Ripple.JS ( GitHub | Demo | CDN) добавляет пульсацию стиля материала к элементам HTML следующим образом:

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

Q: Есть ли способ программно вызвать это?

Демо в jsFiddle & Stack Snippets

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

body {
  padding: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
  

<button class="btn btn-primary btn-lg" >Click Me</button>

Answer 1

Пульсации создаются локальной функцией с именем Trigger внутри библиотеки. Поскольку он объявлен локально, мы не можем выполнить его напрямую, но мы можем добавить пользовательский тип события в options.on установка.

Единственное препятствие на дороге, с которым мы столкнемся, состоит в том, что все колебания должны откуда-то происходить (как интуитивно, так и программно), и функция триггера будет полагаться на получение этой информации из координат события, переданных как этот ripple.js # L107:

var x = e.pageX - $this.offset().left - $ripple.width() / 2;
var y = e.pageY - $this.offset().top - $ripple.height() / 2;

Чтобы подделать это, нам нужно с нуля создать и запустить наш собственный объект события jQuery, а затем заглушить pageX а также pageY свойства, найдя центр наш наш новый объект, используя $.offset, .outerWidth(), а также .outerHeight() как это

$.ripple(".btn", {
  on: 'mousedown ripple', // The event(s) to trigger a ripple effect
});

function InvokeRipple($el) {
  var event = jQuery.Event("ripple");
  event.pageX = $el.offset().left + $el.outerWidth() / 2;
  event.pageY = $el.offset().top + $el.outerHeight() / 2;
  $($el).trigger(event)
}

Демо в jsFiddle & Stack Snippets

$.ripple(".btn", {
  on: 'mousedown ripple', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

$("#click").click(function() {
  InvokeRipple($("#info"))
});

function InvokeRipple($el) {
 var event = jQuery.Event("ripple");
  event.pageX = $el.offset().left + $el.outerWidth() / 2;
  event.pageY = $el.offset().top + $el.outerHeight() / 2;
  $($el).trigger(event)
}

body {
  padding: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
  

<button class="btn btn-primary btn-lg" id="click" >Invoke Ripple on other button</button>
<button class="btn btn-info btn-lg" id="info" >More Info</button>