From b87b7c5e475f770c38f1a1d1b15c14f9d1b0d49b Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Wed, 22 Jul 2020 22:33:11 +0300 Subject: [PATCH 1/6] Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests --- js/src/alert.js | 2 +- js/src/button.js | 2 +- js/src/carousel.js | 8 +- js/src/collapse.js | 8 +- js/src/dom/manipulator.js | 10 +- js/src/dropdown.js | 2 +- js/src/modal.js | 22 +- js/src/popover.js | 2 +- js/src/scrollspy.js | 4 +- js/src/tab.js | 2 +- js/src/toast.js | 2 +- js/src/tooltip.js | 6 +- js/src/util/index.js | 4 +- js/tests/integration/bundle-modularity.js | 2 +- js/tests/integration/bundle.js | 2 +- js/tests/integration/index.html | 14 +- js/tests/unit/alert.spec.js | 4 +- js/tests/unit/button.spec.js | 14 +- js/tests/unit/carousel.spec.js | 52 ++--- js/tests/unit/collapse.spec.js | 72 +++--- js/tests/unit/dom/manipulator.spec.js | 24 +- js/tests/unit/dropdown.spec.js | 212 +++++++++--------- js/tests/unit/jquery.spec.js | 2 +- js/tests/unit/modal.spec.js | 54 ++--- js/tests/unit/popover.spec.js | 18 +- js/tests/unit/scrollspy.spec.js | 2 +- js/tests/unit/tab.spec.js | 40 ++-- js/tests/unit/toast.spec.js | 22 +- js/tests/unit/tooltip.spec.js | 2 +- js/tests/unit/util/index.spec.js | 22 +- js/tests/visual/alert.html | 8 +- js/tests/visual/button.html | 6 +- js/tests/visual/carousel.html | 12 +- js/tests/visual/collapse.html | 18 +- js/tests/visual/dropdown.html | 32 +-- js/tests/visual/modal.html | 44 ++-- js/tests/visual/popover.html | 12 +- js/tests/visual/scrollspy.html | 6 +- js/tests/visual/tab.html | 50 ++--- js/tests/visual/toast.html | 6 +- js/tests/visual/tooltip.html | 26 +-- scss/_reboot.scss | 4 +- site/assets/js/application.js | 16 +- site/assets/js/search.js | 2 +- site/content/docs/5.0/components/alerts.md | 8 +- .../docs/5.0/components/button-group.md | 10 +- site/content/docs/5.0/components/buttons.md | 14 +- site/content/docs/5.0/components/carousel.md | 58 ++--- site/content/docs/5.0/components/collapse.md | 26 +-- site/content/docs/5.0/components/dropdowns.md | 108 ++++----- .../content/docs/5.0/components/list-group.md | 38 ++-- site/content/docs/5.0/components/modal.md | 150 ++++++------- site/content/docs/5.0/components/navbar.md | 30 +-- site/content/docs/5.0/components/navs-tabs.md | 78 +++---- site/content/docs/5.0/components/popovers.md | 32 +-- site/content/docs/5.0/components/progress.md | 2 +- site/content/docs/5.0/components/scrollspy.md | 26 +-- site/content/docs/5.0/components/toasts.md | 30 +-- site/content/docs/5.0/components/tooltips.md | 36 +-- .../docs/5.0/examples/album/index.html | 2 +- .../docs/5.0/examples/carousel/index.html | 14 +- .../docs/5.0/examples/dashboard/index.html | 2 +- .../5.0/examples/navbar-bottom/index.html | 4 +- .../docs/5.0/examples/navbar-fixed/index.html | 2 +- .../5.0/examples/navbar-static/index.html | 2 +- .../docs/5.0/examples/navbars/index.html | 46 ++-- .../docs/5.0/examples/offcanvas/index.html | 4 +- .../docs/5.0/examples/offcanvas/offcanvas.js | 2 +- .../5.0/examples/starter-template/index.html | 4 +- .../examples/sticky-footer-navbar/index.html | 2 +- site/content/docs/5.0/forms/input-group.md | 12 +- .../docs/5.0/getting-started/javascript.md | 8 +- site/layouts/partials/docs-navbar.html | 2 +- site/layouts/partials/docs-sidebar.html | 2 +- site/layouts/partials/docs-subnav.html | 4 +- site/layouts/partials/docs-versions.html | 2 +- 76 files changed, 827 insertions(+), 807 deletions(-) diff --git a/js/src/alert.js b/js/src/alert.js index 7eb53ac0bc38..724cda0173b2 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -const SELECTOR_DISMISS = '[data-dismiss="alert"]' +const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]' const EVENT_CLOSE = `close${EVENT_KEY}` const EVENT_CLOSED = `closed${EVENT_KEY}` diff --git a/js/src/button.js b/js/src/button.js index dc9bd0e9db38..42376943debd 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]' const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` diff --git a/js/src/carousel.js b/js/src/carousel.js index 84a88bb04d12..58844a38732e 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item' const SELECTOR_ITEM_IMG = '.carousel-item img' const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev' const SELECTOR_INDICATORS = '.carousel-indicators' -const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]' -const SELECTOR_DATA_RIDE = '[data-ride="carousel"]' +const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]' +const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]' const PointerType = { TOUCH: 'touch', @@ -419,7 +419,7 @@ class Carousel { return } - const elementInterval = parseInt(element.getAttribute('data-interval'), 10) + const elementInterval = parseInt(element.getAttribute('data-bs-interval'), 10) if (elementInterval) { this._config.defaultInterval = this._config.defaultInterval || this._config.interval @@ -576,7 +576,7 @@ class Carousel { ...Manipulator.getDataAttributes(target), ...Manipulator.getDataAttributes(this) } - const slideIndex = this.getAttribute('data-slide-to') + const slideIndex = this.getAttribute('data-bs-slide-to') if (slideIndex) { config.interval = false diff --git a/js/src/collapse.js b/js/src/collapse.js index 838d0f2a36e9..f3ca86f3662b 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -59,7 +59,7 @@ const WIDTH = 'width' const HEIGHT = 'height' const SELECTOR_ACTIVES = '.show, .collapsing' -const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** * ------------------------------------------------------------------------ @@ -74,7 +74,7 @@ class Collapse { this._config = this._getConfig(config) this._triggerArray = SelectorEngine.find( `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` + - `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]` + `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]` ) const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) @@ -137,7 +137,7 @@ class Collapse { actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent) .filter(elem => { if (typeof this._config.parent === 'string') { - return elem.getAttribute('data-parent') === this._config.parent + return elem.getAttribute('data-bs-parent') === this._config.parent } return elem.classList.contains(CLASS_NAME_COLLAPSE) @@ -303,7 +303,7 @@ class Collapse { parent = SelectorEngine.findOne(parent) } - const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]` + const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]` SelectorEngine.find(selector, parent) .forEach(element => { diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index bcbd340acef0..04b9543c8a34 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -47,9 +47,13 @@ const Manipulator = { ...element.dataset } - Object.keys(attributes).forEach(key => { - attributes[key] = normalizeData(attributes[key]) - }) + Object.keys(attributes) + .filter(key => key.startsWith('bs')) + .forEach(key => { + let pureKey = key.replace(/^bs/, '') + pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length) + attributes[pureKey] = normalizeData(attributes[key]) + }) return attributes }, diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 3a3f12c4887d..c262997ce940 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right' const CLASS_NAME_NAVBAR = 'navbar' const CLASS_NAME_POSITION_STATIC = 'position-static' -const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_FORM_CHILD = '.dropdown form' const SELECTOR_MENU = '.dropdown-menu' const SELECTOR_NAVBAR_NAV = '.navbar-nav' diff --git a/js/src/modal.js b/js/src/modal.js index d6d10ab935d9..c42dc154c264 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' -const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]' -const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' @@ -473,7 +473,7 @@ class Modal { .forEach(element => { const actualPadding = element.style.paddingRight const calculatedPadding = window.getComputedStyle(element)['padding-right'] - Manipulator.setDataAttribute(element, 'padding-right', actualPadding) + Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding) element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` }) @@ -482,7 +482,7 @@ class Modal { .forEach(element => { const actualMargin = element.style.marginRight const calculatedMargin = window.getComputedStyle(element)['margin-right'] - Manipulator.setDataAttribute(element, 'margin-right', actualMargin) + Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin) element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px` }) @@ -490,7 +490,7 @@ class Modal { const actualPadding = document.body.style.paddingRight const calculatedPadding = window.getComputedStyle(document.body)['padding-right'] - Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding) + Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding) document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` } @@ -501,9 +501,9 @@ class Modal { // Restore fixed content padding SelectorEngine.find(SELECTOR_FIXED_CONTENT) .forEach(element => { - const padding = Manipulator.getDataAttribute(element, 'padding-right') + const padding = Manipulator.getDataAttribute(element, 'bs-padding-right') if (typeof padding !== 'undefined') { - Manipulator.removeDataAttribute(element, 'padding-right') + Manipulator.removeDataAttribute(element, 'bs-padding-right') element.style.paddingRight = padding } }) @@ -511,19 +511,19 @@ class Modal { // Restore sticky content and navbar-toggler margin SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`) .forEach(element => { - const margin = Manipulator.getDataAttribute(element, 'margin-right') + const margin = Manipulator.getDataAttribute(element, 'bs-margin-right') if (typeof margin !== 'undefined') { - Manipulator.removeDataAttribute(element, 'margin-right') + Manipulator.removeDataAttribute(element, 'bs-margin-right') element.style.marginRight = margin } }) // Restore body padding - const padding = Manipulator.getDataAttribute(document.body, 'padding-right') + const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right') if (typeof padding === 'undefined') { document.body.style.paddingRight = '' } else { - Manipulator.removeDataAttribute(document.body, 'padding-right') + Manipulator.removeDataAttribute(document.body, 'bs-padding-right') document.body.style.paddingRight = padding } } diff --git a/js/src/popover.js b/js/src/popover.js index 7203d9babee3..46b693e6963b 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -123,7 +123,7 @@ class Popover extends Tooltip { } _getContent() { - return this.element.getAttribute('data-content') || + return this.element.getAttribute('data-bs-content') || this.config.content } diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 53c1700a5044..de456e0805ce 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -49,7 +49,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_SPY = '[data-spy="scroll"]' +const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_NAV_LINKS = '.nav-link' const SELECTOR_NAV_ITEMS = '.nav-item' @@ -241,7 +241,7 @@ class ScrollSpy { this._clear() const queries = this._selector.split(',') - .map(selector => `${selector}[data-target="${target}"],${selector}[href="${target}"]`) + .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`) const link = SelectorEngine.findOne(queries.join(',')) diff --git a/js/src/tab.js b/js/src/tab.js index f7ebfc9cdce0..56269e2facba 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -46,7 +46,7 @@ const SELECTOR_DROPDOWN = '.dropdown' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_ACTIVE = '.active' const SELECTOR_ACTIVE_UL = ':scope > li > .active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active' diff --git a/js/src/toast.js b/js/src/toast.js index bf5a386e8190..1e50b0669347 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -52,7 +52,7 @@ const Default = { delay: 5000 } -const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]' /** * ------------------------------------------------------------------------ diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 0b19a96013cc..505f8c8532b2 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -443,7 +443,7 @@ class Tooltip { } getTitle() { - let title = this.element.getAttribute('data-original-title') + let title = this.element.getAttribute('data-bs-original-title') if (!title) { title = typeof this.config.title === 'function' ? @@ -578,11 +578,11 @@ class Tooltip { } _fixTitle() { - const titleType = typeof this.element.getAttribute('data-original-title') + const titleType = typeof this.element.getAttribute('data-bs-original-title') if (this.element.getAttribute('title') || titleType !== 'string') { this.element.setAttribute( - 'data-original-title', + 'data-bs-original-title', this.element.getAttribute('title') || '' ) diff --git a/js/src/util/index.js b/js/src/util/index.js index b7fac9c443b8..b8a53af96906 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -33,7 +33,7 @@ const getUID = prefix => { } const getSelector = element => { - let selector = element.getAttribute('data-target') + let selector = element.getAttribute('data-bs-target') if (!selector || selector === '#') { const hrefAttr = element.getAttribute('href') @@ -173,7 +173,7 @@ const reflow = element => element.offsetHeight const getjQuery = () => { const { jQuery } = window - if (jQuery && !document.body.hasAttribute('data-no-jquery')) { + if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return jQuery } diff --git a/js/tests/integration/bundle-modularity.js b/js/tests/integration/bundle-modularity.js index 07c6674e6570..ed427cd92261 100644 --- a/js/tests/integration/bundle-modularity.js +++ b/js/tests/integration/bundle-modularity.js @@ -2,6 +2,6 @@ import 'popper.js' import Tooltip from '../../dist/tooltip' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/bundle.js b/js/tests/integration/bundle.js index 69d754352574..1c6e60bf5e4a 100644 --- a/js/tests/integration/bundle.js +++ b/js/tests/integration/bundle.js @@ -2,6 +2,6 @@ import 'popper.js' import { Tooltip } from '../../../dist/js/bootstrap.esm.js' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 5606755b1746..0ea0b64c3338 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -14,14 +14,14 @@

Hello, world!

- -