fix(docs): remove jquery from our docs

twbs · Jul 19, 2018 · 77178df · 77178df · ItaloBC · Jul 19, 2018
1 parent 7268f1b
commit 77178df
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 51 deletions.
diff --git a/_includes/scripts.html b/_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 }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
-
 <script src="{{ site.baseurl }}/assets/js/vendor/popper.min.js"{% if site.github %} integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"{% endif %}></script>
 
 {%- if site.github -%}

diff --git a/assets/js/.eslintrc.json b/assets/js/.eslintrc.json
@@ -1,14 +1,14 @@
 {
   "env": {
-    "es6": false,
-    "jquery": true
+    "es6": false
   },
   "parserOptions": {
     "ecmaVersion": 5,
     "sourceType": "script"
   },
   "extends": "../../.eslintrc.json",
   "rules": {
+    "no-new": "off",
     // Best Practices
     "no-magic-numbers": "off",
     "vars-on-top": "off",

diff --git a/assets/js/src/application.js b/assets/js/src/application.js
@@ -10,60 +10,93 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ClipboardJS: false, anchors: false, Holder: false */
+/* global ClipboardJS: false, anchors: false, Holder: false, bootstrap: 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()
 
     // 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
+    var exampleModal = document.getElementById('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 $modal = $(this)
-      $modal.find('.modal-title').text('New message to ' + recipient)
-      $modal.find('.modal-body input').val(recipient)
+      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 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 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', {
@@ -73,33 +106,41 @@
     })
 
     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.setAttribute('title', fallbackMsg)
+      tooltipBtn._fixTitle()
+      tooltipBtn.show()
 
-      $(e.trigger)
-        .attr('title', fallbackMsg)
-        .tooltip('_fixTitle')
-        .tooltip('show')
-        .attr('title', 'Copy to clipboard')
-        .tooltip('_fixTitle')
+      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 > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
+    // 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 div = document.createElement('div')
+      hEl.parentElement.insertBefore(div, hEl)
+      div.appendChild(hEl)
+    })
 
     // Holder
     Holder.addTheme('gray', {
@@ -109,4 +150,4 @@
       fontweight: 'normal'
     })
   })
-}(jQuery))
+}())