[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 import { E as EventHandler, f as getSelectorFromElement, S as SelectorEngine, d as defineJQueryPlugin, B as BaseComponent, D as Data, r as reflow, c as getElementFromSelector, M as Manipulator, h as getElement, a as typeCheckConfig } from './dom.js?5.1.3'; 2 3 /** 4 * -------------------------------------------------------------------------- 5 * Bootstrap (v5.1.3): collapse.js 6 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 7 * -------------------------------------------------------------------------- 8 */ 9 /** 10 * ------------------------------------------------------------------------ 11 * Constants 12 * ------------------------------------------------------------------------ 13 */ 14 15 const NAME = 'collapse'; 16 const DATA_KEY = 'bs.collapse'; 17 const EVENT_KEY = `.$DATA_KEY}`; 18 const DATA_API_KEY = '.data-api'; 19 const Default = { 20 toggle: true, 21 parent: null 22 }; 23 const DefaultType = { 24 toggle: 'boolean', 25 parent: '(null|element)' 26 }; 27 const EVENT_SHOW = `show$EVENT_KEY}`; 28 const EVENT_SHOWN = `shown$EVENT_KEY}`; 29 const EVENT_HIDE = `hide$EVENT_KEY}`; 30 const EVENT_HIDDEN = `hidden$EVENT_KEY}`; 31 const EVENT_CLICK_DATA_API = `click$EVENT_KEY}$DATA_API_KEY}`; 32 const CLASS_NAME_SHOW = 'show'; 33 const CLASS_NAME_COLLAPSE = 'collapse'; 34 const CLASS_NAME_COLLAPSING = 'collapsing'; 35 const CLASS_NAME_COLLAPSED = 'collapsed'; 36 const CLASS_NAME_DEEPER_CHILDREN = `:scope .$CLASS_NAME_COLLAPSE} .$CLASS_NAME_COLLAPSE}`; 37 const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'; 38 const WIDTH = 'width'; 39 const HEIGHT = 'height'; 40 const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'; 41 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'; 42 /** 43 * ------------------------------------------------------------------------ 44 * Class Definition 45 * ------------------------------------------------------------------------ 46 */ 47 48 class Collapse extends BaseComponent { 49 constructor(element, config) { 50 super(element); 51 this._isTransitioning = false; 52 this._config = this._getConfig(config); 53 this._triggerArray = []; 54 const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE); 55 56 for (let i = 0, len = toggleList.length; i < len; i++) { 57 const elem = toggleList[i]; 58 const selector = getSelectorFromElement(elem); 59 const filterElement = SelectorEngine.find(selector).filter(foundElem => foundElem === this._element); 60 61 if (selector !== null && filterElement.length) { 62 this._selector = selector; 63 64 this._triggerArray.push(elem); 65 } 66 } 67 68 this._initializeChildren(); 69 70 if (!this._config.parent) { 71 this._addAriaAndCollapsedClass(this._triggerArray, this._isShown()); 72 } 73 74 if (this._config.toggle) { 75 this.toggle(); 76 } 77 } // Getters 78 79 80 static get Default() { 81 return Default; 82 } 83 84 static get NAME() { 85 return NAME; 86 } // Public 87 88 89 toggle() { 90 if (this._isShown()) { 91 this.hide(); 92 } else { 93 this.show(); 94 } 95 } 96 97 show() { 98 if (this._isTransitioning || this._isShown()) { 99 return; 100 } 101 102 let actives = []; 103 let activesData; 104 105 if (this._config.parent) { 106 const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); 107 actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)); // remove children if greater depth 108 } 109 110 const container = SelectorEngine.findOne(this._selector); 111 112 if (actives.length) { 113 const tempActiveData = actives.find(elem => container !== elem); 114 activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null; 115 116 if (activesData && activesData._isTransitioning) { 117 return; 118 } 119 } 120 121 const startEvent = EventHandler.trigger(this._element, EVENT_SHOW); 122 123 if (startEvent.defaultPrevented) { 124 return; 125 } 126 127 actives.forEach(elemActive => { 128 if (container !== elemActive) { 129 Collapse.getOrCreateInstance(elemActive, { 130 toggle: false 131 }).hide(); 132 } 133 134 if (!activesData) { 135 Data.set(elemActive, DATA_KEY, null); 136 } 137 }); 138 139 const dimension = this._getDimension(); 140 141 this._element.classList.remove(CLASS_NAME_COLLAPSE); 142 143 this._element.classList.add(CLASS_NAME_COLLAPSING); 144 145 this._element.style[dimension] = 0; 146 147 this._addAriaAndCollapsedClass(this._triggerArray, true); 148 149 this._isTransitioning = true; 150 151 const complete = () => { 152 this._isTransitioning = false; 153 154 this._element.classList.remove(CLASS_NAME_COLLAPSING); 155 156 this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW); 157 158 this._element.style[dimension] = ''; 159 EventHandler.trigger(this._element, EVENT_SHOWN); 160 }; 161 162 const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1); 163 const scrollSize = `scroll$capitalizedDimension}`; 164 165 this._queueCallback(complete, this._element, true); 166 167 this._element.style[dimension] = `$this._element[scrollSize]}px`; 168 } 169 170 hide() { 171 if (this._isTransitioning || !this._isShown()) { 172 return; 173 } 174 175 const startEvent = EventHandler.trigger(this._element, EVENT_HIDE); 176 177 if (startEvent.defaultPrevented) { 178 return; 179 } 180 181 const dimension = this._getDimension(); 182 183 this._element.style[dimension] = `$this._element.getBoundingClientRect()[dimension]}px`; 184 reflow(this._element); 185 186 this._element.classList.add(CLASS_NAME_COLLAPSING); 187 188 this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW); 189 190 const triggerArrayLength = this._triggerArray.length; 191 192 for (let i = 0; i < triggerArrayLength; i++) { 193 const trigger = this._triggerArray[i]; 194 const elem = getElementFromSelector(trigger); 195 196 if (elem && !this._isShown(elem)) { 197 this._addAriaAndCollapsedClass([trigger], false); 198 } 199 } 200 201 this._isTransitioning = true; 202 203 const complete = () => { 204 this._isTransitioning = false; 205 206 this._element.classList.remove(CLASS_NAME_COLLAPSING); 207 208 this._element.classList.add(CLASS_NAME_COLLAPSE); 209 210 EventHandler.trigger(this._element, EVENT_HIDDEN); 211 }; 212 213 this._element.style[dimension] = ''; 214 215 this._queueCallback(complete, this._element, true); 216 } 217 218 _isShown() { 219 let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._element; 220 return element.classList.contains(CLASS_NAME_SHOW); 221 } // Private 222 223 224 _getConfig(config) { 225 config = { ...Default, 226 ...Manipulator.getDataAttributes(this._element), 227 ...config 228 }; 229 config.toggle = Boolean(config.toggle); // Coerce string values 230 231 config.parent = getElement(config.parent); 232 typeCheckConfig(NAME, config, DefaultType); 233 return config; 234 } 235 236 _getDimension() { 237 return this._element.classList.contains(CLASS_NAME_HORIZONTAL) ? WIDTH : HEIGHT; 238 } 239 240 _initializeChildren() { 241 if (!this._config.parent) { 242 return; 243 } 244 245 const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent); 246 SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem)).forEach(element => { 247 const selected = getElementFromSelector(element); 248 249 if (selected) { 250 this._addAriaAndCollapsedClass([element], this._isShown(selected)); 251 } 252 }); 253 } 254 255 _addAriaAndCollapsedClass(triggerArray, isOpen) { 256 if (!triggerArray.length) { 257 return; 258 } 259 260 triggerArray.forEach(elem => { 261 if (isOpen) { 262 elem.classList.remove(CLASS_NAME_COLLAPSED); 263 } else { 264 elem.classList.add(CLASS_NAME_COLLAPSED); 265 } 266 267 elem.setAttribute('aria-expanded', isOpen); 268 }); 269 } // Static 270 271 272 static jQueryInterface(config) { 273 return this.each(function () { 274 const _config = {}; 275 276 if (typeof config === 'string' && /show|hide/.test(config)) { 277 _config.toggle = false; 278 } 279 280 const data = Collapse.getOrCreateInstance(this, _config); 281 282 if (typeof config === 'string') { 283 if (typeof data[config] === 'undefined') { 284 throw new TypeError(`No method named "$config}"`); 285 } 286 287 data[config](); 288 } 289 }); 290 } 291 292 } 293 /** 294 * ------------------------------------------------------------------------ 295 * Data Api implementation 296 * ------------------------------------------------------------------------ 297 */ 298 299 300 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { 301 // preventDefault only for <a> elements (which change the URL) not inside the collapsible element 302 if (event.target.tagName === 'A' || event.delegateTarget && event.delegateTarget.tagName === 'A') { 303 event.preventDefault(); 304 } 305 306 const selector = getSelectorFromElement(this); 307 const selectorElements = SelectorEngine.find(selector); 308 selectorElements.forEach(element => { 309 Collapse.getOrCreateInstance(element, { 310 toggle: false 311 }).toggle(); 312 }); 313 }); 314 /** 315 * ------------------------------------------------------------------------ 316 * jQuery 317 * ------------------------------------------------------------------------ 318 * add .Collapse to jQuery only if jQuery is present 319 */ 320 321 defineJQueryPlugin(Collapse); 322 323 window.bootstrap = window.bootstrap || {}; 324 window.bootstrap.Collapse = Collapse; 325 326 if (Joomla && Joomla.getOptions) { 327 // Get the elements/configurations from the PHP 328 const collapses = { ...Joomla.getOptions('bootstrap.collapse'), 329 ...Joomla.getOptions('bootstrap.accordion') 330 }; // Initialise the elements 331 332 Object.keys(collapses).forEach(collapse => { 333 const opt = collapses[collapse]; 334 const options = { 335 toggle: opt.toggle ? opt.toggle : true 336 }; 337 338 if (opt.parent) { 339 options.parent = opt.parent; 340 } 341 342 const elements = Array.from(document.querySelectorAll(collapse)); 343 344 if (elements.length) { 345 elements.map(el => new window.bootstrap.Collapse(el, options)); 346 } 347 }); 348 } 349 350 export { Collapse as C };
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |