You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

249 lines
8.6 KiB

5 months ago
  1. /*!
  2. * Bootstrap collapse.js v5.3.3 (https://getbootstrap.com/)
  3. * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  4. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
  8. typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './dom/selector-engine', './util/index'], factory) :
  9. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Collapse = factory(global.BaseComponent, global.EventHandler, global.SelectorEngine, global.Index));
  10. })(this, (function (BaseComponent, EventHandler, SelectorEngine, index_js) { 'use strict';
  11. /**
  12. * --------------------------------------------------------------------------
  13. * Bootstrap collapse.js
  14. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  15. * --------------------------------------------------------------------------
  16. */
  17. /**
  18. * Constants
  19. */
  20. const NAME = 'collapse';
  21. const DATA_KEY = 'bs.collapse';
  22. const EVENT_KEY = `.${DATA_KEY}`;
  23. const DATA_API_KEY = '.data-api';
  24. const EVENT_SHOW = `show${EVENT_KEY}`;
  25. const EVENT_SHOWN = `shown${EVENT_KEY}`;
  26. const EVENT_HIDE = `hide${EVENT_KEY}`;
  27. const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
  28. const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
  29. const CLASS_NAME_SHOW = 'show';
  30. const CLASS_NAME_COLLAPSE = 'collapse';
  31. const CLASS_NAME_COLLAPSING = 'collapsing';
  32. const CLASS_NAME_COLLAPSED = 'collapsed';
  33. const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`;
  34. const CLASS_NAME_HORIZONTAL = 'collapse-horizontal';
  35. const WIDTH = 'width';
  36. const HEIGHT = 'height';
  37. const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing';
  38. const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]';
  39. const Default = {
  40. parent: null,
  41. toggle: true
  42. };
  43. const DefaultType = {
  44. parent: '(null|element)',
  45. toggle: 'boolean'
  46. };
  47. /**
  48. * Class definition
  49. */
  50. class Collapse extends BaseComponent {
  51. constructor(element, config) {
  52. super(element, config);
  53. this._isTransitioning = false;
  54. this._triggerArray = [];
  55. const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE);
  56. for (const elem of toggleList) {
  57. const selector = SelectorEngine.getSelectorFromElement(elem);
  58. const filterElement = SelectorEngine.find(selector).filter(foundElement => foundElement === this._element);
  59. if (selector !== null && filterElement.length) {
  60. this._triggerArray.push(elem);
  61. }
  62. }
  63. this._initializeChildren();
  64. if (!this._config.parent) {
  65. this._addAriaAndCollapsedClass(this._triggerArray, this._isShown());
  66. }
  67. if (this._config.toggle) {
  68. this.toggle();
  69. }
  70. }
  71. // Getters
  72. static get Default() {
  73. return Default;
  74. }
  75. static get DefaultType() {
  76. return DefaultType;
  77. }
  78. static get NAME() {
  79. return NAME;
  80. }
  81. // Public
  82. toggle() {
  83. if (this._isShown()) {
  84. this.hide();
  85. } else {
  86. this.show();
  87. }
  88. }
  89. show() {
  90. if (this._isTransitioning || this._isShown()) {
  91. return;
  92. }
  93. let activeChildren = [];
  94. // find active children
  95. if (this._config.parent) {
  96. activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES).filter(element => element !== this._element).map(element => Collapse.getOrCreateInstance(element, {
  97. toggle: false
  98. }));
  99. }
  100. if (activeChildren.length && activeChildren[0]._isTransitioning) {
  101. return;
  102. }
  103. const startEvent = EventHandler.trigger(this._element, EVENT_SHOW);
  104. if (startEvent.defaultPrevented) {
  105. return;
  106. }
  107. for (const activeInstance of activeChildren) {
  108. activeInstance.hide();
  109. }
  110. const dimension = this._getDimension();
  111. this._element.classList.remove(CLASS_NAME_COLLAPSE);
  112. this._element.classList.add(CLASS_NAME_COLLAPSING);
  113. this._element.style[dimension] = 0;
  114. this._addAriaAndCollapsedClass(this._triggerArray, true);
  115. this._isTransitioning = true;
  116. const complete = () => {
  117. this._isTransitioning = false;
  118. this._element.classList.remove(CLASS_NAME_COLLAPSING);
  119. this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);
  120. this._element.style[dimension] = '';
  121. EventHandler.trigger(this._element, EVENT_SHOWN);
  122. };
  123. const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
  124. const scrollSize = `scroll${capitalizedDimension}`;
  125. this._queueCallback(complete, this._element, true);
  126. this._element.style[dimension] = `${this._element[scrollSize]}px`;
  127. }
  128. hide() {
  129. if (this._isTransitioning || !this._isShown()) {
  130. return;
  131. }
  132. const startEvent = EventHandler.trigger(this._element, EVENT_HIDE);
  133. if (startEvent.defaultPrevented) {
  134. return;
  135. }
  136. const dimension = this._getDimension();
  137. this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`;
  138. index_js.reflow(this._element);
  139. this._element.classList.add(CLASS_NAME_COLLAPSING);
  140. this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);
  141. for (const trigger of this._triggerArray) {
  142. const element = SelectorEngine.getElementFromSelector(trigger);
  143. if (element && !this._isShown(element)) {
  144. this._addAriaAndCollapsedClass([trigger], false);
  145. }
  146. }
  147. this._isTransitioning = true;
  148. const complete = () => {
  149. this._isTransitioning = false;
  150. this._element.classList.remove(CLASS_NAME_COLLAPSING);
  151. this._element.classList.add(CLASS_NAME_COLLAPSE);
  152. EventHandler.trigger(this._element, EVENT_HIDDEN);
  153. };
  154. this._element.style[dimension] = '';
  155. this._queueCallback(complete, this._element, true);
  156. }
  157. _isShown(element = this._element) {
  158. return element.classList.contains(CLASS_NAME_SHOW);
  159. }
  160. // Private
  161. _configAfterMerge(config) {
  162. config.toggle = Boolean(config.toggle); // Coerce string values
  163. config.parent = index_js.getElement(config.parent);
  164. return config;
  165. }
  166. _getDimension() {
  167. return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT;
  168. }
  169. _initializeChildren() {
  170. if (!this._config.parent) {
  171. return;
  172. }
  173. const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE);
  174. for (const element of children) {
  175. const selected = SelectorEngine.getElementFromSelector(element);
  176. if (selected) {
  177. this._addAriaAndCollapsedClass([element], this._isShown(selected));
  178. }
  179. }
  180. }
  181. _getFirstLevelChildren(selector) {
  182. const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent);
  183. // remove children if greater depth
  184. return SelectorEngine.find(selector, this._config.parent).filter(element => !children.includes(element));
  185. }
  186. _addAriaAndCollapsedClass(triggerArray, isOpen) {
  187. if (!triggerArray.length) {
  188. return;
  189. }
  190. for (const element of triggerArray) {
  191. element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen);
  192. element.setAttribute('aria-expanded', isOpen);
  193. }
  194. }
  195. // Static
  196. static jQueryInterface(config) {
  197. const _config = {};
  198. if (typeof config === 'string' && /show|hide/.test(config)) {
  199. _config.toggle = false;
  200. }
  201. return this.each(function () {
  202. const data = Collapse.getOrCreateInstance(this, _config);
  203. if (typeof config === 'string') {
  204. if (typeof data[config] === 'undefined') {
  205. throw new TypeError(`No method named "${config}"`);
  206. }
  207. data[config]();
  208. }
  209. });
  210. }
  211. }
  212. /**
  213. * Data API implementation
  214. */
  215. EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  216. // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
  217. if (event.target.tagName === 'A' || event.delegateTarget && event.delegateTarget.tagName === 'A') {
  218. event.preventDefault();
  219. }
  220. for (const element of SelectorEngine.getMultipleElementsFromSelector(this)) {
  221. Collapse.getOrCreateInstance(element, {
  222. toggle: false
  223. }).toggle();
  224. }
  225. });
  226. /**
  227. * jQuery
  228. */
  229. index_js.defineJQueryPlugin(Collapse);
  230. return Collapse;
  231. }));
  232. //# sourceMappingURL=collapse.js.map