From f3b4308cb59bf4b21ff186f8479c82239446d139 Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 7 Jun 2021 12:56:27 +0200 Subject: upgrade to bootstrap 5.0.1 and first batch of fixes --- .../twbs/bootstrap/site/assets/js/application.js | 196 +++++++++++++-------- 1 file changed, 122 insertions(+), 74 deletions(-) (limited to 'vendor/twbs/bootstrap/site/assets/js/application.js') diff --git a/vendor/twbs/bootstrap/site/assets/js/application.js b/vendor/twbs/bootstrap/site/assets/js/application.js index d9f8d1a4a..6ff316056 100644 --- a/vendor/twbs/bootstrap/site/assets/js/application.js +++ b/vendor/twbs/bootstrap/site/assets/js/application.js @@ -10,108 +10,156 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* global ClipboardJS: false, anchors: false, bsCustomFileInput: false */ +/* global ClipboardJS: false, anchors: false, bootstrap: false */ -(function ($) { +(function () { 'use strict' - $(function () { - // Tooltip and popover demos - $('.tooltip-demo').tooltip({ - selector: '[data-toggle="tooltip"]', - container: 'body' + // Tooltip and popover demos + document.querySelectorAll('.tooltip-demo') + .forEach(function (tooltip) { + new bootstrap.Tooltip(tooltip, { + selector: '[data-bs-toggle="tooltip"]' + }) + }) + + document.querySelectorAll('[data-bs-toggle="popover"]') + .forEach(function (popover) { + new bootstrap.Popover(popover) }) - $('[data-toggle="popover"]').popover() + var toastPlacement = document.getElementById('toastPlacement') + if (toastPlacement) { + document.getElementById('selectToastPlacement').addEventListener('change', function () { + if (!toastPlacement.dataset.originalClass) { + toastPlacement.dataset.originalClass = toastPlacement.className + } + + toastPlacement.className = toastPlacement.dataset.originalClass + ' ' + this.value + }) + } - $('.bd-example .toast') - .toast({ + document.querySelectorAll('.bd-example .toast') + .forEach(function (toastNode) { + var toast = new bootstrap.Toast(toastNode, { autohide: false }) - .toast('show') - // Live toast demo - $('#liveToastBtn').click(function () { - $('#liveToast').toast('show') + toast.show() }) - // Demos within modals - $('.tooltip-test').tooltip() - $('.popover-test').popover() - - // Indeterminate checkbox example - $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true) + var toastTrigger = document.getElementById('liveToastBtn') + var toastLiveExample = document.getElementById('liveToast') + if (toastTrigger) { + toastTrigger.addEventListener('click', function () { + var toast = new bootstrap.Toast(toastLiveExample) - // Disable empty links in docs examples - $('.bd-content [href="#"]').click(function (e) { - e.preventDefault() + toast.show() }) + } - // 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) + // Demos within modals + document.querySelectorAll('.tooltip-test') + .forEach(function (tooltip) { + new bootstrap.Tooltip(tooltip) }) - // Activate animated progress bar - $('.bd-toggle-animated-progress').on('click', function () { - $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('progress-bar-animated') + document.querySelectorAll('.popover-test') + .forEach(function (popover) { + new bootstrap.Popover(popover) }) - // Insert copy to clipboard button before .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') - }) + // Indeterminate checkbox example + document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') + .forEach(function (checkbox) { + checkbox.indeterminate = true }) - var clipboard = new ClipboardJS('.btn-clipboard', { - target: function (trigger) { - return trigger.parentNode.nextElementSibling - } + // Disable empty links in docs examples + document.querySelectorAll('.bd-content [href="#"]') + .forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault() + }) }) - clipboard.on('success', function (e) { - $(e.trigger) - .attr('title', 'Copied!') - .tooltip('_fixTitle') - .tooltip('show') - .attr('title', 'Copy to clipboard') - .tooltip('_fixTitle') + // Modal relatedTarget demo + var exampleModal = document.getElementById('exampleModal') + if (exampleModal) { + exampleModal.addEventListener('show.bs.modal', function (event) { + // Button that triggered the modal + var button = event.relatedTarget + // Extract info from data-bs-* attributes + var recipient = button.getAttribute('data-bs-whatever') + + // Update the modal's content. + var modalTitle = exampleModal.querySelector('.modal-title') + var modalBodyInput = exampleModal.querySelector('.modal-body input') + + modalTitle.textContent = 'New message to ' + recipient + modalBodyInput.value = recipient + }) + } + + // Activate animated progress bar + var btnToggleAnimatedProgress = document.getElementById('btnToggleAnimatedProgress') + if (btnToggleAnimatedProgress) { + btnToggleAnimatedProgress.addEventListener('click', function () { + btnToggleAnimatedProgress.parentNode + .querySelector('.progress-bar-striped') + .classList + .toggle('progress-bar-animated') + }) + } - e.clearSelection() + // Insert copy to clipboard button before .highlight + var btnHtml = '
' + document.querySelectorAll('div.highlight') + .forEach(function (element) { + element.insertAdjacentHTML('beforebegin', btnHtml) }) - clipboard.on('error', function (e) { - var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' - var fallbackMsg = 'Press ' + modifierKey + 'C to copy' + document.querySelectorAll('.btn-clipboard') + .forEach(function (btn) { + var tooltipBtn = new bootstrap.Tooltip(btn) - $(e.trigger) - .attr('title', fallbackMsg) - .tooltip('_fixTitle') - .tooltip('show') - .attr('title', 'Copy to clipboard') - .tooltip('_fixTitle') + 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() + }) }) - anchors.options = { - icon: '#' + var clipboard = new ClipboardJS('.btn-clipboard', { + target: function (trigger) { + return trigger.parentNode.nextElementSibling } - anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') - $('.bd-content').children('h2, h3, h4, h5').wrapInner('') + }) + + clipboard.on('success', function (e) { + var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger) + + e.trigger.setAttribute('data-bs-original-title', 'Copied!') + tooltipBtn.show() - bsCustomFileInput.init() + e.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard') + e.clearSelection() }) -})(jQuery) + + 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('data-bs-original-title', fallbackMsg) + tooltipBtn.show() + + e.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard') + }) + + anchors.options = { + icon: '#' + } + anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') +})() -- cgit v1.2.3