fix(docs): remove jQuery from our docs

site/.eslintrc.json

@@ -1,7 +1,6 @@
 {
   "env": {
-    "es6": false,
-    "jquery": true
+    "es6": false
   },
   "parserOptions": {
     "ecmaVersion": 5,
@@ -9,6 +8,7 @@
   },
   "extends": "../.eslintrc.json",
   "rules": {
+    "no-new": "off",
     // Best Practices
     "no-magic-numbers": "off",
     "vars-on-top": "off",

site/_includes/scripts.html

@@ -1,6 +1,3 @@
-<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
-<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
-
 {%- if jekyll.environment == "production" -%}
   <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.min.js" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script>
 {%- else -%}

site/docs/4.3/assets/js/src/application.js

@@ -10,19 +10,23 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ClipboardJS: false, anchors: false, bsCustomFileInput: false */
+/* global ClipboardJS: false, anchors: false, bootstrap: false, bsCustomFileInput: false */
 
-(function ($) {
+(function () {
   'use strict'
 
-  $(function () {
+  document.addEventListener('DOMContentLoaded', function () {
     // Tooltip and popover demos
-    $('.tooltip-demo').tooltip({
-      selector: '[data-toggle="tooltip"]',
-      container: 'body'
+    var tooltipDemoList = document.querySelectorAll('.tooltip-demo')
+    tooltipDemoList.forEach(function (tooltip) {
+      new bootstrap.Tooltip(tooltip, {
+        selector: '[data-toggle="tooltip"]'
+      })
+    })
+    var popoverList = document.querySelectorAll('[data-toggle="popover"]')
+    popoverList.forEach(function (popover) {
+      new bootstrap.Popover(popover)
     })
-
-    $('[data-toggle="popover"]').popover()
 
     $('.toast')
       .toast({
@@ -31,45 +35,76 @@
       .toast('show')
 
     // Demos within modals
-    $('.tooltip-test').tooltip()
-    $('.popover-test').popover()
+    var tooltipTestList = document.querySelectorAll('.tooltip-test')
+    tooltipTestList.forEach(function (tooltip) {
+      new bootstrap.Tooltip(tooltip)
+    })
+
+    var popoverTestList = document.querySelectorAll('.popover-test')
+    popoverTestList.forEach(function (popover) {
+      new bootstrap.Popover(popover)
+    })
 
     // Indeterminate checkbox example
-    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
+    var indeterminateCheckboxList = document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
+    indeterminateCheckboxList.forEach(function (checkbox) {
+      checkbox.indeterminate = true
+    })
 
     // Disable empty links in docs examples
-    $('.bd-content [href="#"]').click(function (e) {
-      e.preventDefault()
+    var emptyLinkList = document.querySelectorAll('.bd-content [href="#"]')
+    emptyLinkList.forEach(function (link) {
+      link.addEventListener('click', function (e) {
+        e.preventDefault()
+      })
     })
 
     // Modal relatedTarget demo
-    $('#exampleModal').on('show.bs.modal', function (event) {
-      var $button = $(event.relatedTarget)      // Button that triggered the modal
-      var recipient = $button.data('whatever')  // Extract info from data-* attributes
-      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
-      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
-      var $modal = $(this)
-      $modal.find('.modal-title').text('New message to ' + recipient)
-      $modal.find('.modal-body input').val(recipient)
-    })
+    var exampleModal = document.getElementById('exampleModal')
+    if (exampleModal) {
+      exampleModal.addEventListener('show.bs.modal', function (event) {
+        var button = event.relatedTarget                     // Button that triggered the modal
+        var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes
+
+        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+        var modalTitle = exampleModal.querySelector('.modal-title')
+        var modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+        modalTitle.innerHTML = 'New message to ' + recipient
+        modalBodyInput.value = recipient
+      })
+    }
 
     // Activate animated progress bar
-    $('.bd-toggle-animated-progress').on('click', function () {
-      $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated')
+    var animatedProgressBarList = document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped')
+    animatedProgressBarList.forEach(function (progressBar) {
+      progressBar.addEventListener('click', function () {
+        if (progressBar.classList.contains('progress-bar-animated')) {
+          progressBar.classList.remove('progress-bar-animated')
+        } else {
+          progressBar.classList.add('progress-bar-animated')
+        }
+      })
     })
 
     // Insert copy to clipboard button before .highlight
-    $('figure.highlight, div.highlight').each(function () {
-      var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
-      $(this).before(btnHtml)
-      $('.btn-clipboard')
-        .tooltip()
-        .on('mouseleave', function () {
-          // Explicitly hide tooltip, since after clicking it remains
-          // focused (as it's a button), so tooltip would otherwise
-          // remain visible until focus is moved away
-          $(this).tooltip('hide')
-        })
+    var hightList = [].slice.call(document.querySelectorAll('figure.highlight, div.highlight'))
+    var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
+    hightList.forEach(function (element) {
+      element.insertAdjacentHTML('beforebegin', btnHtml)
+    })
+
+    var copyBtnList = [].slice.call(document.querySelectorAll('.btn-clipboard'))
+    copyBtnList.forEach(function (btn) {
+      var tooltipBtn = new bootstrap.Tooltip(btn)
+
+      btn.addEventListener('mouseleave', function () {
+        // Explicitly hide tooltip, since after clicking it remains
+        // focused (as it's a button), so tooltip would otherwise
+        // remain visible until focus is moved away
+        tooltipBtn.hide()
+      })
     })
 
     var clipboard = new ClipboardJS('.btn-clipboard', {
@@ -79,34 +114,44 @@
     })
 
     clipboard.on('success', function (e) {
-      $(e.trigger)
-        .attr('title', 'Copied!')
-        .tooltip('_fixTitle')
-        .tooltip('show')
-        .attr('title', 'Copy to clipboard')
-        .tooltip('_fixTitle')
+      var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger)
 
+      e.trigger.setAttribute('title', 'Copied!')
+      tooltipBtn._fixTitle()
+      tooltipBtn.show()
+
+      e.trigger.setAttribute('title', 'Copy to clipboard')
+      tooltipBtn._fixTitle()
       e.clearSelection()
     })
 
     clipboard.on('error', function (e) {
       var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
       var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
+      var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger)
 
-      $(e.trigger)
-        .attr('title', fallbackMsg)
-        .tooltip('_fixTitle')
-        .tooltip('show')
-        .attr('title', 'Copy to clipboard')
-        .tooltip('_fixTitle')
+      e.trigger.setAttribute('title', fallbackMsg)
+      tooltipBtn._fixTitle()
+      tooltipBtn.show()
+
+      e.trigger.setAttribute('title', 'Copy to clipboard')
+      tooltipBtn._fixTitle()
     })
 
     anchors.options = {
       icon: '#'
     }
     anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
-    $('.bd-content').children('h2, h3, h4, h5').wrapInner('<span class="bd-content-title"></span>')
+
+    // Wrap inner
+    var hList = [].slice.call(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'))
+    hList.forEach(function (hEl) {
+      var span = document.createElement('span')
+      span.classList.add('bd-content-title')
+      hEl.parentElement.insertBefore(span, hEl)
+      span.appendChild(hEl)
+    })
 
     bsCustomFileInput.init()
   })
-}(jQuery))
+}())