Refactored 'changed' method and its usage

Maciej Gurban · Maciej Gurban · commit 74445407dc3e · 2015-05-09T23:24:44.000+03:00
Also:
- Visibility divs not appended on DOM ready
- Docs updated accordingly
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 ### Changelog
 
+**2.4.2**
+Refactoring 'changed' method (and updating usage examples in main.js) to solve issue [#14](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/issues/14).
+
+Delaying the injection of visibility divs into `<body>` until `$(document).ready()`, and thus allowing the inclusion of library inside `<head>` section.
+
 **2.4.1**
 
 Updating Bootstrap visibility classes for future compliancy, updating documentation to reflect changes in version 2.4.0, and small code refactoring.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in Jav
 
 The SASS module enables quick and simple styling for elements needing different property values for each screen resolution.
 
-Current version: **2.4.1**
+Current version: **2.4.2**
 
 ### Table of Contents
 * [Installation](#installation)
@@ -34,7 +34,7 @@ Available on [CodePen](http://codepen.io/dih/full/ivECj)
 
 ### Migrating from an older version
 
-Refer to the [changelog](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/blob/master/CHANGELOG.md) for a list of improvements in each version of the library.
+Refer to the [changelog](https://github.com/maciej-gurban/responsive-bootstrap-toolkit/blob/master/CHANGELOG.md) for a list of changes in each version of the library.
 
 ### JavaScript features
 #### Basic usage:
@@ -59,12 +59,12 @@ Refer to the [changelog](https://github.com/maciej-gurban/responsive-bootstrap-t
     }
 
     // Execute code each time window size changes
-    $(window).bind('resize', function() {
+    $(window).resize(
         viewport.changed(function(){
             if( viewport.is('xs') ) {
                 // ...
             }
-        });
+        })
     });
 
 })(jQuery, ResponsiveBootstrapToolkit);
@@ -74,8 +74,8 @@ Refer to the [changelog](https://github.com/maciej-gurban/responsive-bootstrap-t
 Allows using custom debounce interval. The default one is set at 300ms.
 
 ````javascript
-$(window).bind('resize', function() {
-    viewport.changed(function() {
+$(window).resize(
+    viewport.changed(function(){
 
       // ...
 
@@ -85,8 +85,8 @@ $(window).bind('resize', function() {
 
 #### Get alias of current breakpoint
 ````javascript
-$(window).bind('resize', function() {
-    viewport.changed(function() {
+$(window).resize(
+    viewport.changed(function(){
 
         console.log( 'Current breakpoint: '+ viewport.current() );
 
diff --git a/js/bootstrap-toolkit.js b/js/bootstrap-toolkit.js
@@ -2,7 +2,7 @@
  * Responsive Bootstrap Toolkit
  * Author:    Maciej Gurban
  * License:   MIT
- * Version:   2.4.1 (2015-04-19)
+ * Version:   2.4.2 (2015-05-09)
  * Origin:    https://github.com/maciej-gurban/responsive-bootstrap-toolkit
  */
 ;var ResponsiveBootstrapToolkit = (function($){
@@ -24,7 +24,7 @@
 
             // Used operator
             var operator = str.charAt(0);
-            // Include breakpoint equal to alias? 
+            // Include breakpoint equal to alias?
             var orEqual  = (str.charAt(1) == '=') ? true : false
 
             /**
@@ -54,7 +54,7 @@
         isAnyActive: function( breakpoints ) {
             var found = false;
             $.each(breakpoints, function( index, alias ) {
-                // Once first breakpoint matches, return true and break the out of the loop
+                // Once first breakpoint matches, return true and break out of the loop
                 if( self.breakpoints[ alias ].is(':visible') ) {
                     found = true;
                     return false;
@@ -87,7 +87,7 @@
                  * at 'md' breakpoint, indicated in the expression,
                  * That makes: start = 0, end = 2 (index of 'md' breakpoint)
                  *
-                 * Parsing viewport.is('<md') we start at index 'xs' breakpoint, and end at 
+                 * Parsing viewport.is('<md') we start at index 'xs' breakpoint, and end at
                  * 'sm' breakpoint, one before 'md'.
                  * Which makes: start = 0, end = 1
                  */
@@ -100,7 +100,7 @@
                  * of breakpoint list.
                  * That makes: start = 1, end = undefined
                  *
-                 * Parsing viewport.is('>sm') we start at breakpoint 'md' and end at the end of 
+                 * Parsing viewport.is('>sm') we start at breakpoint 'md' and end at the end of
                  * breakpoint list.
                  * Which makes: start = 2, end = undefined
                  */
@@ -111,7 +111,7 @@
 
                 var acceptedBreakpoints = breakpointList.slice(start, end);
 
-                return internal.isAnyActive( acceptedBreakpoints );                
+                return internal.isAnyActive( acceptedBreakpoints );
 
             }
         }
@@ -122,27 +122,20 @@
     var self = {
 
         /**
-         * Determines default interval between firing 'changed' method
+         * Determines default debouncing interval of 'changed' method
          */
         interval: 300,
 
         /**
          * Breakpoint aliases, listed from smallest to biggest
          */
         breakpoints: {
-            'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>').appendTo('body'),
-            'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>').appendTo('body'),
-            'md': $('<div class="device-md visible-md visible-md-block"></div>').appendTo('body'),
-            'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>').appendTo('body')
+            'xs': $.parseHTML('<div class="device-xs visible-xs visible-xs-block"></div>'),
+            'sm': $.parseHTML('<div class="device-sm visible-sm visible-sm-block"></div>'),
+            'md': $.parseHTML('<div class="device-md visible-md visible-md-block"></div>'),
+            'lg': $.parseHTML('<div class="device-lg visible-lg visible-lg-block"></div>')
         },
 
-        /**
-         * Debouncing helper
-         *
-         * Used to calculate intervals between consecutive function executions
-         */
-        timer: new Date(),
-
         /**
          * Returns true if current breakpoint matches passed alias
          */
@@ -170,27 +163,27 @@
 
         /*
          * Waits specified number of miliseconds before executing a callback
-         * Source: http://stackoverflow.com/a/4541963/2066118
          */
-        changed: function() {
-            var timers = {};
-            return function(callback, ms) {
-                // Get unique timer ID
-                var uID = (!uID) ? self.timer.getTime() : null;
-
-                if (timers[uID]) {
-                    clearTimeout(timers[uID]);
-                }
-
-                // Uses default interval if none specified
-                if (typeof ms === "undefined") {
-                    var ms = self.interval;
-                }
-                timers[uID] = setTimeout(callback, ms);
+        changed: function(fn, ms) {
+            var timer; 
+            return function(){
+                clearTimeout(timer); 
+                timer = setTimeout(function(){
+                    fn();
+                }, ms || self.interval); 
             };
-        }()
+        }
+
+    };
 
-    }
+    /**
+     * Append visibility divs to <body> only after DOM laoded
+     */
+    $(document).ready(function(){
+        $.each(self.breakpoints, function(alias){
+            self.breakpoints[alias].appendTo('body');
+        });
+    });
 
     return self;
 
diff --git a/js/bootstrap-toolkit.min.js b/js/bootstrap-toolkit.min.js
diff --git a/js/main.js b/js/main.js
@@ -21,26 +21,19 @@
         }
     }
 
-  // Executes once whole document has been loaded
-  $(document).ready(function() {
+    // Executes once whole document has been loaded
+    $(document).ready(function() {
 
         highlightBoxes();
 
-        console.log( 'Current breakpoint:', viewport.current() );
+        console.log('Current breakpoint:', viewport.current());
 
-  });
-
-
-  // Executes each time window size changes
-  $(window).bind('resize', function() {
-      viewport.changed(function(){
-
-        highlightBoxes();
-
-        console.log( 'Current breakpoint:', viewport.current() );
-
-      });
-  });
+    });
 
+    $(window).resize(
+        viewport.changed(function(){
+            console.log('Current breakpoint:', viewport.current());
+        })
+    );
 
 })(jQuery, document, window, ResponsiveBootstrapToolkit);
