Increase performance of the breakpoint size checker
This commit is contained in:
parent
53ee38053c
commit
61033b2d4f
2 changed files with 33 additions and 61 deletions
|
@ -1,66 +1,23 @@
|
|||
/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, no-return-assign, new-parens, no-param-reassign, max-len */
|
||||
export const breakpoints = {
|
||||
lg: 1200,
|
||||
md: 992,
|
||||
sm: 768,
|
||||
xs: 0,
|
||||
};
|
||||
|
||||
var Breakpoints = (function() {
|
||||
var BreakpointInstance, instance;
|
||||
const BreakpointInstance = {
|
||||
windowWidth: () => window.innerWidth,
|
||||
getBreakpointSize() {
|
||||
const windowWidth = this.windowWidth();
|
||||
|
||||
function Breakpoints() {}
|
||||
const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
|
||||
|
||||
instance = null;
|
||||
return breakpoint;
|
||||
},
|
||||
};
|
||||
|
||||
BreakpointInstance = (function() {
|
||||
var BREAKPOINTS;
|
||||
// For legacy reasons, this is added to window
|
||||
// one day this should be deleted
|
||||
window.bp = BreakpointInstance;
|
||||
|
||||
BREAKPOINTS = ["xs", "sm", "md", "lg"];
|
||||
|
||||
function BreakpointInstance() {
|
||||
this.setup();
|
||||
}
|
||||
|
||||
BreakpointInstance.prototype.setup = function() {
|
||||
var allDeviceSelector, els;
|
||||
allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
|
||||
return ".device-" + breakpoint;
|
||||
});
|
||||
if ($(allDeviceSelector.join(",")).length) {
|
||||
return;
|
||||
}
|
||||
// Create all the elements
|
||||
els = $.map(BREAKPOINTS, function(breakpoint) {
|
||||
return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
|
||||
});
|
||||
return $("body").append(els.join(''));
|
||||
};
|
||||
|
||||
BreakpointInstance.prototype.visibleDevice = function() {
|
||||
var allDeviceSelector;
|
||||
allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
|
||||
return ".device-" + breakpoint;
|
||||
});
|
||||
return $(allDeviceSelector.join(",")).filter(":visible");
|
||||
};
|
||||
|
||||
BreakpointInstance.prototype.getBreakpointSize = function() {
|
||||
var $visibleDevice;
|
||||
$visibleDevice = this.visibleDevice;
|
||||
// TODO: Consider refactoring in light of turbolinks removal.
|
||||
// the page refreshed via turbolinks
|
||||
if (!$visibleDevice().length) {
|
||||
this.setup();
|
||||
}
|
||||
$visibleDevice = this.visibleDevice();
|
||||
return $visibleDevice.attr("class").split("visible-")[1];
|
||||
};
|
||||
|
||||
return BreakpointInstance;
|
||||
})();
|
||||
|
||||
Breakpoints.get = function() {
|
||||
return instance != null ? instance : instance = new BreakpointInstance;
|
||||
};
|
||||
|
||||
return Breakpoints;
|
||||
})();
|
||||
|
||||
$(() => { window.bp = Breakpoints.get(); });
|
||||
|
||||
window.Breakpoints = Breakpoints;
|
||||
export default BreakpointInstance;
|
||||
|
|
15
spec/javascripts/breakpoints_spec.js
Normal file
15
spec/javascripts/breakpoints_spec.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
import bp, {
|
||||
breakpoints,
|
||||
} from '~/breakpoints';
|
||||
|
||||
describe('breakpoints', () => {
|
||||
Object.keys(breakpoints).forEach((key) => {
|
||||
const size = breakpoints[key];
|
||||
|
||||
it(`returns ${key} when larger than ${size}`, () => {
|
||||
spyOn(bp, 'windowWidth').and.returnValue(size + 10);
|
||||
|
||||
expect(bp.getBreakpointSize()).toBe(key);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue