v 1.2.0

.gitignore

@@ -0,0 +1,5 @@
+.idea
+nbproject
+/bower_components
+/node_modules
+index.html

README.md

@@ -0,0 +1,63 @@
+#Rippleria
+
+A lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations.
+
+##[DEMO](http://nsept.github.io/rippleria/)
+
+##Installation
+
+```bash
+$ bower i -S rippleria
+```
+
+##Usage
+
+1. Load the stylesheet ```jquery.rippleria.css``` in the head section and the JavaScript ```jquery.rippleria.js``` after jQuery library.
+    ```html
+    <link rel="stylesheet" href="jquery.rippleria.css">
+    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="jquery.rippleria.js"></script>
+    ```
+
+2. Add the ```data-rippleria``` attribute to the DOM element where you want to implement the ripple click effect.
+    ```html
+    <button data-rippleria>Default</button>
+    ```
+
+3. Customize the ripple click effect using html5 ```data``` attributes.
+    ```html
+    <button data-rippleria 
+      data-rippleria-color="blue" 
+      data-rippleria-easing="ease-in" 
+      data-rippleria-duration="5000">
+      Click me
+    </button>
+    ```
+4. The CSS modifiers.
+    * ```.rippleria-dark```: dark ripple effect
+
+5. You can also apply the ripple click effect to any block elements and pass in the options via JavaScript.
+    ```js
+    $('.selector').rippleria({
+
+      // aniamtion speed
+      duration: 750,
+
+      // custom easing effect
+      easing: 'linear',
+
+      // custom color
+      color: undefined
+
+    });
+
+    $('.selector').rippleria("changeDuration", "500");
+    $('.selector').rippleria("changeEasing", "ease-in-out");
+    $('.selector').rippleria("changeColor", "blue");
+    ```
+
+##Browsers
+Firefox, Chrome, IE10+, Opera, Safari
+
+##License
+MIT license.

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "rippleria",
+  "version": "1.2.0",
+  "license": "MIT",
+  "main": ["js/jquery.rippleria.js", "css/jquery.rippleria.css"],
+  "homepage": "https://github.com/nsept/rippleria",
+  "description": "jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations",
+  "authors": [
+    "Nsept <nsept@ya.ru>"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": ">=1.7"
+  }
+}

css/jquery.rippleria.css

@@ -0,0 +1,23 @@
+.rippleria-ink {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 100%;
+  transform: scale(0);
+  -webkit-transform: scale(0);
+  z-index: 10;
+}
+.rippleria-dark .rippleria-ink {
+  background: rgba(0, 0, 0, 0.2);
+}
+@keyframes rippleria {
+  100% {
+    opacity: 0;
+    transform: scale(2.5);
+  }
+}
+@-webkit-keyframes rippleria {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(2.5);
+  }
+}

gulpfile.js

@@ -0,0 +1,30 @@
+var gulp = require('gulp'),
+  uglify = require('gulp-uglify'),
+  minifycss = require('gulp-minify-css'),
+  rename = require('gulp-rename'),
+  less = require('gulp-less');
+
+gulp.task('minjs', function() {
+  return gulp.src(['./js/jquery.rippleria.js'])
+    .pipe(uglify())
+    .pipe(rename({
+      suffix: ".min"
+    }))
+    .pipe(gulp.dest('js'));
+});
+
+gulp.task('less', function() {
+  return gulp.src(['./less/jquery.rippleria.less'])
+    .pipe(less())
+    .pipe(gulp.dest('./css'))
+    .pipe(minifycss())
+    .pipe(rename({
+      suffix: ".min"
+    }))
+    .pipe(gulp.dest('./css'));
+});
+
+
+gulp.task('default', ['less', 'minjs'], function() {
+
+});

js/jquery.rippleria.js

@@ -0,0 +1,120 @@
+;(function($, window, document, undefined) {
+  function Rippleria(element, options) {
+    var base = this;
+
+    this.$element = $(element);
+    this.options = $.extend({}, Rippleria.Defaults, this._getOptionsFromElementAttributes(), options);
+
+    this._prepare();
+    this._bind();
+  };
+
+  Rippleria.prototype._bind = function() {
+    var elem = this.$element,
+      options = this.options,
+      ink, d, x, y, isTouchSupported, eventType;
+
+    isTouchSupported = 'ontouchend' in window || window.DocumentTouch && document instanceof DocumentTouch;
+
+    eventType = isTouchSupported == true ? 'touchend.rippleria' : 'click.rippleria';
+
+    this.$element.bind(eventType, function(e) {
+      var ink = $("<div class='rippleria-ink'></div>");
+      elem.append(ink);
+
+      if (options.color != undefined) {
+        ink.css('background-color', options.color);
+      }
+
+      ink.css('animation', 'rippleria ' + options.duration / 1000 + 's ' + options.easing);
+
+      setTimeout(function() {
+        ink.remove();
+      }, parseFloat(options.duration));
+
+      if(!ink.height() && !ink.width()) {
+        d = Math.max(elem.outerWidth(), elem.outerHeight());
+        ink.css({height: d, width: d});
+      }
+
+      if (isTouchSupported == true) {
+        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+        x = touch.pageX - elem.offset().left - ink.width() / 2;
+        y = touch.pageY - elem.offset().top - ink.height() / 2;
+      } else {
+        x = e.pageX - elem.offset().left - ink.width() / 2;
+        y = e.pageY - elem.offset().top - ink.height() / 2;
+      }
+
+      ink.css({top: y + 'px', left: x + 'px'});
+    });
+  }
+
+  Rippleria.prototype._prepare = function() {
+    var elem = this.$element;
+
+    if (elem.css('position') == 'static') {
+      elem.css('position', 'relative');
+    }
+
+    elem.css('overflow', 'hidden');
+
+    if(elem.find('img')[0] != undefined) {
+      elem.on('dragstart', function(e) { e.preventDefault(); });
+    }
+  };
+
+  Rippleria.prototype._getOptionsFromElementAttributes = function() {
+    var base = this;
+      attrs = {};
+
+    $.each(Rippleria.Defaults, function(option, val) {
+      var attr = base.$element.attr('data-rippleria-' + option);
+      if (attr != null) {
+        attrs[option] = attr;
+      }
+    });
+
+    return attrs;
+  };
+
+  Rippleria.prototype.changeColor = function(color) {
+    this.options.color = color;
+  }
+
+  Rippleria.prototype.changeEasing = function(easing) {
+    this.options.easing = easing;
+  }
+
+  Rippleria.prototype.changeDuration = function(duration) {
+    this.options.duration = duration;
+  }
+
+  Rippleria.Defaults = {
+    duration: 750,
+    easing: 'linear',
+    color: undefined
+  };
+
+  $.fn.rippleria = function(option) {
+    var args = Array.prototype.slice.call(arguments, 1);
+
+    return this.each(function() {
+      var $this = $(this),
+        data = $this.data('rippleria');
+
+      if (!data) {
+        data = new Rippleria(this, typeof option == 'object' && option);
+        $this.data('rippleria', data);
+      }
+
+      if (typeof option == 'string' && option.charAt(0) !== '_') {
+        data[option].apply(data, args);
+      }
+    });
+  };
+
+  $(function() {
+    $('[data-rippleria]').rippleria();
+  });
+})(window.jQuery, window, document);

less/jquery.rippleria.less

@@ -0,0 +1,23 @@
+@rippleria-default-color: rgba(255, 255, 255, 0.2);
+@rippleria-dark-color: rgba(0, 0, 0, 0.2);
+
+.rippleria-ink {
+  position: absolute;
+  background: @rippleria-default-color;
+  border-radius: 100%;
+  transform: scale(0);
+  -webkit-transform: scale(0);
+  z-index: 10;
+}
+
+.rippleria-dark .rippleria-ink {
+  background: @rippleria-dark-color;
+}
+
+@keyframes rippleria {
+  100% {opacity: 0; transform: scale(2.5);}
+}
+
+@-webkit-keyframes rippleria {
+  100% {opacity: 0; -webkit-transform: scale(2.5);}
+}

package.json

@@ -0,0 +1,10 @@
+{
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "gulp-cssnano": "^2.1.0",
+    "gulp-less": "^3.0.5",
+    "gulp-minify-css": "^1.2.3",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^1.5.1"
+  }
+}