Merge pr4 with master, update docs

Maciej Gurban · Maciej Gurban · commit f83027a1d213 · 2015-02-15T20:06:47.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ### Changelog
 
+**2.3.0**
+
+Removing the requirement to insert visibility divs into the document. 
+
 **2.2.0**
 
 Introducing `current` method returning breakpoint alias, and `breakpoints` property allowing to specify your own breakpoint names.
diff --git a/README.md b/README.md
@@ -28,9 +28,9 @@ if (viewport.is('lg')) {
 ````javascript
 $(window).bind('resize', function() {
     viewport.changed(function() {
-    
+
       // do some other stuff!
-      
+
     })
 });
 ````
@@ -40,9 +40,9 @@ $(window).bind('resize', function() {
 ````javascript
 $(window).bind('resize', function() {
     viewport.changed(function() {
-    
+
       // do some other stuff!
-      
+
     }, 600)
 });
 ````
@@ -52,9 +52,9 @@ $(window).bind('resize', function() {
 ````javascript
 $(window).bind('resize', function() {
     viewport.changed(function() {
-    
+
         console.log( 'Current breakpoint: '+ viewport.current() );
-      
+
     })
 });
 ````
@@ -64,7 +64,7 @@ $(window).bind('resize', function() {
 
 ````css
 h1 {
-    @include set(font-size, (xs: 20px, sm: 24px, md: 24px, lg: 30px) ); 
+    @include set(font-size, (xs: 20px, sm: 24px, md: 24px, lg: 30px) );
 }
 ````
 
@@ -98,16 +98,10 @@ Output:
 Include just before `</body>`
 
 ````html
-<!-- Mandatory for Responsive Bootstrap Toolkit to operate -->
-<div class="device-xs visible-xs"></div>
-<div class="device-sm visible-sm"></div>
-<div class="device-md visible-md"></div>
-<div class="device-lg visible-lg"></div>
-
 <!-- Responsive Bootstrap Toolkit -->
 <script src="js/bootstrap-toolkit.min.js"></script>
 
-<!-- Your scripts using Bootstrap Toolkit -->
+<!-- Your scripts using Responsive Bootstrap Toolkit -->
 <script src="js/main.js"></script>
 ````
 
@@ -125,5 +119,3 @@ Copy contents of `compass/bootstrap-toolkit` directory into your project. File `
 **CSS features:**
   1. SASS 3.3+
   2. Compass
-
-
diff --git a/index.html b/index.html
@@ -9,8 +9,8 @@
     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
     <!-- Include stylesheet of this example -->
     <link rel="stylesheet" type="text/css" href="style.css" rel="stylesheet"/>
-</head>  
-  
+</head>
+
 <body>
 
     <div class="wrapper">
@@ -31,13 +31,6 @@ <h4>Example #1</h4>
 
     </div>
 
-    <!-- Mandatory for Responsive Bootstrap Toolkit to operate -->
-    <div class="device-xs visible-xs"></div>
-    <div class="device-sm visible-sm"></div>
-    <div class="device-md visible-md"></div>
-    <div class="device-lg visible-lg"></div>
-    <!-- end mandatory -->
-
     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 
@@ -46,5 +39,3 @@ <h4>Example #1</h4>
 
 </body>
 </html>
-
-
diff --git a/js/bootstrap-toolkit.js b/js/bootstrap-toolkit.js
@@ -2,55 +2,68 @@
  * Responsive Bootstrap Toolkit
  * Author:    Maciej Gurban
  * License:   MIT
- * Version:   2.2.0 (2015-01-06)
+ * Version:   2.3.0 (2015-02-15)
  * Origin:    https://github.com/maciej-gurban/responsive-bootstrap-toolkit
  */
 ;var ResponsiveBootstrapToolkit = (function($){
 
     // Methods and properties
     var self = {
 
-        // Determines interval between firing 'changed' method
+        /**
+         * Determines default interval between firing 'changed' method
+         */
         interval: 300,
 
-        // Breakpoint aliases
-        breakpoints: [
-            'xs', 'sm', 'md', 'lg'
-        ],
+        /**
+         * Breakpoint aliases
+         */
+        breakpoints: {
+            'xs': $('<div class="device-xs visible-xs"></div>').appendTo('body'),
+            'sm': $('<div class="device-sm visible-sm"></div>').appendTo('body'),
+            'md': $('<div class="device-md visible-md"></div>').appendTo('body'),
+            'lg': $('<div class="device-lg visible-lg"></div>').appendTo('body')
+        },
 
-        // Used to calculate intervals between consecutive function executions
+        /**
+         * Used to calculate intervals between consecutive function executions
+         */
         timer: new Date(),
 
-        // Returns true if current breakpoint matches passed alias
+        /**
+         * Returns true if current breakpoint matches passed alias
+         */
         is: function( alias ) {
-            return $('.device-' + alias).is(':visible');
+            return self.breakpoints[alias].is(':visible');
         },
 
-        // Returns current breakpoint alias
+        /**
+         * Returns current breakpoint alias
+         */
         current: function(){
             var name = 'unrecognized';
-            self.breakpoints.forEach(function(alias){
-                if(self.is(alias)) {
+            $.each(self.breakpoints, function(alias){
+                if (self.is(alias)) {
                     name = alias;
                 }
             });
             return name;
         },
 
-        /* 
+        /*
          * Waits specified number of miliseconds before executing a function
          * Source: http://stackoverflow.com/a/4541963/2066118
          */
         changed: function() {
             var timers = {};
-            return function (callback, ms) {
+            return function(callback, ms) {
                 // Get unique timer ID
                 var uID = (!uID) ? self.timer.getTime() : null;
                 if (timers[uID]) {
                     clearTimeout(timers[uID]);
                 }
                 // Use default interval if none specified
-                if(typeof ms === "undefined") {
+                if (typeof ms === "undefined") {
                     var ms = self.interval;
                 }
                 timers[uID] = setTimeout(callback, ms);
diff --git a/js/bootstrap-toolkit.min.js b/js/bootstrap-toolkit.min.js
@@ -2,7 +2,7 @@
  * Responsive Bootstrap Toolkit
  * Author:    Maciej Gurban
  * License:   MIT
- * Version:   2.2.0 (2015-01-06)
+ * Version:   2.3.0 (2015-02-15)
  * Origin:    https://github.com/maciej-gurban/responsive-bootstrap-toolkit
  */
-;var ResponsiveBootstrapToolkit=function(f){var b={interval:300,breakpoints:["xs","sm","md","lg"],timer:new Date,is:function(a){return f(".device-"+a).is(":visible")},current:function(){var a="unrecognized";b.breakpoints.forEach(function(c){b.is(c)&&(a=c)});return a},changed:function(){var a={};return function(c,e){var d=d?null:b.timer.getTime();a[d]&&clearTimeout(a[d]);"undefined"===typeof e&&(e=b.interval);a[d]=setTimeout(c,e)}}()};return b}(jQuery);
+;var ResponsiveBootstrapToolkit=function(e){var i={interval:300,breakpoints:{xs:e('<div class="device-xs visible-xs"></div>').appendTo("body"),sm:e('<div class="device-sm visible-sm"></div>').appendTo("body"),md:e('<div class="device-md visible-md"></div>').appendTo("body"),lg:e('<div class="device-lg visible-lg"></div>').appendTo("body")},timer:new Date,is:function(e){return i.breakpoints[e].is(":visible")},current:function(){var n="unrecognized";return e.each(i.breakpoints,function(e){i.is(e)&&(n=e)}),n},changed:function(){var e={};return function(n,s){var d=d?null:i.timer.getTime();if(e[d]&&clearTimeout(e[d]),"undefined"==typeof s)var s=i.interval;e[d]=setTimeout(n,s)}}()};return i}(jQuery);
diff --git a/js/main.js b/js/main.js
@@ -29,19 +29,19 @@
             );
         }
     }
-  
-  
+
+
 
   // Executes once whole document has been loaded
   $(document).ready(function() {
 
         resizeTopBar();
 
-        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(){
@@ -53,5 +53,5 @@
       });
   });
 
-  
+
 })(jQuery, document, window, ResponsiveBootstrapToolkit);
