mirror of
https://github.com/explosion/spaCy.git
synced 2024-09-21 11:29:13 +03:00
Add accordion component (collapsible section)
This commit is contained in:
parent
3d4dff1845
commit
a9c77e01b4
|
@ -11,6 +11,23 @@ mixin section(id)
|
||||||
block
|
block
|
||||||
|
|
||||||
|
|
||||||
|
//- Accordion (collapsible sections)
|
||||||
|
title - [string] Section title.
|
||||||
|
id - [string] Optional section ID for permalinks.
|
||||||
|
level - [integer] Headline level for section title.
|
||||||
|
|
||||||
|
mixin accordion(title, id, level)
|
||||||
|
section.o-accordion.o-block
|
||||||
|
+h(level || 4).o-no-block(id=id)
|
||||||
|
button.o-accordion__button.o-grid.o-grid--vcenter.o-grid--space.js-accordion(aria-expanded="false")=title
|
||||||
|
svg.o-accordion__icon(width="20" height="20" viewBox="0 0 10 10" aria-hidden="true" focusable="false")
|
||||||
|
rect.o-accordion__hide(height="8" width="2" y="1" x="4")
|
||||||
|
rect(height="2" width="8" y="4" x="1")
|
||||||
|
|
||||||
|
.o-accordion__content(hidden="")
|
||||||
|
block
|
||||||
|
|
||||||
|
|
||||||
//- Headlines Helper Mixin
|
//- Headlines Helper Mixin
|
||||||
level - [integer] 1, 2, 3, 4, or 5
|
level - [integer] 1, 2, 3, 4, or 5
|
||||||
|
|
||||||
|
|
|
@ -41,6 +41,7 @@ if IS_PAGE
|
||||||
https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
|
https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
|
||||||
|
|
||||||
- ProgressBar = "new ProgressBar('.js-progress');"
|
- ProgressBar = "new ProgressBar('.js-progress');"
|
||||||
|
- Accordion = "new Accordion('.js-accordion');"
|
||||||
- Changelog = "new Changelog('" + SOCIAL.github + "', 'spacy');"
|
- Changelog = "new Changelog('" + SOCIAL.github + "', 'spacy');"
|
||||||
- NavHighlighter = "new NavHighlighter('data-section', 'data-nav');"
|
- NavHighlighter = "new NavHighlighter('data-section', 'data-nav');"
|
||||||
- GitHubEmbed = "new GitHubEmbed('" + SOCIAL.github + "', 'data-gh-embed');"
|
- GitHubEmbed = "new GitHubEmbed('" + SOCIAL.github + "', 'data-gh-embed');"
|
||||||
|
@ -57,6 +58,7 @@ if environment == "deploy"
|
||||||
if IS_PAGE
|
if IS_PAGE
|
||||||
!=NavHighlighter
|
!=NavHighlighter
|
||||||
!=GitHubEmbed
|
!=GitHubEmbed
|
||||||
|
!=Accordion
|
||||||
if HAS_MODELS
|
if HAS_MODELS
|
||||||
!=ModelLoader
|
!=ModelLoader
|
||||||
if compare_models
|
if compare_models
|
||||||
|
@ -74,6 +76,8 @@ else
|
||||||
!=NavHighlighter
|
!=NavHighlighter
|
||||||
| import GitHubEmbed from '/assets/js/github-embed.js';
|
| import GitHubEmbed from '/assets/js/github-embed.js';
|
||||||
!=GitHubEmbed
|
!=GitHubEmbed
|
||||||
|
| import Accordion from '/assets/js/accordion.js';
|
||||||
|
!=Accordion
|
||||||
if HAS_MODELS
|
if HAS_MODELS
|
||||||
| import { ModelLoader } from '/assets/js/models.js';
|
| import { ModelLoader } from '/assets/js/models.js';
|
||||||
!=ModelLoader
|
!=ModelLoader
|
||||||
|
|
|
@ -74,6 +74,42 @@
|
||||||
border-radius: $border-radius
|
border-radius: $border-radius
|
||||||
box-shadow: $box-shadow
|
box-shadow: $box-shadow
|
||||||
|
|
||||||
|
|
||||||
|
//- Accordion
|
||||||
|
|
||||||
|
.o-accordion
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 2rem
|
||||||
|
|
||||||
|
.o-accordion__content
|
||||||
|
margin-top: 3rem
|
||||||
|
|
||||||
|
.o-accordion__button
|
||||||
|
font: inherit
|
||||||
|
border-radius: $border-radius
|
||||||
|
width: 100%
|
||||||
|
padding: 1.5rem 2rem
|
||||||
|
background: $color-subtle-light
|
||||||
|
|
||||||
|
&[aria-expanded="true"]
|
||||||
|
border-bottom: 3px solid $color-subtle
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
border-bottom-right-radius: 0
|
||||||
|
|
||||||
|
.o-accordion__hide
|
||||||
|
display: none
|
||||||
|
|
||||||
|
&:focus:not([aria-expanded="true"])
|
||||||
|
background: $color-subtle
|
||||||
|
|
||||||
|
.o-accordion__icon
|
||||||
|
@include size(2.5rem)
|
||||||
|
background: $color-theme
|
||||||
|
color: $color-back
|
||||||
|
border-radius: 50%
|
||||||
|
padding: 0.35rem
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
//- Box
|
//- Box
|
||||||
|
|
||||||
.o-box
|
.o-box
|
||||||
|
|
25
website/assets/js/accordion.js
Normal file
25
website/assets/js/accordion.js
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import { $$ } from './util.js';
|
||||||
|
|
||||||
|
export default class Accordion {
|
||||||
|
/**
|
||||||
|
* Simple, collapsible accordion sections.
|
||||||
|
* Inspired by: https://inclusive-components.design/collapsible-sections/
|
||||||
|
* @param {string} selector - Query selector of button element.
|
||||||
|
*/
|
||||||
|
constructor(selector) {
|
||||||
|
[...$$(selector)].forEach(btn =>
|
||||||
|
btn.addEventListener('click', this.onClick.bind(this)))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle aria-expanded attribute on button and visibility of section.
|
||||||
|
* @param {node} Event.target - The accordion button.
|
||||||
|
*/
|
||||||
|
onClick({ target }) {
|
||||||
|
const exp = target.getAttribute('aria-expanded') === 'true' || false;
|
||||||
|
target.setAttribute('aria-expanded', !exp);
|
||||||
|
target.parentElement.nextElementSibling.hidden = exp;
|
||||||
|
}
|
||||||
|
}
|
|
@ -12,6 +12,7 @@ import ProgressBar from './progress.js';
|
||||||
import NavHighlighter from './nav-highlighter.js';
|
import NavHighlighter from './nav-highlighter.js';
|
||||||
import Changelog from './changelog.js';
|
import Changelog from './changelog.js';
|
||||||
import GitHubEmbed from './github-embed.js';
|
import GitHubEmbed from './github-embed.js';
|
||||||
|
import Accordion from './accordion.js';
|
||||||
import { ModelLoader, ModelComparer } from './models.js';
|
import { ModelLoader, ModelComparer } from './models.js';
|
||||||
|
|
||||||
// Assign to window so they are bundled by rollup
|
// Assign to window so they are bundled by rollup
|
||||||
|
@ -19,5 +20,6 @@ window.ProgressBar = ProgressBar;
|
||||||
window.NavHighlighter = NavHighlighter;
|
window.NavHighlighter = NavHighlighter;
|
||||||
window.Changelog = Changelog;
|
window.Changelog = Changelog;
|
||||||
window.GitHubEmbed = GitHubEmbed;
|
window.GitHubEmbed = GitHubEmbed;
|
||||||
|
window.Accordion = Accordion;
|
||||||
window.ModelLoader = ModelLoader;
|
window.ModelLoader = ModelLoader;
|
||||||
window.ModelComparer = ModelComparer;
|
window.ModelComparer = ModelComparer;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user