CODEWITHSUNDEEP
javascriptjquerycssangularjsangularjs-directive
vanntile
vanntile

Reputation: 2787

Material design ripple from jQuery to AngularJS

I have some simple code for a material design ripple effect in CSS that can be used on every element needed just by applying an .ripple class on it (but it must have width and height). The code is the following:

(function(window, $) {
  $(function() {
    $('.ripple').on('click', function(event) {
      event.preventDefault();

      var $div = $('<div/>'),
        btnOffset = $(this).offset(),
        xPos = event.pageX - btnOffset.left,
        yPos = event.pageY - btnOffset.top;

      $div.addClass('ripple-effect');
      var $ripple = $(".ripple-effect");

      $ripple.css("height", $(this).height());
      $ripple.css("width", $(this).height());
      $div.css({
          top: yPos - ($ripple.height() / 2),
          left: xPos - ($ripple.width() / 2),
          background: $(this).data("ripple-color")
        })
        .appendTo($(this));

      window.setTimeout(function() {
        $div.remove();
      }, 2000);
    });
  });
})(window, jQuery);
body {
  text-align: center;
}
button {
  position: relative;
  border: none;
  outline: none;
  cursor: pointer;
  background: #89669b;
  color: white;
  padding: 18px 60px;
  border-radius: 2px;
  font-size: 22px;
}
.fab {
  border-radius: 50%;
  margin: 0;
  padding: 20px;
}
.material {
  position: relative;
  color: white;
  margin: 20px auto;
  height: 400px;
  width: 500px;
  background: #f45673;
}
.ripple {
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;
  animation: ripple-animation 2s;
}
@keyframes ripple-animation {
  from {
    transform: scale(1);
    opacity: 0.4;
  }
  to {
    transform: scale(100);
    opacity: 0;
  }
}
<!DOCTYPE html>
<html lang="en">

<head itemscope itemtype="http://schema.org/WebSite">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Material Design Ripple</title>
</head>

<body>
  <h1>Material Design Buttons</h1>
  <h3>Just add the class ripple to anything and use the "data-ripple-color" property to set the ripple color</h3>

  <button class="ripple">Login</button>
  <button class="ripple" data-ripple-color="#89669b" style="background:white; color:black;">Login</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

My question is: can you change the JavaScript function code to AngularJS in the order not to use jQuery anymore and have the same result? The purpose is to use it in a main project.

Thank you in advance.

Upvotes: 1

Views: 1386

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You could write this code inside directive, basically that will do the DOM manipulation for you. This directive will start work whenever it find it found class="ripple"

Directive

app.directive('ripple', function($timeout) {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.on('click', function(event) {
                event.preventDefault();

                var $div = angular.element('<div></div>'),
                    btnOffset = $(this).offset(),
                    xPos = event.pageX - btnOffset.left,
                    yPos = event.pageY - btnOffset.top;

                $div.addClass('ripple-effect');
                var $ripple = angular.element(".ripple-effect");

                $ripple.css("height", $(this).height());
                $ripple.css("width", $(this).height());
                $div.css({
                        top: yPos - ($ripple.height() / 2),
                        left: xPos - ($ripple.width() / 2),
                        background: $(this).data("ripple-color")
                    })
                    .appendTo($(this));

                $timeout(function() {
                    $div.remove();
                }, 2000);
            });
        }
    }

});

Upvotes: 4

Related Questions