diff options
| -rw-r--r-- | js/tests/visual/carousel.html | 23 | ||||
| -rw-r--r-- | js/tests/visual/modal.html | 125 | ||||
| -rw-r--r-- | js/tests/visual/popover.html | 10 | ||||
| -rw-r--r-- | js/tests/visual/tooltip.html | 56 | ||||
| -rw-r--r-- | site/docs/4.3/assets/js/src/application.js | 222 |
5 files changed, 213 insertions, 223 deletions
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index fba62866d1..7dfc05ec58 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -54,19 +54,18 @@ <script src="../../dist/util.js"></script> <script src="../../dist/carousel.js"></script> <script> - document.addEventListener('DOMContentLoaded', function () { - var t0, t1; - var carousel = document.getElementById('carousel-example-generic') + var t0 + var t1 + var carousel = document.getElementById('carousel-example-generic') - // Test to show that the carousel doesn't slide when the current tab isn't visible - // Test to show that transition-duration can be changed with css - carousel.addEventListener('slid.bs.carousel', function (event) { - t1 = performance.now() - console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp) - }) - carousel.addEventListener('slide.bs.carousel', function () { - t0 = performance.now() - }) + // Test to show that the carousel doesn't slide when the current tab isn't visible + // Test to show that transition-duration can be changed with css + carousel.addEventListener('slid.bs.carousel', function (event) { + t1 = performance.now() + console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp) + }) + carousel.addEventListener('slide.bs.carousel', function () { + t0 = performance.now() }) </script> </body> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index d9e69f9d5c..b5897c9329 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -217,86 +217,83 @@ <script src="../../dist/tooltip.js"></script> <script src="../../dist/popover.js"></script> <script> + var ffBugTestResult = document.getElementById('ff-bug-test-result') var firefoxTestDone = false - document.addEventListener('DOMContentLoaded', function () { - var ffBugTestResult = document.getElementById('ff-bug-test-result') - function reportFirefoxTestResult(result) { - if (!firefoxTestDone) { - ffBugTestResult.classList - .add(result ? 'text-success' : 'text-danger') - - ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL' - } + function reportFirefoxTestResult(result) { + if (!firefoxTestDone) { + ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger') + ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL' } + } - [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) - .forEach(function (popover) { - new Popover(popover) - }) - - var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) - tooltipList.forEach(function (tooltip) { - new Tooltip(tooltip) - }) - - var tallToggle = document.getElementById('tall-toggle') - var tall = document.getElementById('tall') - tallToggle.addEventListener('click', function () { - if (tall.style.display === 'none') { - tall.style.display = 'block' - } else { - tall.style.display = 'none' - } + [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) + .forEach(function (popover) { + new Popover(popover) }) - var ffBugInput = document.getElementById('ff-bug-input') - var firefoxModal = document.getElementById('firefoxModal') - function handlerClickFfBugInput() { - firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false)) - ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true)) - ffBugInput.removeEventListener('focus', handlerClickFfBugInput) + var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) + tooltipList.forEach(function (tooltip) { + new Tooltip(tooltip) + }) + + var tallToggle = document.getElementById('tall-toggle') + var tall = document.getElementById('tall') + tallToggle.addEventListener('click', function () { + if (tall.style.display === 'none') { + tall.style.display = 'block' + } else { + tall.style.display = 'none' } - ffBugInput.addEventListener('focus', handlerClickFfBugInput) + }) - var btnPreventModal = document.getElementById('btnPreventModal') - var modalFf = new Modal(firefoxModal) + var ffBugInput = document.getElementById('ff-bug-input') + var firefoxModal = document.getElementById('firefoxModal') + function handlerClickFfBugInput() { + firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false)) + ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true)) + ffBugInput.removeEventListener('focus', handlerClickFfBugInput) + } + ffBugInput.addEventListener('focus', handlerClickFfBugInput) - btnPreventModal.addEventListener('click', function () { - function shownFirefoxModal() { - modalFf.hide() - firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal) - } + var btnPreventModal = document.getElementById('btnPreventModal') + var modalFf = new Modal(firefoxModal) - function hideFirefoxModal(event) { - event.preventDefault() - firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal) + btnPreventModal.addEventListener('click', function () { + function shownFirefoxModal() { + modalFf.hide() + firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal) + } + + function hideFirefoxModal(event) { + event.preventDefault() + firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal) - if (modalFf._isTransitioning) { - console.error('Modal plugin should not set _isTransitioning when hide event is prevented') - } else { - console.log('Test passed') - modalFf.hide() // work as expected - } + if (modalFf._isTransitioning) { + console.error('Modal plugin should not set _isTransitioning when hide event is prevented') + } else { + console.log('Test passed') + modalFf.hide() // work as expected } + } - firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal) - firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal) - modalFf.show() - }) + firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal) + firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal) + modalFf.show() + }) - // Test transition duration - var t0, t1; - var slowModal = document.getElementById('slowModal') + // Test transition duration + var t0 + var t1 + var slowModal = document.getElementById('slowModal') - slowModal.addEventListener('shown.bs.modal', function () { - t1 = performance.now() - console.log('transition-duration took ' + (t1 - t0) + 'ms.') - }) + slowModal.addEventListener('shown.bs.modal', function () { + t1 = performance.now() + console.log('transition-duration took ' + (t1 - t0) + 'ms.') + }) - slowModal.addEventListener('show.bs.modal', function () { - t0 = performance.now() - }) + slowModal.addEventListener('show.bs.modal', function () { + t0 = performance.now() }) </script> </body> diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index 86916c3d42..72d9dd32d9 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -41,12 +41,10 @@ <script src="../../dist/tooltip.js"></script> <script src="../../dist/popover.js"></script> <script> - document.addEventListener('DOMContentLoaded', function () { - [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) - .forEach(function (popover) { - new Popover(popover) - }) - }) + [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) + .forEach(function (popover) { + new Popover(popover) + }) </script> </body> </html> diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 643597a401..1b25c3b637 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -80,40 +80,38 @@ <script src="../../dist/dom/selectorEngine.js"></script> <script src="../../dist/tooltip.js"></script> <script> - document.addEventListener('DOMContentLoaded', function () { - if (typeof document.body.attachShadow === 'function') { - var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) - shadowRoot.innerHTML = - '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' + - ' Tooltip on top in a shadow dom' + - '</button>' + - '<button id="secondTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' + - ' Tooltip on top in a shadow dom' + - '</button>' + if (typeof document.body.attachShadow === 'function') { + var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) + shadowRoot.innerHTML = + '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' + + ' Tooltip on top in a shadow dom' + + '</button>' + + '<button id="secondTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' + + ' Tooltip on top in a shadow dom' + + '</button>' - var firstChildTooltip = new Tooltip(shadowRoot.firstChild) - var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), { - container: shadowRoot - }) - } - - [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) - .forEach(function (tooltip) { - new Tooltip(tooltip) - }) - - var tooltipElement = document.getElementById('tooltipElement') - var tooltipElementInstance = new Tooltip(tooltipElement, { - container: document.getElementById('customContainer') + var firstChildTooltip = new Tooltip(shadowRoot.firstChild) + var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), { + container: shadowRoot }) + } - var target = document.getElementById('target') - var targetTooltip = new Tooltip(target, { - placement : 'top', - trigger : 'manual' + [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) + .forEach(function (tooltip) { + new Tooltip(tooltip) }) - targetTooltip.show() + + var tooltipElement = document.getElementById('tooltipElement') + var tooltipElementInstance = new Tooltip(tooltipElement, { + container: document.getElementById('customContainer') + }) + + var target = document.getElementById('target') + var targetTooltip = new Tooltip(target, { + placement : 'top', + trigger : 'manual' }) + targetTooltip.show() </script> </body> </html> diff --git a/site/docs/4.3/assets/js/src/application.js b/site/docs/4.3/assets/js/src/application.js index 858e5d0e55..24b633bec1 100644 --- a/site/docs/4.3/assets/js/src/application.js +++ b/site/docs/4.3/assets/js/src/application.js @@ -15,143 +15,141 @@ (function () { 'use strict' - document.addEventListener('DOMContentLoaded', function () { - // Tooltip and popover demos - bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-demo')) - .forEach(function (tooltip) { - new bootstrap.Tooltip(tooltip, { - selector: '[data-toggle="tooltip"]' - }) - }) - - bootstrap.Util.makeArray(document.querySelectorAll('[data-toggle="popover"]')) - .forEach(function (popover) { - new bootstrap.Popover(popover) + // Tooltip and popover demos + bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-demo')) + .forEach(function (tooltip) { + new bootstrap.Tooltip(tooltip, { + selector: '[data-toggle="tooltip"]' }) + }) - bootstrap.Util.makeArray(document.querySelectorAll('.toast')) - .forEach(function (toastNode) { - var toast = new bootstrap.Toast(toastNode, { - autohide: false - }) + bootstrap.Util.makeArray(document.querySelectorAll('[data-toggle="popover"]')) + .forEach(function (popover) { + new bootstrap.Popover(popover) + }) - toast.show() + bootstrap.Util.makeArray(document.querySelectorAll('.toast')) + .forEach(function (toastNode) { + var toast = new bootstrap.Toast(toastNode, { + autohide: false }) - // Demos within modals - bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-test')) - .forEach(function (tooltip) { - new bootstrap.Tooltip(tooltip) - }) + toast.show() + }) - bootstrap.Util.makeArray(document.querySelectorAll('.popover-test')) - .forEach(function (popover) { - new bootstrap.Popover(popover) - }) + // Demos within modals + bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-test')) + .forEach(function (tooltip) { + new bootstrap.Tooltip(tooltip) + }) - // Indeterminate checkbox example - bootstrap.Util.makeArray(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')) - .forEach(function (checkbox) { - checkbox.indeterminate = true - }) + bootstrap.Util.makeArray(document.querySelectorAll('.popover-test')) + .forEach(function (popover) { + new bootstrap.Popover(popover) + }) - // Disable empty links in docs examples - bootstrap.Util.makeArray(document.querySelectorAll('.bd-content [href="#"]')) - .forEach(function (link) { - link.addEventListener('click', function (e) { - e.preventDefault() - }) - }) + // Indeterminate checkbox example + bootstrap.Util.makeArray(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')) + .forEach(function (checkbox) { + checkbox.indeterminate = true + }) - // Modal relatedTarget demo - 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 + // Disable empty links in docs examples + bootstrap.Util.makeArray(document.querySelectorAll('.bd-content [href="#"]')) + .forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault() + }) + }) - // Update the modal's content. - var modalTitle = exampleModal.querySelector('.modal-title') - var modalBodyInput = exampleModal.querySelector('.modal-body input') + // Modal relatedTarget demo + 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 - modalTitle.innerHTML = 'New message to ' + recipient - modalBodyInput.value = recipient - }) - } + // Update the modal's content. + var modalTitle = exampleModal.querySelector('.modal-title') + var modalBodyInput = exampleModal.querySelector('.modal-body input') - // Activate animated progress bar - bootstrap.Util.makeArray(document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped')) - .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') - } - }) + modalTitle.innerHTML = 'New message to ' + recipient + modalBodyInput.value = recipient + }) + } + + // Activate animated progress bar + bootstrap.Util.makeArray(document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped')) + .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 - var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>' - bootstrap.Util.makeArray(document.querySelectorAll('figure.highlight, div.highlight')) - .forEach(function (element) { - element.insertAdjacentHTML('beforebegin', btnHtml) - }) + // Insert copy to clipboard button before .highlight + var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>' + bootstrap.Util.makeArray(document.querySelectorAll('figure.highlight, div.highlight')) + .forEach(function (element) { + element.insertAdjacentHTML('beforebegin', btnHtml) + }) - bootstrap.Util.makeArray(document.querySelectorAll('.btn-clipboard')) - .forEach(function (btn) { - var tooltipBtn = new bootstrap.Tooltip(btn) + bootstrap.Util.makeArray(document.querySelectorAll('.btn-clipboard')) + .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() - }) + 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', { - target: function (trigger) { - return trigger.parentNode.nextElementSibling - } }) - clipboard.on('success', function (e) { - var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger) + var clipboard = new ClipboardJS('.btn-clipboard', { + target: function (trigger) { + return trigger.parentNode.nextElementSibling + } + }) - e.trigger.setAttribute('title', 'Copied!') - tooltipBtn._fixTitle() - tooltipBtn.show() + clipboard.on('success', function (e) { + var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger) - e.trigger.setAttribute('title', 'Copy to clipboard') - tooltipBtn._fixTitle() - e.clearSelection() - }) + e.trigger.setAttribute('title', 'Copied!') + tooltipBtn._fixTitle() + tooltipBtn.show() - 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', 'Copy to clipboard') + tooltipBtn._fixTitle() + e.clearSelection() + }) - e.trigger.setAttribute('title', fallbackMsg) - tooltipBtn._fixTitle() - tooltipBtn.show() + 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', 'Copy to clipboard') - tooltipBtn._fixTitle() - }) + e.trigger.setAttribute('title', fallbackMsg) + tooltipBtn._fixTitle() + tooltipBtn.show() - anchors.options = { - icon: '#' - } - anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') + e.trigger.setAttribute('title', 'Copy to clipboard') + tooltipBtn._fixTitle() + }) - // Wrap inner - bootstrap.Util.makeArray(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')) - .forEach(function (hEl) { - hEl.innerHTML = '<span class="bd-content-title">' + hEl.innerHTML + '</span>' - }) + anchors.options = { + icon: '#' + } + anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') - bsCustomFileInput.init() - }) + // Wrap inner + bootstrap.Util.makeArray(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')) + .forEach(function (hEl) { + hEl.innerHTML = '<span class="bd-content-title">' + hEl.innerHTML + '</span>' + }) + + bsCustomFileInput.init() }()) |