Merge branch 'bs5' into 'dev'

Update to bootstrap 5 and implement next generation app menu (work in progress)

See merge request hubzilla/core!1980

1 files changed, 68 insertions, 99 deletions

diff --git a/vendor/twbs/bootstrap/js/src/tab.js b/vendor/twbs/bootstrap/js/src/tab.js
index e9a6f555f..ff12efe2e 100644
--- a/vendor/twbs/bootstrap/js/src/tab.js
+++ b/vendor/twbs/bootstrap/js/src/tab.js
@@ -1,12 +1,19 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.6.0): tab.js
+ * Bootstrap (v5.0.2): tab.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import $ from 'jquery'
-import Util from './util'
+import {
+  defineJQueryPlugin,
+  getElementFromSelector,
+  isDisabled,
+  reflow
+} from './util/index'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -15,11 +22,9 @@ import Util from './util'
  */
 
 const NAME = 'tab'
-const VERSION = '4.6.0'
 const DATA_KEY = 'bs.tab'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
-const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
@@ -29,17 +34,16 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'
 const CLASS_NAME_ACTIVE = 'active'
-const CLASS_NAME_DISABLED = 'disabled'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 
 const SELECTOR_DROPDOWN = '.dropdown'
 const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
 const SELECTOR_ACTIVE = '.active'
-const SELECTOR_ACTIVE_UL = '> li > .active'
-const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]'
+const SELECTOR_ACTIVE_UL = ':scope > li > .active'
+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 = '> .dropdown-menu .active'
+const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'
 
 /**
  * ------------------------------------------------------------------------
@@ -47,77 +51,55 @@ const SELECTOR_DROPDOWN_ACTIVE_CHILD = '> .dropdown-menu .active'
  * ------------------------------------------------------------------------
  */
 
-class Tab {
-  constructor(element) {
-    this._element = element
-  }
-
+class Tab extends BaseComponent {
   // Getters
 
-  static get VERSION() {
-    return VERSION
+  static get NAME() {
+    return NAME
   }
 
   // Public
 
   show() {
-    if (this._element.parentNode &&
-        this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
-        $(this._element).hasClass(CLASS_NAME_ACTIVE) ||
-        $(this._element).hasClass(CLASS_NAME_DISABLED)) {
+    if ((this._element.parentNode &&
+      this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
+      this._element.classList.contains(CLASS_NAME_ACTIVE))) {
       return
     }
 
-    let target
     let previous
-    const listElement = $(this._element).closest(SELECTOR_NAV_LIST_GROUP)[0]
-    const selector = Util.getSelectorFromElement(this._element)
+    const target = getElementFromSelector(this._element)
+    const listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP)
 
     if (listElement) {
       const itemSelector = listElement.nodeName === 'UL' || listElement.nodeName === 'OL' ? SELECTOR_ACTIVE_UL : SELECTOR_ACTIVE
-      previous = $.makeArray($(listElement).find(itemSelector))
+      previous = SelectorEngine.find(itemSelector, listElement)
       previous = previous[previous.length - 1]
     }
 
-    const hideEvent = $.Event(EVENT_HIDE, {
-      relatedTarget: this._element
-    })
+    const hideEvent = previous ?
+      EventHandler.trigger(previous, EVENT_HIDE, {
+        relatedTarget: this._element
+      }) :
+      null
 
-    const showEvent = $.Event(EVENT_SHOW, {
+    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
       relatedTarget: previous
     })
 
-    if (previous) {
-      $(previous).trigger(hideEvent)
-    }
-
-    $(this._element).trigger(showEvent)
-
-    if (showEvent.isDefaultPrevented() ||
-        hideEvent.isDefaultPrevented()) {
+    if (showEvent.defaultPrevented || (hideEvent !== null && hideEvent.defaultPrevented)) {
       return
     }
 
-    if (selector) {
-      target = document.querySelector(selector)
-    }
-
-    this._activate(
-      this._element,
-      listElement
-    )
+    this._activate(this._element, listElement)
 
     const complete = () => {
-      const hiddenEvent = $.Event(EVENT_HIDDEN, {
+      EventHandler.trigger(previous, EVENT_HIDDEN, {
         relatedTarget: this._element
       })
-
-      const shownEvent = $.Event(EVENT_SHOWN, {
+      EventHandler.trigger(this._element, EVENT_SHOWN, {
         relatedTarget: previous
       })
-
-      $(previous).trigger(hiddenEvent)
-      $(this._element).trigger(shownEvent)
     }
 
     if (target) {
@@ -127,33 +109,21 @@ class Tab {
     }
   }
 
-  dispose() {
-    $.removeData(this._element, DATA_KEY)
-    this._element = null
-  }
-
   // Private
 
   _activate(element, container, callback) {
     const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ?
-      $(container).find(SELECTOR_ACTIVE_UL) :
-      $(container).children(SELECTOR_ACTIVE)
+      SelectorEngine.find(SELECTOR_ACTIVE_UL, container) :
+      SelectorEngine.children(container, SELECTOR_ACTIVE)
 
     const active = activeElements[0]
-    const isTransitioning = callback && (active && $(active).hasClass(CLASS_NAME_FADE))
-    const complete = () => this._transitionComplete(
-      element,
-      active,
-      callback
-    )
+    const isTransitioning = callback && (active && active.classList.contains(CLASS_NAME_FADE))
 
-    if (active && isTransitioning) {
-      const transitionDuration = Util.getTransitionDurationFromElement(active)
+    const complete = () => this._transitionComplete(element, active, callback)
 
-      $(active)
-        .removeClass(CLASS_NAME_SHOW)
-        .one(Util.TRANSITION_END, complete)
-        .emulateTransitionEnd(transitionDuration)
+    if (active && isTransitioning) {
+      active.classList.remove(CLASS_NAME_SHOW)
+      this._queueCallback(complete, element, true)
     } else {
       complete()
     }
@@ -161,14 +131,12 @@ class Tab {
 
   _transitionComplete(element, active, callback) {
     if (active) {
-      $(active).removeClass(CLASS_NAME_ACTIVE)
+      active.classList.remove(CLASS_NAME_ACTIVE)
 
-      const dropdownChild = $(active.parentNode).find(
-        SELECTOR_DROPDOWN_ACTIVE_CHILD
-      )[0]
+      const dropdownChild = SelectorEngine.findOne(SELECTOR_DROPDOWN_ACTIVE_CHILD, active.parentNode)
 
       if (dropdownChild) {
-        $(dropdownChild).removeClass(CLASS_NAME_ACTIVE)
+        dropdownChild.classList.remove(CLASS_NAME_ACTIVE)
       }
 
       if (active.getAttribute('role') === 'tab') {
@@ -176,24 +144,28 @@ class Tab {
       }
     }
 
-    $(element).addClass(CLASS_NAME_ACTIVE)
+    element.classList.add(CLASS_NAME_ACTIVE)
     if (element.getAttribute('role') === 'tab') {
       element.setAttribute('aria-selected', true)
     }
 
-    Util.reflow(element)
+    reflow(element)
 
     if (element.classList.contains(CLASS_NAME_FADE)) {
       element.classList.add(CLASS_NAME_SHOW)
     }
 
-    if (element.parentNode && $(element.parentNode).hasClass(CLASS_NAME_DROPDOWN_MENU)) {
-      const dropdownElement = $(element).closest(SELECTOR_DROPDOWN)[0]
+    let parent = element.parentNode
+    if (parent && parent.nodeName === 'LI') {
+      parent = parent.parentNode
+    }
+
+    if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
+      const dropdownElement = element.closest(SELECTOR_DROPDOWN)
 
       if (dropdownElement) {
-        const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(SELECTOR_DROPDOWN_TOGGLE))
-
-        $(dropdownToggleList).addClass(CLASS_NAME_ACTIVE)
+        SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement)
+          .forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE))
       }
 
       element.setAttribute('aria-expanded', true)
@@ -206,15 +178,9 @@ class Tab {
 
   // Static
 
-  static _jQueryInterface(config) {
+  static jQueryInterface(config) {
     return this.each(function () {
-      const $this = $(this)
-      let data = $this.data(DATA_KEY)
-
-      if (!data) {
-        data = new Tab(this)
-        $this.data(DATA_KEY, data)
-      }
+      const data = Tab.getOrCreateInstance(this)
 
       if (typeof config === 'string') {
         if (typeof data[config] === 'undefined') {
@@ -233,23 +199,26 @@ class Tab {
  * ------------------------------------------------------------------------
  */
 
-$(document)
-  .on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+  if (['A', 'AREA'].includes(this.tagName)) {
     event.preventDefault()
-    Tab._jQueryInterface.call($(this), 'show')
-  })
+  }
+
+  if (isDisabled(this)) {
+    return
+  }
+
+  const data = Tab.getOrCreateInstance(this)
+  data.show()
+})
 
 /**
  * ------------------------------------------------------------------------
  * jQuery
  * ------------------------------------------------------------------------
+ * add .Tab to jQuery only if jQuery is present
  */
 
-$.fn[NAME] = Tab._jQueryInterface
-$.fn[NAME].Constructor = Tab
-$.fn[NAME].noConflict = () => {
-  $.fn[NAME] = JQUERY_NO_CONFLICT
-  return Tab._jQueryInterface
-}
+defineJQueryPlugin(Tab)
 
 export default Tab