Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cityssm/bulma-js
The unofficial missing JavaScript library for Bulma websites
https://github.com/cityssm/bulma-js
accessibility aria bulma dropdown javascript tabs
Last synced: 19 days ago
JSON representation
The unofficial missing JavaScript library for Bulma websites
- Host: GitHub
- URL: https://github.com/cityssm/bulma-js
- Owner: cityssm
- License: mit
- Created: 2021-11-18T14:54:03.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-23T15:28:41.000Z (8 months ago)
- Last Synced: 2024-04-23T15:30:56.172Z (8 months ago)
- Topics: accessibility, aria, bulma, dropdown, javascript, tabs
- Language: TypeScript
- Homepage:
- Size: 486 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bulma-js
[](https://app.codacy.com/gh/cityssm/bulma-js/dashboard)
[](https://codeclimate.com/github/cityssm/bulma-js)
[](https://bulma.io)
The unofficial missing JavaScript library for [Bulma](https://bulma.io/) websites.
## Getting Started
Download [bulma-js.js](dist/bulma-js.js) here,
use the [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@cityssm/bulma-js?path=dist),
or install from npm.
```sh
npm install @cityssm/bulma-js
```
Add the following to your HTML.
```html
bulmaJS.init()
```
## Options
### Toggle Functionality
```javascript
bulmaJS.setConfig('bulma.burger', true)
bulmaJS.setConfig('bulma.dropdown', true)
bulmaJS.setConfig('dropdown', true)
bulmaJS.setConfig('tabs', true)
bulmaJS.setConfig('window.collapse', true) // close dropdowns when clicked outside
```
### Set Unique Element Id Prefix
```javascript
bulmaJS.setConfig('bulmaJS.elementIdPrefix', 'bulma-js-')
```
### Set the "Initialized" Attribute Name
```javascript
bulmaJS.setConfig('bulmaJS.initAttribute', 'data-bulma-js-init')
```
### Initialize Functionality on Entire Page
Can be called multiple times after page contents have changed.
```javascript
bulmaJS.init()
```
### Initialize Functionality on the Children of an Element
Helpful after populating an area with an AJAX call.
```javascript
bulmaJS.init(document.getElementById('container-element'))
```
## Features So Far
- Toggles appropriate Bulma classes **and ARIA attributes**.
- Close `dropdown` and `navbar-dropdown` elements when other parts of the webpage are clicked.
### Delete Buttons (Messages, Notifications, and Tags)
,
,
- Support for `delete` buttons within `notification`, `message`, and `tag` elements.
(Thanks [thibaultmeyer](https://github.com/thibaultmeyer) for the feature.)
### Navbar
- Support for the `navbar-burger` element.
- Support for the `navbar-dropdown` elements.
### Dropdown
- Support for the `dropdown` elements.
### Tabs
- Support for the `tabs` elements.
- Use the `href` attribute on each tab anchor element to link to
the corresponding tab panel.
- All tab panels should be siblings. Hide the inactive tab panels with the `is-hidden` class.
### Modal Alerts and Confirms
Methods for creating accessible alerts and confirms.
```javascript
bulmaJS.alert('This is a basic alert!')
bulmaJS.alert({
title: 'Alert',
message: 'This is a more complex alert.',
messageIsHtml: true,
contextualColorName: 'success',
okButton: {
text: 'Yes, But Not Too Complex',
callbackFunction: () => {
console.log('OK Button Pressed')
}
}
})
bulmaJS.confirm({
title: 'Question',
message: 'Have you ever been to Sault Ste. Marie, Ontario?',
contextualColorName: 'primary',
okButton: {
text: 'Yes, I Have',
callbackFunction: () => {
console.log('OK Button Pressed')
}
},
cancelButton: {
text: "No, But I'd Like To",
callbackFunction: () => {
console.log('Cancel Button Pressed')
}
}
})
```
## Alternative Bulma JavaScript Project
The [BulmaJS](https://github.com/VizuaaLOG/BulmaJS) project
also provides JavaScript functionality for Bulma,
and is **far more complete** than this project.
I recommend you take a look if you need more functionality than is offered here.
This project goes in a different direction in a few ways.
- Prioritizes simple usage in an HTML `script` tag. No `import` or `require` necessary.
- TypeScript types available.
- Goes beyond just toggling the `is-active` Bulma classes, and manages ARIA attributes as well to increase accessibility.
- Attempts to correct common issues (i.e. missing roles, missing ids) that may affect accessibility.