bootstrap-italia 2.12.0 → 2.13.0

package/src/js/plugins/navbar-collapsible.js

@@ -1,15 +1,16 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
-
-import {
-  //defineJQueryPlugin,
-  getElementFromSelector,
-  isVisible,
-  reflow,
-  //typeCheckConfig,
-  //getSelectorFromElement,
-} from 'bootstrap/js/src/util'
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+/**
+ * --------------------------------------------------------------------------
+ * 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)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+
+import { getElementFromSelector, isVisible, reflow } from './util/index'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
 
 import { isScreenMobile } from './util/device'
 import { getElementIndex } from './util/dom'
@@ -139,33 +140,36 @@ class NavBarCollapsible extends BaseComponent {
   }
 
   dispose() {
-    EventHandler.off(window, EVENT_RESIZE)
-
-    super.dispose()
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      EventHandler.off(window, EVENT_RESIZE)
+      super.dispose()
+    }
   }
 
   // Private
 
   _bindEvents() {
-    EventHandler.on(window, EVENT_RESIZE, () => this._onResize())
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      EventHandler.on(window, EVENT_RESIZE, () => this._onResize())
 
-    if (this._overlay) {
-      EventHandler.on(this._overlay, EVENT_CLICK, () => this.hide())
+      if (this._overlay) {
+        EventHandler.on(this._overlay, EVENT_CLICK, () => this.hide())
+      }
+      EventHandler.on(this._btnClose, EVENT_CLICK, (evt) => {
+        evt.preventDefault()
+        this.hide()
+      })
+      EventHandler.on(this._btnBack, EVENT_CLICK, (evt) => {
+        evt.preventDefault()
+        this.hide()
+      })
+
+      this._menuItems.forEach((item) => {
+        EventHandler.on(item, EVENT_KEYDOWN, (evt) => this._isMobile && this._onMenuItemKeyDown(evt))
+        EventHandler.on(item, EVENT_KEYUP, (evt) => this._isMobile && this._onMenuItemKeyUp(evt))
+        EventHandler.on(item, EVENT_CLICK, (evt) => this._isMobile && this._onMenuItemClick(evt))
+      })
     }
-    EventHandler.on(this._btnClose, EVENT_CLICK, (evt) => {
-      evt.preventDefault()
-      this.hide()
-    })
-    EventHandler.on(this._btnBack, EVENT_CLICK, (evt) => {
-      evt.preventDefault()
-      this.hide()
-    })
-
-    this._menuItems.forEach((item) => {
-      EventHandler.on(item, EVENT_KEYDOWN, (evt) => this._isMobile && this._onMenuItemKeyDown(evt))
-      EventHandler.on(item, EVENT_KEYUP, (evt) => this._isMobile && this._onMenuItemKeyUp(evt))
-      EventHandler.on(item, EVENT_CLICK, (evt) => this._isMobile && this._onMenuItemClick(evt))
-    })
   }
 
   _onResize() {
@@ -313,34 +317,32 @@ class NavBarCollapsible extends BaseComponent {
  * Data Api implementation
  * ------------------------------------------------------------------------
  */
-/*const navs = SelectorEngine.find(SELECTOR_NAVBAR)
-navs.forEach((nav) => {
-  NavBarCollapsible.getOrCreateInstance(nav)
-})*/
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+    const target = getElementFromSelector(this)
 
-  if (['A', 'AREA'].includes(this.tagName)) {
-    event.preventDefault()
-  }
-
-  EventHandler.one(target, EVENT_SHOW, (showEvent) => {
-    if (showEvent.defaultPrevented) {
-      // only register focus restorer if modal will actually get shown
-      return
+    if (['A', 'AREA'].includes(this.tagName)) {
+      event.preventDefault()
     }
 
-    EventHandler.one(target, EVENT_HIDDEN, () => {
-      if (isVisible(this)) {
-        this.focus()
+    EventHandler.one(target, EVENT_SHOW, (showEvent) => {
+      if (showEvent.defaultPrevented) {
+        // only register focus restorer if modal will actually get shown
+        return
       }
+
+      EventHandler.one(target, EVENT_HIDDEN, () => {
+        if (isVisible(this)) {
+          this.focus()
+        }
+      })
     })
-  })
 
-  const data = NavBarCollapsible.getOrCreateInstance(target)
+    const data = NavBarCollapsible.getOrCreateInstance(target)
 
-  data.toggle(this)
-})
+    data.toggle(this)
+  })
+}
 
 export default NavBarCollapsible

package/src/js/plugins/navscroll.js

@@ -1,8 +1,8 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
+import BaseComponent from './base-component.js'
 
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
-import Manipulator from 'bootstrap/js/src/dom/manipulator'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
+import Manipulator from './dom/manipulator'
 
 import onDocumentScroll from './util/on-document-scroll'
 import NavBarCollapsible from './navbar-collapsible'
@@ -10,17 +10,11 @@ import NavBarCollapsible from './navbar-collapsible'
 import { documentScrollTo } from './util/tween'
 
 const NAME = 'navscroll'
-//const DATA_KEY = 'bs.navscroll'
-//const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
-
-//const EVENT_SCROLL = `scroll${EVENT_KEY}`
 
 const CLASS_NAME_ACTIVE = 'active'
 
 const SELECTOR_NAVSCROLL = '[data-bs-navscroll]' //'.it-navscroll-wrapper'
 const SELECTOR_LIST = 'ul.link-list'
-//const SELECTOR_ITEM = '.nav-item'
 const SELECTOR_LINK_CONTAINER = 'li.nav-link, li.nav-item'
 const SELECTOR_LINK = 'a.nav-link'
 const SELECTOR_LINK_ACTIVE = `${SELECTOR_LINK}.${CLASS_NAME_ACTIVE}`
@@ -64,11 +58,9 @@ class NavScroll extends BaseComponent {
   }
 
   dispose() {
-    //EventHandler.off(window, EVENT_SCROLL, this._onScroll)
     if (this._scrollCb) {
       this._scrollCb.dispose()
     }
-
     super.dispose()
   }
 
@@ -83,8 +75,6 @@ class NavScroll extends BaseComponent {
   }
 
   _bindEvents() {
-    //EventHandler.on(window, EVENT_SCROLL, this._onScroll)
-
     this._scrollCb = onDocumentScroll(() => this._onScroll())
 
     if (this._collapsible) {
@@ -103,11 +93,12 @@ class NavScroll extends BaseComponent {
         }
       })
     })
-
-    EventHandler.on(window, 'load', () => {
-      //if page is already scrolled
-      setTimeout(() => this._onScroll(), 150)
-    })
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      EventHandler.on(window, 'load', () => {
+        //if page is already scrolled
+        setTimeout(() => this._onScroll(), 150)
+      })
+    }
   }
 
   _onCollapseOpened() {
@@ -247,9 +238,11 @@ class NavScroll extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const navs = SelectorEngine.find(SELECTOR_NAVSCROLL)
-navs.map((nav) => {
-  NavScroll.getOrCreateInstance(nav)
-})
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  const navs = SelectorEngine.find(SELECTOR_NAVSCROLL)
+  navs.map((nav) => {
+    NavScroll.getOrCreateInstance(nav)
+  })
+}
 
 export default NavScroll

package/src/js/plugins/notification.js

@@ -1,8 +1,16 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
-import { getElementFromSelector, isVisible, reflow } from 'bootstrap/js/src/util'
-import Manipulator from 'bootstrap/js/src/dom/manipulator'
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import { enableDismissTrigger } from 'bootstrap/js/src/util/component-functions'
+/**
+ * --------------------------------------------------------------------------
+ * 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)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+import { getElementFromSelector, isVisible, reflow } from './util/index'
+import Manipulator from './dom/manipulator'
+import EventHandler from './dom/event-handler'
+import { enableDismissTrigger } from './util/component-functions'
 
 const NAME = 'notification'
 const DATA_KEY = 'bs.notification'
@@ -155,31 +163,33 @@ class Notification extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
-
-  if (['A', 'AREA'].includes(this.tagName)) {
-    event.preventDefault()
-  }
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+    const target = getElementFromSelector(this)
 
-  EventHandler.one(target, EVENT_SHOW, (showEvent) => {
-    if (showEvent.defaultPrevented) {
-      // only register focus restorer if modal will actually get shown
-      return
+    if (['A', 'AREA'].includes(this.tagName)) {
+      event.preventDefault()
     }
 
-    EventHandler.one(target, EVENT_HIDDEN, () => {
-      if (isVisible(this)) {
-        this.focus()
+    EventHandler.one(target, EVENT_SHOW, (showEvent) => {
+      if (showEvent.defaultPrevented) {
+        // only register focus restorer if modal will actually get shown
+        return
       }
+
+      EventHandler.one(target, EVENT_HIDDEN, () => {
+        if (isVisible(this)) {
+          this.focus()
+        }
+      })
     })
-  })
 
-  const data = Notification.getOrCreateInstance(target)
+    const data = Notification.getOrCreateInstance(target)
 
-  data.toggle(this)
-})
+    data.toggle(this)
+  })
 
-enableDismissTrigger(Notification)
+  enableDismissTrigger(Notification)
+}
 
 export default Notification

package/src/js/plugins/offcanvas.js

@@ -1,5 +1,261 @@
-import { default as BSOffcanvas } from 'bootstrap/js/src/offcanvas'
+/**
+ * --------------------------------------------------------------------------
+ * 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): offcanvas.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
-class Offcanvas extends BSOffcanvas {}
+import { getElementFromSelector, isDisabled, isVisible } from './util/index'
+import ScrollBarHelper from './util/scrollbar'
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import SelectorEngine from './dom/selector-engine'
+import Backdrop from './util/backdrop'
+import FocusTrap from './util/focustrap'
+import { enableDismissTrigger } from './util/component-functions'
+
+/**
+ * Constants
+ */
+
+const NAME = 'offcanvas'
+const DATA_KEY = 'bs.offcanvas'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+const ESCAPE_KEY = 'Escape'
+
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_SHOWING = 'showing'
+const CLASS_NAME_HIDING = 'hiding'
+const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'
+const OPEN_SELECTOR = '.offcanvas.show'
+
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_RESIZE = `resize${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
+
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
+
+const Default = {
+  backdrop: true,
+  keyboard: true,
+  scroll: false,
+}
+
+const DefaultType = {
+  backdrop: '(boolean|string)',
+  keyboard: 'boolean',
+  scroll: 'boolean',
+}
+
+/**
+ * Class definition
+ */
+
+class Offcanvas extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._isShown = false
+    this._backdrop = this._initializeBackDrop()
+    this._focustrap = this._initializeFocusTrap()
+    this._addEventListeners()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  toggle(relatedTarget) {
+    return this._isShown ? this.hide() : this.show(relatedTarget)
+  }
+
+  show(relatedTarget) {
+    if (this._isShown) {
+      return
+    }
+
+    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget })
+
+    if (showEvent.defaultPrevented) {
+      return
+    }
+
+    this._isShown = true
+    this._backdrop.show()
+
+    if (!this._config.scroll) {
+      new ScrollBarHelper().hide()
+    }
+
+    this._element.setAttribute('aria-modal', true)
+    this._element.setAttribute('role', 'dialog')
+    this._element.classList.add(CLASS_NAME_SHOWING)
+
+    const completeCallBack = () => {
+      if (!this._config.scroll || this._config.backdrop) {
+        this._focustrap.activate()
+      }
+
+      this._element.classList.add(CLASS_NAME_SHOW)
+      this._element.classList.remove(CLASS_NAME_SHOWING)
+      EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
+    }
+
+    this._queueCallback(completeCallBack, this._element, true)
+  }
+
+  hide() {
+    if (!this._isShown) {
+      return
+    }
+
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
+
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    this._focustrap.deactivate()
+    this._element.blur()
+    this._isShown = false
+    this._element.classList.add(CLASS_NAME_HIDING)
+    this._backdrop.hide()
+
+    const completeCallback = () => {
+      this._element.classList.remove(CLASS_NAME_SHOW, CLASS_NAME_HIDING)
+      this._element.removeAttribute('aria-modal')
+      this._element.removeAttribute('role')
+
+      if (!this._config.scroll) {
+        new ScrollBarHelper().reset()
+      }
+
+      EventHandler.trigger(this._element, EVENT_HIDDEN)
+    }
+
+    this._queueCallback(completeCallback, this._element, true)
+  }
+
+  dispose() {
+    this._backdrop.dispose()
+    this._focustrap.deactivate()
+    super.dispose()
+  }
+
+  // Private
+  _initializeBackDrop() {
+    const clickCallback = () => {
+      if (this._config.backdrop === 'static') {
+        EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
+        return
+      }
+
+      this.hide()
+    }
+
+    // 'static' option will be translated to true, and booleans will keep their value
+    const isVisible = Boolean(this._config.backdrop)
+
+    return new Backdrop({
+      className: CLASS_NAME_BACKDROP,
+      isVisible,
+      isAnimated: true,
+      rootElement: this._element.parentNode,
+      clickCallback: isVisible ? clickCallback : null,
+    })
+  }
+
+  _initializeFocusTrap() {
+    return new FocusTrap({
+      trapElement: this._element,
+    })
+  }
+
+  _addEventListeners() {
+    EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, (event) => {
+      if (event.key !== ESCAPE_KEY) {
+        return
+      }
+
+      if (!this._config.keyboard) {
+        EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
+        return
+      }
+
+      this.hide()
+    })
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+    const target = getElementFromSelector(this)
+
+    if (['A', 'AREA'].includes(this.tagName)) {
+      event.preventDefault()
+    }
+
+    if (isDisabled(this)) {
+      return
+    }
+
+    EventHandler.one(target, EVENT_HIDDEN, () => {
+      // focus on trigger when it is closed
+      if (isVisible(this)) {
+        this.focus()
+      }
+    })
+
+    // avoid conflict when clicking a toggler of an offcanvas, while another is open
+    const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
+    if (alreadyOpen && alreadyOpen !== target) {
+      Offcanvas.getInstance(alreadyOpen).hide()
+    }
+
+    const data = Offcanvas.getOrCreateInstance(target)
+    data.toggle(this)
+  })
+
+  EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+    for (const selector of SelectorEngine.find(OPEN_SELECTOR)) {
+      Offcanvas.getOrCreateInstance(selector).show()
+    }
+  })
+
+  EventHandler.on(window, EVENT_RESIZE, () => {
+    for (const element of SelectorEngine.find('[aria-modal][class*=show][class*=offcanvas-]')) {
+      if (getComputedStyle(element).position !== 'fixed') {
+        Offcanvas.getOrCreateInstance(element).hide()
+      }
+    }
+  })
+
+  enableDismissTrigger(Offcanvas)
+}
 
 export default Offcanvas

package/src/js/plugins/popover.js

@@ -1,5 +1,78 @@
-import { default as BSPopover } from 'bootstrap/js/src/popover'
+/**
+ * --------------------------------------------------------------------------
+ * 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): popover.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
-class Popover extends BSPopover {}
+import Tooltip from './tooltip'
+
+/**
+ * Constants
+ */
+
+const NAME = 'popover'
+
+const SELECTOR_TITLE = '.popover-header'
+const SELECTOR_CONTENT = '.popover-body'
+
+const Default = {
+  ...Tooltip.Default,
+  content: '',
+  offset: [0, 8],
+  placement: 'right',
+  template:
+    '<div class="popover" role="tooltip">' +
+    '<div class="popover-arrow"></div>' +
+    '<h3 class="popover-header"></h3>' +
+    '<div class="popover-body"></div>' +
+    '</div>',
+  trigger: 'click',
+}
+
+const DefaultType = {
+  ...Tooltip.DefaultType,
+  content: '(null|string|element|function)',
+}
+
+/**
+ * Class definition
+ */
+
+class Popover extends Tooltip {
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Overrides
+  _isWithContent() {
+    return this._getTitle() || this._getContent()
+  }
+
+  // Private
+  _getContentForTemplate() {
+    return {
+      [SELECTOR_TITLE]: this._getTitle(),
+      [SELECTOR_CONTENT]: this._getContent(),
+    }
+  }
+
+  _getContent() {
+    return this._resolvePossibleFunction(this._config.content)
+  }
+}
 
 export default Popover

package/src/js/plugins/progress-donut.js

@@ -1,15 +1,17 @@
-import ProgressBar from 'progressbar.js'
-import BaseComponent from 'bootstrap/js/src/base-component.js'
+/**
+ * --------------------------------------------------------------------------
+ * 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)
+ * --------------------------------------------------------------------------
+ */
 
-//import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
-import Manipulator from 'bootstrap/js/src/dom/manipulator'
+import Circle from 'progressbar.js/src/circle.js'
+import BaseComponent from './base-component.js'
+import SelectorEngine from './dom/selector-engine'
+import Manipulator from './dom/manipulator'
 
 const NAME = 'progressdonut'
-//const DATA_KEY = 'bs.progressdonut'
-//const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
-
 const SELECTOR_DONUT = '[data-bs-progress-donut]'
 
 const Default = {
@@ -89,7 +91,7 @@ class ProgressDonut extends BaseComponent {
   }
 
   _init() {
-    this._bar = new ProgressBar.Circle(this._element, this._config)
+    this._bar = new Circle(this._element, this._config)
 
     if (this._config.value > 0) {
       this.set(this._config.value)
@@ -103,8 +105,10 @@ class ProgressDonut extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_DONUT).forEach((donut) => {
-  ProgressDonut.getOrCreateInstance(donut)
-})
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  SelectorEngine.find(SELECTOR_DONUT).forEach((donut) => {
+    ProgressDonut.getOrCreateInstance(donut)
+  })
+}
 
 export default ProgressDonut