diff options
-rw-r--r-- | app/assets/javascripts/breakpoints.js | 79 | ||||
-rw-r--r-- | spec/javascripts/breakpoints_spec.js | 15 |
2 files changed, 33 insertions, 61 deletions
diff --git a/app/assets/javascripts/breakpoints.js b/app/assets/javascripts/breakpoints.js index 2c1f988d987..7e3e9da63bb 100644 --- a/app/assets/javascripts/breakpoints.js +++ b/app/assets/javascripts/breakpoints.js @@ -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; diff --git a/spec/javascripts/breakpoints_spec.js b/spec/javascripts/breakpoints_spec.js new file mode 100644 index 00000000000..b1b5d36c1fb --- /dev/null +++ b/spec/javascripts/breakpoints_spec.js @@ -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); + }); + }); +}); |