Skip to content

Commit

Permalink
Merge pull request #67 from viivue/2.3.1
Browse files Browse the repository at this point in the history 
2.3.1
  • Loading branch information
@phucbm
phucbm authored Dec 19, 2024
2 parents 2367de4 + aaa5062 commit 83dbd2e
Show file tree
Hide file tree
Showing 25 changed files with 629 additions and 534 deletions.
230 changes: 3 additions & 227 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,233 +8,9 @@

> Javascript library to create tabs or accordion.
## Getting started

### NPM Package
Visit https://easy-tab-accordion.netlify.app/ for demos and documentation.

Install NPM package

```shell
npm i @viivue/easy-tab-accordion
```

Import

```js
import "@viivue/easy-tab-accordion";
```

### Download

👉 Self hosted - [Download the latest release](https://github.com/viivue/easy-tab-accordion/releases/latest)

```html

<script src="./easy-tab-accordion.min.js"></script>
```

👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/viivue/easy-tab-accordion)

```html
<!-- JS (10KB) -->
<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@2.3.1/dist/easy-tab-accordion.min.js"></script>
```

## Initialize

To initialize an ETA script, always remember three things:

1. Wrapper
2. Trigger(s)
3. Receiver(s)

### With HTML

Using these HTML attributes to initialize without JavaScript.

```html
<!-- Accordion - No Js init -->
<div data-eta>
<!-- section 1 -->
<div>
<button data-eta-trigger="section-1">Section 1</button>
<div data-eta-receiver="section-1">Content</div>
</div>

<!-- section 2 -->
<div>
<button data-eta-trigger="section-2">Section 2</button>
<div data-eta-receiver="section-2">Content</div>
</div>
</div>
```

```html
<!-- Tabs - No Js init -->
<div data-eta data-eta-animation="fade">
<!-- Navigations -->
<div>
<button data-eta-trigger="section-1">Section 1</button>
<button data-eta-trigger="section-2">Section 2</button>
</div>

<!-- Content -->
<div>
<div data-eta-receiver="section-1">Content</div>
<div data-eta-receiver="section-2">Content</div>
</div>
</div>
```

Or using data-attributes (with JSON format) to initialize.

```html

<div data-eta='{ "id":"my-id", "animation":"slide", "hash":"false", "duration":"100"}'>
<!-- inner HTML here -->
</div>
```

> ⚠️ Notice that value of `data-eta-trigger` and `data-eta-receiver` must be the same.
### With JavaScript

Assume that we have the HTML like below

```html
<!-- Custom HTML -->
<div class="my-accordion">
<!-- inner HTML here -->
</div>
```

```js
// Init
ETA.init({
el: document.querySelector('.my-accordion'), // DOM element
trigger: '[data-trigger]', // CSS selector
triggerAttr: 'data-trigger', // attribute name
receiver: '.content', // CSS selector
receiverAttr: 'id', // attribute name
});
```

## Options

### Selectors

| Name | Type | Default | Required | Description |
|--------------|-------------|-----------------------|----------|--------------------------------------------|
| id | string | `random UUID` | ❌ | ID of this instance |
| el | DOM element | `[data-eta]` | ✅ | Wrapper element |
| trigger | string | `[data-eta-trigger]` | ✅ | CSS selector for trigger elements |
| triggerAttr | string | `data-eta-trigger` | ✅ | Attribute name of trigger elements |
| receiver | string | `[data-eta-receiver]` | ✅ | CSS selector for receiver elements |
| receiverAttr | string | `data-eta-receiver` | ✅ | Attribute name of receiver elements |
| activeClass | string | `"active"` | ❌ | Class name for active trigger and receiver |

> ⚠️ Notice that value of `triggerAttr` and `receiverAttr` must be the same.
### Animation

| Name | Type | Default | Description |
|----------------|---------|-----------|-----------------------------------------------------------------------------------------------------------|
| animation | string | `"slide"` | `"slide"` for accordion style (slide up and slide down), `"fade"` for tabbed style (fade in and fade out) |
| duration | number | `450` | Duration of animation in millisecond |
| scrollIntoView | boolean | `false` | Scroll panel into view when open |

### Hash

| Name | Type | Default | Description |
|------------|---------|---------|-----------------------------------------------------|
| hash | boolean | `false` | Update hash URL |
| hashScroll | boolean | `false` | Scroll into view when page loaded with a valid hash |

### Responsive

| Name | Type | Default | Description |
|----------------|-------|---------|-------------------------|
| liveBreakpoint | array | `[]` | An array of two numbers |

`liveBreakpoint` defines a range to enable ETA, when the browser's width is outside this range ETA will be destroyed (
detecting via window resizing event).

For instance:

- `liveBreakpoint:[99999,768]`: destroy ETA on screen that smaller than 768px
- `liveBreakpoint:[1024,-1]`: destroy ETA on screen that bigger than 1024px

### Open and close

| Name | Type | Default | Description |
|---------------|--------------|---------|----------------------------------------------------------------------------------------------|
| activeSection | number/array | `0` | Index(s) of section to be active on init, array input only available for `animation:"slide"` |

#### For `animation:"slide"` only

| Name | Type | Default | Description |
|------------------|---------|---------|-------------------------------------------------|
| allowCollapseAll | boolean | `false` | Allow to collapse all sections at the same time |
| allowExpandAll | boolean | `false` | Allow to expand all sections at the same time |

#### Prevent default option

| Name | Type | Default | Description |
|------------------|---------|---------|--------------------------------------------------------------------|
| isPreventDefault | boolean | `true` | Allow preventing the default behavior when clicking on the trigger |

### HTML attributes

Add these attributes on the wrapper element.

| Attribute | As for option |
|-------------------------------------|---------------------------|
| `data-eta-animation="fade"` | `animation: "fade"` |
| `data-eta-hash` | `hash: true` |
| `data-eta-hash-scroll` | `hashScroll: true` |

## Events

| Name | Description |
|-------------------------------|-------------|
| `onBeforeInit: (data) => {}` | |
| `onAfterInit: (data) => {}` | |
| `onBeforeOpen: (data) => {}` | |
| `onBeforeClose: (data) => {}` | |
| `onAfterOpen: (data) => {}` | |
| `onAfterClose: (data) => {}` | |
| `onDestroy: (data) => {}` | |
| `onUpdate: (data) => {}` | |

## Methods

| Name | Usage | Description |
|-----------------|-------------------------------------------|-----------------------------------------------------------------------|
| `toggle` | `eta.toggle(panelId)` | Toggle a panel |
| `openPanel` | `eta.openPanel(panelId, isStrict=false)` | Open a panel. Turn `isStrict` on to only open is currently closing. |
| `closePanel` | `eta.closePanel(panelId, isStrict=false)` | Close a panel. Turn `isStrict` on to only close is currently opening. |
| `toggleByIndex` | `eta.toggleByIndex(index)` | Toggle a section by index |
| `destroy` | `eta.destroy()` | Remove all style and events |
| `init` | `eta.init()` | Could be use after destroy |
| `update` | `eta.update()` | Update styling |
| `on` | `eta.on()` | Assign events |

Get the instance with JS init

```js
ETA.init({
id: 'my-eta'
});

const eta = ETA.get('my-eta');

// use methods
eta.update();
eta.on("onAfterOpen", (data) => {
// do something
console.log(data);
});
```

## Deployment

Expand All @@ -248,12 +24,12 @@ npm run prod
# Build dev site (for Netlify only)
npm run build

# Research replace to set new version
# Publish to npm
npm publish
```

## License

[MIT License](https://github.com/viivue/easy-tab-accordion/blob/main/LICENSE)

Copyright (c) 2023 ViiVue
Copyright (c) 2024 ViiVue
16 changes: 16 additions & 0 deletions config/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,22 @@ const server = {
{loader: 'sass-loader', options: {sourceMap: true}},
],
},
// Markdown
{
test: /\.md$/,
use: [
{
loader: "html-loader",
},
{
loader: "markdown-loader",
options: {
// Pass options to marked
// See https://marked.js.org/using_advanced#options
},
},
],
},
],
},

Expand Down
2 changes: 1 addition & 1 deletion config/webpack.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,6 @@ module.exports = merge(server, {
open: true,
compress: true,
hot: true,
port: port,
// port: port,
},
});
Loading

0 comments on commit 83dbd2e

Please sign in to comment.