View file upload/js/themehouse/uix_classic_dark/ripple.js

File size: 2.6Kb
$(document).ready(function(){


  var targetItems = '.button, .u-ripple, .blockLink, .tabs-tab'; //CSS selector

  //Ripple function. Rippler? ripplemaker?
  var makeRipple = function(e){
    var _this = this;
    if (_this.className.indexOf('disabled') !== -1) return;

    var container = _this.querySelector('.ripple-container');
    if (!container) {
        container = document.createElement('div');
        container.className = 'ripple-container';
        _this.appendChild(container);
    }
    var containerRect = container.getBoundingClientRect();
    var rippleSize = containerRect.width;

    var newRipple = document.createElement('div');
    newRipple.className = "ripple";
    newRipple.style.width = rippleSize + 'px';
    newRipple.style.height = rippleSize + 'px';
    newRipple.style.top = (e.clientY - containerRect.top - (rippleSize / 2)) + 'px';
    newRipple.style.left = (e.clientX - containerRect.left - (rippleSize / 2)) + 'px';

    container.appendChild(newRipple);

    setTimeout(function(){
      container.removeChild(container.children[0]);
    }, 1000);

  };

  //Ripple on mousedown
  var buttons = document.querySelectorAll(targetItems);
  for (var i = 0; i < buttons.length; i++) {



    var _this = buttons[i];



    if (typeof(_this.className) !== 'undefined' && _this.className.indexOf('JsOnly') === -1 && _this.className.indexOf('DisableOnSubmit') === -1) {

	    if (_this.tagName === 'INPUT') {
		var btn = document.createElement('button');

		for(var x = 0, len = _this.attributes.length; x < len; ++x){
			var nodeName  = _this.attributes.item(x).nodeName;
			var nodeValue = _this.attributes.item(x).nodeValue;
			btn.setAttribute(nodeName, nodeValue);
		}

		btn.innerHTML = _this.innerHTML + _this.value;

		if (_this.parentNode) {
			_this.parentNode.replaceChild(btn, _this);
			_this= btn;
		}
	    }
	    _this.className += ' rippleButton';
	    _this.addEventListener('mousedown', makeRipple);

	    _this.addEventListener('click', function(e){

		    var href = _this.href;

		    if (href && _this.className.indexOf('OverlayTrigger') === -1) {
		      var mouseDownAt = new Date().getTime();
		      var clickHandler = function(e){
		        e.preventDefault();
		        var clickAt = new Date().getTime();
		        var difference = clickAt - mouseDownAt;
		        if (difference < 400) {
		          setTimeout(function(){ window.location.href = href; }, 400-difference)
		        } else {
		          window.location.href = href;
		        }
		        _this.removeEventListener('click', clickHandler);
		      }
		      _this.addEventListener('click', clickHandler);
		    }
	    });
	}
  }
});