From 4843e3c31f44181fe4f849262e69747b1d75d024 Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Thu, 29 Aug 2013 16:07:24 +0530 Subject: [PATCH 1/7] stopAfterTime & Wrap only once. Add an option of stopAfterTime Add code so that it gets wrapped only once. --- jquery.vibrate.js | 185 ++++++++++++++++++++++++---------------------- 1 file changed, 98 insertions(+), 87 deletions(-) diff --git a/jquery.vibrate.js b/jquery.vibrate.js index b5f087c..2cb52e8 100644 --- a/jquery.vibrate.js +++ b/jquery.vibrate.js @@ -2,17 +2,19 @@ * jquery.vibrate.js * jQuery Vibrating Button Plugin * - * Author: Alberto Arena - * Version: 1.2 - * Date: 16/03/2013 - * Demo: http://www.dev4web.eu/projects/jquery.vibrate - * Support: https://github.com/albertoarena/jQuery-Vibrate + * Author: Alberto Arena + * Modified: Aziz Khambati + * Version: 1.2.1 + * Date: 16/03/2013 + * Demo: http://www.dev4web.eu/projects/jquery.vibrate + * Support: https://github.com/albertoarena/jQuery-Vibrate * * Changelog - * 1.2 16 mar 2013: optimized code and improved speed - * 1.1 29 oct 2011: added vibrateClass and overClass parameters - * 1.0.1 17 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter - * 1.0 14 dec 2010: released first version + * 1.2.1 29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once. + * 1.2 16 mar 2013: optimized code and improved speed + * 1.1 29 oct 2011: added vibrateClass and overClass parameters + * 1.0.117 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter + * 1.0 14 dec 2010: released first version */ (function($) { $.fn.vibrate = function(options){ @@ -30,120 +32,129 @@ speed: 50, trigger: "mouseover", overEffect: "stop", - overClass: "", - vibrateClass: "" + overClass: "", + vibrateClass: "" }; $this.defaults = $.extend($this.defaults, options); $this.defaults.speedBackup = $this.defaults.speed; $this.data('vibrate',$this); $this.data('vibrate.status',false); - // Cached variables - var outerWidth = $this.outerWidth(); - var outerHeight = $this.outerHeight(); - // Applies wrap - var css1 = { - 'float': $this.css("float"), - 'margin': $this.css("margin-top")+' '+$this.css("margin-right")+' '+$this.css("margin-bottom")+' '+$this.css("margin-left"), - 'display': $this.css("display"), - 'width': outerWidth, - 'height': outerHeight, - 'padding': '0', - 'border': '0' - } - var css2 = { - 'width': outerWidth, - 'height': outerHeight, - 'padding': '0', - 'margin': '0', - 'border': '0', - 'display': 'block' + if('true' != $this.data('vibrate-initiated')) { + var css1 = { + 'float': $this.css("float"), + 'margin': $this.css("margin-top")+' '+$this.css("margin-right")+' '+$this.css("margin-bottom")+' '+$this.css("margin-left"), + 'display': $this.css("display"), + 'width': $this.outerWidth(), + 'height': $this.outerHeight() + 4, + 'padding': '0', + 'border': '0' + } + var css2 = { + 'width': $this.outerWidth() + 4, + 'height': $this.outerHeight() + 4, + 'padding': '0', + 'margin': '0', + 'border': '0', + 'display': 'block' + } + $this.wrap('
'); + $this.parent().css( css2 ); + $this.parent().parent().css( css1 ); + $this.css({ "margin": "0" }); + $this.data('vibrate-initiated', 'true'); } - $this.wrap('
'); - $this.parent().css( css2 ); - $this.parent().parent().css( css1 ); - $this.css({ "margin": "0" }); // Normalizes trigger - var triggerStop = ""; - if ( $this.defaults.trigger == "mouseover" ) - triggerStop = "mouseout"; - else if ( $this.defaults.trigger == "focus" ) - triggerStop = "blur"; + if($this.defaults.stopAfterTime) { + setTimeout( function() { + $this.vibrationStart(); + setTimeout( function() { + $this.vibrationStop(); + if($this.defaults.callBack) { + $this.defaults.callBack(); + } + }, $this.defaults.stopAfterTime*1000); + }, Math.round(Math.random*50)); + } + else { + var triggerStop = ""; + if ( $this.defaults.trigger == "mouseover" ) + triggerStop = "mouseout"; + else if ( $this.defaults.trigger == "focus" ) + triggerStop = "blur"; + + // Normalizes over effect + if ( $this.defaults.overEffect != "stop" && $this.defaults.overEffect != "invert" ) + $this.defaults.overEffect = ""; - // Normalizes over effect - if ( $this.defaults.overEffect != "stop" && $this.defaults.overEffect != "invert" ) - $this.defaults.overEffect = ""; - - if ( $this.defaults.reverse ) { - if ( $this.defaults.overEffect != "" ) { + if ( $this.defaults.reverse ) { + if ( $this.defaults.overEffect != "" ) { + $this.bind($this.defaults.trigger,function(){ + $this.addClass($this.defaults.overClass); + if ( $this.defaults.overEffect == "stop" ) + $this.vibrationStop(); + else if ( $this.defaults.overEffect == "invert" ) { + $this.defaults.speed = Math.round( $this.defaults.speed / 3 ); + } + }).bind(triggerStop,function(){ + $this.removeClass($this.defaults.overClass); + if ( $this.defaults.overEffect == "invert" ) { + $this.defaults.speed = $this.defaults.speedBackup; + } else { + $this.vibrationStart(); + } + }); + } + setTimeout(function(){$this.vibrationStart();},Math.round(Math.random*1000)); + } else { $this.bind($this.defaults.trigger,function(){ - $this.addClass($this.defaults.overClass); - if ( $this.defaults.overEffect == "stop" ) - $this.vibrationStop(); - else if ( $this.defaults.overEffect == "invert" ) { - $this.defaults.speed = Math.round( $this.defaults.speed / 3 ); - } + $this.vibrationStart(); }).bind(triggerStop,function(){ - $this.removeClass($this.defaults.overClass); - if ( $this.defaults.overEffect == "invert" ) { - $this.defaults.speed = $this.defaults.speedBackup; - } else { - $this.vibrationStart(); - } + $this.vibrationStop(); }); } - setTimeout(function(){$this.vibrationStart();},Math.round(Math.random*100)); - } else { - $this.bind($this.defaults.trigger,function(){ - $this.vibrationStart(); - }).bind(triggerStop,function(){ - $this.vibrationStop(); - }); + } - }) $.fn.vibrationStart = function() { - var $$this = $(this); - if ( $.type($$this.data("vibrate")) !== "undefined" ) { - $$this.data("vibrate.status",true); - $$this.css({margin:"0 0 0 0"}); - $$this.addClass( $$this.data('vibrate').defaults.vibrateClass ); - $$this.vibrationLoop(); + if ( $.type($(this).data("vibrate")) !== "undefined" ) { + $(this).data("vibrate.status",true); + $(this).css({margin:"0 0 0 0"}); + $(this).addClass( $(this).data('vibrate').defaults.vibrateClass ); + $(this).vibrationLoop(); } } $.fn.vibrationStop = function() { - var $$this = $(this); - if ( $.type($$this.data("vibrate")) !== "undefined" ) { - $$this.stop(false,true); - $$this.removeClass( $$this.data('vibrate').defaults.vibrateClass ); - $$this.data("vibrate.status",false); + if ( $.type($(this).data("vibrate")) !== "undefined" ) { + $(this).stop(false,true); + $(this).removeClass( $(this).data('vibrate').defaults.vibrateClass ); + $(this).data("vibrate.status",false); } } $.fn.vibrationLoop = function() { - var $$this = $(this); - if ( $.type( $$this.data("vibrate")) !== "undefined" ) { - //var $this = $$this.data("vibrate"); - if ( $$this.data("vibrate.status") == true ) { - var css = { marginTop: 0, marginLeft: 0 } - var position = $$this.position(); + if ( $.type($(this).data("vibrate")) !== "undefined" ) { + var $this = $(this).data("vibrate"); + if ( $(this).data("vibrate.status") == true ) { + var css = { marginTop: "0px", marginLeft: "0px" } + var position = $(this).position(); - if ( parseInt($$this.css("marginTop")) > 0 ) { + if ( parseInt($(this).css("marginTop")) > 0 ) { css.marginTop = "-1px"; css.marginLeft = "-1px"; } else { css.marginTop = "1px"; css.marginLeft = "1px"; } - $$this.animate(css, $$this.data("vibrate").defaults.speed,function(){ - $$this.vibrationLoop(); + $(this).animate(css,$this.defaults.speed,function(){ + $(this).vibrationLoop(); }); } else { - $$this.css({margin:"0 0 0 0"}); + $(this).css({margin:"0 0 0 0"}); } } } From b3f20fc85505747357e29707f23b13740c4d1d3c Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Thu, 29 Aug 2013 16:40:08 +0530 Subject: [PATCH 2/7] Modified Readme and Minified --- README | 58 ++++++++++++++++++++++++++++++++----------- jquery.vibrate.min.js | 26 +++++++++---------- 2 files changed, 55 insertions(+), 29 deletions(-) diff --git a/README b/README index eb9ca8a..9caef49 100644 --- a/README +++ b/README @@ -1,34 +1,62 @@ -== PROJECT WEBSITE == +# Project Website Demo and documentation: http://www.dev4web.eu/projects/jquery.vibrate/ -== ABOUT == +Will add a demo for Fixed Period of Vibrate soon. + +# About jQuery Vibrate Plugin is a jQuery component, self-contained, that allows you to have "vibrating" tags in your page, like buttons, DIVs, etc. -It is very simple to use and integrate, and lightweight (only 2.93 kB in minified version)! +It is very simple to use and integrate, and lightweight (only 3.54 kB in minified version)! -== DOCUMENTATION == +# Documentation The Vibrate plugin has some configurable options. Below is an example of available options and their defaults: +## Vibration based on events and triggers +### Code + +``` $('.vibrate').vibrate({ speed: 50, // Vibration speed in milliseconds trigger: "mouseover", // Triggering event reverse: false, // Reverse behaviour overEffect: "stop", // Over effect, see details below vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!) - overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!) -}) + overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!) +}); +``` + +### Options +`speed`: default value is 50 milliseconds, but can be changed + +`trigger`: it is the triggering event. Default value is "mouseover", another acceptable value is "focus"; other events are not managed + +`reverse`: default value is false; if true, the behaviour will be reversed. E.g., if triggering event is "mouseover", the tag will always vibrate but stop when mouse is over. + +`overEffect`: this is used only when "reverse" parameter is true. The appliable values are "" (empty string), "stop" or "invert". Default value is "stop": -== OPTIONS == -speed: default value is 50 milliseconds, but can be changed +- `overEffect:"stop"` (default value): when mouse is over the vibration will be stopped and it will start again when mouse is out; +- `overEffect:""` (empty string): when mouse is over the vibration will continue without stopping; -trigger: it is the triggering event. Default value is "mouseover", another acceptable value is "focus"; other events are not managed +`vibrateClass`: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") -reverse: default value is false; if true, the behaviour will be reversed. E.g., if triggering event is "mouseover", the tag will always vibrate but stop when mouse is over. +`overClass`: name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "") + +## Fixed Period of Vibrate +### Code + +``` +$('.vibrate').vibrate({ + speed: 50, // Vibration speed in milliseconds + stopAfterTime: 5 // Stop Vibrating after a fixed time in seconds + vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!) + overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!) +}); +``` -overEffect: this is used only when "reverse" parameter is true. The appliable values are "" (empty string), "stop" or "invert". Default value is "stop": -- "stop" (default value): when mouse is over the vibration will be stopped and it will start again when mouse is out; -- "" (empty string): when mouse is over the vibration will continue without stopping; +### Options +`speed`: default value is 50 milliseconds, but can be changed -vibrateClass: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") +`stopAfterTime`: Stop Vibrating after a fixed time in seconds. No default value. If not provided will follow the vibration based on events and triggers. Providing this it will ignore values of `trigger`, `reverse`, `overEffect` -overClass: name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "") +`vibrateClass`: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") +`overClass`: name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "") diff --git a/jquery.vibrate.min.js b/jquery.vibrate.min.js index 0e8cc18..592f6c6 100644 --- a/jquery.vibrate.min.js +++ b/jquery.vibrate.min.js @@ -2,20 +2,18 @@ * jquery.vibrate.js * jQuery Vibrating Button Plugin * - * Author: Alberto Arena - * Version: 1.2 - * Date: 16/03/2013 - * Demo: http://www.dev4web.eu/projects/jquery.vibrate - * Support: https://github.com/albertoarena/jQuery-Vibrate + * Author: Alberto Arena + * Modified: Aziz Khambati + * Version: 1.2.1 + * Date: 16/03/2013 + * Demo: http://www.dev4web.eu/projects/jquery.vibrate + * Support: https://github.com/albertoarena/jQuery-Vibrate * * Changelog - * 1.2 16 mar 2013: optimized code and improved speed - * 1.1 29 oct 2011: added vibrateClass and overClass parameters - * 1.0.1 17 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter - * 1.0 14 dec 2010: released first version + * 1.2.1 29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once. + * 1.2 16 mar 2013: optimized code and improved speed + * 1.1 29 oct 2011: added vibrateClass and overClass parameters + * 1.0.117 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter + * 1.0 14 dec 2010: released first version */ -(function(b){b.fn.vibrate=function(f){b(this).each(function(){var a=b(this);"undefined"==b.type(a.attr("id"))&&a.attr("id","vibrate_"+Math.round(1E17*Math.random()));a.id=a.attr("id");a.defaults={reverse:!1,speed:50,trigger:"mouseover",overEffect:"stop",overClass:"",vibrateClass:""};a.defaults=b.extend(a.defaults,f);a.defaults.speedBackup=a.defaults.speed;a.data("vibrate",a);a.data("vibrate.status",!1);var c=a.outerWidth(),e=a.outerHeight(),d={"float":a.css("float"),margin:a.css("margin-top")+" "+ -a.css("margin-right")+" "+a.css("margin-bottom")+" "+a.css("margin-left"),display:a.css("display"),width:c,height:e,padding:"0",border:"0"},c={width:c,height:e,padding:"0",margin:"0",border:"0",display:"block"};a.wrap("
");a.parent().css(c);a.parent().parent().css(d);a.css({margin:"0"});d="";"mouseover"==a.defaults.trigger?d="mouseout":"focus"==a.defaults.trigger&&(d="blur");"stop"!=a.defaults.overEffect&&"invert"!=a.defaults.overEffect&&(a.defaults.overEffect="");a.defaults.reverse? -(""!=a.defaults.overEffect&&a.bind(a.defaults.trigger,function(){a.addClass(a.defaults.overClass);"stop"==a.defaults.overEffect?a.vibrationStop():"invert"==a.defaults.overEffect&&(a.defaults.speed=Math.round(a.defaults.speed/3))}).bind(d,function(){a.removeClass(a.defaults.overClass);"invert"==a.defaults.overEffect?a.defaults.speed=a.defaults.speedBackup:a.vibrationStart()}),setTimeout(function(){a.vibrationStart()},Math.round(100*Math.random))):a.bind(a.defaults.trigger,function(){a.vibrationStart()}).bind(d, -function(){a.vibrationStop()})});b.fn.vibrationStart=function(){var a=b(this);"undefined"!==b.type(a.data("vibrate"))&&(a.data("vibrate.status",!0),a.css({margin:"0 0 0 0"}),a.addClass(a.data("vibrate").defaults.vibrateClass),a.vibrationLoop())};b.fn.vibrationStop=function(){var a=b(this);"undefined"!==b.type(a.data("vibrate"))&&(a.stop(!1,!0),a.removeClass(a.data("vibrate").defaults.vibrateClass),a.data("vibrate.status",!1))};b.fn.vibrationLoop=function(){var a=b(this);if("undefined"!==b.type(a.data("vibrate")))if(!0== -a.data("vibrate.status")){var c={marginTop:0,marginLeft:0};a.position();0
");n.parent().css(i);n.parent().parent().css(r);n.css({margin:"0"});n.data("vibrate-initiated","true")}if(n.defaults.stopAfterTime){setTimeout(function(){n.vibrationStart();setTimeout(function(){n.vibrationStop();if(n.defaults.callBack){n.defaults.callBack()}},n.defaults.stopAfterTime*1e3)},Math.round(Math.random*50))}else{var s="";if(n.defaults.trigger=="mouseover")s="mouseout";else if(n.defaults.trigger=="focus")s="blur";if(n.defaults.overEffect!="stop"&&n.defaults.overEffect!="invert")n.defaults.overEffect="";if(n.defaults.reverse){if(n.defaults.overEffect!=""){n.bind(n.defaults.trigger,function(){n.addClass(n.defaults.overClass);if(n.defaults.overEffect=="stop")n.vibrationStop();else if(n.defaults.overEffect=="invert"){n.defaults.speed=Math.round(n.defaults.speed/3)}}).bind(s,function(){n.removeClass(n.defaults.overClass);if(n.defaults.overEffect=="invert"){n.defaults.speed=n.defaults.speedBackup}else{n.vibrationStart()}})}setTimeout(function(){n.vibrationStart()},Math.round(Math.random*1e3))}else{n.bind(n.defaults.trigger,function(){n.vibrationStart()}).bind(s,function(){n.vibrationStop()})}}});e.fn.vibrationStart=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).data("vibrate.status",true);e(this).css({margin:"0 0 0 0"});e(this).addClass(e(this).data("vibrate").defaults.vibrateClass);e(this).vibrationLoop()}};e.fn.vibrationStop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).stop(false,true);e(this).removeClass(e(this).data("vibrate").defaults.vibrateClass);e(this).data("vibrate.status",false)}};e.fn.vibrationLoop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){var t=e(this).data("vibrate");if(e(this).data("vibrate.status")==true){var n={marginTop:"0px",marginLeft:"0px"};var r=e(this).position();if(parseInt(e(this).css("marginTop"))>0){n.marginTop="-1px";n.marginLeft="-1px"}else{n.marginTop="1px";n.marginLeft="1px"}e(this).animate(n,t.defaults.speed,function(){e(this).vibrationLoop()})}else{e(this).css({margin:"0 0 0 0"})}}}}})(jQuery) \ No newline at end of file From 55c35d8b1b7a209c74510b48e1c840b3c6190d45 Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Thu, 29 Aug 2013 16:41:33 +0530 Subject: [PATCH 3/7] Rename README to README.md --- README => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename README => README.md (100%) diff --git a/README b/README.md similarity index 100% rename from README rename to README.md From a28d0ed14b2df930b4a84629f8d509461893a52e Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Thu, 29 Aug 2013 23:40:46 +0530 Subject: [PATCH 4/7] Update README.md --- README.md | 46 +++++++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 9caef49..714680e 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,21 @@ -# Project Website -Demo and documentation: http://www.dev4web.eu/projects/jquery.vibrate/ - -Will add a demo for Fixed Period of Vibrate soon. - # About jQuery Vibrate Plugin is a jQuery component, self-contained, that allows you to have "vibrating" tags in your page, like buttons, DIVs, etc. It is very simple to use and integrate, and lightweight (only 3.54 kB in minified version)! +It was developed by [albertoarena](https://github.com/albertoarena). You can see his version here. The link below to a demo is his site. + +I modified it to add the Vibrate for a fixed Period and a callback function when the vibration gets over. + +# Demo + +## For Vibration based on events and triggers + +Check out [albertoarena](https://github.com/albertoarena)'s website: http://www.dev4web.eu/projects/jquery.vibrate/ + +## Fixed Period of Vibrate + +Go [here](http://termvader.github.io/jquery-vibrate/). + # Documentation The Vibrate plugin has some configurable options. Below is an example of available options and their defaults: @@ -20,25 +29,28 @@ $('.vibrate').vibrate({ reverse: false, // Reverse behaviour overEffect: "stop", // Over effect, see details below vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!) - overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!) + overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!) + callBack: function(){} // Function to call when vibration stops }); ``` ### Options -`speed`: default value is 50 milliseconds, but can be changed +`speed`: Default value is 50 milliseconds, but can be changed -`trigger`: it is the triggering event. Default value is "mouseover", another acceptable value is "focus"; other events are not managed +`trigger`: It is the triggering event. Default value is "mouseover", another acceptable value is "focus"; other events are not managed -`reverse`: default value is false; if true, the behaviour will be reversed. E.g., if triggering event is "mouseover", the tag will always vibrate but stop when mouse is over. +`reverse`: Default value is false; if true, the behaviour will be reversed. E.g., if triggering event is "mouseover", the tag will always vibrate but stop when mouse is over. -`overEffect`: this is used only when "reverse" parameter is true. The appliable values are "" (empty string), "stop" or "invert". Default value is "stop": +`overEffect`: This is used only when "reverse" parameter is true. The appliable values are "" (empty string), "stop" or "invert". Default value is "stop": -- `overEffect:"stop"` (default value): when mouse is over the vibration will be stopped and it will start again when mouse is out; -- `overEffect:""` (empty string): when mouse is over the vibration will continue without stopping; +- `overEffect:"stop"` (Default value): When mouse is over the vibration will be stopped and it will start again when mouse is out; +- `overEffect:""` (Empty string): When mouse is over the vibration will continue without stopping; -`vibrateClass`: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") +`vibrateClass`: Name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") + +`overClass`: Name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "") -`overClass`: name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "") +`callBack`: This function is called whenever vibration stops. ## Fixed Period of Vibrate ### Code @@ -48,15 +60,15 @@ $('.vibrate').vibrate({ speed: 50, // Vibration speed in milliseconds stopAfterTime: 5 // Stop Vibrating after a fixed time in seconds vibrateClass: "", // CSS class applied when vibrating (New in vers. 1.1!) - overClass: "", // CSS class applied when over effect is triggered (New in vers. 1.1!) + callBack: function(){} // Function to call when vibration stops }); ``` ### Options `speed`: default value is 50 milliseconds, but can be changed -`stopAfterTime`: Stop Vibrating after a fixed time in seconds. No default value. If not provided will follow the vibration based on events and triggers. Providing this it will ignore values of `trigger`, `reverse`, `overEffect` +`stopAfterTime`: Stop Vibrating after a fixed time in seconds. No default value. If not provided will follow the vibration based on events and triggers. Providing this it will ignore values of `trigger`, `reverse`, `overEffect`, `overClass` `vibrateClass`: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") -`overClass`: name of a CSS class applied when the over effect is triggered, and removed when it ends (default value "") +`callBack`: This function is called whenever vibration stops. From 97265ff1e41198078ed086145182f36d74481f72 Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Thu, 29 Aug 2013 23:57:32 +0530 Subject: [PATCH 5/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 714680e..b31e038 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ jQuery Vibrate Plugin is a jQuery component, self-contained, that allows you to have "vibrating" tags in your page, like buttons, DIVs, etc. It is very simple to use and integrate, and lightweight (only 3.54 kB in minified version)! -It was developed by [albertoarena](https://github.com/albertoarena). You can see his version here. The link below to a demo is his site. +It was developed by [albertoarena](https://github.com/albertoarena). You can see his version [here](https://github.com/albertoarena/jquery-vibrate). The link below to a demo is his site. I modified it to add the Vibrate for a fixed Period and a callback function when the vibration gets over. From 19a85e0f289461d14cd9dbc76f076e01271d7b15 Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Fri, 30 Aug 2013 00:49:27 +0530 Subject: [PATCH 6/7] Move callback to Vibrationstop Modified callBack so that it works even when trigger based is used --- jquery.vibrate.js | 24 +++++++++++++----------- jquery.vibrate.min.js | 4 ++-- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/jquery.vibrate.js b/jquery.vibrate.js index 2cb52e8..5757905 100644 --- a/jquery.vibrate.js +++ b/jquery.vibrate.js @@ -10,7 +10,7 @@ * Support: https://github.com/albertoarena/jQuery-Vibrate * * Changelog - * 1.2.1 29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once. + * 1.2.1 29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once, added callback when vibrations stops * 1.2 16 mar 2013: optimized code and improved speed * 1.1 29 oct 2011: added vibrateClass and overClass parameters * 1.0.117 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter @@ -37,23 +37,21 @@ }; $this.defaults = $.extend($this.defaults, options); $this.defaults.speedBackup = $this.defaults.speed; - $this.data('vibrate',$this); - $this.data('vibrate.status',false); // Applies wrap - if('true' != $this.data('vibrate-initiated')) { + if(true != $this.defaults.vibrateInitiated) { var css1 = { 'float': $this.css("float"), 'margin': $this.css("margin-top")+' '+$this.css("margin-right")+' '+$this.css("margin-bottom")+' '+$this.css("margin-left"), 'display': $this.css("display"), 'width': $this.outerWidth(), - 'height': $this.outerHeight() + 4, + 'height': $this.outerHeight(), 'padding': '0', 'border': '0' } var css2 = { - 'width': $this.outerWidth() + 4, - 'height': $this.outerHeight() + 4, + 'width': $this.outerWidth(), + 'height': $this.outerHeight(), 'padding': '0', 'margin': '0', 'border': '0', @@ -63,8 +61,11 @@ $this.parent().css( css2 ); $this.parent().parent().css( css1 ); $this.css({ "margin": "0" }); - $this.data('vibrate-initiated', 'true'); + $this.defaults.vibrateInitiated = true; } + + $this.data('vibrate',$this); + $this.data('vibrate.status',false); // Normalizes trigger if($this.defaults.stopAfterTime) { @@ -72,9 +73,6 @@ $this.vibrationStart(); setTimeout( function() { $this.vibrationStop(); - if($this.defaults.callBack) { - $this.defaults.callBack(); - } }, $this.defaults.stopAfterTime*1000); }, Math.round(Math.random*50)); } @@ -133,6 +131,10 @@ $(this).stop(false,true); $(this).removeClass( $(this).data('vibrate').defaults.vibrateClass ); $(this).data("vibrate.status",false); + if($(this).data('vibrate').defaults.callBack) { + $(this).data('vibrate').defaults.callBack(); + } + } } diff --git a/jquery.vibrate.min.js b/jquery.vibrate.min.js index 592f6c6..b8cd3f5 100644 --- a/jquery.vibrate.min.js +++ b/jquery.vibrate.min.js @@ -10,10 +10,10 @@ * Support: https://github.com/albertoarena/jQuery-Vibrate * * Changelog - * 1.2.1 29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once. + * 1.2.1 29 aug 2013: Added an option of stopAfterTime and added code so that it gets wrapped only once, added callback when vibrations stops * 1.2 16 mar 2013: optimized code and improved speed * 1.1 29 oct 2011: added vibrateClass and overClass parameters * 1.0.117 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter * 1.0 14 dec 2010: released first version */ -(function(e){e.fn.vibrate=function(t){e(this).each(function(){var n=e(this);if(e.type(n.attr("id"))=="undefined"){n.attr("id","vibrate_"+Math.round(Math.random()*1e17))}n.id=n.attr("id");n.defaults={reverse:false,speed:50,trigger:"mouseover",overEffect:"stop",overClass:"",vibrateClass:""};n.defaults=e.extend(n.defaults,t);n.defaults.speedBackup=n.defaults.speed;n.data("vibrate",n);n.data("vibrate.status",false);if("true"!=n.data("vibrate-initiated")){var r={"float":n.css("float"),margin:n.css("margin-top")+" "+n.css("margin-right")+" "+n.css("margin-bottom")+" "+n.css("margin-left"),display:n.css("display"),width:n.outerWidth(),height:n.outerHeight()+4,padding:"0",border:"0"};var i={width:n.outerWidth()+4,height:n.outerHeight()+4,padding:"0",margin:"0",border:"0",display:"block"};n.wrap("
");n.parent().css(i);n.parent().parent().css(r);n.css({margin:"0"});n.data("vibrate-initiated","true")}if(n.defaults.stopAfterTime){setTimeout(function(){n.vibrationStart();setTimeout(function(){n.vibrationStop();if(n.defaults.callBack){n.defaults.callBack()}},n.defaults.stopAfterTime*1e3)},Math.round(Math.random*50))}else{var s="";if(n.defaults.trigger=="mouseover")s="mouseout";else if(n.defaults.trigger=="focus")s="blur";if(n.defaults.overEffect!="stop"&&n.defaults.overEffect!="invert")n.defaults.overEffect="";if(n.defaults.reverse){if(n.defaults.overEffect!=""){n.bind(n.defaults.trigger,function(){n.addClass(n.defaults.overClass);if(n.defaults.overEffect=="stop")n.vibrationStop();else if(n.defaults.overEffect=="invert"){n.defaults.speed=Math.round(n.defaults.speed/3)}}).bind(s,function(){n.removeClass(n.defaults.overClass);if(n.defaults.overEffect=="invert"){n.defaults.speed=n.defaults.speedBackup}else{n.vibrationStart()}})}setTimeout(function(){n.vibrationStart()},Math.round(Math.random*1e3))}else{n.bind(n.defaults.trigger,function(){n.vibrationStart()}).bind(s,function(){n.vibrationStop()})}}});e.fn.vibrationStart=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).data("vibrate.status",true);e(this).css({margin:"0 0 0 0"});e(this).addClass(e(this).data("vibrate").defaults.vibrateClass);e(this).vibrationLoop()}};e.fn.vibrationStop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).stop(false,true);e(this).removeClass(e(this).data("vibrate").defaults.vibrateClass);e(this).data("vibrate.status",false)}};e.fn.vibrationLoop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){var t=e(this).data("vibrate");if(e(this).data("vibrate.status")==true){var n={marginTop:"0px",marginLeft:"0px"};var r=e(this).position();if(parseInt(e(this).css("marginTop"))>0){n.marginTop="-1px";n.marginLeft="-1px"}else{n.marginTop="1px";n.marginLeft="1px"}e(this).animate(n,t.defaults.speed,function(){e(this).vibrationLoop()})}else{e(this).css({margin:"0 0 0 0"})}}}}})(jQuery) \ No newline at end of file +(function(e){e.fn.vibrate=function(t){e(this).each(function(){var n=e(this);if(e.type(n.attr("id"))=="undefined"){n.attr("id","vibrate_"+Math.round(Math.random()*1e17))}n.id=n.attr("id");n.defaults={reverse:false,speed:50,trigger:"mouseover",overEffect:"stop",overClass:"",vibrateClass:""};n.defaults=e.extend(n.defaults,t);n.defaults.speedBackup=n.defaults.speed;if(true!=n.defaults.vibrateInitiated){var r={"float":n.css("float"),margin:n.css("margin-top")+" "+n.css("margin-right")+" "+n.css("margin-bottom")+" "+n.css("margin-left"),display:n.css("display"),width:n.outerWidth(),height:n.outerHeight(),padding:"0",border:"0"};var i={width:n.outerWidth(),height:n.outerHeight(),padding:"0",margin:"0",border:"0",display:"block"};n.wrap("
");n.parent().css(i);n.parent().parent().css(r);n.css({margin:"0"});n.defaults.vibrateInitiated=true}n.data("vibrate",n);n.data("vibrate.status",false);if(n.defaults.stopAfterTime){setTimeout(function(){n.vibrationStart();setTimeout(function(){n.vibrationStop()},n.defaults.stopAfterTime*1e3)},Math.round(Math.random*50))}else{var s="";if(n.defaults.trigger=="mouseover")s="mouseout";else if(n.defaults.trigger=="focus")s="blur";if(n.defaults.overEffect!="stop"&&n.defaults.overEffect!="invert")n.defaults.overEffect="";if(n.defaults.reverse){if(n.defaults.overEffect!=""){n.bind(n.defaults.trigger,function(){n.addClass(n.defaults.overClass);if(n.defaults.overEffect=="stop")n.vibrationStop();else if(n.defaults.overEffect=="invert"){n.defaults.speed=Math.round(n.defaults.speed/3)}}).bind(s,function(){n.removeClass(n.defaults.overClass);if(n.defaults.overEffect=="invert"){n.defaults.speed=n.defaults.speedBackup}else{n.vibrationStart()}})}setTimeout(function(){n.vibrationStart()},Math.round(Math.random*1e3))}else{n.bind(n.defaults.trigger,function(){n.vibrationStart()}).bind(s,function(){n.vibrationStop()})}}});e.fn.vibrationStart=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).data("vibrate.status",true);e(this).css({margin:"0 0 0 0"});e(this).addClass(e(this).data("vibrate").defaults.vibrateClass);e(this).vibrationLoop()}};e.fn.vibrationStop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).stop(false,true);e(this).removeClass(e(this).data("vibrate").defaults.vibrateClass);e(this).data("vibrate.status",false);if(e(this).data("vibrate").defaults.callBack){e(this).data("vibrate").defaults.callBack()}}};e.fn.vibrationLoop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){var t=e(this).data("vibrate");if(e(this).data("vibrate.status")==true){var n={marginTop:"0px",marginLeft:"0px"};var r=e(this).position();if(parseInt(e(this).css("marginTop"))>0){n.marginTop="-1px";n.marginLeft="-1px"}else{n.marginTop="1px";n.marginLeft="1px"}e(this).animate(n,t.defaults.speed,function(){e(this).vibrationLoop()})}else{e(this).css({margin:"0 0 0 0"})}}}}})(jQuery) \ No newline at end of file From d09849449931b87c9be85a923243d96bbc1b4ff4 Mon Sep 17 00:00:00 2001 From: Aziz Khambati Date: Fri, 30 Aug 2013 02:28:22 +0530 Subject: [PATCH 7/7] Dont vibrate when already are --- README.md | 2 ++ jquery.vibrate.js | 11 +++++++---- jquery.vibrate.min.js | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b31e038..31edc35 100644 --- a/README.md +++ b/README.md @@ -72,3 +72,5 @@ $('.vibrate').vibrate({ `vibrateClass`: name of a CSS class applied when the tag is vibrating, and removed when it stops (default value "") `callBack`: This function is called whenever vibration stops. + +Please note that the element will not vibrate when it already is. diff --git a/jquery.vibrate.js b/jquery.vibrate.js index 5757905..8887c8a 100644 --- a/jquery.vibrate.js +++ b/jquery.vibrate.js @@ -18,7 +18,10 @@ */ (function($) { $.fn.vibrate = function(options){ - + if(true == $(this).data("vibrate.status")) { + return; + } + $(this).each(function(){ var $this = $(this); if ( $.type($this.attr('id')) == "undefined" ) { @@ -39,7 +42,7 @@ $this.defaults.speedBackup = $this.defaults.speed; // Applies wrap - if(true != $this.defaults.vibrateInitiated) { + if('true' != $this.data('vibrate-initiated')) { var css1 = { 'float': $this.css("float"), 'margin': $this.css("margin-top")+' '+$this.css("margin-right")+' '+$this.css("margin-bottom")+' '+$this.css("margin-left"), @@ -61,7 +64,7 @@ $this.parent().css( css2 ); $this.parent().parent().css( css1 ); $this.css({ "margin": "0" }); - $this.defaults.vibrateInitiated = true; + $this.data('vibrate-initiated', 'true'); } $this.data('vibrate',$this); @@ -73,7 +76,7 @@ $this.vibrationStart(); setTimeout( function() { $this.vibrationStop(); - }, $this.defaults.stopAfterTime*1000); + }, $this.defaults.stopAfterTime*500); }, Math.round(Math.random*50)); } else { diff --git a/jquery.vibrate.min.js b/jquery.vibrate.min.js index b8cd3f5..f6abdf7 100644 --- a/jquery.vibrate.min.js +++ b/jquery.vibrate.min.js @@ -16,4 +16,4 @@ * 1.0.117 dec 2010: removed "overflow:hidden" attribute to both wrapping DIVS (to allow transparency outside the vibrating box); added overEffect parameter * 1.0 14 dec 2010: released first version */ -(function(e){e.fn.vibrate=function(t){e(this).each(function(){var n=e(this);if(e.type(n.attr("id"))=="undefined"){n.attr("id","vibrate_"+Math.round(Math.random()*1e17))}n.id=n.attr("id");n.defaults={reverse:false,speed:50,trigger:"mouseover",overEffect:"stop",overClass:"",vibrateClass:""};n.defaults=e.extend(n.defaults,t);n.defaults.speedBackup=n.defaults.speed;if(true!=n.defaults.vibrateInitiated){var r={"float":n.css("float"),margin:n.css("margin-top")+" "+n.css("margin-right")+" "+n.css("margin-bottom")+" "+n.css("margin-left"),display:n.css("display"),width:n.outerWidth(),height:n.outerHeight(),padding:"0",border:"0"};var i={width:n.outerWidth(),height:n.outerHeight(),padding:"0",margin:"0",border:"0",display:"block"};n.wrap("
");n.parent().css(i);n.parent().parent().css(r);n.css({margin:"0"});n.defaults.vibrateInitiated=true}n.data("vibrate",n);n.data("vibrate.status",false);if(n.defaults.stopAfterTime){setTimeout(function(){n.vibrationStart();setTimeout(function(){n.vibrationStop()},n.defaults.stopAfterTime*1e3)},Math.round(Math.random*50))}else{var s="";if(n.defaults.trigger=="mouseover")s="mouseout";else if(n.defaults.trigger=="focus")s="blur";if(n.defaults.overEffect!="stop"&&n.defaults.overEffect!="invert")n.defaults.overEffect="";if(n.defaults.reverse){if(n.defaults.overEffect!=""){n.bind(n.defaults.trigger,function(){n.addClass(n.defaults.overClass);if(n.defaults.overEffect=="stop")n.vibrationStop();else if(n.defaults.overEffect=="invert"){n.defaults.speed=Math.round(n.defaults.speed/3)}}).bind(s,function(){n.removeClass(n.defaults.overClass);if(n.defaults.overEffect=="invert"){n.defaults.speed=n.defaults.speedBackup}else{n.vibrationStart()}})}setTimeout(function(){n.vibrationStart()},Math.round(Math.random*1e3))}else{n.bind(n.defaults.trigger,function(){n.vibrationStart()}).bind(s,function(){n.vibrationStop()})}}});e.fn.vibrationStart=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).data("vibrate.status",true);e(this).css({margin:"0 0 0 0"});e(this).addClass(e(this).data("vibrate").defaults.vibrateClass);e(this).vibrationLoop()}};e.fn.vibrationStop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).stop(false,true);e(this).removeClass(e(this).data("vibrate").defaults.vibrateClass);e(this).data("vibrate.status",false);if(e(this).data("vibrate").defaults.callBack){e(this).data("vibrate").defaults.callBack()}}};e.fn.vibrationLoop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){var t=e(this).data("vibrate");if(e(this).data("vibrate.status")==true){var n={marginTop:"0px",marginLeft:"0px"};var r=e(this).position();if(parseInt(e(this).css("marginTop"))>0){n.marginTop="-1px";n.marginLeft="-1px"}else{n.marginTop="1px";n.marginLeft="1px"}e(this).animate(n,t.defaults.speed,function(){e(this).vibrationLoop()})}else{e(this).css({margin:"0 0 0 0"})}}}}})(jQuery) \ No newline at end of file +(function(e){e.fn.vibrate=function(t){if(true==e(this).data("vibrate.status")){return}e(this).each(function(){var n=e(this);if(e.type(n.attr("id"))=="undefined"){n.attr("id","vibrate_"+Math.round(Math.random()*1e17))}n.id=n.attr("id");n.defaults={reverse:false,speed:50,trigger:"mouseover",overEffect:"stop",overClass:"",vibrateClass:""};n.defaults=e.extend(n.defaults,t);n.defaults.speedBackup=n.defaults.speed;if("true"!=n.data("vibrate-initiated")){var r={"float":n.css("float"),margin:n.css("margin-top")+" "+n.css("margin-right")+" "+n.css("margin-bottom")+" "+n.css("margin-left"),display:n.css("display"),width:n.outerWidth(),height:n.outerHeight(),padding:"0",border:"0"};var i={width:n.outerWidth(),height:n.outerHeight(),padding:"0",margin:"0",border:"0",display:"block"};n.wrap("
");n.parent().css(i);n.parent().parent().css(r);n.css({margin:"0"});n.data("vibrate-initiated","true")}n.data("vibrate",n);n.data("vibrate.status",false);if(n.defaults.stopAfterTime){setTimeout(function(){n.vibrationStart();setTimeout(function(){n.vibrationStop()},n.defaults.stopAfterTime*500)},Math.round(Math.random*50))}else{var s="";if(n.defaults.trigger=="mouseover")s="mouseout";else if(n.defaults.trigger=="focus")s="blur";if(n.defaults.overEffect!="stop"&&n.defaults.overEffect!="invert")n.defaults.overEffect="";if(n.defaults.reverse){if(n.defaults.overEffect!=""){n.bind(n.defaults.trigger,function(){n.addClass(n.defaults.overClass);if(n.defaults.overEffect=="stop")n.vibrationStop();else if(n.defaults.overEffect=="invert"){n.defaults.speed=Math.round(n.defaults.speed/3)}}).bind(s,function(){n.removeClass(n.defaults.overClass);if(n.defaults.overEffect=="invert"){n.defaults.speed=n.defaults.speedBackup}else{n.vibrationStart()}})}setTimeout(function(){n.vibrationStart()},Math.round(Math.random*1e3))}else{n.bind(n.defaults.trigger,function(){n.vibrationStart()}).bind(s,function(){n.vibrationStop()})}}});e.fn.vibrationStart=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).data("vibrate.status",true);e(this).css({margin:"0 0 0 0"});e(this).addClass(e(this).data("vibrate").defaults.vibrateClass);e(this).vibrationLoop()}};e.fn.vibrationStop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){e(this).stop(false,true);e(this).removeClass(e(this).data("vibrate").defaults.vibrateClass);e(this).data("vibrate.status",false);if(e(this).data("vibrate").defaults.callBack){e(this).data("vibrate").defaults.callBack()}}};e.fn.vibrationLoop=function(){if(e.type(e(this).data("vibrate"))!=="undefined"){var t=e(this).data("vibrate");if(e(this).data("vibrate.status")==true){var n={marginTop:"0px",marginLeft:"0px"};var r=e(this).position();if(parseInt(e(this).css("marginTop"))>0){n.marginTop="-1px";n.marginLeft="-1px"}else{n.marginTop="1px";n.marginLeft="1px"}e(this).animate(n,t.defaults.speed,function(){e(this).vibrationLoop()})}else{e(this).css({margin:"0 0 0 0"})}}}}})(jQuery) \ No newline at end of file