bootstrap-italia 2.12.0 → 2.13.0

package/src/js/plugins/carousel.js

@@ -1,5 +1,447 @@
-import { default as BSCarousel } from 'bootstrap/js/src/carousel'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * This a fork of Bootstrap: Initial license and original file name below
+ * Bootstrap (v5.2.3): carousel.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
-class Carousel extends BSCarousel {}
+import { getElementFromSelector, getNextActiveElement, isRTL, isVisible, reflow, triggerTransitionEnd } from './util/index'
+import EventHandler from './dom/event-handler'
+import Manipulator from './dom/manipulator'
+import SelectorEngine from './dom/selector-engine'
+import Swipe from './util/swipe'
+import BaseComponent from './base-component'
+
+/**
+ * Constants
+ */
+
+const NAME = 'carousel'
+const DATA_KEY = 'bs.carousel'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const ARROW_LEFT_KEY = 'ArrowLeft'
+const ARROW_RIGHT_KEY = 'ArrowRight'
+const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
+
+const ORDER_NEXT = 'next'
+const ORDER_PREV = 'prev'
+const DIRECTION_LEFT = 'left'
+const DIRECTION_RIGHT = 'right'
+
+const EVENT_SLIDE = `slide${EVENT_KEY}`
+const EVENT_SLID = `slid${EVENT_KEY}`
+const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
+const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`
+const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`
+const EVENT_DRAG_START = `dragstart${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_CAROUSEL = 'carousel'
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_SLIDE = 'slide'
+const CLASS_NAME_END = 'carousel-item-end'
+const CLASS_NAME_START = 'carousel-item-start'
+const CLASS_NAME_NEXT = 'carousel-item-next'
+const CLASS_NAME_PREV = 'carousel-item-prev'
+
+const SELECTOR_ACTIVE = '.active'
+const SELECTOR_ITEM = '.carousel-item'
+const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM
+const SELECTOR_ITEM_IMG = '.carousel-item img'
+const SELECTOR_INDICATORS = '.carousel-indicators'
+const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
+const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
+
+const KEY_TO_DIRECTION = {
+  [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
+  [ARROW_RIGHT_KEY]: DIRECTION_LEFT,
+}
+
+const Default = {
+  interval: 5000,
+  keyboard: true,
+  pause: 'hover',
+  ride: false,
+  touch: true,
+  wrap: true,
+}
+
+const DefaultType = {
+  interval: '(number|boolean)', // TODO:v6 remove boolean support
+  keyboard: 'boolean',
+  pause: '(string|boolean)',
+  ride: '(boolean|string)',
+  touch: 'boolean',
+  wrap: 'boolean',
+}
+
+/**
+ * Class definition
+ */
+
+class Carousel extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._interval = null
+    this._activeElement = null
+    this._isSliding = false
+    this.touchTimeout = null
+    this._swipeHelper = null
+
+    this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
+    this._addEventListeners()
+
+    if (this._config.ride === CLASS_NAME_CAROUSEL) {
+      this.cycle()
+    }
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  next() {
+    this._slide(ORDER_NEXT)
+  }
+
+  nextWhenVisible() {
+    // FIXME TODO use `document.visibilityState`
+    // Don't call next when the page isn't visible
+    // or the carousel or its parent isn't visible
+    if (!document.hidden && isVisible(this._element)) {
+      this.next()
+    }
+  }
+
+  prev() {
+    this._slide(ORDER_PREV)
+  }
+
+  pause() {
+    if (this._isSliding) {
+      triggerTransitionEnd(this._element)
+    }
+
+    this._clearInterval()
+  }
+
+  cycle() {
+    this._clearInterval()
+    this._updateInterval()
+
+    this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval)
+  }
+
+  _maybeEnableCycle() {
+    if (!this._config.ride) {
+      return
+    }
+
+    if (this._isSliding) {
+      EventHandler.one(this._element, EVENT_SLID, () => this.cycle())
+      return
+    }
+
+    this.cycle()
+  }
+
+  to(index) {
+    const items = this._getItems()
+    if (index > items.length - 1 || index < 0) {
+      return
+    }
+
+    if (this._isSliding) {
+      EventHandler.one(this._element, EVENT_SLID, () => this.to(index))
+      return
+    }
+
+    const activeIndex = this._getItemIndex(this._getActive())
+    if (activeIndex === index) {
+      return
+    }
+
+    const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV
+
+    this._slide(order, items[index])
+  }
+
+  dispose() {
+    if (this._swipeHelper) {
+      this._swipeHelper.dispose()
+    }
+
+    super.dispose()
+  }
+
+  // Private
+  _configAfterMerge(config) {
+    config.defaultInterval = config.interval
+    return config
+  }
+
+  _addEventListeners() {
+    if (this._config.keyboard) {
+      EventHandler.on(this._element, EVENT_KEYDOWN, (event) => this._keydown(event))
+    }
+
+    if (this._config.pause === 'hover') {
+      EventHandler.on(this._element, EVENT_MOUSEENTER, () => this.pause())
+      EventHandler.on(this._element, EVENT_MOUSELEAVE, () => this._maybeEnableCycle())
+    }
+
+    if (this._config.touch && Swipe.isSupported()) {
+      this._addTouchEventListeners()
+    }
+  }
+
+  _addTouchEventListeners() {
+    for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
+      EventHandler.on(img, EVENT_DRAG_START, (event) => event.preventDefault())
+    }
+
+    const endCallBack = () => {
+      if (this._config.pause !== 'hover') {
+        return
+      }
+
+      // If it's a touch-enabled device, mouseenter/leave are fired as
+      // part of the mouse compatibility events on first tap - the carousel
+      // would stop cycling until user tapped out of it;
+      // here, we listen for touchend, explicitly pause the carousel
+      // (as if it's the second time we tap on it, mouseenter compat event
+      // is NOT fired) and after a timeout (to allow for mouse compatibility
+      // events to fire) we explicitly restart cycling
+
+      this.pause()
+      if (this.touchTimeout) {
+        clearTimeout(this.touchTimeout)
+      }
+
+      this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
+    }
+
+    const swipeConfig = {
+      leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)),
+      rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)),
+      endCallback: endCallBack,
+    }
+
+    this._swipeHelper = new Swipe(this._element, swipeConfig)
+  }
+
+  _keydown(event) {
+    if (/input|textarea/i.test(event.target.tagName)) {
+      return
+    }
+
+    const direction = KEY_TO_DIRECTION[event.key]
+    if (direction) {
+      event.preventDefault()
+      this._slide(this._directionToOrder(direction))
+    }
+  }
+
+  _getItemIndex(element) {
+    return this._getItems().indexOf(element)
+  }
+
+  _setActiveIndicatorElement(index) {
+    if (!this._indicatorsElement) {
+      return
+    }
+
+    const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement)
+
+    activeIndicator.classList.remove(CLASS_NAME_ACTIVE)
+    activeIndicator.removeAttribute('aria-current')
+
+    const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement)
+
+    if (newActiveIndicator) {
+      newActiveIndicator.classList.add(CLASS_NAME_ACTIVE)
+      newActiveIndicator.setAttribute('aria-current', 'true')
+    }
+  }
+
+  _updateInterval() {
+    const element = this._activeElement || this._getActive()
+
+    if (!element) {
+      return
+    }
+
+    const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10)
+
+    this._config.interval = elementInterval || this._config.defaultInterval
+  }
+
+  _slide(order, element = null) {
+    if (this._isSliding) {
+      return
+    }
+
+    const activeElement = this._getActive()
+    const isNext = order === ORDER_NEXT
+    const nextElement = element || getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap)
+
+    if (nextElement === activeElement) {
+      return
+    }
+
+    const nextElementIndex = this._getItemIndex(nextElement)
+
+    const triggerEvent = (eventName) => {
+      return EventHandler.trigger(this._element, eventName, {
+        relatedTarget: nextElement,
+        direction: this._orderToDirection(order),
+        from: this._getItemIndex(activeElement),
+        to: nextElementIndex,
+      })
+    }
+
+    const slideEvent = triggerEvent(EVENT_SLIDE)
+
+    if (slideEvent.defaultPrevented) {
+      return
+    }
+
+    if (!activeElement || !nextElement) {
+      // Some weirdness is happening, so we bail
+      // todo: change tests that use empty divs to avoid this check
+      return
+    }
+
+    const isCycling = Boolean(this._interval)
+    this.pause()
+
+    this._isSliding = true
+
+    this._setActiveIndicatorElement(nextElementIndex)
+    this._activeElement = nextElement
+
+    const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END
+    const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV
+
+    nextElement.classList.add(orderClassName)
+
+    reflow(nextElement)
+
+    activeElement.classList.add(directionalClassName)
+    nextElement.classList.add(directionalClassName)
+
+    const completeCallBack = () => {
+      nextElement.classList.remove(directionalClassName, orderClassName)
+      nextElement.classList.add(CLASS_NAME_ACTIVE)
+
+      activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName)
+
+      this._isSliding = false
+
+      triggerEvent(EVENT_SLID)
+    }
+
+    this._queueCallback(completeCallBack, activeElement, this._isAnimated())
+
+    if (isCycling) {
+      this.cycle()
+    }
+  }
+
+  _isAnimated() {
+    return this._element.classList.contains(CLASS_NAME_SLIDE)
+  }
+
+  _getActive() {
+    return SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
+  }
+
+  _getItems() {
+    return SelectorEngine.find(SELECTOR_ITEM, this._element)
+  }
+
+  _clearInterval() {
+    if (this._interval) {
+      clearInterval(this._interval)
+      this._interval = null
+    }
+  }
+
+  _directionToOrder(direction) {
+    if (isRTL()) {
+      return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT
+    }
+
+    return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV
+  }
+
+  _orderToDirection(order) {
+    if (isRTL()) {
+      return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT
+    }
+
+    return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
+    const target = getElementFromSelector(this)
+
+    if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
+      return
+    }
+
+    event.preventDefault()
+
+    const carousel = Carousel.getOrCreateInstance(target)
+    const slideIndex = this.getAttribute('data-bs-slide-to')
+
+    if (slideIndex) {
+      carousel.to(slideIndex)
+      carousel._maybeEnableCycle()
+      return
+    }
+
+    if (Manipulator.getDataAttribute(this, 'slide') === 'next') {
+      carousel.next()
+      carousel._maybeEnableCycle()
+      return
+    }
+
+    carousel.prev()
+    carousel._maybeEnableCycle()
+  })
+
+  EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+    const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE)
+
+    for (const carousel of carousels) {
+      Carousel.getOrCreateInstance(carousel)
+    }
+  })
+}
 
 export default Carousel

package/src/js/plugins/collapse.js

@@ -1,5 +1,275 @@
-import { default as BSCollapse } from 'bootstrap/js/src/collapse'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * This a fork of Bootstrap: Initial license and original file name below
+ * Bootstrap (v5.2.3): collapse.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
-class Collapse extends BSCollapse {}
+import { getElement, getElementFromSelector, getSelectorFromElement, reflow } from './util/index'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
+
+/**
+ * Constants
+ */
+
+const NAME = 'collapse'
+const DATA_KEY = 'bs.collapse'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_COLLAPSE = 'collapse'
+const CLASS_NAME_COLLAPSING = 'collapsing'
+const CLASS_NAME_COLLAPSED = 'collapsed'
+const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
+const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
+
+const WIDTH = 'width'
+const HEIGHT = 'height'
+
+const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
+
+const Default = {
+  parent: null,
+  toggle: true,
+}
+
+const DefaultType = {
+  parent: '(null|element)',
+  toggle: 'boolean',
+}
+
+/**
+ * Class definition
+ */
+
+class Collapse extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._isTransitioning = false
+    this._triggerArray = []
+
+    const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
+
+    for (const elem of toggleList) {
+      const selector = getSelectorFromElement(elem)
+      const filterElement = SelectorEngine.find(selector).filter((foundElement) => foundElement === this._element)
+
+      if (selector !== null && filterElement.length) {
+        this._triggerArray.push(elem)
+      }
+    }
+
+    this._initializeChildren()
+
+    if (!this._config.parent) {
+      this._addAriaAndCollapsedClass(this._triggerArray, this._isShown())
+    }
+
+    if (this._config.toggle) {
+      this.toggle()
+    }
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  toggle() {
+    if (this._isShown()) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  show() {
+    if (this._isTransitioning || this._isShown()) {
+      return
+    }
+
+    let activeChildren = []
+
+    // find active children
+    if (this._config.parent) {
+      activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES)
+        .filter((element) => element !== this._element)
+        .map((element) => Collapse.getOrCreateInstance(element, { toggle: false }))
+    }
+
+    if (activeChildren.length && activeChildren[0]._isTransitioning) {
+      return
+    }
+
+    const startEvent = EventHandler.trigger(this._element, EVENT_SHOW)
+    if (startEvent.defaultPrevented) {
+      return
+    }
+
+    for (const activeInstance of activeChildren) {
+      activeInstance.hide()
+    }
+
+    const dimension = this._getDimension()
+
+    this._element.classList.remove(CLASS_NAME_COLLAPSE)
+    this._element.classList.add(CLASS_NAME_COLLAPSING)
+
+    this._element.style[dimension] = 0
+
+    this._addAriaAndCollapsedClass(this._triggerArray, true)
+    this._isTransitioning = true
+
+    const complete = () => {
+      this._isTransitioning = false
+
+      this._element.classList.remove(CLASS_NAME_COLLAPSING)
+      this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
+
+      this._element.style[dimension] = ''
+
+      EventHandler.trigger(this._element, EVENT_SHOWN)
+    }
+
+    const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
+    const scrollSize = `scroll${capitalizedDimension}`
+
+    this._queueCallback(complete, this._element, true)
+    this._element.style[dimension] = `${this._element[scrollSize]}px`
+  }
+
+  hide() {
+    if (this._isTransitioning || !this._isShown()) {
+      return
+    }
+
+    const startEvent = EventHandler.trigger(this._element, EVENT_HIDE)
+    if (startEvent.defaultPrevented) {
+      return
+    }
+
+    const dimension = this._getDimension()
+
+    this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
+
+    reflow(this._element)
+
+    this._element.classList.add(CLASS_NAME_COLLAPSING)
+    this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
+
+    for (const trigger of this._triggerArray) {
+      const element = getElementFromSelector(trigger)
+
+      if (element && !this._isShown(element)) {
+        this._addAriaAndCollapsedClass([trigger], false)
+      }
+    }
+
+    this._isTransitioning = true
+
+    const complete = () => {
+      this._isTransitioning = false
+      this._element.classList.remove(CLASS_NAME_COLLAPSING)
+      this._element.classList.add(CLASS_NAME_COLLAPSE)
+      EventHandler.trigger(this._element, EVENT_HIDDEN)
+    }
+
+    this._element.style[dimension] = ''
+
+    this._queueCallback(complete, this._element, true)
+  }
+
+  _isShown(element = this._element) {
+    return element.classList.contains(CLASS_NAME_SHOW)
+  }
+
+  // Private
+  _configAfterMerge(config) {
+    config.toggle = Boolean(config.toggle) // Coerce string values
+    config.parent = getElement(config.parent)
+    return config
+  }
+
+  _getDimension() {
+    return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT
+  }
+
+  _initializeChildren() {
+    if (!this._config.parent) {
+      return
+    }
+
+    const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE)
+
+    for (const element of children) {
+      const selected = getElementFromSelector(element)
+
+      if (selected) {
+        this._addAriaAndCollapsedClass([element], this._isShown(selected))
+      }
+    }
+  }
+
+  _getFirstLevelChildren(selector) {
+    const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
+    // remove children if greater depth
+    return SelectorEngine.find(selector, this._config.parent).filter((element) => !children.includes(element))
+  }
+
+  _addAriaAndCollapsedClass(triggerArray, isOpen) {
+    if (!triggerArray.length) {
+      return
+    }
+
+    for (const element of triggerArray) {
+      element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen)
+      element.setAttribute('aria-expanded', isOpen)
+    }
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+    // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
+    if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
+      event.preventDefault()
+    }
+
+    const selector = getSelectorFromElement(this)
+    const selectorElements = SelectorEngine.find(selector)
+
+    for (const element of selectorElements) {
+      Collapse.getOrCreateInstance(element, { toggle: false }).toggle()
+    }
+  })
+}
 
 export default Collapse