Last active
March 23, 2018 17:20
-
-
Save jerrylow/34410baff993e810170f8875fe9fec61 to your computer and use it in GitHub Desktop.
jQuery Responsive/Breakpoint Optimized Library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @file responsive.js | |
* Helper script that will be used for making front-end changes bases on | |
* boostrap breakpoints. | |
* Full Library Version: https://github.com/jerrylow/breakpoints | |
* --------------------------------------------------------------------- | |
* | |
* | |
* Initiate: | |
* $(window).responsive(); | |
* | |
* Detect a breakpoint change | |
* | |
* $(window).bind('breakpoint-change', function(e) { | |
* // Do something | |
* // console.log('From:' e.from ' + '- To:' + e.to); | |
* }); | |
* | |
* If its less than a specific bootstrap size | |
* Also interchangeable with $('window').responsiveGreaterThan(); | |
* | |
* $(window).bind('breakpoint-change', function(e) { | |
* if ($(window).responsiveLessThan('md')) { | |
* // Do something | |
* } | |
* }); | |
* | |
* If its less than (and equal to) a specific bootstrap size | |
* | |
* $(window).bind('breakpoint-change', function(e) { | |
* if ($(window).responsiveLessThan('md', true)) { | |
* // Do something | |
* } | |
* }); | |
*/ | |
(function($) { | |
$.fn.responsive = function(options) { | |
var settings = $.extend({}, $.fn.responsive.defaults, options); | |
var vars = { | |
bp: settings.bp | |
}; | |
// Store info | |
var responsive = this; | |
responsive.data('bp', settings.bp); | |
var $window = $(window); | |
responsive.data('originalBreakpoint', responsive.getBreakpoint()); | |
// Handle the resize 400ms after user stopped resizing | |
var resizeThresholdTimerId = null; | |
if ($.isFunction($(window).on)) { | |
$(window).on('resize.responsive', function() { | |
resizeThresholdTimerId && window.clearTimeout(resizeThresholdTimerId); | |
resizeThresholdTimerId = window.setTimeout(function() { | |
responsive.resizeCallback(); | |
}, 400); | |
}); | |
} | |
}; | |
$.fn.getBreakpoint = function() { | |
var windowWidth = $(window).width(); | |
var breakpoint; | |
var bp = $(this).data('bp'); | |
$.each(bp, function(i, value) { | |
if (windowWidth >= value.bp_width) { | |
breakpoint = bp[i].bp_name; | |
} | |
}); | |
// Fallback to desktop. | |
if (breakpoint == undefined) { | |
breakpoint = 'lg'; | |
} | |
return breakpoint; | |
}; | |
$.fn.resizeCallback = function() { | |
var newBreakpoint = $(this).getBreakpoint(); | |
var originalBreakpoint = $(this).data('originalBreakpoint'); | |
if (newBreakpoint !== originalBreakpoint) { | |
$(window).trigger({ | |
'type' : 'breakpoint-change', | |
'from' : originalBreakpoint, | |
'to' : newBreakpoint | |
}); | |
$(this).data('originalBreakpoint', newBreakpoint); | |
} | |
}; | |
$.fn.responsiveLessThan = function(checkBreakpoint, equal) { | |
equal = typeof equal !== 'undefined' ? equal : false; | |
var windowWidth = $(window).width(); | |
var breakpoint = $(this).getBreakpointValue(checkBreakpoint); | |
if (equal && windowWidth <= breakpoint) { | |
return true; | |
} | |
else if (windowWidth < breakpoint) { | |
return true; | |
} | |
return false; | |
} | |
$.fn.responsiveGreaterThan = function(checkBreakpoint, equal) { | |
equal = typeof equal !== 'undefined' ? equal : false; | |
var windowWidth = $(window).width(); | |
var breakpoint = $(this).getBreakpointValue(checkBreakpoint); | |
if (equal && windowWidth >= breakpoint) { | |
return true; | |
} | |
else if (windowWidth > breakpoint) { | |
return true; | |
} | |
return false; | |
} | |
$.fn.getBreakpointValue = function(breakpointName) { | |
var bp = $(this).data('bp'); | |
var breakpoint; | |
$.each(bp, function(i, value) { | |
if (breakpointName == value.bp_name) { | |
breakpoint = bp[i].bp_width; | |
} | |
}); | |
return breakpoint; | |
} | |
$.fn.responsive.defaults = { | |
bp: [ | |
{'bp_name' : 'xs', 'bp_width' : 0}, | |
{'bp_name' : 'xs-wide', 'bp_width' : 480}, | |
{'bp_name' : 'sm', 'bp_width' : 768}, | |
{'bp_name' : 'md', 'bp_width' : 992}, | |
{'bp_name' : 'lg', 'bp_width' : 1200} | |
] | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This has officially been rewritten as a library: Breakpoints