From d27b293495660b3b107e8210d9aa9ceed399099f Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Tue, 27 Jan 2015 21:20:46 +0300 Subject: [PATCH 1/2] Scope optimization --- src/ripple.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ripple.js b/src/ripple.js index 06fd1ff..0f4e3ac 100644 --- a/src/ripple.js +++ b/src/ripple.js @@ -1,4 +1,4 @@ -;(function($){ +;(function($, document, Math){ $.ripple = function(selector, options) { var self = this; @@ -132,4 +132,4 @@ $(document).on(self.defaults.on, self.selector, Trigger); }; -})(jQuery); +})(jQuery, document, Math); From 4bc47627aa0786a125b27e26b8ff819c077bd2e2 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Tue, 27 Jan 2015 21:21:35 +0300 Subject: [PATCH 2/2] Added non-minified versions to dist --- Gruntfile.js | 21 +++++-- bower.json | 4 +- dist/ripple.css | 49 ++++++++++++++++ dist/ripple.js | 139 ++++++++++++++++++++++++++++++++++++++++++++ dist/ripple.min.css | 2 +- dist/ripple.min.js | 4 +- package.json | 43 +++++++------- 7 files changed, 232 insertions(+), 30 deletions(-) create mode 100644 dist/ripple.css create mode 100644 dist/ripple.js diff --git a/Gruntfile.js b/Gruntfile.js index e98c6eb..b1c801a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,9 +10,21 @@ module.exports = function(grunt) { pkg: pkg, + concat: { + options: { + banner: "/*! " + banner + " */\n\n" + }, + copy: { + files: { + 'dist/ripple.js': ["src/ripple.js"], + 'dist/ripple.css': ["src/ripple.css"] + } + } + }, + cssmin: { options: { - banner: "/* " + banner + " */", + banner: "/*! " + banner + " */", preserveComments: 'some' }, main: { @@ -28,7 +40,7 @@ module.exports = function(grunt) { uglify: { options: { - banner: "/* " + banner + " */\n", + banner: "/*! " + banner + " */\n", footer: "$.ripple.version = \"<%= pkg.version %>\";", preserveComments: 'some' }, @@ -55,11 +67,12 @@ module.exports = function(grunt) { } }); + grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.registerTask('default', ['jshint', 'uglify', 'cssmin']); - grunt.registerTask('develop', ['jshint', 'uglify', 'cssmin', 'watch']); + grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'cssmin']); + grunt.registerTask('develop', ['jshint', 'concat', 'uglify', 'cssmin', 'watch']); }; diff --git a/bower.json b/bower.json index 3c10fc2..c6c7f28 100644 --- a/bower.json +++ b/bower.json @@ -6,8 +6,8 @@ ], "description": "Adds Material style ripple to anything", "main": [ - "src/ripple.js", - "src/ripple.css" + "dist/ripple.js", + "dist/ripple.css" ], "keywords": [ "material", diff --git a/dist/ripple.css b/dist/ripple.css new file mode 100644 index 0000000..c02d535 --- /dev/null +++ b/dist/ripple.css @@ -0,0 +1,49 @@ +/*! Ripple.js v1.2.1 + * The MIT License (MIT) + * Copyright (c) 2014 Jacob Kelley */ + +.has-ripple { + position: relative; + overflow: hidden; + -webkit-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); +} +.ripple { + display: block; + position: absolute; + pointer-events: none; + border-radius: 50%; + + -webkit-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); + + background: #fff; + opacity: 1; +} +.ripple-animate { + -webkit-animation: ripple; + -o-animation: ripple; + animation: ripple; +} +@-webkit-keyframes ripple { + 100% { + opacity: 0; + -webkit-transform: scale(2); + transform: scale(2); + } +} +@-o-keyframes ripple { + 100% { + opacity: 0; + -o-transform: scale(2); + transform: scale(2); + } +} +@keyframes ripple { + 100% { + opacity: 0; + transform: scale(2); + } +} diff --git a/dist/ripple.js b/dist/ripple.js new file mode 100644 index 0000000..693a6e4 --- /dev/null +++ b/dist/ripple.js @@ -0,0 +1,139 @@ +/*! Ripple.js v1.2.1 + * The MIT License (MIT) + * Copyright (c) 2014 Jacob Kelley */ + +;(function($, document, Math){ + $.ripple = function(selector, options) { + + var self = this; + + var _log = self.log = function() { + if(self.defaults.debug && console && console.log) { + console.log.apply(console, arguments); + } + }; + + self.selector = selector; + self.defaults = { + debug: false, + on: 'mousedown', + + opacity: 0.4, + color: "auto", + multi: false, + + duration: 0.7, + rate: function(pxPerSecond) { + return pxPerSecond; + }, + + easing: 'linear' + }; + + self.defaults = $.extend({}, self.defaults, options); + + var Trigger = function(e) { + + var $this = $(this); + var $ripple; + var settings; + + $this.addClass('has-ripple'); + + // This instances settings + settings = $.extend({}, self.defaults, $this.data()); + + // Create the ripple element + if ( settings.multi || (!settings.multi && $this.find(".ripple").length === 0) ) { + $ripple = $("").addClass("ripple"); + $ripple.appendTo($this); + + _log('Create: Ripple'); + + // Set ripple size + if (!$ripple.height() && !$ripple.width()) { + var size = Math.max($this.outerWidth(), $this.outerHeight()); + $ripple.css({ + height: size, + width: size + }); + _log('Set: Ripple size'); + } + + // Give the user the ability to change the rate of the animation + // based on element width + if(settings.rate && typeof settings.rate == "function") { + + // rate = pixels per second + var rate = Math.round( $ripple.width() / settings.duration ); + + // new amount of pixels per second + var filteredRate = settings.rate(rate); + + // Determine the new duration for the animation + var newDuration = ( $ripple.width() / filteredRate); + + // Set the new duration if it has not changed + if(settings.duration.toFixed(2) !== newDuration.toFixed(2)) { + _log('Update: Ripple Duration', { + from: settings.duration, + to: newDuration + }); + settings.duration = newDuration; + } + } + + // Set the color and opacity + var color = (settings.color == "auto") ? $this.css('color') : settings.color; + var css = { + animationDuration: (settings.duration).toString() + 's', + animationTimingFunction: settings.easing, + background: color, + opacity: settings.opacity + }; + + _log('Set: Ripple CSS', css); + $ripple.css(css); + } + + // Ensure we always have the ripple element + if(!settings.multi) { + _log('Set: Ripple Element'); + $ripple = $this.find(".ripple"); + } + + // Kill animation + _log('Destroy: Ripple Animation'); + $ripple.removeClass("ripple-animate"); + + + // Retrieve coordinates + var x = e.pageX - $this.offset().left - $ripple.width() / 2; + var y = e.pageY - $this.offset().top - $ripple.height() / 2; + + /** + * We want to delete the ripple elements if we allow multiple so we dont sacrifice any page + * performance. We don't do this on single ripples because once it has rendered, we only + * need to trigger paints thereafter. + */ + if(settings.multi) { + _log('Set: Ripple animationend event'); + $ripple.one('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() { + _log('Note: Ripple animation ended'); + _log('Destroy: Ripple'); + $(this).remove(); + }); + } + + // Set position and animate + _log('Set: Ripple location'); + _log('Set: Ripple animation'); + $ripple.css({ + top: y + 'px', + left: x + 'px' + }).addClass("ripple-animate"); + }; + + $(document).on(self.defaults.on, self.selector, Trigger); + }; +})(jQuery, document, Math); diff --git a/dist/ripple.min.css b/dist/ripple.min.css index a1f1cbb..2d3fdb3 100644 --- a/dist/ripple.min.css +++ b/dist/ripple.min.css @@ -1,4 +1,4 @@ -/* Ripple.js v1.2.1 +/*! Ripple.js v1.2.1 * The MIT License (MIT) * Copyright (c) 2014 Jacob Kelley */ .has-ripple{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ripple{display:block;position:absolute;pointer-events:none;border-radius:50%;-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0);background:#fff;opacity:1}.ripple-animate{-webkit-animation:ripple;-o-animation:ripple;animation:ripple}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2);transform:scale(2)}}@keyframes ripple{100%{opacity:0;transform:scale(2)}} \ No newline at end of file diff --git a/dist/ripple.min.js b/dist/ripple.min.js index 96bb425..f4fad20 100644 --- a/dist/ripple.min.js +++ b/dist/ripple.min.js @@ -1,4 +1,4 @@ -/* Ripple.js v1.2.1 +/*! Ripple.js v1.2.1 * The MIT License (MIT) * Copyright (c) 2014 Jacob Kelley */ -!function(a){a.ripple=function(b,c){var d=this,e=d.log=function(){d.defaults.debug&&console&&console.log&&console.log.apply(console,arguments)};d.selector=b,d.defaults={debug:!1,on:"mousedown",opacity:.4,color:"auto",multi:!1,duration:.7,rate:function(a){return a},easing:"linear"},d.defaults=a.extend({},d.defaults,c);var f=function(b){var c,f,g=a(this);if(g.addClass("has-ripple"),f=a.extend({},d.defaults,g.data()),f.multi||!f.multi&&0===g.find(".ripple").length){if(c=a("").addClass("ripple"),c.appendTo(g),e("Create: Ripple"),!c.height()&&!c.width()){var h=Math.max(g.outerWidth(),g.outerHeight());c.css({height:h,width:h}),e("Set: Ripple size")}if(f.rate&&"function"==typeof f.rate){var i=Math.round(c.width()/f.duration),j=f.rate(i),k=c.width()/j;f.duration.toFixed(2)!==k.toFixed(2)&&(e("Update: Ripple Duration",{from:f.duration,to:k}),f.duration=k)}var l="auto"==f.color?g.css("color"):f.color,m={animationDuration:f.duration.toString()+"s",animationTimingFunction:f.easing,background:l,opacity:f.opacity};e("Set: Ripple CSS",m),c.css(m)}f.multi||(e("Set: Ripple Element"),c=g.find(".ripple")),e("Destroy: Ripple Animation"),c.removeClass("ripple-animate");var n=b.pageX-g.offset().left-c.width()/2,o=b.pageY-g.offset().top-c.height()/2;f.multi&&(e("Set: Ripple animationend event"),c.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function(){e("Note: Ripple animation ended"),e("Destroy: Ripple"),a(this).remove()})),e("Set: Ripple location"),e("Set: Ripple animation"),c.css({top:o+"px",left:n+"px"}).addClass("ripple-animate")};a(document).on(d.defaults.on,d.selector,f)}}(jQuery);$.ripple.version = "1.2.1"; \ No newline at end of file +!function(a,b,c){a.ripple=function(d,e){var f=this,g=f.log=function(){f.defaults.debug&&console&&console.log&&console.log.apply(console,arguments)};f.selector=d,f.defaults={debug:!1,on:"mousedown",opacity:.4,color:"auto",multi:!1,duration:.7,rate:function(a){return a},easing:"linear"},f.defaults=a.extend({},f.defaults,e);var h=function(b){var d,e,h=a(this);if(h.addClass("has-ripple"),e=a.extend({},f.defaults,h.data()),e.multi||!e.multi&&0===h.find(".ripple").length){if(d=a("").addClass("ripple"),d.appendTo(h),g("Create: Ripple"),!d.height()&&!d.width()){var i=c.max(h.outerWidth(),h.outerHeight());d.css({height:i,width:i}),g("Set: Ripple size")}if(e.rate&&"function"==typeof e.rate){var j=c.round(d.width()/e.duration),k=e.rate(j),l=d.width()/k;e.duration.toFixed(2)!==l.toFixed(2)&&(g("Update: Ripple Duration",{from:e.duration,to:l}),e.duration=l)}var m="auto"==e.color?h.css("color"):e.color,n={animationDuration:e.duration.toString()+"s",animationTimingFunction:e.easing,background:m,opacity:e.opacity};g("Set: Ripple CSS",n),d.css(n)}e.multi||(g("Set: Ripple Element"),d=h.find(".ripple")),g("Destroy: Ripple Animation"),d.removeClass("ripple-animate");var o=b.pageX-h.offset().left-d.width()/2,p=b.pageY-h.offset().top-d.height()/2;e.multi&&(g("Set: Ripple animationend event"),d.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function(){g("Note: Ripple animation ended"),g("Destroy: Ripple"),a(this).remove()})),g("Set: Ripple location"),g("Set: Ripple animation"),d.css({top:p+"px",left:o+"px"}).addClass("ripple-animate")};a(b).on(f.defaults.on,f.selector,h)}}(jQuery,document,Math);$.ripple.version = "1.2.1"; \ No newline at end of file diff --git a/package.json b/package.json index ad4385b..be81b86 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,24 @@ { - "name": "Ripple.js", - "author": "Jacob Kelley", - "version": "1.2.1", - "repository": { - "type": "git", - "url": "https://github.com/jakiestfu/Ripple.js.git" - }, - "scripts": { - "bower": "./node_modules/bower/bin/bower install", - "build": "./node_modules/grunt-cli/bin/grunt", - "build-watch": "./node_modules/grunt-cli/bin/grunt develop" - }, - "devDependencies": { - "bower": "*", - "grunt": "~0.4.1", - "grunt-cli": "~0.1.9", - "grunt-contrib-watch": "~0.5.3", - "grunt-contrib-uglify": "0.2.5", - "grunt-contrib-jshint": "0.8.0", - "grunt-contrib-cssmin": "0.10.0" - } + "name": "Ripple.js", + "author": "Jacob Kelley", + "version": "1.2.1", + "repository": { + "type": "git", + "url": "https://github.com/jakiestfu/Ripple.js.git" + }, + "scripts": { + "bower": "./node_modules/bower/bin/bower install", + "build": "./node_modules/grunt-cli/bin/grunt", + "build-watch": "./node_modules/grunt-cli/bin/grunt develop" + }, + "devDependencies": { + "bower": "*", + "grunt": "~0.4.1", + "grunt-cli": "~0.1.9", + "grunt-contrib-concat": "^0.5.0", + "grunt-contrib-cssmin": "0.10.0", + "grunt-contrib-jshint": "0.8.0", + "grunt-contrib-uglify": "0.2.5", + "grunt-contrib-watch": "~0.5.3" + } }