@@ -123,7 +123,7 @@

@@ -147,7 +147,7 @@

- -- cgit v1.2.3 From d49d8ce583f6f12552f122122a99063738656cd9 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 2 Oct 2022 13:05:30 +0300 Subject: Ensure Tab keyboard functionality after #37146 (#37200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: keyboard functionality * test: add tests * Add some focus spies in 2 other unit tests Co-authored-by: Julien Déramond --- js/src/tab.js | 1 + js/tests/unit/tab.spec.js | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/src/tab.js b/js/src/tab.js index 1d6d68d85..2f1803754 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -161,6 +161,7 @@ class Tab extends BaseComponent { const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true) if (nextActiveElement) { + nextActiveElement.focus({ preventScroll: true }) Tab.getOrCreateInstance(nextActiveElement).show() } } diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 5ffc73383..e0c7d86a6 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -526,6 +526,9 @@ describe('Tab', () => { const spyShow1 = spyOn(tab1, 'show').and.callThrough() const spyShow2 = spyOn(tab2, 'show').and.callThrough() const spyShow3 = spyOn(tab3, 'show').and.callThrough() + const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough() + const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough() + const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough() const spyStop = spyOn(Event.prototype, 'stopPropagation').and.callThrough() const spyPrevent = spyOn(Event.prototype, 'preventDefault').and.callThrough() @@ -535,15 +538,18 @@ describe('Tab', () => { tabEl1.dispatchEvent(keydown) expect(spyShow2).toHaveBeenCalled() + expect(spyFocus2).toHaveBeenCalled() keydown = createEvent('keydown') keydown.key = 'ArrowDown' tabEl2.dispatchEvent(keydown) expect(spyShow3).toHaveBeenCalled() + expect(spyFocus3).toHaveBeenCalled() tabEl3.dispatchEvent(keydown) expect(spyShow1).toHaveBeenCalled() + expect(spyFocus1).toHaveBeenCalled() expect(spyStop).toHaveBeenCalledTimes(3) expect(spyPrevent).toHaveBeenCalledTimes(3) @@ -557,12 +563,14 @@ describe('Tab', () => { '

' +\n '

' +\n '

', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target') + }) + + it('should get selector from href if no data-bs-target set', () => { + fixtureEl.innerHTML = [ + '', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target') + }) + + it('should get selector from href if data-bs-target equal to #', () => { + fixtureEl.innerHTML = [ + '', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target') + }) + + it('should return null if a selector from a href is a url without an anchor', () => { + fixtureEl.innerHTML = [ + '', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull() + }) + + it('should return the anchor if a selector from a href is a url', () => { + fixtureEl.innerHTML = [ + '', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('#target') + }) + + it('should return null if selector not found', () => { + fixtureEl.innerHTML = '' + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull() + }) + + it('should return null if no selector', () => { + fixtureEl.innerHTML = '

' + + const testEl = fixtureEl.querySelector('div') + + expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull() + }) + }) + + describe('getElementFromSelector', () => { + it('should get element from data-bs-target', () => { + fixtureEl.innerHTML = [ + '

', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) + }) + + it('should return null if element not found', () => { + fixtureEl.innerHTML = '' + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull() + }) + + it('should return null if no selector', () => { + fixtureEl.innerHTML = '

' + + const testEl = fixtureEl.querySelector('div') + + expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull() + }) + }) + + describe('getMultipleElementsFromSelector', () => { + it('should get elements from data-bs-target', () => { + fixtureEl.innerHTML = [ + '

', + '

' + ].join('') + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target'))) + }) + + it('should return empty array if elements not found', () => { + fixtureEl.innerHTML = '' + + const testEl = fixtureEl.querySelector('#test') + + expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0) + }) + + it('should return empty array if no selector', () => { + fixtureEl.innerHTML = '

' + + const testEl = fixtureEl.querySelector('div') + + expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0) + }) + }) +}) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index 6edc49433..202c72061 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -22,119 +22,6 @@ describe('Util', () => { }) }) - describe('getSelectorFromElement', () => { - it('should get selector from data-bs-target', () => { - fixtureEl.innerHTML = [ - '

', - '

' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toEqual('.target') - }) - - it('should get selector from href if no data-bs-target set', () => { - fixtureEl.innerHTML = [ - '', - '

' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toEqual('.target') - }) - - it('should get selector from href if data-bs-target equal to #', () => { - fixtureEl.innerHTML = [ - '', - '

' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toEqual('.target') - }) - - it('should return null if a selector from a href is a url without an anchor', () => { - fixtureEl.innerHTML = [ - '', - '

' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toBeNull() - }) - - it('should return the anchor if a selector from a href is a url', () => { - fixtureEl.innerHTML = [ - '', - '

' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toEqual('#target') - }) - - it('should return null if selector not found', () => { - fixtureEl.innerHTML = '' - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toBeNull() - }) - - it('should return null if no selector', () => { - fixtureEl.innerHTML = '

' - - const testEl = fixtureEl.querySelector('div') - - expect(Util.getSelectorFromElement(testEl)).toBeNull() - }) - }) - - describe('getElementFromSelector', () => { - it('should get element from data-bs-target', () => { - fixtureEl.innerHTML = [ - '

', - '

' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) - }) - - it('should return null if element not found', () => { - fixtureEl.innerHTML = '' - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getElementFromSelector(testEl)).toBeNull() - }) - - it('should return null if no selector', () => { - fixtureEl.innerHTML = '

' - - const testEl = fixtureEl.querySelector('div') - - expect(Util.getElementFromSelector(testEl)).toBeNull() - }) - }) - describe('getTransitionDurationFromElement', () => { it('should get transition from element', () => { fixtureEl.innerHTML = '

' -- cgit v1.2.3 From ef4e2daa48193463b36fdc297d79c6a002e4ee67 Mon Sep 17 00:00:00 2001 From: Pierre Souchay Date: Mon, 7 Nov 2022 13:43:06 +0100 Subject: Properly escape IDs in getSelector() to handle weird IDs (#35565) (#35566) --- js/src/dom/selector-engine.js | 3 ++- js/src/util/index.js | 17 ++++++++++++++++- js/tests/unit/collapse.spec.js | 6 +++--- js/tests/unit/tab.spec.js | 37 +++++++++++++++++++++++++++++++++++++ 4 files changed, 58 insertions(+), 5 deletions(-) (limited to 'js') diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js index ad10a6083..248dab494 100644 --- a/js/src/dom/selector-engine.js +++ b/js/src/dom/selector-engine.js @@ -5,7 +5,7 @@ * -------------------------------------------------------------------------- */ -import { isDisabled, isVisible } from '../util/index.js' +import { isDisabled, isVisible, parseSelector } from '../util/index.js' /** * Constants @@ -99,6 +99,7 @@ const SelectorEngine = { } selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null + selector = parseSelector(selector) } return selector diff --git a/js/src/util/index.js b/js/src/util/index.js index b92eddba2..8c6922173 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -9,6 +9,20 @@ const MAX_UID = 1_000_000 const MILLISECONDS_MULTIPLIER = 1000 const TRANSITION_END = 'transitionend' +/** + * Properly escape IDs selectors to handle weird IDs + * @param {string} selector + * @returns {string} + */ +const parseSelector = selector => { + if (selector && window.CSS && window.CSS.escape) { + // document.querySelector needs escaping to handle IDs (html5+) containing for instance / + selector = selector.replaceAll(/#([^\s"#']+)/g, (match, id) => '#' + CSS.escape(id)) + } + + return selector +} + // Shout-out Angus Croll (https://goo.gl/pxwQGp) const toType = object => { if (object === null || object === undefined) { @@ -76,7 +90,7 @@ const getElement = object => { } if (typeof object === 'string' && object.length > 0) { - return document.querySelector(object) + return document.querySelector(parseSelector(object)) } return null @@ -285,6 +299,7 @@ export { isVisible, noop, onDOMContentLoaded, + parseSelector, reflow, triggerTransitionEnd, toType diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 9c8671988..834d1b98e 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -887,17 +887,17 @@ describe('Collapse', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ '', - '', + '', '', '

', - '

' + '

' ].join('') const trigger1 = fixtureEl.querySelector('#trigger1') const trigger2 = fixtureEl.querySelector('#trigger2') const trigger3 = fixtureEl.querySelector('#trigger3') const target1 = fixtureEl.querySelector('#test1') - const target2 = fixtureEl.querySelector('#test2') + const target2 = fixtureEl.querySelector('#' + CSS.escape('0/my/id')) const target2Shown = () => { expect(trigger1).not.toHaveClass('collapsed') diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 896e61180..66238efbb 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -177,6 +177,43 @@ describe('Tab', () => { }) }) + it('should work with tab id being an int', done => { + fixtureEl.innerHTML = [ + '

', + '

', + ' ', + ' Working Tab 1 (#tab1)', + ' ', + '
', + ' ', + ' Tab with numeric ID should work (#2)', + ' ', + '

', + '

', + ' Working Tab 1 (#tab1) Content Here', + '

', + '

', + ' Working Tab 2 (#2) with numeric ID', + '

', + '

' + ].join('') + const profileTriggerEl = fixtureEl.querySelector('#trigger2') + const tab = new Tab(profileTriggerEl) + + profileTriggerEl.addEventListener('shown.bs.tab', () => { + expect(fixtureEl.querySelector('#' + CSS.escape('2'))).toHaveClass('active') + done() + }) + + tab.show() + }) + it('should not fire shown when show is prevented', () => { return new Promise((resolve, reject) => { fixtureEl.innerHTML = '

' -- cgit v1.2.3 From fcdfee90b3a181573ad6d7aeb13aa481b11f2ef5 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 7 Nov 2022 14:55:34 +0200 Subject: ref: refactor `getSelector` not to be exported (#37438) --- js/src/dom/selector-engine.js | 59 ++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 32 deletions(-) (limited to 'js') diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js index 248dab494..88d4c86ea 100644 --- a/js/src/dom/selector-engine.js +++ b/js/src/dom/selector-engine.js @@ -7,9 +7,30 @@ import { isDisabled, isVisible, parseSelector } from '../util/index.js' -/** - * Constants - */ +const getSelector = element => { + let selector = element.getAttribute('data-bs-target') + + if (!selector || selector === '#') { + let hrefAttribute = element.getAttribute('href') + + // The only valid content that could double as a selector are IDs or classes, + // so everything starting with `#` or `.`. If a "real" URL is used as the selector, + // `document.querySelector` will rightfully complain it is invalid. + // See https://github.com/twbs/bootstrap/issues/32273 + if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) { + return null + } + + // Just in case some CMS puts out a full URL with the anchor appended + if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) { + hrefAttribute = `#${hrefAttribute.split('#')[1]}` + } + + selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null + } + + return parseSelector(selector) +} const SelectorEngine = { find(selector, element = document.documentElement) { @@ -79,34 +100,8 @@ const SelectorEngine = { return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el)) }, - getSelector(element) { - let selector = element.getAttribute('data-bs-target') - - if (!selector || selector === '#') { - let hrefAttribute = element.getAttribute('href') - - // The only valid content that could double as a selector are IDs or classes, - // so everything starting with `#` or `.`. If a "real" URL is used as the selector, - // `document.querySelector` will rightfully complain it is invalid. - // See https://github.com/twbs/bootstrap/issues/32273 - if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) { - return null - } - - // Just in case some CMS puts out a full URL with the anchor appended - if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) { - hrefAttribute = `#${hrefAttribute.split('#')[1]}` - } - - selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null - selector = parseSelector(selector) - } - - return selector - }, - getSelectorFromElement(element) { - const selector = SelectorEngine.getSelector(element) + const selector = getSelector(element) if (selector) { return SelectorEngine.findOne(selector) ? selector : null @@ -116,13 +111,13 @@ const SelectorEngine = { }, getElementFromSelector(element) { - const selector = SelectorEngine.getSelector(element) + const selector = getSelector(element) return selector ? SelectorEngine.findOne(selector) : null }, getMultipleElementsFromSelector(element) { - const selector = SelectorEngine.getSelector(element) + const selector = getSelector(element) return selector ? SelectorEngine.find(selector) : [] } -- cgit v1.2.3 From 0a484e758666c5ec9bb6e2b5c088de1e778d8fc8 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 11 Nov 2022 10:40:17 +0200 Subject: fix: change `replaceAll` usage introduced in #35566 (#37473) --- js/src/util/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/src/util/index.js b/js/src/util/index.js index 8c6922173..b04fdc120 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -17,7 +17,7 @@ const TRANSITION_END = 'transitionend' const parseSelector = selector => { if (selector && window.CSS && window.CSS.escape) { // document.querySelector needs escaping to handle IDs (html5+) containing for instance / - selector = selector.replaceAll(/#([^\s"#']+)/g, (match, id) => '#' + CSS.escape(id)) + selector = selector.replace(/#([^\s"#']+)/g, (match, id) => '#' + CSS.escape(id)) } return selector -- cgit v1.2.3 From 21e036bf137f393827ddb433af136312e6278961 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 12 Nov 2022 10:03:16 +0200 Subject: hydrateObj: use default param (#37483) --- js/src/dom/event-handler.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js index c9408d353..435935e83 100644 --- a/js/src/dom/event-handler.js +++ b/js/src/dom/event-handler.js @@ -300,8 +300,8 @@ const EventHandler = { } } -function hydrateObj(obj, meta) { - for (const [key, value] of Object.entries(meta || {})) { +function hydrateObj(obj, meta = {}) { + for (const [key, value] of Object.entries(meta)) { try { obj[key] = value } catch { -- cgit v1.2.3 From 5208dd10c4f43b304ebeb75dcf508e016515a248 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 12 Nov 2022 10:09:36 +0200 Subject: ESLint: enable prefer-template rule (#37484) --- js/src/util/index.js | 2 +- js/tests/karma.conf.js | 2 +- js/tests/unit/collapse.spec.js | 2 +- js/tests/unit/tab.spec.js | 2 +- js/tests/unit/util/config.spec.js | 2 +- js/tests/visual/carousel.html | 2 +- js/tests/visual/modal.html | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) (limited to 'js') diff --git a/js/src/util/index.js b/js/src/util/index.js index b04fdc120..b3e577b10 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -17,7 +17,7 @@ const TRANSITION_END = 'transitionend' const parseSelector = selector => { if (selector && window.CSS && window.CSS.escape) { // document.querySelector needs escaping to handle IDs (html5+) containing for instance / - selector = selector.replace(/#([^\s"#']+)/g, (match, id) => '#' + CSS.escape(id)) + selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`) } return selector diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js index 6636ff15d..11c6f3045 100644 --- a/js/tests/karma.conf.js +++ b/js/tests/karma.conf.js @@ -105,7 +105,7 @@ if (BROWSERSTACK) { config.browserStack = { username: ENV.BROWSER_STACK_USERNAME, accessKey: ENV.BROWSER_STACK_ACCESS_KEY, - build: `bootstrap-${ENV.GITHUB_SHA ? ENV.GITHUB_SHA.slice(0, 7) + '-' : ''}${new Date().toISOString()}`, + build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`, project: 'Bootstrap', retryLimit: 2 } diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 834d1b98e..d5af724fe 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -897,7 +897,7 @@ describe('Collapse', () => { const trigger2 = fixtureEl.querySelector('#trigger2') const trigger3 = fixtureEl.querySelector('#trigger3') const target1 = fixtureEl.querySelector('#test1') - const target2 = fixtureEl.querySelector('#' + CSS.escape('0/my/id')) + const target2 = fixtureEl.querySelector(`#${CSS.escape('0/my/id')}`) const target2Shown = () => { expect(trigger1).not.toHaveClass('collapsed') diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 66238efbb..1ac5929e1 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -207,7 +207,7 @@ describe('Tab', () => { const tab = new Tab(profileTriggerEl) profileTriggerEl.addEventListener('shown.bs.tab', () => { - expect(fixtureEl.querySelector('#' + CSS.escape('2'))).toHaveClass('active') + expect(fixtureEl.querySelector(`#${CSS.escape('2')}`)).toHaveClass('active') done() }) diff --git a/js/tests/unit/util/config.spec.js b/js/tests/unit/util/config.spec.js index e1693c0c1..0037e09d7 100644 --- a/js/tests/unit/util/config.spec.js +++ b/js/tests/unit/util/config.spec.js @@ -128,7 +128,7 @@ describe('Config', () => { const obj = new DummyConfigClass() expect(() => { obj._typeCheckConfig(config) - }).toThrowError(TypeError, obj.constructor.NAME.toUpperCase() + ': Option "parent" provided type "number" but expected type "(string|element)".') + }).toThrowError(TypeError, `${obj.constructor.NAME.toUpperCase()}: Option "parent" provided type "number" but expected type "(string|element)".`) }) it('should return null stringified when null is passed', () => { diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 153c86604..1b2de5291 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -55,7 +55,7 @@ // Test to show that transition-duration can be changed with css carousel.addEventListener('slid.bs.carousel', event => { t1 = performance.now() - console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ' + event.timeStamp) + console.log(`transition-duration took ${t1 - t0}ms, slid at ${event.timeStamp}`) }) carousel.addEventListener('slide.bs.carousel', () => { t0 = performance.now() diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index b738d9e81..09d42333d 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -264,7 +264,7 @@ slowModal.addEventListener('shown.bs.modal', () => { t1 = performance.now() - console.log('transition-duration took ' + (t1 - t0) + 'ms.') + console.log(`transition-duration took ${t1 - t0}ms.`) }) slowModal.addEventListener('show.bs.modal', () => { -- cgit v1.2.3 From 0446e22b5aa556701f32015e9678f4ae822d1386 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 12 Nov 2022 17:21:33 +0000 Subject: Docs: use `', + ' ', '

', @@ -293,7 +293,7 @@ describe('Collapse', () => { '

',\n trigger: 'click'\n}\n\nconst DefaultType = {\n ...Tooltip.DefaultType,\n content: '(null|string|element|function)'\n}\n\n/**\n * Class definition\n */\n\nclass Popover extends Tooltip {\n // Getters\n static get Default() {\n return Default\n }\n\n static get DefaultType() {\n return DefaultType\n }\n\n static get NAME() {\n return NAME\n }\n\n // Overrides\n _isWithContent() {\n return this._getTitle() || this._getContent()\n }\n\n // Private\n _getContentForTemplate() {\n return {\n [SELECTOR_TITLE]: this._getTitle(),\n [SELECTOR_CONTENT]: this._getContent()\n }\n }\n\n _getContent() {\n return this._resolvePossibleFunction(this._config.content)\n }\n\n // Static\n static jQueryInterface(config) {\n return this.each(function () {\n const data = Popover.getOrCreateInstance(this, config)\n\n if (typeof config !== 'string') {\n return\n }\n\n if (typeof data[config] === 'undefined') {\n throw new TypeError(`No method named \"${config}\"`)\n }\n\n data[config]()\n })\n }\n}\n\n/**\n * jQuery\n */\n\ndefineJQueryPlugin(Popover)\n\nexport default Popover\n"],"names":["NAME","SELECTOR_TITLE","SELECTOR_CONTENT","Default","Tooltip","content","offset","placement","template","trigger","DefaultType","Popover","_isWithContent","_getTitle","_getContent","_getContentForTemplate","_resolvePossibleFunction","_config","jQueryInterface","config","each","data","getOrCreateInstance","TypeError","defineJQueryPlugin"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;;EAKA;EACA;EACA;;EAEA,MAAMA,IAAI,GAAG,SAAS,CAAA;EAEtB,MAAMC,cAAc,GAAG,iBAAiB,CAAA;EACxC,MAAMC,gBAAgB,GAAG,eAAe,CAAA;EAExC,MAAMC,OAAO,GAAG;IACd,GAAGC,OAAO,CAACD,OAAO;EAClBE,EAAAA,OAAO,EAAE,EAAE;EACXC,EAAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;EACdC,EAAAA,SAAS,EAAE,OAAO;IAClBC,QAAQ,EAAE,sCAAsC,GAC9C,mCAAmC,GACnC,kCAAkC,GAClC,kCAAkC,GAClC,QAAQ;EACVC,EAAAA,OAAO,EAAE,OAAA;EACX,CAAC,CAAA;EAED,MAAMC,WAAW,GAAG;IAClB,GAAGN,OAAO,CAACM,WAAW;EACtBL,EAAAA,OAAO,EAAE,gCAAA;EACX,CAAC,CAAA;;EAED;EACA;EACA;;EAEA,MAAMM,OAAO,SAASP,OAAO,CAAC;EAC5B;EACA,EAAA,WAAWD,OAAO,GAAG;EACnB,IAAA,OAAOA,OAAO,CAAA;EAChB,GAAA;EAEA,EAAA,WAAWO,WAAW,GAAG;EACvB,IAAA,OAAOA,WAAW,CAAA;EACpB,GAAA;EAEA,EAAA,WAAWV,IAAI,GAAG;EAChB,IAAA,OAAOA,IAAI,CAAA;EACb,GAAA;;EAEA;EACAY,EAAAA,cAAc,GAAG;MACf,OAAO,IAAI,CAACC,SAAS,EAAE,IAAI,IAAI,CAACC,WAAW,EAAE,CAAA;EAC/C,GAAA;;EAEA;EACAC,EAAAA,sBAAsB,GAAG;MACvB,OAAO;EACL,MAAA,CAACd,cAAc,GAAG,IAAI,CAACY,SAAS,EAAE;EAClC,MAAA,CAACX,gBAAgB,GAAG,IAAI,CAACY,WAAW,EAAA;OACrC,CAAA;EACH,GAAA;EAEAA,EAAAA,WAAW,GAAG;MACZ,OAAO,IAAI,CAACE,wBAAwB,CAAC,IAAI,CAACC,OAAO,CAACZ,OAAO,CAAC,CAAA;EAC5D,GAAA;;EAEA;IACA,OAAOa,eAAe,CAACC,MAAM,EAAE;EAC7B,IAAA,OAAO,IAAI,CAACC,IAAI,CAAC,YAAY;QAC3B,MAAMC,IAAI,GAAGV,OAAO,CAACW,mBAAmB,CAAC,IAAI,EAAEH,MAAM,CAAC,CAAA;EAEtD,MAAA,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;EAC9B,QAAA,OAAA;EACF,OAAA;EAEA,MAAA,IAAI,OAAOE,IAAI,CAACF,MAAM,CAAC,KAAK,WAAW,EAAE;EACvC,QAAA,MAAM,IAAII,SAAS,CAAE,CAAmBJ,iBAAAA,EAAAA,MAAO,GAAE,CAAC,CAAA;EACpD,OAAA;QAEAE,IAAI,CAACF,MAAM,CAAC,EAAE,CAAA;EAChB,KAAC,CAAC,CAAA;EACJ,GAAA;EACF,CAAA;;EAEA;EACA;EACA;;AAEAK,6BAAkB,CAACb,OAAO,CAAC;;;;;;;;"} \ No newline at end of file diff --git a/js/dist/scrollspy.js b/js/dist/scrollspy.js index 64e85017f..310b7c61f 100644 --- a/js/dist/scrollspy.js +++ b/js/dist/scrollspy.js @@ -1,26 +1,21 @@ /*! - * Bootstrap scrollspy.js v5.2.3 (https://getbootstrap.com/) + * Bootstrap scrollspy.js v5.3.0-alpha1 (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./util/index'), require('./dom/event-handler'), require('./dom/selector-engine'), require('./base-component')) : + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./util/index.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./base-component.js')) : typeof define === 'function' && define.amd ? define(['./util/index', './dom/event-handler', './dom/selector-engine', './base-component'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Scrollspy = factory(global.Index, global.EventHandler, global.SelectorEngine, global.BaseComponent)); -})(this, (function (index, EventHandler, SelectorEngine, BaseComponent) { 'use strict'; - - const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e }; - - const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); - const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); - const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); +})(this, (function (index_js, EventHandler, SelectorEngine, BaseComponent) { 'use strict'; /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): scrollspy.js + * Bootstrap (v5.3.0-alpha1): scrollspy.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ + /** * Constants */ @@ -59,14 +54,16 @@ target: 'element', threshold: 'array' }; + /** * Class definition */ - class ScrollSpy extends BaseComponent__default.default { + class ScrollSpy extends BaseComponent { constructor(element, config) { - super(element, config); // this._element is the observablesContainer and config.target the menu links wrapper + super(element, config); + // this._element is the observablesContainer and config.target the menu links wrapper this._targetLinks = new Map(); this._observableSections = new Map(); this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element; @@ -77,87 +74,75 @@ parentScrollTop: 0 }; this.refresh(); // initialize - } // Getters - + } + // Getters static get Default() { return Default; } - static get DefaultType() { return DefaultType; } - static get NAME() { return NAME; - } // Public - + } + // Public refresh() { this._initializeTargetsAndObservables(); - this._maybeEnableSmoothScroll(); - if (this._observer) { this._observer.disconnect(); } else { this._observer = this._getNewObserver(); } - for (const section of this._observableSections.values()) { this._observer.observe(section); } } - dispose() { this._observer.disconnect(); - super.dispose(); - } // Private - + } + // Private _configAfterMerge(config) { // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case - config.target = index.getElement(config.target) || document.body; // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only + config.target = index_js.getElement(config.target) || document.body; + // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin; - if (typeof config.threshold === 'string') { config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value)); } - return config; } - _maybeEnableSmoothScroll() { if (!this._config.smoothScroll) { return; - } // unregister any previous listeners - + } - EventHandler__default.default.off(this._config.target, EVENT_CLICK); - EventHandler__default.default.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => { + // unregister any previous listeners + EventHandler.off(this._config.target, EVENT_CLICK); + EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => { const observableSection = this._observableSections.get(event.target.hash); - if (observableSection) { event.preventDefault(); const root = this._rootElement || window; const height = observableSection.offsetTop - this._element.offsetTop; - if (root.scrollTo) { root.scrollTo({ top: height, behavior: 'smooth' }); return; - } // Chrome 60 doesn't support `scrollTo` - + } + // Chrome 60 doesn't support `scrollTo` root.scrollTop = height; } }); } - _getNewObserver() { const options = { root: this._rootElement, @@ -165,146 +150,123 @@ rootMargin: this._config.rootMargin }; return new IntersectionObserver(entries => this._observerCallback(entries), options); - } // The logic of selection - + } + // The logic of selection _observerCallback(entries) { const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`); - const activate = entry => { this._previousScrollData.visibleEntryTop = entry.target.offsetTop; - this._process(targetElement(entry)); }; - const parentScrollTop = (this._rootElement || document.documentElement).scrollTop; const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop; this._previousScrollData.parentScrollTop = parentScrollTop; - for (const entry of entries) { if (!entry.isIntersecting) { this._activeTarget = null; - this._clearActiveClass(targetElement(entry)); - continue; } - - const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop; // if we are scrolling down, pick the bigger offsetTop - + const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop; + // if we are scrolling down, pick the bigger offsetTop if (userScrollsDown && entryIsLowerThanPrevious) { - activate(entry); // if parent isn't scrolled, let's keep the first visible item, breaking the iteration - + activate(entry); + // if parent isn't scrolled, let's keep the first visible item, breaking the iteration if (!parentScrollTop) { return; } - continue; - } // if we are scrolling up, pick the smallest offsetTop - + } + // if we are scrolling up, pick the smallest offsetTop if (!userScrollsDown && !entryIsLowerThanPrevious) { activate(entry); } } } - _initializeTargetsAndObservables() { this._targetLinks = new Map(); this._observableSections = new Map(); - const targetLinks = SelectorEngine__default.default.find(SELECTOR_TARGET_LINKS, this._config.target); - + const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target); for (const anchor of targetLinks) { // ensure that the anchor has an id and is not disabled - if (!anchor.hash || index.isDisabled(anchor)) { + if (!anchor.hash || index_js.isDisabled(anchor)) { continue; } + const observableSection = SelectorEngine.findOne(anchor.hash, this._element); - const observableSection = SelectorEngine__default.default.findOne(anchor.hash, this._element); // ensure that the observableSection exists & is visible - - if (index.isVisible(observableSection)) { + // ensure that the observableSection exists & is visible + if (index_js.isVisible(observableSection)) { this._targetLinks.set(anchor.hash, anchor); - this._observableSections.set(anchor.hash, observableSection); } } } - _process(target) { if (this._activeTarget === target) { return; } - this._clearActiveClass(this._config.target); - this._activeTarget = target; target.classList.add(CLASS_NAME_ACTIVE); - this._activateParents(target); - - EventHandler__default.default.trigger(this._element, EVENT_ACTIVATE, { + EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target }); } - _activateParents(target) { // Activate dropdown parents if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) { - SelectorEngine__default.default.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN)).classList.add(CLASS_NAME_ACTIVE); + SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN)).classList.add(CLASS_NAME_ACTIVE); return; } - - for (const listGroup of SelectorEngine__default.default.parents(target, SELECTOR_NAV_LIST_GROUP)) { + for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) { // Set triggered links parents as active // With both

and

markup a parent is the previous sibling of any nav ancestor - for (const item of SelectorEngine__default.default.prev(listGroup, SELECTOR_LINK_ITEMS)) { + for (const item of SelectorEngine.prev(listGroup, SELECTOR_LINK_ITEMS)) { item.classList.add(CLASS_NAME_ACTIVE); } } } - _clearActiveClass(parent) { parent.classList.remove(CLASS_NAME_ACTIVE); - const activeNodes = SelectorEngine__default.default.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent); - + const activeNodes = SelectorEngine.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent); for (const node of activeNodes) { node.classList.remove(CLASS_NAME_ACTIVE); } - } // Static - + } + // Static static jQueryInterface(config) { return this.each(function () { const data = ScrollSpy.getOrCreateInstance(this, config); - if (typeof config !== 'string') { return; } - if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { throw new TypeError(`No method named "${config}"`); } - data[config](); }); } - } + /** * Data API implementation */ - - EventHandler__default.default.on(window, EVENT_LOAD_DATA_API, () => { - for (const spy of SelectorEngine__default.default.find(SELECTOR_DATA_SPY)) { + EventHandler.on(window, EVENT_LOAD_DATA_API, () => { + for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) { ScrollSpy.getOrCreateInstance(spy); } }); + /** * jQuery */ - index.defineJQueryPlugin(ScrollSpy); + index_js.defineJQueryPlugin(ScrollSpy); return ScrollSpy; diff --git a/js/dist/scrollspy.js.map b/js/dist/scrollspy.js.map index a99c08776..87846725a 100644 --- a/js/dist/scrollspy.js.map +++ b/js/dist/scrollspy.js.map @@ -1 +1 @@ -{"version":3,"file":"scrollspy.js","sources":["../src/scrollspy.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap (v5.2.3): scrollspy.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index'\nimport EventHandler from './dom/event-handler'\nimport SelectorEngine from './dom/selector-engine'\nimport BaseComponent from './base-component'\n\n/**\n * Constants\n */\n\nconst NAME = 'scrollspy'\nconst DATA_KEY = 'bs.scrollspy'\nconst EVENT_KEY = `.${DATA_KEY}`\nconst DATA_API_KEY = '.data-api'\n\nconst EVENT_ACTIVATE = `activate${EVENT_KEY}`\nconst EVENT_CLICK = `click${EVENT_KEY}`\nconst EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`\n\nconst CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'\nconst CLASS_NAME_ACTIVE = 'active'\n\nconst SELECTOR_DATA_SPY = '[data-bs-spy=\"scroll\"]'\nconst SELECTOR_TARGET_LINKS = '[href]'\nconst SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'\nconst SELECTOR_NAV_LINKS = '.nav-link'\nconst SELECTOR_NAV_ITEMS = '.nav-item'\nconst SELECTOR_LIST_ITEMS = '.list-group-item'\nconst SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`\nconst SELECTOR_DROPDOWN = '.dropdown'\nconst SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'\n\nconst Default = {\n offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons\n rootMargin: '0px 0px -25%',\n smoothScroll: false,\n target: null,\n threshold: [0.1, 0.5, 1]\n}\n\nconst DefaultType = {\n offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons\n rootMargin: 'string',\n smoothScroll: 'boolean',\n target: 'element',\n threshold: 'array'\n}\n\n/**\n * Class definition\n */\n\nclass ScrollSpy extends BaseComponent {\n constructor(element, config) {\n super(element, config)\n\n // this._element is the observablesContainer and config.target the menu links wrapper\n this._targetLinks = new Map()\n this._observableSections = new Map()\n this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element\n this._activeTarget = null\n this._observer = null\n this._previousScrollData = {\n visibleEntryTop: 0,\n parentScrollTop: 0\n }\n this.refresh() // initialize\n }\n\n // Getters\n static get Default() {\n return Default\n }\n\n static get DefaultType() {\n return DefaultType\n }\n\n static get NAME() {\n return NAME\n }\n\n // Public\n refresh() {\n this._initializeTargetsAndObservables()\n this._maybeEnableSmoothScroll()\n\n if (this._observer) {\n this._observer.disconnect()\n } else {\n this._observer = this._getNewObserver()\n }\n\n for (const section of this._observableSections.values()) {\n this._observer.observe(section)\n }\n }\n\n dispose() {\n this._observer.disconnect()\n super.dispose()\n }\n\n // Private\n _configAfterMerge(config) {\n // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case\n config.target = getElement(config.target) || document.body\n\n // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only\n config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin\n\n if (typeof config.threshold === 'string') {\n config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value))\n }\n\n return config\n }\n\n _maybeEnableSmoothScroll() {\n if (!this._config.smoothScroll) {\n return\n }\n\n // unregister any previous listeners\n EventHandler.off(this._config.target, EVENT_CLICK)\n\n EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {\n const observableSection = this._observableSections.get(event.target.hash)\n if (observableSection) {\n event.preventDefault()\n const root = this._rootElement || window\n const height = observableSection.offsetTop - this._element.offsetTop\n if (root.scrollTo) {\n root.scrollTo({ top: height, behavior: 'smooth' })\n return\n }\n\n // Chrome 60 doesn't support `scrollTo`\n root.scrollTop = height\n }\n })\n }\n\n _getNewObserver() {\n const options = {\n root: this._rootElement,\n threshold: this._config.threshold,\n rootMargin: this._config.rootMargin\n }\n\n return new IntersectionObserver(entries => this._observerCallback(entries), options)\n }\n\n // The logic of selection\n _observerCallback(entries) {\n const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`)\n const activate = entry => {\n this._previousScrollData.visibleEntryTop = entry.target.offsetTop\n this._process(targetElement(entry))\n }\n\n const parentScrollTop = (this._rootElement || document.documentElement).scrollTop\n const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop\n this._previousScrollData.parentScrollTop = parentScrollTop\n\n for (const entry of entries) {\n if (!entry.isIntersecting) {\n this._activeTarget = null\n this._clearActiveClass(targetElement(entry))\n\n continue\n }\n\n const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop\n // if we are scrolling down, pick the bigger offsetTop\n if (userScrollsDown && entryIsLowerThanPrevious) {\n activate(entry)\n // if parent isn't scrolled, let's keep the first visible item, breaking the iteration\n if (!parentScrollTop) {\n return\n }\n\n continue\n }\n\n // if we are scrolling up, pick the smallest offsetTop\n if (!userScrollsDown && !entryIsLowerThanPrevious) {\n activate(entry)\n }\n }\n }\n\n _initializeTargetsAndObservables() {\n this._targetLinks = new Map()\n this._observableSections = new Map()\n\n const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target)\n\n for (const anchor of targetLinks) {\n // ensure that the anchor has an id and is not disabled\n if (!anchor.hash || isDisabled(anchor)) {\n continue\n }\n\n const observableSection = SelectorEngine.findOne(anchor.hash, this._element)\n\n // ensure that the observableSection exists & is visible\n if (isVisible(observableSection)) {\n this._targetLinks.set(anchor.hash, anchor)\n this._observableSections.set(anchor.hash, observableSection)\n }\n }\n }\n\n _process(target) {\n if (this._activeTarget === target) {\n return\n }\n\n this._clearActiveClass(this._config.target)\n this._activeTarget = target\n target.classList.add(CLASS_NAME_ACTIVE)\n this._activateParents(target)\n\n EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target })\n }\n\n _activateParents(target) {\n // Activate dropdown parents\n if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {\n SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))\n .classList.add(CLASS_NAME_ACTIVE)\n return\n }\n\n for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) {\n // Set triggered links parents as active\n // With both

and

' +\n '

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 1a3b9f21d..09144b572 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -20,7 +20,7 @@

Tooltip Bootstrap Visual Test

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

-- cgit v1.2.3 From 1369b81492a5368ac40dbfac3d6553e32065f706 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Wed, 18 Jan 2023 06:09:39 +0100 Subject: Fix Android Chrome input date dimensions (#36143) * Bind Hugo to 0.0.0.0, helps debug on mobile when on the same network * Use http-server for visual tests * Add input visual tests * Fix input date dimensions on Android Chrome * Increase bootstrap.css max size * Revert "Bind Hugo to 0.0.0.0" & "Use http-server for visual tests" * Switch to pixels: this is an empirical minimum safe value * Update .bundlewatch.config.json Co-authored-by: Mark Otto --- js/tests/visual/input.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 js/tests/visual/input.html (limited to 'js') diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html new file mode 100644 index 000000000..6ef08d9aa --- /dev/null +++ b/js/tests/visual/input.html @@ -0,0 +1,79 @@ + + + + + + + Form + + + +

Input Bootstrap Visual Test

+ +

No layout

+ +

+ Text + +

+ Email + +

+ Number + +

+ Date + +

+ +

Flex

+ +

+ Text + +

+ Email + +

+ Number + +

+ Date + +

+ +

Grid

+ +

+ Text + +

+ Email + +

+ Number + +

+ Date + +

+ + + + + -- cgit v1.2.3 From 7432ebc665042a7381a0682879996b049abb1ff6 Mon Sep 17 00:00:00 2001 From: Roni Diwan Date: Sat, 11 Feb 2023 10:35:10 +0200 Subject: Unify `offcanvas` `keydown` event logic with `modal` (#38025) --- js/src/modal.js | 1 - js/src/offcanvas.js | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/src/modal.js b/js/src/modal.js index 0a38586ce..a5adc8466 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -208,7 +208,6 @@ class Modal extends BaseComponent { } if (this._config.keyboard) { - event.preventDefault() this.hide() return } diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index 54adf86cc..4d5975c0f 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -198,12 +198,12 @@ class Offcanvas extends BaseComponent { return } - if (!this._config.keyboard) { - EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) + if (this._config.keyboard) { + this.hide() return } - this.hide() + EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED) }) } -- cgit v1.2.3 From f5f6c5c4e3599458e4097f56318bf7b3f3bd9681 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sat, 11 Feb 2023 10:18:39 +0100 Subject: Minor fix to avoid creating void elements in tooltip test file (#38034) --- js/tests/unit/tooltip.spec.js | 102 +++++++++++++++++++++--------------------- 1 file changed, 51 insertions(+), 51 deletions(-) (limited to 'js') diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 4330571b4..1c85640c0 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -56,7 +56,7 @@ describe('Tooltip', () => { describe('constructor', () => { it('should take care of element either passed as a CSS selector or DOM element', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('#tooltipEl') const tooltipBySelector = new Tooltip('#tooltipEl') @@ -67,7 +67,7 @@ describe('Tooltip', () => { }) it('should not take care of disallowed data attributes', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -76,7 +76,7 @@ describe('Tooltip', () => { }) it('should convert title and content to string if numbers', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -98,7 +98,7 @@ describe('Tooltip', () => { trigger: 'click' }) - containerEl.innerHTML = '' + containerEl.innerHTML = '' const tooltipInContainerEl = containerEl.querySelector('a') @@ -114,7 +114,7 @@ describe('Tooltip', () => { it('should create offset modifier when offset is passed as a function', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20]) const tooltipEl = fixtureEl.querySelector('a') @@ -141,7 +141,7 @@ describe('Tooltip', () => { }) it('should create offset modifier when offset option is passed in data attribute', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -150,7 +150,7 @@ describe('Tooltip', () => { }) it('should allow to pass config to Popper with `popperConfig`', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -165,7 +165,7 @@ describe('Tooltip', () => { }) it('should allow to pass config to Popper with `popperConfig` as a function', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' }) @@ -192,7 +192,7 @@ describe('Tooltip', () => { describe('enable', () => { it('should enable a tooltip', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -212,7 +212,7 @@ describe('Tooltip', () => { describe('disable', () => { it('should disable tooltip', () => { return new Promise((resolve, reject) => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -235,7 +235,7 @@ describe('Tooltip', () => { describe('toggleEnabled', () => { it('should toggle enabled', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -251,7 +251,7 @@ describe('Tooltip', () => { describe('toggle', () => { it('should do nothing if disabled', () => { return new Promise((resolve, reject) => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -273,7 +273,7 @@ describe('Tooltip', () => { it('should show a tooltip', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -289,7 +289,7 @@ describe('Tooltip', () => { it('should call toggle and show the tooltip when trigger is "click"', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -309,7 +309,7 @@ describe('Tooltip', () => { it('should hide a tooltip', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -329,7 +329,7 @@ describe('Tooltip', () => { it('should call toggle and hide the tooltip when trigger is "click"', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -354,7 +354,7 @@ describe('Tooltip', () => { describe('dispose', () => { it('should destroy a tooltip', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const addEventSpy = spyOn(tooltipEl, 'addEventListener').and.callThrough() @@ -381,7 +381,7 @@ describe('Tooltip', () => { it('should destroy a tooltip after it is shown and hidden', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -402,7 +402,7 @@ describe('Tooltip', () => { it('should destroy a tooltip and remove it from the dom', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -443,7 +443,7 @@ describe('Tooltip', () => { describe('show', () => { it('should show a tooltip', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -488,7 +488,7 @@ describe('Tooltip', () => { it('should show a tooltip on mobile', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -509,7 +509,7 @@ describe('Tooltip', () => { it('should show a tooltip relative to placement option', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -532,7 +532,7 @@ describe('Tooltip', () => { it('should not error when trying to show a tooltip that has been removed from the dom', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -561,7 +561,7 @@ describe('Tooltip', () => { it('should show a tooltip with a dom element container', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -579,7 +579,7 @@ describe('Tooltip', () => { it('should show a tooltip with a jquery element container', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -600,7 +600,7 @@ describe('Tooltip', () => { it('should show a tooltip with a selector in container', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -618,7 +618,7 @@ describe('Tooltip', () => { it('should show a tooltip with placement as a function', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const spy = jasmine.createSpy('placement').and.returnValue('top') const tooltipEl = fixtureEl.querySelector('a') @@ -638,7 +638,7 @@ describe('Tooltip', () => { it('should show a tooltip without the animation', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -658,7 +658,7 @@ describe('Tooltip', () => { }) it('should throw an error the element is not visible', () => { - fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -672,7 +672,7 @@ describe('Tooltip', () => { it('should not show a tooltip if show.bs.tooltip is prevented', () => { return new Promise((resolve, reject) => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -699,7 +699,7 @@ describe('Tooltip', () => { it('should show tooltip if leave event hasn\'t occurred before delay expires', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -723,7 +723,7 @@ describe('Tooltip', () => { it('should not show tooltip if leave event occurs before delay expires', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -845,7 +845,7 @@ describe('Tooltip', () => { it('should only trigger inserted event if a new tooltip element was created', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -878,7 +878,7 @@ describe('Tooltip', () => { it('should show a tooltip with custom class provided in data attributes', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -896,7 +896,7 @@ describe('Tooltip', () => { it('should show a tooltip with custom class provided as a string in config', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -917,7 +917,7 @@ describe('Tooltip', () => { it('should show a tooltip with custom class provided as a function in config', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const spy = jasmine.createSpy('customClass').and.returnValue('custom-class') const tooltipEl = fixtureEl.querySelector('a') @@ -956,7 +956,7 @@ describe('Tooltip', () => { describe('hide', () => { it('should hide a tooltip', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -974,7 +974,7 @@ describe('Tooltip', () => { it('should hide a tooltip on mobile', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -998,7 +998,7 @@ describe('Tooltip', () => { it('should hide a tooltip without animation', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { @@ -1018,7 +1018,7 @@ describe('Tooltip', () => { it('should not hide a tooltip if hide event is prevented', () => { return new Promise((resolve, reject) => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const assertDone = () => { setTimeout(() => { @@ -1063,7 +1063,7 @@ describe('Tooltip', () => { describe('update', () => { it('should call popper update', () => { return new Promise(resolve => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1082,7 +1082,7 @@ describe('Tooltip', () => { }) it('should do nothing if the tooltip is not shown', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1094,7 +1094,7 @@ describe('Tooltip', () => { describe('_isWithContent', () => { it('should return true if there is content', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1103,7 +1103,7 @@ describe('Tooltip', () => { }) it('should return false if there is no content', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1114,7 +1114,7 @@ describe('Tooltip', () => { describe('_getTipElement', () => { it('should create the tip element and return it', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1126,7 +1126,7 @@ describe('Tooltip', () => { }) it('should return the created tip element', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1145,7 +1145,7 @@ describe('Tooltip', () => { describe('setContent', () => { it('should set tip content', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl, { animation: false }) @@ -1160,7 +1160,7 @@ describe('Tooltip', () => { }) it('should re-show tip if it was already shown', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1175,7 +1175,7 @@ describe('Tooltip', () => { }) it('should keep tip hidden, if it was already hidden before', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1190,7 +1190,7 @@ describe('Tooltip', () => { }) it('"setContent" should keep the initial template', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) @@ -1207,7 +1207,7 @@ describe('Tooltip', () => { describe('setContent', () => { it('should do nothing if the element is null', () => { - fixtureEl.innerHTML = '' + fixtureEl.innerHTML = '' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) -- cgit v1.2.3 From f44feabe16f4a0751428e486da2fd8396a3a16f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 21 Feb 2023 19:33:52 +0100 Subject: Tests: remove unnecessary `id`/`aria-labelledby` from collapse unit tests (#38089) --- js/tests/unit/collapse.spec.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'js') diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index fa50ad361..5a4fe1063 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -277,25 +277,25 @@ describe('Collapse', () => { return new Promise(resolve => { fixtureEl.innerHTML = [ '

', - '

', + '

', ' ', '

', - '

', + '

', '

', - '

', + '

', ' ', '

', - '

', + '

', '

content

', '

', - '

', + '

', ' ', '

', - '

', + '

', '

content

', '

', @@ -338,12 +338,12 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '

', '

', - '

', + '

', ' ', '

', - '

', + '

', '

-- cgit v1.2.3 From d5dee316f7f53521e7ece23f10200fe566b9c565 Mon Sep 17 00:00:00 2001 From: Kyle Tsang <6854874+kyletsang@users.noreply.github.com> Date: Sun, 30 Apr 2023 14:33:09 -0700 Subject: Update URL sanitizer to allow more protocols (#38531) Co-authored-by: XhmikosR --- js/src/util/sanitizer.js | 78 +++++++++++++++++------------------- js/tests/unit/util/sanitizer.spec.js | 78 +++++++++++++++++++++++++++++++----- 2 files changed, 104 insertions(+), 52 deletions(-) (limited to 'js') diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js index 5a07a67c1..d2b08082c 100644 --- a/js/src/util/sanitizer.js +++ b/js/src/util/sanitizer.js @@ -5,47 +5,6 @@ * -------------------------------------------------------------------------- */ -const uriAttributes = new Set([ - 'background', - 'cite', - 'href', - 'itemtype', - 'longdesc', - 'poster', - 'src', - 'xlink:href' -]) - -/** - * A pattern that recognizes a commonly useful subset of URLs that are safe. - * - * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts - */ -const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i - -/** - * A pattern that matches safe data URLs. Only matches image, video and audio types. - * - * Shout-out to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts - */ -const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i - -const allowedAttribute = (attribute, allowedAttributeList) => { - const attributeName = attribute.nodeName.toLowerCase() - - if (allowedAttributeList.includes(attributeName)) { - if (uriAttributes.has(attributeName)) { - return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue) || DATA_URL_PATTERN.test(attribute.nodeValue)) - } - - return true - } - - // Check if a regular expression validates the attribute. - return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp) - .some(regex => regex.test(attributeName)) -} - // js-docs-start allow-list const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i @@ -84,6 +43,42 @@ export const DefaultAllowlist = { } // js-docs-end allow-list +const uriAttributes = new Set([ + 'background', + 'cite', + 'href', + 'itemtype', + 'longdesc', + 'poster', + 'src', + 'xlink:href' +]) + +/** + * A pattern that recognizes URLs that are safe wrt. XSS in URL navigation + * contexts. + * + * Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38 + */ +// eslint-disable-next-line unicorn/better-regex +const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i + +const allowedAttribute = (attribute, allowedAttributeList) => { + const attributeName = attribute.nodeName.toLowerCase() + + if (allowedAttributeList.includes(attributeName)) { + if (uriAttributes.has(attributeName)) { + return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue)) + } + + return true + } + + // Check if a regular expression validates the attribute. + return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp) + .some(regex => regex.test(attributeName)) +} + export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) { if (!unsafeHtml.length) { return unsafeHtml @@ -102,7 +97,6 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) { if (!Object.keys(allowList).includes(elementName)) { element.remove() - continue } diff --git a/js/tests/unit/util/sanitizer.spec.js b/js/tests/unit/util/sanitizer.spec.js index 55e9b6336..2b21ef2e1 100644 --- a/js/tests/unit/util/sanitizer.spec.js +++ b/js/tests/unit/util/sanitizer.spec.js @@ -10,17 +10,75 @@ describe('Sanitizer', () => { expect(result).toEqual(empty) }) - it('should sanitize template by removing tags with XSS', () => { - const template = [ - '

', - ' Click me', - ' Some content', - '

' - ].join('') - - const result = sanitizeHtml(template, DefaultAllowlist, null) + it('should retain tags with valid URLs', () => { + const validUrls = [ + '', + 'http://abc', + 'HTTP://abc', + 'https://abc', + 'HTTPS://abc', + 'ftp://abc', + 'FTP://abc', + 'mailto:me@example.com', + 'MAILTO:me@example.com', + 'tel:123-123-1234', + 'TEL:123-123-1234', + 'sip:me@example.com', + 'SIP:me@example.com', + '#anchor', + '/page1.md', + 'http://JavaScript/my.js', + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/', // Truncated. + 'data:video/webm;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/', + 'data:audio/opus;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/', + 'unknown-scheme:abc' + ] + + for (const url of validUrls) { + const template = [ + '

', + ` Click me`, + ' Some content', + '

' + ].join('') + + const result = sanitizeHtml(template, DefaultAllowlist, null) + + expect(result).toContain(`href="${url}"`) + } + }) - expect(result).not.toContain('href="javascript:alert(7)') + it('should sanitize template by removing tags with XSS', () => { + const invalidUrls = [ + // eslint-disable-next-line no-script-url + 'javascript:alert(7)', + // eslint-disable-next-line no-script-url + 'javascript:evil()', + // eslint-disable-next-line no-script-url + 'JavaScript:abc', + ' javascript:abc', + ' \n Java\n Script:abc', + 'javascript:', + 'javascript:', + 'j avascript:', + 'javascript:', + 'javascript:', + 'jav ascript:alert();', + 'jav\u0000ascript:alert();' + ] + + for (const url of invalidUrls) { + const template = [ + '

', + ` Click me`, + ' Some content', + '

' +\n '

and

', + '

', ' ', '

', - ' ', - '

', + ' ', + '

Overview

Detail

Overview

Detail

Overview

Detail

Overview

Detail

', - ' ', - ' Accordion Item #1', - ' ', - '

', + ' ', + ' Accordion Item #1', + ' ', + '

Overview

Detail

Overview

Detail

Overview

Detail

Overview

Detail

Modal title

Modal title

Firefox Bug Test

Firefox Bug Test

Lorem slowly

Lorem slowly

', + '

', ' ', ' Accordion Item #1', ' ', '

', - ' ', - '

', + ' ', + '

', ' ', '