aria-accordion
Advanced tools
aria-accordion - npm Package Compare versions
Comparing version 0.1.2 to 1.0.0
@@ -5,2 +5,4 @@ 'use strict'; | ||
| new accordion.Accordion({}, {openFirst: true}); | ||
| var accordionElement = document.querySelector('.js-accordion'); | ||
| new accordion.Accordion(accordionElement, {}, {openFirst: true}); |
@@ -6,4 +6,6 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ | ||
| new accordion.Accordion({}, {openFirst: true}); | ||
| var accordionElement = document.querySelector('.js-accordion'); | ||
| new accordion.Accordion(accordionElement, {}, {openFirst: true}); | ||
| },{"..":2}],2:[function(require,module,exports){ | ||
@@ -22,15 +24,22 @@ 'use strict'; | ||
| var defaultSelectors = { | ||
| body: '.js-accordion', | ||
| trigger: 'button' | ||
| }; | ||
| var Accordion = function(selectors, opts) { | ||
| /** | ||
| * Creates a new accordion component | ||
| * @constructor | ||
| * @param {Element} elm - The element that contains the entire accordion | ||
| * @param {object} selectors - Selectors for locating DOM elements | ||
| * @param {object} opts - Options for configuring behavior | ||
| */ | ||
| var Accordion = function(elm, selectors, opts) { | ||
| this.elm = elm; | ||
| this.selectors = extend({}, defaultSelectors, selectors); | ||
| this.opts = extend({}, defaultOpts, opts); | ||
| this.body = document.querySelector(this.selectors.body); | ||
| this.triggers = this.findTriggers(); | ||
| this.listeners = []; | ||
| this.addEventListener(this.body, 'click', this.handleClickBody.bind(this)); | ||
| this.addEventListener(this.elm, 'click', this.handleClickElm.bind(this)); | ||
@@ -42,3 +51,3 @@ if (this.opts.openFirst) { | ||
| Accordion.prototype.handleClickBody = function(e) { | ||
| Accordion.prototype.handleClickElm = function(e) { | ||
| // If the target is the button, toggle the button | ||
@@ -54,3 +63,3 @@ // Else see if the target is a child of a button | ||
| } | ||
| }) | ||
| }); | ||
| } | ||
@@ -61,3 +70,3 @@ }; | ||
| var self = this; | ||
| var triggers = [].slice.call(this.body.querySelectorAll(this.selectors.trigger)); | ||
| var triggers = [].slice.call(this.elm.querySelectorAll(this.selectors.trigger)); | ||
| triggers.forEach(function(trigger, index) { | ||
@@ -127,3 +136,3 @@ self.setAria(trigger, index); | ||
| content.style.display = prop; | ||
| }; | ||
| } | ||
| }; | ||
@@ -130,0 +139,0 @@ |
@@ -8,3 +8,3 @@ { | ||
| ], | ||
| "version": "0.1.2", | ||
| "version": "1.0.0", | ||
| "description": "A simple, accessible, ARIA accordion", | ||
@@ -17,3 +17,3 @@ "repository": { | ||
| "build": "browserify example/init.js > example/main.js", | ||
| "test": "mochify tests/accordion.js" | ||
| "test": "mochify test/accordion.js" | ||
| }, | ||
@@ -20,0 +20,0 @@ "main": "src/accordion.js", |
@@ -18,3 +18,3 @@ # 18F Aria-Accordion | ||
| ``` | ||
| ```html | ||
| <ul class="js-accordion"> | ||
@@ -50,5 +50,8 @@ <li> | ||
| ``` | ||
| ```js | ||
| var accordion = require('@18f/accordion'); | ||
| // Required element to turn into an accordion | ||
| var elm = document.querySelector('.js-accordion'); | ||
| // Optional configurion objects | ||
@@ -58,3 +61,3 @@ var selectors = { ... }; | ||
| new accordion.Accordion(selectors, opts); | ||
| new accordion.Accordion(elm, selectors, opts); | ||
| ``` | ||
@@ -64,5 +67,5 @@ | ||
| # Configuration | ||
| The constructor accepts an optional hash of selectors as its first parameter: | ||
| The constructor requires an HTML element to turn into the accordion. | ||
| - `body`: CSS selector of the outer element that contains the accordion items. _Default_: `.js-accordion` | ||
| The constructor accepts an optional hash of selectors as its second parameter: | ||
@@ -69,0 +72,0 @@ - `trigger`: CSS selector for the elements to turn into the accordion triggers. The component will look for these items' next sibling to turn into the accordion content that is hidden and revealed. _Default_: `button` |
@@ -13,15 +13,22 @@ 'use strict'; | ||
| var defaultSelectors = { | ||
| body: '.js-accordion', | ||
| trigger: 'button' | ||
| }; | ||
| var Accordion = function(selectors, opts) { | ||
| /** | ||
| * Creates a new accordion component | ||
| * @constructor | ||
| * @param {Element} elm - The element that contains the entire accordion | ||
| * @param {object} selectors - Selectors for locating DOM elements | ||
| * @param {object} opts - Options for configuring behavior | ||
| */ | ||
| var Accordion = function(elm, selectors, opts) { | ||
| this.elm = elm; | ||
| this.selectors = extend({}, defaultSelectors, selectors); | ||
| this.opts = extend({}, defaultOpts, opts); | ||
| this.body = document.querySelector(this.selectors.body); | ||
| this.triggers = this.findTriggers(); | ||
| this.listeners = []; | ||
| this.addEventListener(this.body, 'click', this.handleClickBody.bind(this)); | ||
| this.addEventListener(this.elm, 'click', this.handleClickElm.bind(this)); | ||
@@ -33,3 +40,3 @@ if (this.opts.openFirst) { | ||
| Accordion.prototype.handleClickBody = function(e) { | ||
| Accordion.prototype.handleClickElm = function(e) { | ||
| // If the target is the button, toggle the button | ||
@@ -45,3 +52,3 @@ // Else see if the target is a child of a button | ||
| } | ||
| }) | ||
| }); | ||
| } | ||
@@ -52,3 +59,3 @@ }; | ||
| var self = this; | ||
| var triggers = [].slice.call(this.body.querySelectorAll(this.selectors.trigger)); | ||
| var triggers = [].slice.call(this.elm.querySelectorAll(this.selectors.trigger)); | ||
| triggers.forEach(function(trigger, index) { | ||
@@ -118,3 +125,3 @@ self.setAria(trigger, index); | ||
| content.style.display = prop; | ||
| }; | ||
| } | ||
| }; | ||
@@ -121,0 +128,0 @@ |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.49%
23844
- Number of package files
- increased by7.14%
15
- Lines of code
- increased by8.6%
404
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by3.49%
89
- Number of medium supply chain risk alerts
- decreased by-100%
0