Increase performance of the breakpoint size checker

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);
+    });
+  });
+});