From 39ba67de4be6a64f76e78ece5dccac67e33f3cce Mon Sep 17 00:00:00 2001 From: djmaze Date: Sun, 30 Aug 2020 16:17:36 +0200 Subject: [PATCH] Bugfix: bootstrap native dropdown failed for Compose "from" --- vendors/bootstrap/js/bootstrap.native.js | 91 ++++++++------------ vendors/bootstrap/js/bootstrap.native.min.js | 2 +- 2 files changed, 39 insertions(+), 54 deletions(-) diff --git a/vendors/bootstrap/js/bootstrap.native.js b/vendors/bootstrap/js/bootstrap.native.js index 21dd4e8c6..6d7a7cb3b 100644 --- a/vendors/bootstrap/js/bootstrap.native.js +++ b/vendors/bootstrap/js/bootstrap.native.js @@ -9,88 +9,81 @@ window.BSN = (() => { const transitionEndEvent = 'transitionend', doc = document, - body = doc.body; + body = doc.body, + setFocus = element => element.focus ? element.focus() : element.setActive(); - function getElementTransitionDuration(element) { - var duration = parseFloat(getComputedStyle(element).transitionDuration); - duration = typeof duration === 'number' && !isNaN(duration) ? duration * 1000 : 0; - return duration; - } - - function emulateTransitionEnd(element,handler){ - var called = 0, duration = getElementTransitionDuration(element); - duration ? element.addEventListener( transitionEndEvent, function transitionEndWrapper(e){ + function emulateTransitionEnd(element,handler) { + var called = 0, duration = parseFloat(getComputedStyle(element).transitionDuration), + transitionEndWrapper = e => { !called && handler(e), called = 1; element.removeEventListener( transitionEndEvent, transitionEndWrapper); - }) - : setTimeout(() => { !called && handler(), called = 1; }, 17); - } - - function queryElement(selector, parent) { - var lookUp = parent && parent instanceof Element ? parent : doc; - return selector instanceof Element ? selector : lookUp.querySelector(selector); - } - - function setFocus (element){ - element.focus ? element.focus() : element.setActive(); + }; + (isFinite(duration) && duration) + ? element.addEventListener( transitionEndEvent, transitionEndWrapper ) + : setTimeout(() => { !called && handler(), called = 1; }, 17); } function Dropdown(element) { var self = this, parent, menu, menuItems = []; - function preventEmptyAnchor(anchor) { - (anchor.href && anchor.href.slice(-1) === '#' || anchor.parentNode && anchor.parentNode.href - && anchor.parentNode.href.slice(-1) === '#') && this.preventDefault(); + function preventEmptyAnchor(ev, anchor) { + const p = anchor.parentNode; + ((anchor.href && anchor.href.slice(-1) === '#') || (p && p.href && p.href.slice(-1) === '#')) + && ev.preventDefault(); } - function toggleDismiss() { - var action = element.open ? 'addEventListener' : 'removeEventListener'; + function toggleEvents() { + let action = element.open ? 'addEventListener' : 'removeEventListener'; doc[action]('click',dismissHandler,false); doc[action]('keydown',preventScroll,false); doc[action]('keyup',keyHandler,false); doc[action]('focus',dismissHandler,false); } function dismissHandler(e) { - var eventTarget = e.target, + let eventTarget = e.target, hasData = eventTarget && (eventTarget.getAttribute('data-toggle') - || eventTarget.parentNode && eventTarget.parentNode.getAttribute - && eventTarget.parentNode.getAttribute('data-toggle')); + || (eventTarget.parentNode && eventTarget.parentNode.getAttribute('data-toggle'))); if ( e.type === 'focus' && (eventTarget === element || eventTarget === menu || menu.contains(eventTarget) ) ) { return; } if ( hasData && (eventTarget === menu || menu.contains(eventTarget)) ) { return; } self.hide(); - preventEmptyAnchor.call(e,eventTarget); + preventEmptyAnchor(e,eventTarget); } function clickHandler(e) { self.show(); - preventEmptyAnchor.call(e,e.target); + preventEmptyAnchor(e,e.target); } function preventScroll(e) { - var key = e.which || e.keyCode; - if( key === 38 || key === 40 ) { e.preventDefault(); } + ( e.code === 'ArrowUp' || e.code === 'ArrowDown' ) && e.preventDefault(); } function keyHandler(e) { - var key = e.which || e.keyCode, - activeItem = doc.activeElement, + var activeItem = doc.activeElement, isSameElement = activeItem === element, isInsideMenu = menu.contains(activeItem), isMenuItem = activeItem.parentNode === menu || activeItem.parentNode.parentNode === menu, idx = menuItems.indexOf(activeItem); if ( isMenuItem ) { idx = isSameElement ? 0 - : key === 38 ? (idx>1?idx-1:0) - : key === 40 ? (idx1?idx-1:0) + : e.code === 'ArrowDown' ? (idx { + menu = parent.querySelector('.dropdown-menu'); + menuItems = []; + Array.from(menu.children).forEach(child => { + child.children.length && (child.children[0].tagName === 'A' && menuItems.push(child.children[0])); + child.tagName === 'A' && menuItems.push(child); + }); + !('tabindex' in menu) && menu.setAttribute('tabindex', '0'); menu.classList.add('show'); parent.classList.add('show'); element.setAttribute('aria-expanded',true); @@ -98,7 +91,7 @@ window.BSN = (() => { element.removeEventListener('click',clickHandler,false); setTimeout(() => { setFocus( menu.getElementsByTagName('INPUT')[0] || element ); - toggleDismiss(); + toggleEvents(); },1); }; self.hide = () => { @@ -106,21 +99,13 @@ window.BSN = (() => { parent.classList.remove('show'); element.setAttribute('aria-expanded',false); element.open = false; - toggleDismiss(); + toggleEvents(); setFocus(element); setTimeout(() => element.Dropdown && element.addEventListener('click',clickHandler,false), 1); }; self.toggle = () => (parent.classList.contains('show') && element.open) ? self.hide() : self.show(); parent = element.parentNode; - menu = queryElement('.dropdown-menu', parent); - Array.from(menu.children).forEach(child => { - child.children.length && (child.children[0].tagName === 'A' && menuItems.push(child.children[0])); - child.tagName === 'A' && menuItems.push(child); - }); - if ( !element.Dropdown ) { - !('tabindex' in menu) && menu.setAttribute('tabindex', '0'); - element.addEventListener('click',clickHandler,false); - } + element.addEventListener('click',clickHandler,false); element.open = false; element.Dropdown = self; } @@ -152,8 +137,8 @@ window.BSN = (() => { return widthValue; } function toggleEvents(action) { - action = action ? 'addEventListener' : 'removeEventListener'; - window[action]( 'resize', () => modal.classList.contains('show') && setScrollbar(), { passive: true }); + window[action ? 'addEventListener' : 'removeEventListener']( 'resize', + () => modal.classList.contains('show') && setScrollbar(), { passive: true }); } function beforeShow() { modal.style.display = 'block'; @@ -205,9 +190,9 @@ window.BSN = (() => { if (!li.classList.contains('active')) { const previous = el.closest('ul').querySelector('.active a'); previous.closest('li').classList.remove('active'); - queryElement(previous.getAttribute('href')).classList.remove('active'); + doc.querySelector(previous.getAttribute('href')).classList.remove('active'); li.classList.add('active'); - queryElement(el.getAttribute('href')).classList.add('active'); + doc.querySelector(el.getAttribute('href')).classList.add('active'); } } } diff --git a/vendors/bootstrap/js/bootstrap.native.min.js b/vendors/bootstrap/js/bootstrap.native.min.js index 8d4b56d9f..86d26873e 100644 --- a/vendors/bootstrap/js/bootstrap.native.min.js +++ b/vendors/bootstrap/js/bootstrap.native.min.js @@ -4,4 +4,4 @@ * Licensed under MIT (https://github.com/thednp/bootstrap.native/blob/master/LICENSE) */ -window.BSN=(()=>{"use strict";const e="transitionend",t=document,n=t.body;function s(t,n){var s=0;(function(e){var t=parseFloat(getComputedStyle(e).transitionDuration);return t="number"!=typeof t||isNaN(t)?0:1e3*t})(t)?t.addEventListener(e,function i(a){!s&&n(a),s=1,t.removeEventListener(e,i)}):setTimeout(()=>{!s&&n(),s=1},17)}function i(e,n){var s=n&&n instanceof Element?n:t;return e instanceof Element?e:s.querySelector(e)}function a(e){e.focus?e.focus():e.setActive()}return{Dropdown:function(e){var n,s,o=this,c=[];function r(e){(e.href&&"#"===e.href.slice(-1)||e.parentNode&&e.parentNode.href&&"#"===e.parentNode.href.slice(-1))&&this.preventDefault()}function l(){var n=e.open?"addEventListener":"removeEventListener";t[n]("click",d,!1),t[n]("keydown",u,!1),t[n]("keyup",m,!1),t[n]("focus",d,!1)}function d(t){var n=t.target,i=n&&(n.getAttribute("data-toggle")||n.parentNode&&n.parentNode.getAttribute&&n.parentNode.getAttribute("data-toggle"));("focus"!==t.type||n!==e&&n!==s&&!s.contains(n))&&(i&&(n===s||s.contains(n))||(o.hide(),r.call(t,n)))}function h(e){o.show(),r.call(e,e.target)}function u(e){var t=e.which||e.keyCode;38!==t&&40!==t||e.preventDefault()}function m(n){var i=n.which||n.keyCode,r=t.activeElement,l=r===e,d=s.contains(r),h=r.parentNode===s||r.parentNode.parentNode===s,u=c.indexOf(r);h&&(u=l?0:38===i?u>1?u-1:0:40===i&&u{s.classList.add("show"),n.classList.add("show"),e.setAttribute("aria-expanded",!0),e.open=!0,e.removeEventListener("click",h,!1),setTimeout(()=>{a(s.getElementsByTagName("INPUT")[0]||e),l()},1)}),o.hide=(()=>{s.classList.remove("show"),n.classList.remove("show"),e.setAttribute("aria-expanded",!1),e.open=!1,l(),a(e),setTimeout(()=>e.Dropdown&&e.addEventListener("click",h,!1),1)}),o.toggle=(()=>n.classList.contains("show")&&e.open?o.hide():o.show()),n=e.parentNode,s=i(".dropdown-menu",n),Array.from(s.children).forEach(e=>{e.children.length&&"A"===e.children[0].tagName&&c.push(e.children[0]),"A"===e.tagName&&c.push(e)}),e.Dropdown||(!("tabindex"in s)&&s.setAttribute("tabindex","0"),e.addEventListener("click",h,!1)),e.open=!1,e.Dropdown=o},Modal:function(e){var i;function o(){var s,a,o=n.classList.contains("modal-open"),c=parseInt(getComputedStyle(n).paddingRight),r=t.documentElement.clientHeight!==t.documentElement.scrollHeight||n.clientHeight!==n.scrollHeight,l=e.clientHeight!==e.scrollHeight;(a=t.createElement("div")).className="modal-scrollbar-measure",n.appendChild(a),s=a.offsetWidth-a.clientWidth,n.removeChild(a),i=s,e.style.paddingRight=!l&&i?i+"px":"",n.style.paddingRight=l||r?c+(o?0:i)+"px":""}function c(t){t=t?"addEventListener":"removeEventListener",window[t]("resize",()=>e.classList.contains("show")&&o(),{passive:!0})}function r(){e.style.display="block",o(),!t.getElementsByClassName("modal show")[0]&&n.classList.add("modal-open"),e.classList.add("show"),e.setAttribute("aria-hidden",!1),e.classList.contains("fade")?s(e,l):l()}function l(){a(e),e.isAnimating=!1,c(1)}function d(){e.style.display="",n.classList.remove("modal-open"),n.style.paddingRight="",e.style.paddingRight="",c(),e.isAnimating=!1}this.show=(()=>{e.classList.contains("show")&&e.isAnimating||(e.isAnimating=!0,t.getElementsByClassName("modal show")[0]?r():setTimeout(r,0))}),this.hide=(()=>{e.classList.contains("show")&&(e.isAnimating=!0,e.classList.remove("show"),e.setAttribute("aria-hidden",!0),e.classList.contains("fade")?s(e,d):d())}),e.isAnimating=!1,e.Modal=this},Tab:class{constructor(e){this.element=e,e.Tab=this,e.addEventListener("click",e=>{e.preventDefault(),this.show()})}show(){const e=this.element,t=e.closest("li");if(!t.classList.contains("active")){const n=e.closest("ul").querySelector(".active a");n.closest("li").classList.remove("active"),i(n.getAttribute("href")).classList.remove("active"),t.classList.add("active"),i(e.getAttribute("href")).classList.add("active")}}}}})(); +window.BSN=(()=>{"use strict";const e="transitionend",t=document,s=t.body,i=e=>e.focus?e.focus():e.setActive();function n(t,s){var i=0,n=parseFloat(getComputedStyle(t).transitionDuration),o=n=>{!i&&s(n),i=1,t.removeEventListener(e,o)};isFinite(n)&&n?t.addEventListener(e,o):setTimeout(()=>{!i&&s(),i=1},17)}return{Dropdown:function(e){var s,n,o=this,a=[];function c(e,t){const s=t.parentNode;(t.href&&"#"===t.href.slice(-1)||s&&s.href&&"#"===s.href.slice(-1))&&e.preventDefault()}function r(){let s=e.open?"addEventListener":"removeEventListener";t[s]("click",l,!1),t[s]("keydown",h,!1),t[s]("keyup",u,!1),t[s]("focus",l,!1)}function l(t){let s=t.target,i=s&&(s.getAttribute("data-toggle")||s.parentNode&&s.parentNode.getAttribute("data-toggle"));("focus"!==t.type||s!==e&&s!==n&&!n.contains(s))&&(i&&(s===n||n.contains(s))||(o.hide(),c(t,s)))}function d(e){o.show(),c(e,e.target)}function h(e){("ArrowUp"===e.code||"ArrowDown"===e.code)&&e.preventDefault()}function u(s){var c=t.activeElement,r=c===e,l=n.contains(c),d=c.parentNode===n||c.parentNode.parentNode===n,h=a.indexOf(c);d&&(h=r?0:"ArrowUp"===s.code?h>1?h-1:0:"ArrowDown"===s.code&&h{n=s.querySelector(".dropdown-menu"),a=[],Array.from(n.children).forEach(e=>{e.children.length&&"A"===e.children[0].tagName&&a.push(e.children[0]),"A"===e.tagName&&a.push(e)}),!("tabindex"in n)&&n.setAttribute("tabindex","0"),n.classList.add("show"),s.classList.add("show"),e.setAttribute("aria-expanded",!0),e.open=!0,e.removeEventListener("click",d,!1),setTimeout(()=>{i(n.getElementsByTagName("INPUT")[0]||e),r()},1)}),o.hide=(()=>{n.classList.remove("show"),s.classList.remove("show"),e.setAttribute("aria-expanded",!1),e.open=!1,r(),i(e),setTimeout(()=>e.Dropdown&&e.addEventListener("click",d,!1),1)}),o.toggle=(()=>s.classList.contains("show")&&e.open?o.hide():o.show()),s=e.parentNode,e.addEventListener("click",d,!1),e.open=!1,e.Dropdown=o},Modal:function(e){var o;function a(){var i,n,a=s.classList.contains("modal-open"),c=parseInt(getComputedStyle(s).paddingRight),r=t.documentElement.clientHeight!==t.documentElement.scrollHeight||s.clientHeight!==s.scrollHeight,l=e.clientHeight!==e.scrollHeight;(n=t.createElement("div")).className="modal-scrollbar-measure",s.appendChild(n),i=n.offsetWidth-n.clientWidth,s.removeChild(n),o=i,e.style.paddingRight=!l&&o?o+"px":"",s.style.paddingRight=l||r?c+(a?0:o)+"px":""}function c(t){window[t?"addEventListener":"removeEventListener"]("resize",()=>e.classList.contains("show")&&a(),{passive:!0})}function r(){e.style.display="block",a(),!t.getElementsByClassName("modal show")[0]&&s.classList.add("modal-open"),e.classList.add("show"),e.setAttribute("aria-hidden",!1),e.classList.contains("fade")?n(e,l):l()}function l(){i(e),e.isAnimating=!1,c(1)}function d(){e.style.display="",s.classList.remove("modal-open"),s.style.paddingRight="",e.style.paddingRight="",c(),e.isAnimating=!1}this.show=(()=>{e.classList.contains("show")&&e.isAnimating||(e.isAnimating=!0,t.getElementsByClassName("modal show")[0]?r():setTimeout(r,0))}),this.hide=(()=>{e.classList.contains("show")&&(e.isAnimating=!0,e.classList.remove("show"),e.setAttribute("aria-hidden",!0),e.classList.contains("fade")?n(e,d):d())}),e.isAnimating=!1,e.Modal=this},Tab:class{constructor(e){this.element=e,e.Tab=this,e.addEventListener("click",e=>{e.preventDefault(),this.show()})}show(){const e=this.element,s=e.closest("li");if(!s.classList.contains("active")){const i=e.closest("ul").querySelector(".active a");i.closest("li").classList.remove("active"),t.querySelector(i.getAttribute("href")).classList.remove("active"),s.classList.add("active"),t.querySelector(e.getAttribute("href")).classList.add("active")}}}}})();