Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ay-accordion

Package Overview
Dependencies
Maintainers
2
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ay-accordion - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

.eslintrc.js

8

dist/index.d.ts

@@ -1,2 +0,2 @@

/*! Copyright (c) 2016 Ayogo Health Inc.
/*! Copyright (c) 2019 Ayogo Health Inc.
*

@@ -21,4 +21,4 @@ * Permission is hereby granted, free of charge, to any person obtaining a copy

*/
import './accordion';
declare const _default: "ayAccordion";
export default _default;
import './web-component/ay-accordion/index';
import './web-component/ay-accordion-header/index';
import './web-component/ay-accordion-root/index';

@@ -1,25 +0,257 @@

"use strict";
/*! Copyright (c) 2016 Ayogo Health Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
Object.defineProperty(exports, "__esModule", { value: true });
require("./accordion");
exports.default = "ayAccordion";
//# sourceMappingURL=index.js.map
/*! Copyright 2019 Ayogo Health Inc. */
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
}(function () { 'use strict';
/*! Copyright 2019 Ayogo Health Inc. */
function run(fn, accordion) {
let root = accordion.closest('ay-accordion-root');
let elementsToWatch = Array.prototype.filter.call(root.childNodes, function (el) {
return el.nodeType === 1;
});
let preRoot = root.getBoundingClientRect();
let measurements = Array.prototype.map.call(elementsToWatch, function (el) {
return {
el: el,
initialDimensions: el.getBoundingClientRect(),
initialTransform: el.style.transform || ''
};
});
root.style.minHeight = preRoot.height + 'px';
if (!root.hasAttribute('multiple')) {
root.querySelectorAll('ay-accordion').forEach((acc) => {
if (acc.hasAttribute('open') && acc != accordion) {
acc.removeAttribute('open');
}
});
}
fn();
Array.prototype.forEach.call(measurements, function (m) {
m.newDimensions = m.el.getBoundingClientRect();
m.newScale = {
x: m.initialDimensions.width / m.newDimensions.width,
y: m.initialDimensions.height / m.newDimensions.height
};
m.newOffset = {
x: m.initialDimensions.left - m.newDimensions.left,
y: m.initialDimensions.top - m.newDimensions.top
};
m.el.style.transformOrigin = "0 0";
m.el.style.willChange = 'transform';
m.children = [];
if (m.initialDimensions.height !== m.newDimensions.height ||
m.initialDimensions.width !== m.newDimensions.width) {
m.children = Array.prototype.filter.call(m.el.childNodes, function (el) {
return el.nodeType === 1;
});
Array.prototype.forEach.call(m.children, function (el) {
var elDimensions = el.getBoundingClientRect();
var offsetFromParent = {
x: m.newDimensions.left - elDimensions.left,
y: m.newDimensions.top - elDimensions.top
};
var origin = offsetFromParent.x + 'px ';
origin += offsetFromParent.y + 'px';
el.style.transformOrigin = origin;
el.style.willChange = 'transform';
});
}
});
var duration = 100;
var t = 1;
function tween() {
Array.prototype.forEach.call(measurements, function (m) {
if (m.initialDimensions.height === m.newDimensions.height &&
m.initialDimensions.width === m.newDimensions.width &&
m.initialDimensions.left === m.newDimensions.left &&
m.initialDimensions.top === m.newDimensions.top) {
return;
}
var tScaleX = 1 + (m.newScale.x - 1) * t;
var tScaleY = 1 + (m.newScale.y - 1) * t;
var tOffsetX = m.newOffset.x * t;
var tOffsetY = m.newOffset.y * t;
var transform = 'translate(';
transform += tOffsetX + 'px, ';
transform += tOffsetY + 'px) ';
transform += 'scale(' + tScaleX + ',' + tScaleY + ') ';
transform += m.initialTransform;
m.el.style.transform = transform;
Array.prototype.forEach.call(m.children, function (el) {
var scale = 'scale(' + (1 / tScaleX) + ',' + (1 / tScaleY) + ')';
el.style.transform = scale;
});
});
t -= (16 / duration);
if (t > 0) {
requestAnimationFrame(tween);
}
else {
cleanup();
}
}
tween();
function cleanup() {
Array.prototype.forEach.call(measurements, function (m) {
m.el.style.transformOrigin = '';
m.el.style.transform = m.initialTransform;
m.el.style.willChange = '';
Array.prototype.forEach.call(m.children, function (el) {
el.style.transformOrigin = '';
el.style.transform = '';
el.style.willChange = '';
});
});
root.style.minHeight = null;
var scrollingRoot = document['scrollingElement'] || document.body;
var pageBottom = scrollingRoot.scrollTop + scrollingRoot.clientHeight;
var lastChild = measurements.pop();
if (lastChild.initialDimensions.height !== lastChild.newDimensions.height && (pageBottom - lastChild.initialDimensions.bottom < lastChild.initialDimensions.height)) {
window.scrollBy(0, (lastChild.newDimensions.height - lastChild.initialDimensions.height));
}
}
}
class AyAccordionRoot extends HTMLElement {
}
if (window.customElements) {
customElements.define('ay-accordion-root', AyAccordionRoot);
}
/*! Copyright 2019 Ayogo Health Inc. */
const accordionEventMap = new WeakMap();
class AyAccordion extends HTMLElement {
childCallback(el) {
if (el.tagName === 'AY-ACCORDION-HEADER') {
return;
}
if (this.hasAttribute('open')) {
el.removeAttribute('hidden');
}
else {
el.setAttribute('hidden', '');
}
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'disabled') {
if (this.hasAttribute('disabled')) {
this.querySelectorAll('ay-accordion-header').forEach((el) => {
el.setAttribute('aria-disabled', 'true');
});
}
else {
this.querySelectorAll('ay-accordion-header').forEach((el) => {
el.setAttribute('aria-disabled', 'false');
});
}
}
if (name === 'open') {
if (this.open) {
this.setAttribute('aria-expanded', 'true');
Array.prototype.forEach.call(this.children, function (el) {
if (!(el.tagName === 'AY-ACCORDION-HEADER')) {
el.removeAttribute('hidden');
}
});
}
else {
this.setAttribute('aria-expanded', 'false');
Array.prototype.forEach.call(this.children, function (el) {
if (!(el.tagName === 'AY-ACCORDION-HEADER')) {
el.setAttribute('hidden', '');
}
});
}
}
}
connectedCallback() {
const childObserver = new MutationObserver(() => {
Array.prototype.forEach.call(this.children, (el) => this.childCallback(el));
});
childObserver.observe(this, { childList: true });
if (this.hasAttribute('open')) {
this.setAttribute('aria-expanded', 'true');
}
else {
this.setAttribute('aria-expanded', 'false');
}
const handleToggle = () => {
if (this.hasAttribute('disabled')) {
return;
}
run(() => {
this.open = !this.open;
}, this);
};
this.addEventListener('toggle', handleToggle);
}
disconnectedCallback() {
if (accordionEventMap.has(this)) {
this.removeEventListener('toggle', accordionEventMap.get(this));
}
accordionEventMap.delete(this);
}
set open(value) {
if (value) {
this.setAttribute('open', '');
}
else {
this.removeAttribute('open');
}
}
get open() {
return this.hasAttribute('open');
}
static get observedAttributes() {
return ['open', 'disabled'];
}
}
if (window.customElements) {
customElements.define('ay-accordion', AyAccordion);
}
/*! Copyright 2019 Ayogo Health Inc. */
const accordionHeaderClickMap = new WeakMap();
const accordionHeaderPressMap = new WeakMap();
class AyAccordionHeader extends HTMLElement {
connectedCallback() {
this.setAttribute('role', 'button');
this.setAttribute('tabIndex', '0');
const ayAccordionElem = this.closest('ay-accordion');
if (ayAccordionElem.hasAttribute('disabled')) {
this.setAttribute('aria-disabled', 'true');
}
else {
this.setAttribute('aria-disabled', 'false');
}
const toggleOnClick = () => {
const ayAccordionElem = this.closest('ay-accordion');
ayAccordionElem.dispatchEvent(new Event('toggle'));
};
const toggleOnPress = (event) => {
const ayAccordionElem = this.closest('ay-accordion');
if (event.keyCode === 32 || event.keyCode === 13) {
ayAccordionElem.dispatchEvent(new Event('toggle'));
}
};
this.addEventListener('click', toggleOnClick);
this.addEventListener('keydown', toggleOnPress);
accordionHeaderClickMap.set(this, toggleOnClick);
accordionHeaderPressMap.set(this, toggleOnPress);
}
disconnectedCallback() {
if (accordionHeaderPressMap.has(this)) {
this.removeEventListener('keydown', accordionHeaderPressMap.get(this));
}
if (accordionHeaderClickMap.has(this)) {
this.removeEventListener('click', accordionHeaderClickMap.get(this));
}
accordionHeaderClickMap.delete(this);
accordionHeaderPressMap.delete(this);
}
}
if (window.customElements) {
customElements.define('ay-accordion-header', AyAccordionHeader);
}
}));
{
"name": "ay-accordion",
"version": "1.3.0",
"version": "2.0.0",
"copyright": "Copyright 2016 Ayogo Health Inc.",

@@ -13,7 +13,6 @@ "license": "MIT",

"Sam Evanuk <samevanuk@gmail.com>",
"Steven Stark <steven@stevenstark.com>"
"Steven Stark <steven@stevenstark.com>",
"Tushar Kalra <tkalraoct31@gmail.com>"
],
"description": "A mobile-friendly, jank-free accordion directive for Angular 1.x",
"keywords": [
"angular",
"accordion",

@@ -28,16 +27,19 @@ "browser",

"dependencies": {
"@types/angular": "^1.5.17",
"angular": "^1.4.0"
"@typescript-eslint/parser": "^2.3.3",
"rollup": "^1.23.1",
"rollup-plugin-cleanup": "^3.1.1",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-sourcemaps": "^0.4.2"
},
"peerDependencies": {
"angular": "^1.4.0"
},
"devDependencies": {
"typescript": "^2.1.0"
"@typescript-eslint/eslint-plugin": "^2.3.3",
"eslint": "^6.5.1",
"eslint-plugin-header": "^3.0.0",
"typescript": "^3.6.4"
},
"scripts": {
"dist": "tsc -p . && cp src/index.ts dist/index.es6.js",
"version": "npm run dist && git add -A dist",
"build": "tsc -p tsconfig.json && rollup dist/index.js -n ayAccordion -c rollup.config.js -o dist/index.js",
"version": "npm run build && git add -A dist",
"postversion": "git push && git push --tags"
}
}
ayAccordion
===========
A mobile-friendly, jank-free accordion directive for Angular 1.x.
A mobile friendly, web component based jank free accordion
<small>Copyright © 2016 Ayogo Health Inc.</small>
<small>Copyright © 2019 Ayogo Health Inc.</small>

@@ -16,3 +16,3 @@

* Per-section open/close events
* Supports IE 10+, Safari 6+, Edge, Chrome, Firefox, iOS 6+, and Android 4.4+
* Works with browsers supporting ES6 and web components

@@ -30,55 +30,23 @@

```html
<script src="node_modules/ay-accordion/dist/accordion.js"></script>
<script src="node_modules/ay-accordion/dist/index.js"></script>
```
Reference the module in your Angular app's dependencies:
```javascript
angular.module(myApp, ['ayAccordion'])
```
### ES5 with Browserify
Install the browserify-ngannotate transform:
`npm install browserify-ngannotate`
Reference the module in your Angular app's dependencies:
```javascript
var ayAccordion = require('ay-accordion').default;
angular.module(myApp, [ayAccordion])
```
### ES6 / TypeScript
Reference the module in your Angular app's dependencies:
```javascript
import ayAccordion from 'ay-accordion';
angular.module(myApp, [ayAccordion])
```
A TypeScript module definition is included.
Directives
Web Components
----------
```html
<div ay-accordion-root multiple>
<div ay-accordion open on-toggle="ctrl.accordionToggle(state)">
<b ay-accordion-header>Panel 1 (Click to open)</b>
<ay-accordion-root multiple>
<ay-accordion open>
<ay-accordion-header>Panel 1 (Click to open)</ay-accordion-header>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</ay-accordion>
</ay-accordion-root>
```
### ayAccordionRoot
### ay-accordion-root
This directive wraps the entire accordion, as well as any content below the
accordion that needs to be pushed down when accordion sections open and close.
This web component wraps the entire accordion, as well as any content below the accordion that needs to be pushed down when accordion sections open and close.

@@ -88,42 +56,15 @@ * `multiple`: This attribute allows multiple accordion sections to be open at

### ayAccordion
### ay-accordion
This directive manages a single expanding/collapsing accordion section,
including the title content shown when it is collapsed.
TThis web component manages a single expanding/collapsing accordion section, including the title content shown when it is collapsed.
* `open`: This attribute will make the section expanded by default. You can
also use `ng-open` to set this attribute dynamically.
* `open`: This attribute will make the section expanded by default.
* `on-toggle`: This attribute specifies a callback function to be run when the
section is expanded or collapsed. The `state` argument is a boolean
representing if the section is open.
* `disabled`: This attribute will disable the open/close ability of the accordion. The accordion will still maintain its original state open/close.
### ayAccordionHeader
### ay-accordion-header
This directive wraps the title of the accordion section, and attaches the event
handlers to expand the section when clicked.
This web component wraps the title of the accordion section, and attaches the event handlers to expand the section when clicked.
Styling
-------
For the accordion to expand/collapse as intended, you'll need to add something
like the following to your stylesheet:
```css
[hidden] {
display: none;
}
[ay-accordion] {
overflow: hidden;
height: 30px;
}
[ay-accordion][open] {
height: auto;
}
```
Notes

@@ -130,0 +71,0 @@ -----

{
"copyright": "Copyright 2016 Ayogo Health Inc.",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"target": "es6",
"module": "es6",
"declaration": true,

@@ -7,0 +7,0 @@ "noImplicitAny": false,

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc