added support for Infinity as a value for animation_play_duration

pweigand · Feb 12, 2016 · 83908de · 83908de
1 parent 5e872d9
commit 83908de
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -106,7 +106,9 @@ var ff = new freezeframe({
 
 * **animation_play_duration** *integer*  
     Default: ```5000```  
-    The number of milliseconds a .gif will animate for when triggered by click / touch event.
+    The number of milliseconds a .gif will animate for when triggered by click / 
+    touch event.  
+    Use ```Infinity``` to make the .gif play *forever.*
 
 * **non_touch_device_trigger_event** *string*  
     Default: ```"hover"``` Options: ```"hover", "click"```  

diff --git a/build/js/freezeframe.js b/build/js/freezeframe.js
@@ -243,18 +243,27 @@ var freezeframe = (function($) {
             if($image.hasClass('ff-image-ready')) {
 
               if(clicked) {
-                clearTimeout(click_timeout);
+
+                if(ff.options.animation_play_duration != Infinity) {
+                  clearTimeout(click_timeout);
+                }
+
                 $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
 
               } else {
+
                 $image.attr('src', $image[0].src);
                 $canvas.removeClass('ff-canvas-ready').addClass('ff-canvas-active');
 
-                click_timeout = setTimeout(function() {
-                  $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
-                }, ff.options.animation_play_duration);
+                if(ff.options.animation_play_duration != Infinity) {
+                  click_timeout = setTimeout(function() {
+                    $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
+                  }, ff.options.animation_play_duration);
+                }
 
               }
+
+
             }
 
           })();

diff --git a/build/js/freezeframe.min.js b/build/js/freezeframe.min.js
diff --git a/build/js/freezeframe.pkgd.js b/build/js/freezeframe.pkgd.js
@@ -10305,18 +10305,27 @@ var freezeframe = (function($) {
             if($image.hasClass('ff-image-ready')) {
 
               if(clicked) {
-                clearTimeout(click_timeout);
+
+                if(ff.options.animation_play_duration != Infinity) {
+                  clearTimeout(click_timeout);
+                }
+
                 $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
 
               } else {
+
                 $image.attr('src', $image[0].src);
                 $canvas.removeClass('ff-canvas-ready').addClass('ff-canvas-active');
 
-                click_timeout = setTimeout(function() {
-                  $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
-                }, ff.options.animation_play_duration);
+                if(ff.options.animation_play_duration != Infinity) {
+                  click_timeout = setTimeout(function() {
+                    $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
+                  }, ff.options.animation_play_duration);
+                }
 
               }
+
+
             }
 
           })();

diff --git a/build/js/freezeframe.pkgd.min.js b/build/js/freezeframe.pkgd.min.js
diff --git a/tests/index.html → examples/index.html b/tests/index.html → examples/index.html
@@ -32,6 +32,14 @@
   font-weight: 700;
 }
 
+.image {
+  max-width: 400px;
+}
+
+pre {
+  float: right;
+}
+
 </style>
 
 <script type="text/javascript">
@@ -40,6 +48,7 @@
 
     second = new freezeframe({
       'selector': '.my_class_2',
+      'animation_play_duration': Infinity,
       'non_touch_device_trigger_event': 'click'
     }).freeze();
 
@@ -66,8 +75,19 @@
 
 <p class="bold">freezeframe.js</p>
 
+
+
 <p>natural width<br />animate on hover</p>
-<img class="my_class_1" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif" />
+<div class="image">
+  <img class="my_class_1" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif" />
+</div>
+
+<pre>
+$('.start').click(function(e) {
+  e.preventDefault();
+  third.trigger();
+});
+</pre>
 
 <p>responsive<br />start / stop on click</p>
 <img class="my_class_2 freezeframe-responsive" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b018c0454fd619/1444744841735/pool980.gif" />

diff --git a/src/js/freezeframe.js b/src/js/freezeframe.js
@@ -243,18 +243,27 @@ var freezeframe = (function($) {
             if($image.hasClass('ff-image-ready')) {
 
               if(clicked) {
-                clearTimeout(click_timeout);
+
+                if(ff.options.animation_play_duration != Infinity) {
+                  clearTimeout(click_timeout);
+                }
+
                 $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
 
               } else {
+
                 $image.attr('src', $image[0].src);
                 $canvas.removeClass('ff-canvas-ready').addClass('ff-canvas-active');
 
-                click_timeout = setTimeout(function() {
-                  $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
-                }, ff.options.animation_play_duration);
+                if(ff.options.animation_play_duration != Infinity) {
+                  click_timeout = setTimeout(function() {
+                    $canvas.removeClass('ff-canvas-active').addClass('ff-canvas-ready');
+                  }, ff.options.animation_play_duration);
+                }
 
               }
+
+
             }
 
           })();