Skip to content

Commit 578522c

Browse files
jakiestfujakiestfu
committed
Merge pull request #4 from TrySound/master
scope and dist
2 parents 6288b13 + 4bc4762 commit 578522c

8 files changed

+234
-32
lines changed

‎Gruntfile.js

+17-4
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,21 @@ module.exports = function(grunt) {
1010

1111
pkg: pkg,
1212

13+
concat: {
14+
options: {
15+
banner: "/*! " + banner + " */\n\n"
16+
},
17+
copy: {
18+
files: {
19+
'dist/ripple.js': ["src/ripple.js"],
20+
'dist/ripple.css': ["src/ripple.css"]
21+
}
22+
}
23+
},
24+
1325
cssmin: {
1426
options: {
15-
banner: "/* " + banner + " */",
27+
banner: "/*! " + banner + " */",
1628
preserveComments: 'some'
1729
},
1830
main: {
@@ -28,7 +40,7 @@ module.exports = function(grunt) {
2840

2941
uglify: {
3042
options: {
31-
banner: "/* " + banner + " */\n",
43+
banner: "/*! " + banner + " */\n",
3244
footer: "$.ripple.version = \"<%= pkg.version %>\";",
3345
preserveComments: 'some'
3446
},
@@ -55,11 +67,12 @@ module.exports = function(grunt) {
5567
}
5668
});
5769

70+
grunt.loadNpmTasks('grunt-contrib-concat');
5871
grunt.loadNpmTasks('grunt-contrib-cssmin');
5972
grunt.loadNpmTasks('grunt-contrib-jshint');
6073
grunt.loadNpmTasks('grunt-contrib-uglify');
6174
grunt.loadNpmTasks('grunt-contrib-watch');
6275

63-
grunt.registerTask('default', ['jshint', 'uglify', 'cssmin']);
64-
grunt.registerTask('develop', ['jshint', 'uglify', 'cssmin', 'watch']);
76+
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'cssmin']);
77+
grunt.registerTask('develop', ['jshint', 'concat', 'uglify', 'cssmin', 'watch']);
6578
};

‎bower.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
],
77
"description": "Adds Material style ripple to anything",
88
"main": [
9-
"src/ripple.js",
10-
"src/ripple.css"
9+
"dist/ripple.js",
10+
"dist/ripple.css"
1111
],
1212
"keywords": [
1313
"material",

‎dist/ripple.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*! Ripple.js v1.2.1
2+
* The MIT License (MIT)
3+
* Copyright (c) 2014 Jacob Kelley */
4+
5+
.has-ripple {
6+
position: relative;
7+
overflow: hidden;
8+
-webkit-transform: translate3d(0,0,0);
9+
-o-transform: translate3d(0,0,0);
10+
transform: translate3d(0,0,0);
11+
}
12+
.ripple {
13+
display: block;
14+
position: absolute;
15+
pointer-events: none;
16+
border-radius: 50%;
17+
18+
-webkit-transform: scale(0);
19+
-o-transform: scale(0);
20+
transform: scale(0);
21+
22+
background: #fff;
23+
opacity: 1;
24+
}
25+
.ripple-animate {
26+
-webkit-animation: ripple;
27+
-o-animation: ripple;
28+
animation: ripple;
29+
}
30+
@-webkit-keyframes ripple {
31+
100% {
32+
opacity: 0;
33+
-webkit-transform: scale(2);
34+
transform: scale(2);
35+
}
36+
}
37+
@-o-keyframes ripple {
38+
100% {
39+
opacity: 0;
40+
-o-transform: scale(2);
41+
transform: scale(2);
42+
}
43+
}
44+
@keyframes ripple {
45+
100% {
46+
opacity: 0;
47+
transform: scale(2);
48+
}
49+
}

‎dist/ripple.js

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/*! Ripple.js v1.2.1
2+
* The MIT License (MIT)
3+
* Copyright (c) 2014 Jacob Kelley */
4+
5+
;(function($, document, Math){
6+
$.ripple = function(selector, options) {
7+
8+
var self = this;
9+
10+
var _log = self.log = function() {
11+
if(self.defaults.debug && console && console.log) {
12+
console.log.apply(console, arguments);
13+
}
14+
};
15+
16+
self.selector = selector;
17+
self.defaults = {
18+
debug: false,
19+
on: 'mousedown',
20+
21+
opacity: 0.4,
22+
color: "auto",
23+
multi: false,
24+
25+
duration: 0.7,
26+
rate: function(pxPerSecond) {
27+
return pxPerSecond;
28+
},
29+
30+
easing: 'linear'
31+
};
32+
33+
self.defaults = $.extend({}, self.defaults, options);
34+
35+
var Trigger = function(e) {
36+
37+
var $this = $(this);
38+
var $ripple;
39+
var settings;
40+
41+
$this.addClass('has-ripple');
42+
43+
// This instances settings
44+
settings = $.extend({}, self.defaults, $this.data());
45+
46+
// Create the ripple element
47+
if ( settings.multi || (!settings.multi && $this.find(".ripple").length === 0) ) {
48+
$ripple = $("<span></span>").addClass("ripple");
49+
$ripple.appendTo($this);
50+
51+
_log('Create: Ripple');
52+
53+
// Set ripple size
54+
if (!$ripple.height() && !$ripple.width()) {
55+
var size = Math.max($this.outerWidth(), $this.outerHeight());
56+
$ripple.css({
57+
height: size,
58+
width: size
59+
});
60+
_log('Set: Ripple size');
61+
}
62+
63+
// Give the user the ability to change the rate of the animation
64+
// based on element width
65+
if(settings.rate && typeof settings.rate == "function") {
66+
67+
// rate = pixels per second
68+
var rate = Math.round( $ripple.width() / settings.duration );
69+
70+
// new amount of pixels per second
71+
var filteredRate = settings.rate(rate);
72+
73+
// Determine the new duration for the animation
74+
var newDuration = ( $ripple.width() / filteredRate);
75+
76+
// Set the new duration if it has not changed
77+
if(settings.duration.toFixed(2) !== newDuration.toFixed(2)) {
78+
_log('Update: Ripple Duration', {
79+
from: settings.duration,
80+
to: newDuration
81+
});
82+
settings.duration = newDuration;
83+
}
84+
}
85+
86+
// Set the color and opacity
87+
var color = (settings.color == "auto") ? $this.css('color') : settings.color;
88+
var css = {
89+
animationDuration: (settings.duration).toString() + 's',
90+
animationTimingFunction: settings.easing,
91+
background: color,
92+
opacity: settings.opacity
93+
};
94+
95+
_log('Set: Ripple CSS', css);
96+
$ripple.css(css);
97+
}
98+
99+
// Ensure we always have the ripple element
100+
if(!settings.multi) {
101+
_log('Set: Ripple Element');
102+
$ripple = $this.find(".ripple");
103+
}
104+
105+
// Kill animation
106+
_log('Destroy: Ripple Animation');
107+
$ripple.removeClass("ripple-animate");
108+
109+
110+
// Retrieve coordinates
111+
var x = e.pageX - $this.offset().left - $ripple.width() / 2;
112+
var y = e.pageY - $this.offset().top - $ripple.height() / 2;
113+
114+
/**
115+
* We want to delete the ripple elements if we allow multiple so we dont sacrifice any page
116+
* performance. We don't do this on single ripples because once it has rendered, we only
117+
* need to trigger paints thereafter.
118+
*/
119+
if(settings.multi) {
120+
_log('Set: Ripple animationend event');
121+
$ripple.one('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
122+
_log('Note: Ripple animation ended');
123+
_log('Destroy: Ripple');
124+
$(this).remove();
125+
});
126+
}
127+
128+
// Set position and animate
129+
_log('Set: Ripple location');
130+
_log('Set: Ripple animation');
131+
$ripple.css({
132+
top: y + 'px',
133+
left: x + 'px'
134+
}).addClass("ripple-animate");
135+
};
136+
137+
$(document).on(self.defaults.on, self.selector, Trigger);
138+
};
139+
})(jQuery, document, Math);

‎dist/ripple.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ripple.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+22-21
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
{
2-
"name": "Ripple.js",
3-
"author": "Jacob Kelley",
4-
"version": "1.2.1",
5-
"repository": {
6-
"type": "git",
7-
"url": "https://github.com/jakiestfu/Ripple.js.git"
8-
},
9-
"scripts": {
10-
"bower": "./node_modules/bower/bin/bower install",
11-
"build": "./node_modules/grunt-cli/bin/grunt",
12-
"build-watch": "./node_modules/grunt-cli/bin/grunt develop"
13-
},
14-
"devDependencies": {
15-
"bower": "*",
16-
"grunt": "~0.4.1",
17-
"grunt-cli": "~0.1.9",
18-
"grunt-contrib-watch": "~0.5.3",
19-
"grunt-contrib-uglify": "0.2.5",
20-
"grunt-contrib-jshint": "0.8.0",
21-
"grunt-contrib-cssmin": "0.10.0"
22-
}
2+
"name": "Ripple.js",
3+
"author": "Jacob Kelley",
4+
"version": "1.2.1",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/jakiestfu/Ripple.js.git"
8+
},
9+
"scripts": {
10+
"bower": "./node_modules/bower/bin/bower install",
11+
"build": "./node_modules/grunt-cli/bin/grunt",
12+
"build-watch": "./node_modules/grunt-cli/bin/grunt develop"
13+
},
14+
"devDependencies": {
15+
"bower": "*",
16+
"grunt": "~0.4.1",
17+
"grunt-cli": "~0.1.9",
18+
"grunt-contrib-concat": "^0.5.0",
19+
"grunt-contrib-cssmin": "0.10.0",
20+
"grunt-contrib-jshint": "0.8.0",
21+
"grunt-contrib-uglify": "0.2.5",
22+
"grunt-contrib-watch": "~0.5.3"
23+
}
2324
}

‎src/ripple.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
;(function($){
1+
;(function($, document, Math){
22
$.ripple = function(selector, options) {
33

44
var self = this;
@@ -132,4 +132,4 @@
132132

133133
$(document).on(self.defaults.on, self.selector, Trigger);
134134
};
135-
})(jQuery);
135+
})(jQuery, document, Math);

0 commit comments

Comments
 (0)