Merge pull request #4 from Nikita240/no-divs

maciej-gurban · maciej-gurban · commit 7df9a665440b · 2015-02-15T19:55:25.000+02:00
Remove HTML requirement
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,12 +98,6 @@ 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>
 
@@ -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
@@ -14,30 +14,33 @@
         interval: 300,
 
         // Breakpoint aliases
-        breakpoints: [
-            'xs', 'sm', 'md', 'lg'
-        ],
+        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
         timer: new Date(),
 
         // 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
         current: function(){
             var name = 'unrecognized';
-            self.breakpoints.forEach(function(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
          */
diff --git a/js/bootstrap-toolkit.min.js b/js/bootstrap-toolkit.min.js
@@ -5,4 +5,4 @@
  * Version:   2.2.0 (2015-01-06)
  * 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);
