Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

js/src/modal.js

@@ -110,7 +110,7 @@ const Modal = (($) => {
 
     show(relatedTarget) {
       let showEvent = $.Event(Event.SHOW, {
-        relatedTarget: relatedTarget
+        relatedTarget
       })
 
       $(this._element).trigger(showEvent)
@@ -231,14 +231,18 @@ const Modal = (($) => {
 
       $(this._element).addClass(ClassName.IN)
 
-      if (this._config.focus) this._enforceFocus()
+      if (this._config.focus) {
+        this._enforceFocus()
+      }
 
       let shownEvent = $.Event(Event.SHOWN, {
-        relatedTarget: relatedTarget
+        relatedTarget
       })
 
       let transitionComplete = () => {
-        if (this._config.focus) this._element.focus()
+        if (this._config.focus) {
+          this._element.focus()
+        }
         $(this._element).trigger(shownEvent)
       }
 
@@ -389,11 +393,11 @@ const Modal = (($) => {
         this._element.scrollHeight > document.documentElement.clientHeight
 
       if (!this._isBodyOverflowing && isModalOverflowing) {
-        this._element.style.paddingLeft = this._scrollbarWidth + 'px'
+        this._element.style.paddingLeft = `${this._scrollbarWidth}px`
       }
 
       if (this._isBodyOverflowing && !isModalOverflowing) {
-        this._element.style.paddingRight = this._scrollbarWidth + 'px'
+        this._element.style.paddingRight = `${this._scrollbarWidth}px~`
       }
     }
 
@@ -423,7 +427,7 @@ const Modal = (($) => {
 
       if (this._isBodyOverflowing) {
         document.body.style.paddingRight =
-          bodyPadding + this._scrollbarWidth + 'px'
+          bodyPadding + `${this._scrollbarWidth}px`
       }
     }
 

js/src/popover.js

@@ -141,7 +141,7 @@ const Popover = (($) => {
 
     _getContent() {
       return this.element.getAttribute('data-content')
-        || (typeof this.config.content == 'function' ?
+        || (typeof this.config.content === 'function' ?
               this.config.content.call(this.element) :
               this.config.content)
     }

js/src/scrollspy.js

@@ -293,7 +293,7 @@ const ScrollSpy = (($) => {
    * ------------------------------------------------------------------------
    */
 
-  $(window).on(Event.LOAD_DATA_API, function () {
+  $(window).on(Event.LOAD_DATA_API, () => {
     let scrollSpys = $.makeArray($(Selector.DATA_SPY))
 
     for (let i = scrollSpys.length; i--;) {

js/src/tab.js

@@ -77,7 +77,7 @@ const Tab = (($) => {
 
     show() {
       if (this._element.parentNode &&
-         (this._element.parentNode.nodeType == Node.ELEMENT_NODE) &&
+         (this._element.parentNode.nodeType === Node.ELEMENT_NODE) &&
          ($(this._element).parent().hasClass(ClassName.ACTIVE))) {
         return
       }
@@ -157,7 +157,7 @@ const Tab = (($) => {
       let isTransitioning = callback
         && Util.supportsTransitionEnd()
         && ((active && $(active).hasClass(ClassName.FADE))
-           || !!$(container).find(Selector.FADE_CHILD)[0])
+           || Boolean($(container).find(Selector.FADE_CHILD)[0]))
 
       let complete = $.proxy(
         this._transitionComplete,

js/src/tooltip.js

@@ -174,11 +174,9 @@ const Tooltip = (($) => {
     }
 
     toggle(event) {
-      let context = this
-      let dataKey = this.constructor.DATA_KEY
-
       if (event) {
-        context = $(event.currentTarget).data(dataKey)
+        let dataKey = this.constructor.DATA_KEY
+        let context = $(event.currentTarget).data(dataKey)
 
         if (!context) {
           context = new this.constructor(
@@ -197,9 +195,13 @@ const Tooltip = (($) => {
         }
 
       } else {
-        $(context.getTipElement()).hasClass(ClassName.IN) ?
-          context._leave(null, context) :
-          context._enter(null, context)
+
+        if ($(this.getTipElement()).hasClass(ClassName.IN)) {
+          this._leave(null, this)
+          return
+        }
+
+        this._enter(null, this)
       }
     }
 
@@ -267,9 +269,9 @@ const Tooltip = (($) => {
         $(this.element).trigger(this.constructor.Event.INSERTED)
 
         this._tether = new Tether({
+          attachment,
           element     : tip,
           target      : this.element,
-          attachment  : attachment,
           classes     : TetherClass,
           classPrefix : CLASS_PREFIX,
           offset      : this.config.offset,
@@ -292,11 +294,14 @@ const Tooltip = (($) => {
           }
         }
 
-        Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE) ?
+        if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
           $(this.tip)
             .one(Util.TRANSITION_END, complete)
-            .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) :
-          complete()
+            .emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
+          return
+        }
+
+        complete()
       }
     }
 
@@ -343,7 +348,7 @@ const Tooltip = (($) => {
     // protected
 
     isWithContent() {
-      return !!this.getTitle()
+      return Boolean(this.getTitle())
     }
 
     getTipElement() {
@@ -407,10 +412,10 @@ const Tooltip = (($) => {
           )
 
         } else if (trigger !== Trigger.MANUAL) {
-          let eventIn  = trigger == Trigger.HOVER ?
+          let eventIn  = trigger === Trigger.HOVER ?
             this.constructor.Event.MOUSEENTER :
             this.constructor.Event.FOCUSIN
-          let eventOut = trigger == Trigger.HOVER ?
+          let eventOut = trigger === Trigger.HOVER ?
             this.constructor.Event.MOUSELEAVE :
             this.constructor.Event.FOCUSOUT
 
@@ -471,7 +476,7 @@ const Tooltip = (($) => {
 
       if (event) {
         context._activeTrigger[
-          event.type == 'focusin' ? Trigger.FOCUS : Trigger.HOVER
+          event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER
         ] = true
       }
 
@@ -512,7 +517,7 @@ const Tooltip = (($) => {
 
       if (event) {
         context._activeTrigger[
-          event.type == 'focusout' ? Trigger.FOCUS : Trigger.HOVER
+          event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER
         ] = false
       }
 
@@ -575,9 +580,8 @@ const Tooltip = (($) => {
 
       if (this.config) {
         for (let key in this.config) {
-          let value = this.config[key]
-          if (this.constructor.Default[key] !== value) {
-            config[key] = value
+          if (this.constructor.Default[key] !== this.config[key]) {
+            config[key] = this.config[key]
           }
         }
       }

js/src/util.js

@@ -29,14 +29,14 @@ const Util = (($) => {
   }
 
   function isElement(obj) {
-    return (obj[0] || obj).nodeType;
+    return (obj[0] || obj).nodeType
   }
 
   function getSpecialTransitionEndEvent() {
     return {
       bindType: transition.end,
       delegateType: transition.end,
-      handle: function (event) {
+      handle(event) {
         if ($(event.target).is(this)) {
           return event.handleObj.handler.apply(this, arguments)
         }
@@ -51,7 +51,7 @@ const Util = (($) => {
 
     let el = document.createElement('bootstrap')
 
-    for (var name in TransitionEndEvent) {
+    for (let name in TransitionEndEvent) {
       if (el.style[name] !== undefined) {
         return { end: TransitionEndEvent[name] }
       }
@@ -63,7 +63,7 @@ const Util = (($) => {
   function transitionEndEmulator(duration) {
     let called = false
 
-    $(this).one(Util.TRANSITION_END, function () {
+    $(this).one(Util.TRANSITION_END, () => {
       called = true
     })
 
@@ -98,8 +98,9 @@ const Util = (($) => {
     TRANSITION_END: 'bsTransitionEnd',
 
     getUID(prefix) {
-      do prefix += ~~(Math.random() * 1000000)
-      while (document.getElementById(prefix))
+      do {
+        prefix += ~~(Math.random() * 1000000)
+      } while (document.getElementById(prefix))
       return prefix
     },
 
@@ -123,28 +124,31 @@ const Util = (($) => {
     },
 
     supportsTransitionEnd() {
-      return !!transition
+      return Boolean(transition)
     },
 
     typeCheckConfig(componentName, config, configTypes) {
-
       for (let property in configTypes) {
-        let expectedTypes = configTypes[property]
-        let value         = config[property]
-        let valueType
-
-        if (value && isElement(value)) valueType = 'element'
-        else valueType = toType(value)
-
-        if (!new RegExp(expectedTypes).test(valueType)) {
-          throw new Error(
-            `${componentName.toUpperCase()}: ` +
-            `Option "${property}" provided type "${valueType}" ` +
-            `but expected type "${expectedTypes}".`)
+        if (configTypes.hasOwnProperty(property)) {
+          let expectedTypes = configTypes[property]
+          let value         = config[property]
+          let valueType
+
+          if (value && isElement(value)) {
+            valueType = 'element'
+          } else {
+            valueType = toType(value)
+          }
+
+          if (!new RegExp(expectedTypes).test(valueType)) {
+            throw new Error(
+              `${componentName.toUpperCase()}: ` +
+              `Option "${property}" provided type "${valueType}" ` +
+              `but expected type "${expectedTypes}".`)
+          }
         }
       }
     }
-
   }
 
   setTransitionEndSupport()

js/tests/unit/phantom.js

@@ -76,29 +76,26 @@
 // shoutout mdn: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill
 
 if (!Function.prototype.bind) {
-  Function.prototype.bind = function(oThis) {
+  Function.prototype.bind = function (oThis) {
     if (typeof this !== 'function') {
       // closest thing possible to the ECMAScript 5
       // internal IsCallable function
       throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
     }
 
-    var aArgs   = Array.prototype.slice.call(arguments, 1),
-        fToBind = this,
-        fNOP    = function() {},
-        fBound  = function() {
-          return fToBind.apply(this instanceof fNOP
-                 ? this
-                 : oThis,
-                 aArgs.concat(Array.prototype.slice.call(arguments)));
-        };
+    var aArgs   = Array.prototype.slice.call(arguments, 1)
+    var fToBind = this
+    var FNOP    = function () {}
+    var fBound  = function () {
+      return fToBind.apply(this instanceof FNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)))
+    }
 
     if (this.prototype) {
       // native functions don't have a prototype
-      fNOP.prototype = this.prototype;
+      FNOP.prototype = this.prototype
     }
-    fBound.prototype = new fNOP();
+    fBound.prototype = new FNOP()
 
-    return fBound;
-  };
+    return fBound
+  }
 }

js/tests/visual/dropdown.html

@@ -22,68 +22,72 @@
     <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
   </div>
 
-  <nav id="navbar-example" class="navbar navbar-default navbar-static-top" role="navigation">
-    <div class="container-fluid">
-      <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
-        &#9776;
-      </button>
-      <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-        <ul class="nav navbar-nav pull-left">
-          <li class="dropdown nav-item">
-            <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Dropdown
-            </a>
-            <ul class="dropdown-menu" aria-labelledby="drop1">
-              <li><a href="https://twitter.com/fat">Action</a></li>
-              <li><a href="https://twitter.com/fat">Another action</a></li>
-              <li><a href="https://twitter.com/fat">Something else here</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a href="https://twitter.com/fat">Separated link</a></li>
-            </ul>
-          </li>
-          <li class="dropdown nav-item">
-            <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Dropdown 2
-            </a>
-            <ul class="dropdown-menu" aria-labelledby="drop2">
-              <li><a href="https://twitter.com/fat">Action</a></li>
-              <li><a href="https://twitter.com/fat">Another action</a></li>
-              <li><a href="https://twitter.com/fat">Something else here</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a href="https://twitter.com/fat">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
-        <ul class="nav navbar-nav pull-right">
-          <li id="fat-menu" class="dropdown nav-item">
-            <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              Dropdown 3
-            </a>
-            <ul class="dropdown-menu" aria-labelledby="drop3">
-              <li><a href="https://twitter.com/fat">Action</a></li>
-              <li><a href="https://twitter.com/fat">Another action</a></li>
-              <li><a href="https://twitter.com/fat">Something else here</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a href="https://twitter.com/fat">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+  <nav id="navbar-example" class="navbar navbar-light bg-faded" role="navigation">
+    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
+      &#9776;
+    </button>
+
+    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+
+      <ul class="nav navbar-nav pull-left">
+
+        <li class="dropdown nav-item">
+          <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="drop1">
+            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
+            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
+            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
+          </div>
+        </li>
+
+        <li class="dropdown nav-item">
+          <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown 2
+          </a>
+          <div class="dropdown-menu" aria-labelledby="drop2">
+            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
+            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
+            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
+          </div>
+        </li>
+
+      </ul>
+
+      <ul class="nav navbar-nav pull-right">
+        <li id="fat-menu" class="dropdown nav-item">
+          <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown 3
+          </a>
+          <div class="dropdown-menu" aria-labelledby="drop3">
+            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
+            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
+            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
+          </div>
+        </li>
+      </ul>
     </div>
   </nav>
 
-  <ul class="nav nav-pills">
+  <ul class="nav nav-pills m-t-lg">
     <li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
     <li class="dropdown nav-item">
       <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
         Dropdown
       </a>
       <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
-        <li><a href="https://twitter.com/fat">Action</a></li>
-        <li><a href="https://twitter.com/fat">Another action</a></li>
-        <li><a href="https://twitter.com/fat">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="https://twitter.com/fat">Separated link</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
+        <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
+        <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
       </ul>
     </li>
     <li class="dropdown nav-item">
@@ -91,11 +95,11 @@
         Dropdown 2
       </a>
       <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
-        <li><a href="https://twitter.com/fat">Action</a></li>
-        <li><a href="https://twitter.com/fat">Another action</a></li>
-        <li><a href="https://twitter.com/fat">Something else here</a></li>
-        <li role="separator" class="divider"></li>
-        <li><a href="https://twitter.com/fat">Separated link</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
+        <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
+        <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
       </ul>
     </li>
   </ul>

js/tests/visual/modal.html

@@ -25,30 +25,30 @@
 </head>
 <body>
 
-<nav class="navbar navbar-default navbar-static-top">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="#">navbar-static-top</a>
-    </div>
-    <div id="navbar" class="navbar-collapse collapse">
-      <ul class="nav navbar-nav">
-        <li><a href="#about">About</a></li>
-        <li><a href="#contact">Contact</a></li>
-      </ul>
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#">This should not jump to the left when the modal is shown.</a></li>
-      </ul>
-    </div><!--/.nav-collapse -->
+<nav class="navbar navbar-dark bg-inverse navbar-static-top">
+  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
+    &#9776;
+  </button>
+  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+    <a class="navbar-brand" href="#">This shouldn't jump!</a>
+    <ul class="nav navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
+    </ul>
   </div>
 </nav>
 
-<div class="container">
+<div class="container m-t-lg">
 
   <div class="page-header">
     <h1>Modal <small>Bootstrap Visual Test</small></h1>
@@ -67,7 +67,7 @@
           <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
           <h4>Popover in a modal</h4>
-          <p>This <a href="#" role="button" class="btn btn-default js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p>
+          <p>This <a href="#" role="button" class="btn btn-primary js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p>
 
           <h4>Tooltips in a modal</h4>
           <p><a href="#" class="js-tooltip" title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="Tooltip">that link</a> should have tooltips on hover.</p>
@@ -141,10 +141,13 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
+<script src="../vendor/tether.min.js"></script>
 
 <script src="../../dist/util.js"></script>
 <script src="../../dist/modal.js"></script>
 <script src="../../dist/collapse.js"></script>
+<script src="../../dist/tooltip.js"></script>
+<script src="../../dist/popover.js"></script>
 
 <!-- <script src="../../transition.js"></script>
 <script src="../../tooltip.js"></script>
@@ -153,11 +156,11 @@
 <!-- JavaScript Test -->
 <script>
 $(function () {
-  // $('.js-popover').popover()
-  // $('.js-tooltip').tooltip()
-  // $('#tall-toggle').click(function () {
-  //   $('#tall').toggle()
-  // })
+  $('.js-popover').popover()
+  $('.js-tooltip').tooltip()
+  $('#tall-toggle').click(function () {
+    $('#tall').toggle()
+  })
 })
 </script>
 

package.json

@@ -28,6 +28,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "babel-eslint": "^4.0.10",
     "btoa": "~1.1.2",
     "glob": "~5.0.3",
     "grunt": "~0.4.5",
@@ -48,6 +49,7 @@
     "grunt-contrib-uglify": "~0.8.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-csscomb": "~3.0.0",
+    "grunt-eslint": "^17.1.0",
     "grunt-exec": "~0.4.6",
     "grunt-html": "~4.0.1",
     "grunt-jekyll": "~0.4.2",