working on private method scoping

pweigand · Feb 7, 2016 · ac3f4e2 · ac3f4e2
1 parent d26ab70
commit ac3f4e2
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 61 deletions.
diff --git a/build/js/freezeframe.js b/build/js/freezeframe.js
@@ -1,9 +1,7 @@
 
 var freezeframe = (function($) {
 
-  var images;
-  var options;
-  var is_touch_device;
+  var images, options, is_touch_device;
 
   //////////////////////////////////////////////////////////////////////////////
   //                                                                          //
@@ -13,18 +11,22 @@ var freezeframe = (function($) {
 
   // decorated console.log warn message
   var warn = function(_message) {
-    console.warn('freezeframe.js : ' + _message)
+    console.warn('✨ freezeframe.js ✨ : ' + _message);
+  }
+
+  // does the freezeframe instance have captured images ?
+  var has_images = function() {
+    return images.length == 0 ? false : true;
   }
 
   // filter captured images by selector
-  var filter = function(_this, _selector) {
-    var images = _this.images,
-        filtered_images
+  var filter = function(_selector) {
+    var filtered_images;
 
     if(_selector != undefined && images.length > 1) {
       filtered_images = images.filter( $(_selector) );
       if (filtered_images.length == 0) {
-        warn("no images found for selector " + _selector)
+        warn("no images found for selector '" + _selector + "'")
         return false;
       }
     } else {
@@ -34,11 +36,6 @@ var freezeframe = (function($) {
     return filtered_images;
   }
 
-  // does the freezeframe instance have captured images ?
-  var has_images = function(_this) {
-    return _this.images.length == 0 ? false : true;
-  }
-
   //////////////////////////////////////////////////////////////////////////////
   //                                                                          //
   //  Constructor                                                             //
@@ -124,7 +121,7 @@ var freezeframe = (function($) {
       setup_required = this.images.not('.ff-setup'),
       container_classnames = ['ff-container'];
 
-    if(!has_images(ff)) {
+    if(!has_images.call(ff)) {
       warn("unable to run setup(), no images captured")
       return false;
     } else if(setup_required.length == 0) {
@@ -205,12 +202,12 @@ var freezeframe = (function($) {
       click_timeout,
       images;
 
-    if(!has_images(ff)) {
+    if(!has_images.call(ff)) {
       warn("unable to run attach(), no images captured")
       return false;
     }
 
-    filter(ff, _selector).each(function(e) {
+    filter.call(ff).each(function(e) {
 
       var $image = $(this);
       var $canvas = $(this).siblings('canvas');
@@ -283,7 +280,9 @@ var freezeframe = (function($) {
   // save references in a better way
 
   freezeframe.prototype.trigger = function(_selector) {
-    filter(_selector).each(function(e) {
+    var ff = this;
+
+    filter.call(ff).each(function(e) {
       $(this).attr('src', $(this)[0].src);
       $(this).siblings('canvas').removeClass('ff-canvas-ready').addClass('ff-canvas-active');
     });
@@ -299,7 +298,9 @@ var freezeframe = (function($) {
   // save references in a better way
 
   freezeframe.prototype.release = function(_selector) {
-    filter(_selector).each(function(e) {
+    var ff = this;
+
+    filter.call(ff).each(function(e) {
       $(this).siblings('canvas').removeClass('ff-canvas-active').addClass('ff-canvas-ready');
     });
   }

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
@@ -10063,9 +10063,7 @@ return ImagesLoaded;
 
 var freezeframe = (function($) {
 
-  var images;
-  var options;
-  var is_touch_device;
+  var images, options, is_touch_device;
 
   //////////////////////////////////////////////////////////////////////////////
   //                                                                          //
@@ -10075,18 +10073,22 @@ var freezeframe = (function($) {
 
   // decorated console.log warn message
   var warn = function(_message) {
-    console.warn('freezeframe.js : ' + _message)
+    console.warn('✨ freezeframe.js ✨ : ' + _message);
+  }
+
+  // does the freezeframe instance have captured images ?
+  var has_images = function() {
+    return images.length == 0 ? false : true;
   }
 
   // filter captured images by selector
-  var filter = function(_this, _selector) {
-    var images = _this.images,
-        filtered_images
+  var filter = function(_selector) {
+    var filtered_images;
 
     if(_selector != undefined && images.length > 1) {
       filtered_images = images.filter( $(_selector) );
       if (filtered_images.length == 0) {
-        warn("no images found for selector " + _selector)
+        warn("no images found for selector '" + _selector + "'")
         return false;
       }
     } else {
@@ -10096,11 +10098,6 @@ var freezeframe = (function($) {
     return filtered_images;
   }
 
-  // does the freezeframe instance have captured images ?
-  var has_images = function(_this) {
-    return _this.images.length == 0 ? false : true;
-  }
-
   //////////////////////////////////////////////////////////////////////////////
   //                                                                          //
   //  Constructor                                                             //
@@ -10186,7 +10183,7 @@ var freezeframe = (function($) {
       setup_required = this.images.not('.ff-setup'),
       container_classnames = ['ff-container'];
 
-    if(!has_images(ff)) {
+    if(!has_images.call(ff)) {
       warn("unable to run setup(), no images captured")
       return false;
     } else if(setup_required.length == 0) {
@@ -10267,12 +10264,12 @@ var freezeframe = (function($) {
       click_timeout,
       images;
 
-    if(!has_images(ff)) {
+    if(!has_images.call(ff)) {
       warn("unable to run attach(), no images captured")
       return false;
     }
 
-    filter(ff, _selector).each(function(e) {
+    filter.call(ff).each(function(e) {
 
       var $image = $(this);
       var $canvas = $(this).siblings('canvas');
@@ -10345,7 +10342,9 @@ var freezeframe = (function($) {
   // save references in a better way
 
   freezeframe.prototype.trigger = function(_selector) {
-    filter(_selector).each(function(e) {
+    var ff = this;
+
+    filter.call(ff).each(function(e) {
       $(this).attr('src', $(this)[0].src);
       $(this).siblings('canvas').removeClass('ff-canvas-ready').addClass('ff-canvas-active');
     });
@@ -10361,7 +10360,9 @@ var freezeframe = (function($) {
   // save references in a better way
 
   freezeframe.prototype.release = function(_selector) {
-    filter(_selector).each(function(e) {
+    var ff = this;
+
+    filter.call(ff).each(function(e) {
       $(this).siblings('canvas').removeClass('ff-canvas-active').addClass('ff-canvas-ready');
     });
   }

diff --git a/build/js/freezeframe.pkgd.min.js b/build/js/freezeframe.pkgd.min.js
diff --git a/src/js/freezeframe.js b/src/js/freezeframe.js
@@ -1,9 +1,7 @@
 
 var freezeframe = (function($) {
 
-  var images;
-  var options;
-  var is_touch_device;
+  var images, options, is_touch_device;
 
   //////////////////////////////////////////////////////////////////////////////
   //                                                                          //
@@ -13,18 +11,22 @@ var freezeframe = (function($) {
 
   // decorated console.log warn message
   var warn = function(_message) {
-    console.warn('freezeframe.js : ' + _message)
+    console.warn('✨ freezeframe.js ✨ : ' + _message);
+  }
+
+  // does the freezeframe instance have captured images ?
+  var has_images = function() {
+    return images.length == 0 ? false : true;
   }
 
   // filter captured images by selector
-  var filter = function(_this, _selector) {
-    var images = _this.images,
-        filtered_images
+  var filter = function(_selector) {
+    var filtered_images;
 
     if(_selector != undefined && images.length > 1) {
       filtered_images = images.filter( $(_selector) );
       if (filtered_images.length == 0) {
-        warn("no images found for selector " + _selector)
+        warn("no images found for selector '" + _selector + "'")
         return false;
       }
     } else {
@@ -34,11 +36,6 @@ var freezeframe = (function($) {
     return filtered_images;
   }
 
-  // does the freezeframe instance have captured images ?
-  var has_images = function(_this) {
-    return _this.images.length == 0 ? false : true;
-  }
-
   //////////////////////////////////////////////////////////////////////////////
   //                                                                          //
   //  Constructor                                                             //
@@ -124,7 +121,7 @@ var freezeframe = (function($) {
       setup_required = this.images.not('.ff-setup'),
       container_classnames = ['ff-container'];
 
-    if(!has_images(ff)) {
+    if(!has_images.call(ff)) {
       warn("unable to run setup(), no images captured")
       return false;
     } else if(setup_required.length == 0) {
@@ -205,12 +202,12 @@ var freezeframe = (function($) {
       click_timeout,
       images;
 
-    if(!has_images(ff)) {
+    if(!has_images.call(ff)) {
       warn("unable to run attach(), no images captured")
       return false;
     }
 
-    filter(ff, _selector).each(function(e) {
+    filter.call(ff).each(function(e) {
 
       var $image = $(this);
       var $canvas = $(this).siblings('canvas');
@@ -283,7 +280,9 @@ var freezeframe = (function($) {
   // save references in a better way
 
   freezeframe.prototype.trigger = function(_selector) {
-    filter(_selector).each(function(e) {
+    var ff = this;
+
+    filter.call(ff).each(function(e) {
       $(this).attr('src', $(this)[0].src);
       $(this).siblings('canvas').removeClass('ff-canvas-ready').addClass('ff-canvas-active');
     });
@@ -299,7 +298,9 @@ var freezeframe = (function($) {
   // save references in a better way
 
   freezeframe.prototype.release = function(_selector) {
-    filter(_selector).each(function(e) {
+    var ff = this;
+
+    filter.call(ff).each(function(e) {
       $(this).siblings('canvas').removeClass('ff-canvas-active').addClass('ff-canvas-ready');
     });
   }

diff --git a/tests/index.html b/tests/index.html
@@ -13,7 +13,7 @@
 <style type="text/css">
 body {
   text-align: center;
-  max-width: 800px;
+  max-width: 1000px;
   margin: 0px auto;
   padding: 20px;
 }
@@ -30,23 +30,41 @@
 
 <script type="text/javascript">
   $(function() {
-    gifs = new freezeframe().freeze();
+    first_two = new freezeframe().capture()
   })
 </script>
 
 </head>
 
 <body>
 
-<p class="bold">✨ freezeframe.js ✨</p>
+<p class="bold">freezeframe.js</p>
 
 <p>natural</p>
+
 <img class="freezeframe" src="http://49.media.tumblr.com/05dd38679f733525f02483d192f16db9/tumblr_nla0aiN4cl1qhcd6po1_500.gif" />
 
 <p>responsive</p>
+
 <img class="freezeframe freezeframe-responsive" src="http://45.media.tumblr.com/d07e2e7dbffc7da8e40ac31508929230/tumblr_nla0b4xBxW1qhcd6po1_500.gif" />
 
 <p>mr. gifs by <a href="http://www.mrgif.com/">mr. gif</a>
 
+<hr>
+
+<p>xtras</p>
+
+<img class="freezeframe" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif" />
+
+<hr>
+
+<img class="freezeframe" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b018c0454fd619/1444744841735/pool980.gif" />
+
+<hr>
+
+<img class="some_other_class freezeframe-responsive" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b0652b31fbd0a5/1444744817955/parislove9801.gif" />
+
+<p>cinemagraphs by <a href="http://www.cinemagraph.com/">cinemagraph.com</a>
+
 </body>
 </html>