tab-switch.js in material-sass-4.0.0

- old
+ new

@@ -1,15 +1,18 @@
 /*
- * tab indicator animation
- * requires bootstrap's (v4.0.0-beta) tab.js
+ * Tab indicator animation
+ * Requires Bootstrap's (v4.0.0) `tab.js`
  */
 var TabSwitch = function ($) {
   // constants >>>
   var DATA_KEY = 'md.tabswitch';
   var NAME = 'tabswitch';
   var NO_CONFLICT = $.fn[NAME];
-  var TRANSITION_DURATION = 390;
+  var Breakpoints = {
+    DESKTOP: 992,
+    TABLET: 576
+  };
   var ClassName = {
     ANIMATE: 'animate',
     DROPDOWN_ITEM: 'dropdown-item',
     INDICATOR: 'nav-tabs-indicator',
     MATERIAL: 'nav-tabs-material',
@@ -20,22 +23,23 @@
     SHOW_BS_TAB: 'show.bs.tab'
   };
   var Selector = {
     DATA_TOGGLE: '.nav-tabs [data-toggle="tab"]',
     DROPDOWN: '.dropdown',
-    NAV: '.nav-tabs' // <<< constants
+    NAV: '.nav-tabs'
+  };
+  var TransitionDuration = {
+    DESKTOP: 200,
+    MOBILE: 300,
+    TABLET: 390 // <<< constants
 
   };
 
   var TabSwitch =
   /*#__PURE__*/
   function () {
     function TabSwitch(nav) {
-      if (typeof $.fn.tab === 'undefined') {
-        throw new Error('Material\'s JavaScript requires Bootstrap\'s tab.js');
-      }
-
       this._nav = nav;
       this._navindicator = null;
     }
 
     var _proto = TabSwitch.prototype;
@@ -78,11 +82,19 @@
       if (!supportsTransition) {
         complete();
         return;
       }
 
-      $(this._navindicator).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
+      var transitionDuration = TransitionDuration.MOBILE;
+
+      if (window.innerWidth >= Breakpoints.DESKTOP) {
+        transitionDuration = TransitionDuration.DESKTOP;
+      } else if (window.innerWidth >= Breakpoints.TABLET) {
+        transitionDuration = TransitionDuration.TABLET;
+      }
+
+      $(this._navindicator).one(Util.TRANSITION_END, complete).emulateTransitionEnd(transitionDuration);
     };
 
     _proto._createIndicator = function _createIndicator(navLeft, navScrollLeft, navWidth, relatedTarget) {
       this._navindicator = document.createElement('div');
       $(this._navindicator).addClass(ClassName.INDICATOR).appendTo(this._nav);
@@ -124,11 +136,11 @@
 
     return TabSwitch;
   }();
 
   $(document).on(Event.SHOW_BS_TAB, Selector.DATA_TOGGLE, function (event) {
-    TabSwitch._jQueryInterface.call($(event.target), event.relatedTarget);
+    TabSwitch._jQueryInterface.call($(this), event.relatedTarget);
   });
   $.fn[NAME] = TabSwitch._jQueryInterface;
   $.fn[NAME].Constructor = TabSwitch;
 
   $.fn[NAME].noConflict = function () {
@@ -136,6 +148,5 @@
     return TabSwitch._jQueryInterface;
   };
 
   return TabSwitch;
 }($);
-//# sourceMappingURL=tab-switch.js.map
\ No newline at end of file