Skip to content

Commit

Permalink
fix(accordion): use name attribute for auto-collapse #127
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianmcburnie
ianmcburnie committed Dec 4, 2024
1 parent ec306d3 commit 832300f
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 55 deletions.
64 changes: 32 additions & 32 deletions _disclosure/accordion/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,62 +48,62 @@ <h2>Example 1: No Auto Collapse</h2>
<ul class="accordion" role="list" aria-roledescription="accordion">
<li>
<details class="accordion__details">
<summary><h4>Buying</h4></summary>
<ul>
<li><a href="http://www.ebay.com">Purchases</a></li>
<li><a href="http://www.ebay.com">Bids/Offers</a></li>
<li><a href="http://www.ebay.com">Didn't Win</a></li>
</ul>
</details>
</li>
<li>
<details class="accordion__details">
<summary><h4>Selling</h4></summary>
<ul>
<li><a href="http://www.ebay.com">Sold</a></li>
<li><a href="http://www.ebay.com">Bids/Offers</a></li>
<li><a href="http://www.ebay.com">Didn't Swell</a></li>
</ul>
</details>
</li>
</ul>

<hr />

<h2>Example 2: With Auto Collapse</h2>
<p>Opening a panel will close any other open panels.</p>

<ul class="accordion" role="list" aria-roledescription="accordion">
<li>
<details class="accordion__details" name="console">
<summary><h4>Nintendo Entertainment System</h4></summary>
<img alt="Nintendo" src="{{ '/images/nes.jpg' | relative_url }}" />
<p>The <a href="http://en.wikipedia.org/wiki/Nintendo_Entertainment_System">Nintendo Entertainment System</a> (also abbreviated as NES) is an 8-bit home video game console that was developed and manufactured by Nintendo. It was initially released in Japan as the Family Computer (Japanese: ファミリーコンピュータ Hepburn: Famirī Konpyūta?) (also known by the portmanteau abbreviation Famicom (ファミコン Famikon?) and abbreviated as FC) on July 15, 1983, and was later released in North America during 1985, in Europe during 1986, and Australia in 1987. In South Korea, it was known as the Hyundai Comboy (현대 컴보이) and was distributed by SK Hynix which then was known as Hyundai Electronics. It was succeeded by the Super Famicom/Super Nintendo Entertainment System.</p>
</details>
</li>
<li>
<details class="accordion__details">
<details class="accordion__details" name="console">
<summary><h4>Sega Master System</h4></summary>
<img alt="Sega Master System" src="{{ '/images/sms.jpg' | relative_url }}" />
<p>The <a href="http://en.wikipedia.org/wiki/Master_System">Master System</a> (Japanese: マスターシステム Hepburn: Masutā Shisutemu?), often called the Sega Master System or SMS, is a third-generation home video game console that was manufactured by Sega. It was originally released in 1985 as the Sega Mark III in Japan. After being redesigned prior to its North American launch, the console was renamed Master System and released in 1986 in North America, 1987 in Europe, and 1989 in Brazil. The redesigned Master System was also released in Japan in 1987. Both the Mark III and the original Master System models could play with both cartridges and the credit card-sized "Sega Cards", which retailed at lower prices than cartridges but had lower storage capacity; the Master System II and later models did not have the card slot. The Master System also featured accessories such as a light gun and 3D glasses which were designed to work with a range of specially coded games.</p>
</details>
</li>
<li>
<details class="accordion__details">
<details class="accordion__details" name="console">
<summary><h4>Commodore 64</h4></summary>
<img alt="Commodore 64" src="{{ '/images/c64.jpg' | relative_url }}" />
<p>The <a href="http://en.wikipedia.org/wiki/Commodore_64">Commodore 64</a>, also known as the C64, C-64, C= 64,[n 1] or occasionally CBM 64 or VIC-64,[5] is an 8-bit home computer introduced in January 1982 by Commodore International. It is listed in the Guinness Book of World Records as the highest-selling single computer model of all time,[6] with independent estimates placing the number sold between 10 and 17 million units.[7]. Volume production started in early 1982, with machines being released on to the market in August at a price of US $595 (roughly equivalent to $1,500 in 2015).[8][9] Preceded by the Commodore VIC-20 and Commodore PET, the C64 takes its name from its 64 kilobytes (65,536 bytes) of RAM, and has technologically superior sound and graphical specifications when compared to some earlier systems such as the Apple II and Atari 800, with multi-color sprites and a more advanced sound processor.</p>
</details>
</li>
<li>
<details class="accordion__details">
<details class="accordion__details" name="console">
<summary><h4>ZX Spectrum</h4></summary>
<img alt="Spectrum" src="{{ '/images/zx48.jpg' | relative_url }}" />
<p>The <a href="http://en.wikipedia.org/wiki/ZX_Spectrum">ZX Spectrum</a> (pronounced /ˈzɛdˌɛks/ "Zed-Ex"[2][3]) is an 8-bit personal home computer released in the United Kingdom in 1982 by Sinclair Research Ltd. Referred to during development as the ZX81 Colour and ZX82,[4][5] the machine was launched as the ZX Spectrum by Sinclair to highlight the machine's colour display, compared with the black and white of its predecessor, the ZX81.[6] The Spectrum was ultimately released as eight different models, ranging from the entry level model with 16 KB RAM released in 1982 to the ZX Spectrum +3 with 128 KB RAM and built in floppy disk drive in 1987; together they sold in excess of 5 million units worldwide (not counting numerous clones).[7]</p>
</details>
</li>
</ul>

<hr />

<h2>Example 2: With Auto Collapse</h2>
<p>Opening a panel will close any other open panels.</p>

<ul class="accordion" data-makeup-accordion-auto-collapse role="list" aria-roledescription="accordion">
<li>
<details class="accordion__details">
<summary><h4>Buying</h4></summary>
<ul>
<li><a href="http://www.ebay.com">Purchases</a></li>
<li><a href="http://www.ebay.com">Bids/Offers</a></li>
<li><a href="http://www.ebay.com">Didn't Win</a></li>
</ul>
</details>
</li>
<li>
<details class="accordion__details">
<summary><h4>Selling</h4></summary>
<ul>
<li><a href="http://www.ebay.com">Sold</a></li>
<li><a href="http://www.ebay.com">Bids/Offers</a></li>
<li><a href="http://www.ebay.com">Didn't Swell</a></li>
</ul>
</details>
</li>
</ul>

<hr/>

<p><i>Updated</i>: May 12th, 2019</p>
<p><i>Updated</i>: Dec 4th, 2024</p>
45 changes: 24 additions & 21 deletions _js/accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,29 @@
* https://opensource.org/licenses/MIT.
*/

const dataSetKey = 'data-makeup-accordion-index';

const defaultOptions = {
autoCollapse: false
};

function onToggle(e) {
const itemIndex = parseInt(e.target.getAttribute(dataSetKey), 10);
const isOpen = this._detailsWidgets[itemIndex].open === true;
function browserSupportsNameAttribute() {
return "name" in document.createElement('details');
}

if (this._options.autoCollapse === true && isOpen) {
const otherWidgets = this._detailsWidgets.filter((item, index) => index !== itemIndex);
otherWidgets.forEach(widget => (widget.open = false));
function onToggle(e) {
if (browserSupportsNameAttribute() === false) {
const item = e.target;
const groupName = item.getAttribute('name');

// TODO: use ToggleEvent newState property instead of item.open when supported
if (groupName !== null && item.open === true) {
this.items
.filter(
(groupItem) => groupItem !== item && groupItem.open === true && groupItem.getAttribute('name') === groupName
)
.forEach(
(groupItem) => groupItem.open = false
);
}
}
}

Expand All @@ -30,11 +40,6 @@ function removeToggleListener(detailsEl) {
detailsEl.removeEventListener('toggle', this._onToggleListener);
}

function createDetailsWidget(el, i) {
el.setAttribute(dataSetKey, i);
this._detailsWidgets.push(el);
}

export default class {
constructor(widgetEl, selectedOptions) {
this._options = Object.assign({}, defaultOptions, selectedOptions);
Expand All @@ -44,25 +49,23 @@ export default class {

this._onToggleListener = onToggle.bind(this);

this._detailsWidgets = [];

const detailsEls = this._el.querySelectorAll('.accordion__details');

detailsEls.forEach(createDetailsWidget.bind(this));

this.enableEvents();

// mark the widget as progressively enhanced
this._el.classList.add('accordion--js');
}

get items() {
return [...this._el.querySelectorAll('.accordion__details')];
}

disableEvents() {
this._el.querySelectorAll('.accordion__details').forEach(removeToggleListener.bind(this));
this.items.forEach(removeToggleListener.bind(this));
}

enableEvents() {
if (this._destroyed !== true) {
this._el.querySelectorAll('.accordion__details').forEach(addToggleListener.bind(this));
this.items.forEach(addToggleListener.bind(this));
}
}

Expand Down
2 changes: 1 addition & 1 deletion static/browser.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion static/browser.js.map
View file

Large diffs are not rendered by default.

0 comments on commit 832300f

Please sign in to comment.