Merge pull request #2549 from jhawthorn/js_tabs_refactor

Refactor and convert Tabs component from CoffeeScript to JS

backend/app/assets/javascripts/spree/backend/components/tabs.js

@@ -0,0 +1,67 @@
+/* global Tabs */
+
+Tabs = (function() {
+  function Tabs(el) {
+    _.bindAll(this, 'overflowTabs');
+
+    this.el = el;
+    this.tabs = this.el.querySelectorAll("li:not(.tabs-dropdown)")
+
+    /* <li class='tabs-dropdown'><a href='#'></a><ul></ul></li> */
+    this.dropdown = document.createElement('li');
+    this.dropdown.classList.add('tabs-dropdown');
+    this.dropdown.appendChild(document.createElement('a'));
+    this.dropdownList = document.createElement('ul');
+    this.dropdown.appendChild(this.dropdownList);
+
+    this.el.appendChild(this.dropdown);
+
+    this.tabWidths = _.map(this.tabs, function(tab) {
+      return tab.offsetWidth;
+    });
+    this.totalTabsWidth = this.tabWidths.reduce(function(previousValue, currentValue) {
+      return previousValue + currentValue;
+    });
+
+    window.addEventListener("resize", this.overflowTabs);
+    this.overflowTabs();
+  }
+
+  Tabs.prototype.overflowTabs = function() {
+    var containerWidth = this.el.offsetWidth;
+    var dropdownWidth = this.dropdown.offsetWidth;
+
+    for (var i = 0; i < this.tabs.length; i++) {
+      var tab = this.tabs[i];
+      tab.parentNode.removeChild(tab);
+    }
+
+    if (this.totalTabsWidth < containerWidth) {
+      this.el.classList.remove("tabs-overflowed");
+    } else {
+      this.el.classList.add("tabs-overflowed");
+      remainingWidth -= dropdownWidth;
+    }
+
+    var remainingWidth = containerWidth;
+    for (var i = 0; i < this.tabs.length; i++) {
+      remainingWidth -= this.tabWidths[i];
+      var tab = this.tabs[i];
+      if (remainingWidth >= 0) {
+        tab.classList.remove("in-dropdown");
+        this.el.insertBefore(tab, this.dropdown);
+      } else {
+        tab.classList.add("in-dropdown");
+        this.dropdownList.appendChild(tab);
+      }
+    }
+  };
+
+  return Tabs;
+})();
+
+window.addEventListener('load', function() {
+  _.each(document.querySelectorAll('.tabs'), function(el) {
+    new Tabs(el);
+  });
+});

backend/app/assets/stylesheets/spree/backend/components/_tabs.scss

@@ -64,7 +64,7 @@
   position: relative;
 
   .tabs:not(.tabs-overflowed) & {
-    display: none;
+    visibility: hidden;
   }
 
   > a {