{
- "root": true,
+ "env": {
+ "browser": true,
+ "node": false
+ },
"parserOptions": {
- "ecmaVersion": 5,
"sourceType": "script"
},
- "extends": [
- "plugin:unicorn/recommended",
- "xo",
- "xo/browser"
- ],
+ "extends": "../.eslintrc.json",
"rules": {
- "arrow-body-style": "off",
- "capitalized-comments": "off",
- "comma-dangle": [
- "error",
- "never"
- ],
- "indent": [
- "error",
- 2,
- {
- "MemberExpression": "off",
- "SwitchCase": 1
- }
- ],
- "multiline-ternary": [
- "error",
- "always-multiline"
- ],
- "no-negated-condition": "off",
"no-new": "off",
- "no-var": "off",
- "object-curly-spacing": [
- "error",
- "always"
- ],
- "object-shorthand": "off",
- "operator-linebreak": [
- "error",
- "after"
- ],
- "prefer-arrow-callback": "off",
- "prefer-destructuring": "off",
- "semi": [
- "error",
- "never"
- ],
+ "prefer-template": "error",
"strict": "error",
"unicorn/no-array-for-each": "off",
- "unicorn/no-array-method-this-argument": "off",
- "unicorn/no-for-loop": "off",
- "unicorn/no-null": "off",
- "unicorn/numeric-separators-style": "off",
- "unicorn/prefer-array-flat": "off",
- "unicorn/prefer-dom-node-dataset": "off",
- "unicorn/prefer-module": "off",
- "unicorn/prefer-query-selector": "off",
- "unicorn/prevent-abbreviations": "off"
+ "unicorn/numeric-separators-style": "off"
}
}
/* global ClipboardJS: false, bootstrap: false */
-(function () {
+(() => {
'use strict'
// Tooltip and popover demos
document.querySelectorAll('.tooltip-demo')
- .forEach(function (tooltip) {
+ .forEach(tooltip => {
new bootstrap.Tooltip(tooltip, {
selector: '[data-bs-toggle="tooltip"]'
})
})
document.querySelectorAll('[data-bs-toggle="popover"]')
- .forEach(function (popover) {
+ .forEach(popover => {
new bootstrap.Popover(popover)
})
- var toastPlacement = document.getElementById('toastPlacement')
+ const 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
+ toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
})
}
document.querySelectorAll('.bd-example .toast')
- .forEach(function (toastNode) {
- var toast = new bootstrap.Toast(toastNode, {
+ .forEach(toastNode => {
+ const toast = new bootstrap.Toast(toastNode, {
autohide: false
})
toast.show()
})
- var toastTrigger = document.getElementById('liveToastBtn')
- var toastLiveExample = document.getElementById('liveToast')
+ const toastTrigger = document.getElementById('liveToastBtn')
+ const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
- toastTrigger.addEventListener('click', function () {
- var toast = new bootstrap.Toast(toastLiveExample)
+ toastTrigger.addEventListener('click', () => {
+ const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
- var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
- var alertTrigger = document.getElementById('liveAlertBtn')
+ const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+ const alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
- var wrapper = document.createElement('div')
- wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
+ const wrapper = document.createElement('div')
+ wrapper.innerHTML = `<div class="alert alert-${type} alert-dismissible" role="alert">${message}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
- alertTrigger.addEventListener('click', function () {
+ alertTrigger.addEventListener('click', () => {
alert('Nice, you triggered this alert message!', 'success')
})
}
// Demos within modals
document.querySelectorAll('.tooltip-test')
- .forEach(function (tooltip) {
+ .forEach(tooltip => {
new bootstrap.Tooltip(tooltip)
})
document.querySelectorAll('.popover-test')
- .forEach(function (popover) {
+ .forEach(popover => {
new bootstrap.Popover(popover)
})
// Indeterminate checkbox example
document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
- .forEach(function (checkbox) {
+ .forEach(checkbox => {
checkbox.indeterminate = true
})
// Disable empty links in docs examples
document.querySelectorAll('.bd-content [href="#"]')
- .forEach(function (link) {
- link.addEventListener('click', function (event) {
+ .forEach(link => {
+ link.addEventListener('click', event => {
event.preventDefault()
})
})
// Modal relatedTarget demo
- var exampleModal = document.getElementById('exampleModal')
+ const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
- exampleModal.addEventListener('show.bs.modal', function (event) {
+ exampleModal.addEventListener('show.bs.modal', event => {
// Button that triggered the modal
- var button = event.relatedTarget
+ const button = event.relatedTarget
// Extract info from data-bs-* attributes
- var recipient = button.getAttribute('data-bs-whatever')
+ const recipient = button.getAttribute('data-bs-whatever')
// Update the modal's content.
- var modalTitle = exampleModal.querySelector('.modal-title')
- var modalBodyInput = exampleModal.querySelector('.modal-body input')
+ const modalTitle = exampleModal.querySelector('.modal-title')
+ const modalBodyInput = exampleModal.querySelector('.modal-body input')
- modalTitle.textContent = 'New message to ' + recipient
+ modalTitle.textContent = `New message to ${recipient}`
modalBodyInput.value = recipient
})
}
// Insert copy to clipboard button before .highlight
- var btnTitle = 'Copy to clipboard'
- var btnEdit = 'Edit on StackBlitz'
-
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
+ const btnTitle = 'Copy to clipboard'
+ const btnEdit = 'Edit on StackBlitz'
+
const btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
document.querySelectorAll('div.highlight')
- .forEach(function (element) {
+ .forEach(element => {
element.insertAdjacentHTML('beforebegin', btnHtml)
})
* @param {string} title
*/
function snippetButtonTooltip(selector, title) {
- document.querySelectorAll(selector).forEach(function (btn) {
- var tooltipBtn = new bootstrap.Tooltip(btn, { title: title })
+ document.querySelectorAll(selector).forEach(btn => {
+ const tooltipBtn = new bootstrap.Tooltip(btn, { title })
- btn.addEventListener('mouseleave', function () {
+ btn.addEventListener('mouseleave', () => {
// 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
snippetButtonTooltip('.btn-clipboard', btnTitle)
snippetButtonTooltip('.btn-edit', btnEdit)
- var clipboard = new ClipboardJS('.btn-clipboard', {
- target: function (trigger) {
+ const clipboard = new ClipboardJS('.btn-clipboard', {
+ target(trigger) {
return trigger.parentNode.nextElementSibling
}
})
- clipboard.on('success', function (event) {
- var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+ clipboard.on('success', event => {
+ const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
- event.trigger.addEventListener('hidden.bs.tooltip', function () {
+ event.trigger.addEventListener('hidden.bs.tooltip', () => {
tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
}, { once: true })
event.clearSelection()
})
- clipboard.on('error', function (event) {
- var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
- var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
- var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+ clipboard.on('error', event => {
+ const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+ const fallbackMsg = `Press ${modifierKey}C to copy`
+ const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
- event.trigger.addEventListener('hidden.bs.tooltip', function () {
+ event.trigger.addEventListener('hidden.bs.tooltip', () => {
tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
}, { once: true })
})
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
-(function () {
+(() => {
'use strict'
- var inputElement = document.getElementById('search-input')
+ const inputElement = document.getElementById('search-input')
if (!window.docsearch || !inputElement) {
return
}
- var siteDocsVersion = inputElement.getAttribute('data-bd-docs-version')
+ const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version')
- document.addEventListener('keydown', function (event) {
+ document.addEventListener('keydown', event => {
if (event.ctrlKey && event.key === '/') {
event.preventDefault()
inputElement.focus()
indexName: 'bootstrap',
inputSelector: '#search-input',
algoliaOptions: {
- facetFilters: ['version:' + siteDocsVersion]
+ facetFilters: [`version:${siteDocsVersion}`]
},
- transformData: function (hits) {
- return hits.map(function (hit) {
- var liveUrl = 'https://getbootstrap.com/'
+ transformData(hits) {
+ return hits.map(hit => {
+ const liveUrl = 'https://getbootstrap.com/'
hit.url = window.location.origin.startsWith(liveUrl) ?
// On production, return the result as is
/* global bootstrap: false */
-(function () {
+(() => {
'use strict'
// Tooltip and popover demos
document.querySelectorAll('.tooltip-demo')
- .forEach(function (tooltip) {
+ .forEach(tooltip => {
new bootstrap.Tooltip(tooltip, {
selector: '[data-bs-toggle="tooltip"]'
})
})
document.querySelectorAll('[data-bs-toggle="popover"]')
- .forEach(function (popover) {
+ .forEach(popover => {
new bootstrap.Popover(popover)
})
document.querySelectorAll('.toast')
- .forEach(function (toastNode) {
- var toast = new bootstrap.Toast(toastNode, {
+ .forEach(toastNode => {
+ const toast = new bootstrap.Toast(toastNode, {
autohide: false
})
// Disable empty links and submit buttons
document.querySelectorAll('[href="#"], [type="submit"]')
- .forEach(function (link) {
- link.addEventListener('click', function (event) {
+ .forEach(link => {
+ link.addEventListener('click', event => {
event.preventDefault()
})
})
function setActiveItem() {
- var hash = window.location.hash
+ const { hash } = window.location
if (hash === '') {
return
}
- var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
+ const link = document.querySelector(`.bd-aside a[href="${hash}"]`)
if (!link) {
return
}
- var active = document.querySelector('.bd-aside .active')
- var parent = link.parentNode.parentNode.previousElementSibling
+ const active = document.querySelector('.bd-aside .active')
+ const parent = link.parentNode.parentNode.previousElementSibling
link.classList.add('active')
return
}
- var expanded = active.parentNode.parentNode.previousElementSibling
+ const expanded = active.parentNode.parentNode.previousElementSibling
active.classList.remove('active')
// Example starter JavaScript for disabling form submissions if there are invalid fields
-(function () {
+(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
- var forms = document.querySelectorAll('.needs-validation')
+ const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
- Array.prototype.slice.call(forms)
- .forEach(function (form) {
- form.addEventListener('submit', function (event) {
- if (!form.checkValidity()) {
- event.preventDefault()
- event.stopPropagation()
- }
+ Array.from(forms).forEach(form => {
+ form.addEventListener('submit', event => {
+ if (!form.checkValidity()) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
- form.classList.add('was-validated')
- }, false)
- })
+ form.classList.add('was-validated')
+ }, false)
+ })
})()
/* globals Chart:false, feather:false */
-(function () {
+(() => {
'use strict'
feather.replace({ 'aria-hidden': 'true' })
// Graphs
- var ctx = document.getElementById('myChart')
+ const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
- var myChart = new Chart(ctx, {
+ const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
/* globals Chart:false, feather:false */
-(function () {
+(() => {
'use strict'
feather.replace({ 'aria-hidden': 'true' })
// Graphs
- var ctx = document.getElementById('myChart')
+ const ctx = document.getElementById('myChart')
// eslint-disable-next-line no-unused-vars
- var myChart = new Chart(ctx, {
+ const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
-(function () {
+(() => {
'use strict'
- document.querySelector('#navbarSideCollapse').addEventListener('click', function () {
+ document.querySelector('#navbarSideCollapse').addEventListener('click', () => {
document.querySelector('.offcanvas-collapse').classList.toggle('open')
})
})()
/* global bootstrap: false */
-(function () {
+(() => {
'use strict'
- var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
- tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+ const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+ tooltipTriggerList.forEach(tooltipTriggerEl => {
new bootstrap.Tooltip(tooltipTriggerEl)
})
})()
{{ if eq .Page.Layout "docs" -}}
<script>
// Open in StackBlitz logic
- document.querySelectorAll('.btn-edit')
- .forEach(function (btn) {
- btn.addEventListener('click', function (event) {
- var htmlSnippet = event.target.closest('.bd-edit').previousSibling.innerHTML
+ document.querySelectorAll('.btn-edit').forEach(btn => {
+ btn.addEventListener('click', event => {
+ const htmlSnippet = event.target.closest('.bd-edit').previousSibling.innerHTML
- StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
- })
+ StackBlitzSDK.openBootstrapSnippet(htmlSnippet)
})
+ })
- StackBlitzSDK.openBootstrapSnippet = function(snippet) {
- var project = {
- files: {
- 'index.html': `<!doctype html>
+ StackBlitzSDK.openBootstrapSnippet = snippet => {
+ const markup = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
</body>
</html>`
- },
- title: 'Bootstrap Example',
- description: 'Official example from ' + window.location.href,
- template: 'html',
- tags: ['bootstrap']
- }
+
+ const project = {
+ files: {
+ 'index.html': markup
+ },
+ title: 'Bootstrap Example',
+ description: `Official example from ${window.location.href}`,
+ template: 'html',
+ tags: ['bootstrap']
+ }
StackBlitzSDK.openProject(project, { openFile: 'index.html' })
}
// Example starter JavaScript for disabling form submissions if there are invalid fields
-(function () {
+(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
- var forms = document.querySelectorAll('.needs-validation')
+ const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
- Array.prototype.slice.call(forms)
- .forEach(function (form) {
- form.addEventListener('submit', function (event) {
- if (!form.checkValidity()) {
- event.preventDefault()
- event.stopPropagation()
- }
+ Array.from(forms).forEach(form => {
+ form.addEventListener('submit', event => {
+ if (!form.checkValidity()) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
- form.classList.add('was-validated')
- }, false)
- })
+ form.classList.add('was-validated')
+ }, false)
+ })
})()
projects / thirdparty / bootstrap.git / commitdiff
