--- /dev/null
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap toggler.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+import EventHandler from './dom/event-handler.js'
+import { eventActionOnPlugin } from './util/component-functions.js'
+
+/**
+ * Constants
+ */
+
+const NAME = 'toggler'
+const DATA_KEY = 'bs.toggler'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_TOGGLE = `toggle${EVENT_KEY}`
+const EVENT_TOGGLED = `toggled${EVENT_KEY}`
+const EVENT_CLICK = 'click'
+
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="toggler"]'
+
+const DefaultType = {
+ attribute: 'string',
+ value: '(string|number|boolean)'
+}
+
+const Default = {
+ attribute: 'class',
+ value: null
+}
+
+/**
+ * Class definition
+ */
+
+class Toggler extends BaseComponent {
+ // Getters
+ static get Default() {
+ return Default
+ }
+
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
+ // Public
+ toggle() {
+ const toggleEvent = EventHandler.trigger(this._element, EVENT_TOGGLE)
+
+ if (toggleEvent.defaultPrevented) {
+ return
+ }
+
+ this._execute()
+
+ EventHandler.trigger(this._element, EVENT_TOGGLED)
+ }
+
+ // Private
+ _execute() {
+ const { attribute, value } = this._config
+
+ if (attribute === 'id') {
+ return // You have to be kidding
+ }
+
+ if (attribute === 'class') {
+ this._element.classList.toggle(value)
+ return
+ }
+
+ // Compare as strings since getAttribute() always returns a string
+ if (this._element.getAttribute(attribute) === String(value)) {
+ this._element.removeAttribute(attribute)
+ return
+ }
+
+ this._element.setAttribute(attribute, value)
+ }
+}
+
+/**
+ * Data API implementation
+ */
+
+eventActionOnPlugin(Toggler, EVENT_CLICK, SELECTOR_DATA_TOGGLE, 'toggle')
+
+export default Toggler
--- /dev/null
+import Toggler from '../../src/toggler.js'
+import { clearFixture, getFixture } from '../helpers/fixture.js'
+
+describe('Toggler', () => {
+ let fixtureEl
+
+ beforeAll(() => {
+ fixtureEl = getFixture()
+ })
+
+ afterEach(() => {
+ clearFixture()
+ })
+
+ describe('VERSION', () => {
+ it('should return plugin version', () => {
+ expect(Toggler.VERSION).toEqual(jasmine.any(String))
+ })
+ })
+
+ describe('constructor', () => {
+ it('should take care of element either passed as a CSS selector or DOM element', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const togglerBySelector = new Toggler('[data-bs-toggle="toggler"]')
+ const togglerByElement = new Toggler(togglerEl)
+
+ expect(togglerBySelector._element).toEqual(togglerEl)
+ expect(togglerByElement._element).toEqual(togglerEl)
+ })
+ })
+
+ describe('toggle', () => {
+ it('should toggle class on the element', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ toggler.toggle()
+ expect(togglerEl.classList.contains('bg-warning')).toBeTrue()
+
+ toggler.toggle()
+ expect(togglerEl.classList.contains('bg-warning')).toBeFalse()
+ })
+
+ it('should toggle attribute on the element', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="true" data-bs-attribute="hidden"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ toggler.toggle()
+ expect(togglerEl.getAttribute('hidden')).toEqual('true')
+
+ toggler.toggle()
+ expect(togglerEl.hasAttribute('hidden')).toBeFalse()
+ })
+
+ it('should not toggle id attribute', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="new-id" data-bs-attribute="id"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ toggler.toggle()
+ expect(togglerEl.getAttribute('id')).toBeNull()
+ })
+
+ it('should trigger events', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ const toggleSpy = jasmine.createSpy()
+ const toggledSpy = jasmine.createSpy()
+
+ togglerEl.addEventListener('toggle.bs.toggler', toggleSpy)
+ togglerEl.addEventListener('toggled.bs.toggler', toggledSpy)
+
+ toggler.toggle()
+
+ expect(toggleSpy).toHaveBeenCalled()
+ expect(toggledSpy).toHaveBeenCalled()
+ })
+
+ it('should not trigger toggled event if toggle is prevented', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ const toggledSpy = jasmine.createSpy()
+
+ togglerEl.addEventListener('toggle.bs.toggler', event => {
+ event.preventDefault()
+ })
+ togglerEl.addEventListener('toggled.bs.toggler', toggledSpy)
+
+ toggler.toggle()
+
+ expect(toggledSpy).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('dispose', () => {
+ it('should dispose a toggler', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ expect(Toggler.getInstance(togglerEl)).not.toBeNull()
+
+ toggler.dispose()
+
+ expect(Toggler.getInstance(togglerEl)).toBeNull()
+ })
+ })
+
+ describe('getInstance', () => {
+ it('should return null if there is no instance', () => {
+ expect(Toggler.getInstance(fixtureEl)).toBeNull()
+ })
+
+ it('should return this instance', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ expect(Toggler.getInstance(togglerEl)).toEqual(toggler)
+ expect(Toggler.getInstance(togglerEl)).toBeInstanceOf(Toggler)
+ })
+ })
+
+ describe('getOrCreateInstance', () => {
+ it('should return toggler instance', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const toggler = new Toggler(togglerEl)
+
+ expect(Toggler.getOrCreateInstance(togglerEl)).toEqual(toggler)
+ expect(Toggler.getInstance(togglerEl)).toEqual(Toggler.getOrCreateInstance(togglerEl, {}))
+ expect(Toggler.getOrCreateInstance(togglerEl)).toBeInstanceOf(Toggler)
+ })
+
+ it('should return new instance when there is no toggler instance', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+ expect(Toggler.getInstance(togglerEl)).toBeNull()
+ expect(Toggler.getOrCreateInstance(togglerEl)).toBeInstanceOf(Toggler)
+ })
+ })
+
+ describe('data-api', () => {
+ it('should toggle class on click', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="bg-warning" data-bs-attribute="class"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+ togglerEl.click()
+ expect(togglerEl.classList.contains('bg-warning')).toBeTrue()
+
+ togglerEl.click()
+ expect(togglerEl.classList.contains('bg-warning')).toBeFalse()
+ })
+
+ it('should toggle attribute on click', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="true" data-bs-attribute="hidden"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+ togglerEl.click()
+ expect(togglerEl.getAttribute('hidden')).toEqual('true')
+
+ togglerEl.click()
+ expect(togglerEl.hasAttribute('hidden')).toBeFalse()
+ })
+
+ it('should not toggle id attribute on click', () => {
+ fixtureEl.innerHTML = '<div data-bs-toggle="toggler" data-bs-value="new-id" data-bs-attribute="id"></div>'
+
+ const togglerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+
+ togglerEl.click()
+ expect(togglerEl.getAttribute('id')).toBeNull()
+ })
+
+ it('should toggle class on target element via data-bs-target with ID selector', () => {
+ fixtureEl.innerHTML = [
+ '<button data-bs-toggle="toggler" data-bs-target="#target-element"></button>',
+ '<div id="target-element" data-bs-value="bg-info" data-bs-attribute="class"></div>'
+ ].join('')
+
+ const triggerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const targetEl = fixtureEl.querySelector('#target-element')
+
+ triggerEl.click()
+ expect(targetEl.classList.contains('bg-info')).toBeTrue()
+
+ triggerEl.click()
+ expect(targetEl.classList.contains('bg-info')).toBeFalse()
+ })
+
+ it('should toggle class on multiple target elements via data-bs-target with class selector', () => {
+ fixtureEl.innerHTML = [
+ '<button data-bs-toggle="toggler" data-bs-target=".target-class"></button>',
+ '<div class="target-class" data-bs-value="bg-warning" data-bs-attribute="class"></div>',
+ '<div class="target-class" data-bs-value="bg-info" data-bs-attribute="class"></div>',
+ '<div class="target-class" data-bs-value="bg-danger" data-bs-attribute="class"></div>'
+ ].join('')
+
+ const triggerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const targetEls = fixtureEl.querySelectorAll('.target-class')
+
+ triggerEl.click()
+ expect(targetEls[0].classList.contains('bg-warning')).toBeTrue()
+ expect(targetEls[1].classList.contains('bg-info')).toBeTrue()
+ expect(targetEls[2].classList.contains('bg-danger')).toBeTrue()
+
+ triggerEl.click()
+ expect(targetEls[0].classList.contains('bg-warning')).toBeFalse()
+ expect(targetEls[1].classList.contains('bg-info')).toBeFalse()
+ expect(targetEls[2].classList.contains('bg-danger')).toBeFalse()
+ })
+
+ it('should toggle attribute on target element via data-bs-target', () => {
+ fixtureEl.innerHTML = [
+ '<button data-bs-toggle="toggler" data-bs-target="#target-fieldset"></button>',
+ '<fieldset id="target-fieldset" data-bs-value="disabled" data-bs-attribute="disabled"></fieldset>'
+ ].join('')
+
+ const triggerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const targetEl = fixtureEl.querySelector('#target-fieldset')
+
+ triggerEl.click()
+ expect(targetEl.getAttribute('disabled')).toEqual('disabled')
+
+ triggerEl.click()
+ expect(targetEl.hasAttribute('disabled')).toBeFalse()
+ })
+
+ it('should toggle target element via href attribute as fallback', () => {
+ fixtureEl.innerHTML = [
+ '<a data-bs-toggle="toggler" href="#target-via-href"></a>',
+ '<div id="target-via-href" data-bs-value="active" data-bs-attribute="class"></div>'
+ ].join('')
+
+ const triggerEl = fixtureEl.querySelector('[data-bs-toggle="toggler"]')
+ const targetEl = fixtureEl.querySelector('#target-via-href')
+
+ triggerEl.click()
+ expect(targetEl.classList.contains('active')).toBeTrue()
+
+ triggerEl.click()
+ expect(targetEl.classList.contains('active')).toBeFalse()
+ })
+ })
+})
--- /dev/null
+---
+title: Toggler
+description: Toggle attributes or classes using nothing but data attributes.
+toc: true
+---
+
+Toggler is a pure JavaScript component that can be used to avoid writing small or one-off JavaScript snippets to create interactive elements. Instead of writing custom JavaScript, use data attributes to toggle attribute values, changes classes, and more on `click` events.
+
+<Callout type="warning">
+Toggler handles any attribute except `id`.
+</Callout>
+
+## Examples
+
+### Toggle class
+
+Toggle the class of an element by adding the `data-bs-toggle="toggler"` attribute to the element and the `data-bs-value` attribute to the value you want to toggle.
+
+<Example code={`<div class="w-100 p-3 rounded border"
+ data-bs-toggle="toggler"
+ data-bs-value="fg-danger"
+ data-bs-attribute="class">
+ Click to toggle \`fg-danger\`
+ </div>`} />
+
+### Remove existing
+
+If the element already has the class specified in `data-bs-value`, toggling will remove it. Clicking again adds it back.
+
+<Example code={`<div class="w-100 p-3 rounded border bg-subtle-info"
+ data-bs-toggle="toggler"
+ data-bs-value="bg-subtle-info"
+ data-bs-attribute="class">
+ Starts with \`bg-subtle-info\`. Click to remove it.
+ </div>`} />
+
+### Target element
+
+Use `data-bs-toggle` with `data-bs-target` to toggle the class of another element.
+
+<Example class="d-flex gap-2 flex-column align-items-start" code={`<button class="btn-solid theme-primary" data-bs-toggle="toggler" data-bs-target="#togglerExample1">Toggle</button>
+
+ <div id="togglerExample1" class="w-100 p-3 rounded border" data-bs-value="bg-2" data-bs-attribute="class">
+ Use button to change \`bg-2\`
+ </div>`} />
+
+### Multiple elements
+
+Use `data-bs-toggle` with a class name selector in `data-bs-target` to toggle the class of multiple elements.
+
+<Example class="vstack gap-2" code={`<button class="btn-solid theme-primary align-self-start"
+ data-bs-toggle="toggler" data-bs-target=".togglerExampleClass1">Toggle</button>
+
+ <div class="w-100 p-3 rounded border togglerExampleClass1"
+ data-bs-value="bg-subtle-info"
+ data-bs-attribute="class">
+ Use button to toggle \`bg-subtle-info\`
+ </div>
+
+ <div class="w-100 p-3 rounded border togglerExampleClass1"
+ data-bs-value="bg-subtle-warning"
+ data-bs-attribute="class">
+ Use button to toggle \`bg-subtle-warning\`
+ </div>`} />
+
+### Toggle attribute
+
+Toggle attributes by using the `data-bs-toggle` attribute with the `data-bs-attribute` and `data-bs-value` attributes. For example, toggling the `hidden` attribute:
+
+<Example code={`<div class="w-100 p-3 rounded border"
+ data-bs-toggle="toggler"
+ data-bs-value="true"
+ data-bs-attribute="hidden">
+ Click to toggle \`hidden\` attribute
+ </div>`} />
+
+You could also use this to toggle the `disabled` attribute on a `fieldset` element to disable all the controls within. Or any other ideas you can think of with attributes.
+
+## Usage
+
+### Via data attributes
+
+Add `data-bs-toggle="toggler"` to the element to automatically. The `data-bs-target` is optional, and attribute accepts a CSS selector to apply the toggler functionality to. Be sure to add the `data-bs-attribute` and `data-bs-value` attributes to the toggled element's markup.
+
+### Via JavaScript
+
+We don't recommend using this component programmatically, as the initial purpose of it is to avoid using JavaScript. However, you can enable manually with:
+
+```js
+var togglerElementList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="toggler"]'))
+var togglerList = togglerElementList.map(function (togglerEl) {
+ return new bootstrap.Toggler(togglerEl)
+})
+```
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-value="foo"`.
+
+<BsTable>
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `attribute` | string | `class` | The attribute which will be toggled on each click |
+| `value` | string | null | Allow body scrolling while toggler is open |
+</BsTable>
+
+### Methods
+
+You can create a toggler instance using the constructor, for example:
+
+```js
+var myToggler = document.getElementById('myToggler')
+var bsToggler = new bootstrap.Toggler(myToggler)
+```
+
+<BsTable>
+| Method | Description |
+| --- | --- |
+| `toggle` | Toggles a toggler element chosen attribute |
+| `getInstance` | *Static* method which allows you to get the toggler instance associated with a DOM element |
+| `getOrCreateInstance` | *Static* method which allows you to get the toggler instance associated with a DOM element, or create a new one in case it wasn't initialized |
+</BsTable>
+
+### Events
+
+Bootstrap's toggler class exposes a few events for hooking into toggler functionality.
+
+<BsTable>
+| Event type | Description |
+| --- | --- |
+| `toggle.bs.toggler` | This event fires immediately when the `toggle` instance method is called. |
+| `toggled.bs.toggler` | This event is fired when the instance's element attribute has been changed. |
+</BsTable>
+
+```js
+var myToggler = document.getElementById('myToggler')
+myToggler.addEventListener('toggle.bs.toggler', function () {
+ // do something...
+})
+```
projects / thirdparty / bootstrap.git / commitdiff
