From cf821e1d4d1d67f6b4ce9651ae64c72a502c40ba Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 19 Jul 2018 19:48:52 +0300 Subject: [PATCH] fix(docs): remove jQuery from our docs --- site/.eslintrc.json | 4 +- site/_includes/scripts.html | 3 - site/docs/4.3/assets/js/src/application.js | 143 ++++++++++++++------- 3 files changed, 96 insertions(+), 54 deletions(-) diff --git a/site/.eslintrc.json b/site/.eslintrc.json index 04ac493147..6a5a00888a 100644 --- a/site/.eslintrc.json +++ b/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", diff --git a/site/_includes/scripts.html b/site/_includes/scripts.html index 044dd33684..184ac79a29 100644 --- a/site/_includes/scripts.html +++ b/site/_includes/scripts.html @@ -1,6 +1,3 @@ - - - {%- if jekyll.environment == "production" -%} {%- else -%} diff --git a/site/docs/4.3/assets/js/src/application.js b/site/docs/4.3/assets/js/src/application.js index 863af68286..d039273d5f 100644 --- a/site/docs/4.3/assets/js/src/application.js +++ b/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 = '
' - $(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 = '
' + 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('') + + // 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)) +}())