Skip to content

Commit

Permalink
Merge pull request #31 from maciej-gurban/develop
Browse files Browse the repository at this point in the history
Release candidate 2.5.1
  • Loading branch information
maciej-gurban committed Nov 2, 2015
2 parents c73939b + abee292 commit 4732896
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 60 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
### Changelog

**2.5.1**
Delaying the injection of visibility div container into `body` until `$(document).ready()`, and thus allowing the inclusion of library inside `<head>` section.

**2.5.0**
Introduced `use` method allowing to use custom visibility classes. Added built-in Foundation 5 support.

Expand Down
63 changes: 32 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code. Despite the name, you can use it also with Foundation, or any other framework.

Current version: **2.5.0**
Current version: **2.5.1**

### Documentation
* [Installation](#installation)
Expand Down Expand Up @@ -36,31 +36,32 @@ Live example available on [CodePen](http://codepen.io/dih/full/ivECj). Hosted al
````javascript
// Wrap IIFE around your code
(function($, viewport){

// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}

// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}

// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}

// Execute code each time window size changes
$(window).resize(
viewport.changed(function(){
if( viewport.is('xs') ) {
// ...
}
})
);

$(document).ready(function() {

// Executes only in XS breakpoint
if(viewport.is('xs')) {
// ...
}

// Executes in SM, MD and LG breakpoints
if(viewport.is('>=sm')) {
// ...
}

// Executes in XS and SM breakpoints
if(viewport.is('<md')) {
// ...
}

// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if(viewport.is('xs')) {
// ...
}
})
);
});
})(jQuery, ResponsiveBootstrapToolkit);
````

Expand All @@ -69,7 +70,7 @@ Allows using custom debounce interval. The default one is set at 300ms.

````javascript
$(window).resize(
viewport.changed(function(){
viewport.changed(function() {

// ...

Expand All @@ -80,8 +81,8 @@ $(window).resize(
#### Get alias of current breakpoint
````javascript
$(window).resize(
viewport.changed(function(){
console.log( 'Current breakpoint: '+ viewport.current() );
viewport.changed(function() {
console.log('Current breakpoint: ', viewport.current());
})
);
````
Expand All @@ -95,7 +96,7 @@ Instead of Bootstrap's aliases `xs`, `sm`, `md` and `lg`, Foundation uses: `smal

viewport.use('Foundation');

if( viewport.is('small') ) {
if(viewport.is('small')) {
// ...
}

Expand All @@ -118,7 +119,7 @@ Currently, only Foundation 5 visibility classes are supported. If you'd like to

viewport.use('Custom', visibilityDivs);

if( viewport.is('alias-1') ) {
if(viewport.is('alias-1')) {
// ...
}

Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "responsive-bootstrap-toolkit",
"version": "2.5.0",
"version": "2.5.1",
"homepage": "https://github.com/maciej-gurban/responsive-bootstrap-toolkit",
"description": "Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code.",
"main": "dist/bootstrap-toolkit.js",
Expand Down
54 changes: 28 additions & 26 deletions dist/bootstrap-toolkit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,44 @@
* Responsive Bootstrap Toolkit
* Author: Maciej Gurban
* License: MIT
* Version: 2.5.0 (2015-05-14)
* Version: 2.5.1 (2015-11-02)
* Origin: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
*/
var ResponsiveBootstrapToolkit = (function($){
;var ResponsiveBootstrapToolkit = (function($){

// Internal methods
var internal = {

/**
* Breakpoint detection divs for each framework version
*/
detectionDivs: {
// Bootstrap 3
bootstrap: {
'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>'),
'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>'),
'md': $('<div class="device-md visible-md visible-md-block"></div>'),
'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>')
},
// Foundation 5
foundation: {
'small': $('<div class="device-xs show-for-small-only"></div>'),
'medium': $('<div class="device-sm show-for-medium-only"></div>'),
'large': $('<div class="device-md show-for-large-only"></div>'),
'xlarge': $('<div class="device-lg show-for-xlarge-only"></div>')
}
},
detectionDivs: {
// Bootstrap 3
bootstrap: {
'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>'),
'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>'),
'md': $('<div class="device-md visible-md visible-md-block"></div>'),
'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>')
},
// Foundation 5
foundation: {
'small': $('<div class="device-xs show-for-small-only"></div>'),
'medium': $('<div class="device-sm show-for-medium-only"></div>'),
'large': $('<div class="device-md show-for-large-only"></div>'),
'xlarge': $('<div class="device-lg show-for-xlarge-only"></div>')
}
},

/**
* Append visibility divs after DOM laoded
*/
applyDetectionDivs: function() {
$(document).ready(function(){
$.each(self.breakpoints, function(alias){
self.breakpoints[alias].appendTo('.responsive-bootstrap-toolkit');
});
});
},
applyDetectionDivs: function() {
$(document).ready(function(){
$.each(self.breakpoints, function(alias){
self.breakpoints[alias].appendTo('.responsive-bootstrap-toolkit');
});
});
},

/**
* Determines whether passed string is a parsable expression
Expand Down Expand Up @@ -221,7 +221,9 @@ var ResponsiveBootstrapToolkit = (function($){
};

// Create a placeholder
$('<div class="responsive-bootstrap-toolkit"></div>').appendTo('body');
$(document).ready(function(){
$('<div class="responsive-bootstrap-toolkit"></div>').appendTo('body');
});

if( self.framework === null ) {
self.use('bootstrap');
Expand Down
4 changes: 2 additions & 2 deletions dist/bootstrap-toolkit.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 4732896

Please sign in to comment.