v2.0.0 (#9)

* ♻️ refactor with webpack * ♻️ change src to web * split to small modules * build config * create module helpers.js * update version * update output banner * allow collapse all for slide animation only * getElements: return receivers and triggers * add active class for triggers * style demos * add setCSS using Object.assign * adjust tabs styling * correct fade animation * destroy * add helper getIdByIndex * create module slide.js * create module fade.js * update function descriptions * clean up hash module * add method update * add init events * add utils debounce * update slide resize * demo: hide update button * utils: add arrayUnique * destroySlide: add removeActiveClass * core: defaultActiveSections and allowExpandAll * create responsive module * utils: add arraySortInteger * responsive: restrict validBreakpoints * core: create fn initialize * destroy: remove all events from triggers by cloning itself * core: remove log * core: rename receiver_ids to dataset * core: add method init * core: restrict defaultActiveSections * ⚡ build v2.0.0 * update README.md * update CHANGELOG.md
viivue · Jul 3, 2022 · a88177b · a88177b
1 parent cb179e5
commit a88177b
Show file tree

Hide file tree

Showing 43 changed files with 1,908 additions and 851 deletions.
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,48 @@
+{
+  "rules": {
+    "prefer-template": "off",
+    "no-var": 1,
+    "no-unused-vars": 1,
+    "camelcase": 1,
+    "no-nested-ternary": 1,
+    "no-console": 1,
+    "no-template-curly-in-string": 1,
+    "no-self-compare": 1,
+    "import/prefer-default-export": 0,
+    "arrow-body-style": 1,
+    "import/no-extraneous-dependencies": [
+      "off",
+      {
+        "devDependencies": false
+      }
+    ]
+  },
+  "ignorePatterns": [
+    "dist",
+    "node_modules",
+    "webpack.*",
+    "config/paths.js"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "prettier"
+  ],
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "config/webpack.common.js"
+      }
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 /package-lock.json
 /node_modules/
 /.idea/
+/package-lock.json
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,11 @@
+.idea
+.gitignore
+.babelrc.json
+.eslintrc.json
+.prettierrc.json
+jsconfig.json
+/src
+/examples
+/config
+/public
+postcss.config.js
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+### [2.0.0] - 2022-07-03
+
+- Refactor developing environment using webpack with ES6 modules
+- Allow to expand all with `allowExpandAll`
+- Method `init` and `update`
+- Add prettier demos
+
 ### [1.0.1] - 2022-06-23
 
 - Settings via attributes

diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# Easy Tab & Accordion v1.0.1
+# Easy Tab & Accordion (ETA) v2.0.0
 
 [![release](https://badgen.net/github/release/viivue/easy-tab-accordion/)](https://github.com/viivue/easy-tab-accordion/releases/latest)
 [![minified](https://badgen.net/badge/minified/7KB/cyan)](https://www.jsdelivr.com/package/gh/viivue/easy-tab-accordion)
 [![jsdelivr](https://data.jsdelivr.com/v1/package/gh/viivue/easy-tab-accordion/badge?style=rounded)](https://www.jsdelivr.com/package/gh/viivue/easy-tab-accordion)
 [![license](https://badgen.net/github/license/viivue/easy-tab-accordion/)](https://github.com/viivue/easy-tab-accordion/blob/main/LICENSE)
 
-> Pure Javascript API to create switchable tabs or accordion.
+> Javascript library to create tabs or accordion.
 
 ## Getting started
 
@@ -15,34 +15,30 @@
 
 ```html
 
-<link rel="stylesheet" href="./easy-tab-accordion.css">
-<script src="./easy-tab-accordion.js"></script>
+<script src="./easy-tab-accordion.min.js"></script>
 ```
 
 👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/viivue/easy-tab-accordion)
 
 ```html
-<!-- JS (12KB) -->
-<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@1.0.1/build/easy-tab-accordion.js"></script>
+<!-- JS (10KB) -->
+<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@2.0.0/dist/easy-tab-accordion.min.js"></script>
 ```
 
-or minified version
+## Initialize
 
-```html
-<!-- JS (7KB) -->
-<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@1.0.1/dist/easy-tab-accordion.min.js"></script>
-```
+To initialize an ETA script, always remember three things:
 
-## Init
+1. Wrapper
+2. Trigger(s)
+3. Receiver(s)
 
-To init via HTML. We need three things to make a tab/accordion works:
+### With HTML
 
-1. Wrapper element
-2. Trigger element(s)
-3. Receiver element(s)
+Using these HTML attributes to initialize without JavaScript.
 
 ```html
-
+<!-- No Js init -->
 <div data-eta>
     <!-- section 1 -->
     <div>
@@ -58,81 +54,162 @@ To init via HTML. We need three things to make a tab/accordion works:
 </div>
 ```
 
-Init via JS. You're free to use your own HTML and attributes.
+> ⚠️ Notice that value of `data-eta-trigger` and `data-eta-receiver` must be the same.
 
-```js
-const eta = new EasyTabAccordion({
-    el: document.querySelector('.wrapper'), // DOM element
-    trigger: 'button.trigger', // string selector
-    triggerAttr: 'data-trigger', // attribute name
-    receiver: '.content', // string selector
-    receiverAttr: 'id', // attribute name
-});
-```
+### With JavaScript
 
-## Options and events
+Assume that we have the HTML like below
+
+```html
+<!-- Custom HTML -->
+<div class="my-accordion">
+    <!-- section 1 -->
+    <div>
+        <button data-trigger="section-1">Section 1</button>
+        <div class="content" id="section-1">Content</div>
+    </div>
+
+    <!-- section 2 -->
+    <div>
+        <button data-trigger="section-2">Section 2</button>
+        <div class="content" id="section-2">Content</div>
+    </div>
+</div>
+```
 
 ```js
+// Init
 const eta = new EasyTabAccordion({
-    el: document.querySelector('.wrapper'), // DOM element
-    trigger: 'button.trigger', // string selector
+    el: document.querySelector('.my-accordion'), // DOM element
+    trigger: '[data-trigger]', // CSS selector
     triggerAttr: 'data-trigger', // attribute name
-    receiver: '.content', // string selector
+    receiver: '.content', // CSS selector
     receiverAttr: 'id', // attribute name
-    activeClass: 'active',
-    animation: 'slide', // slide, fade
-    duration: 600, // animation duration
-    hash: false, // update hash on URL, open tab/accordion via hash
-    liveBreakpoint: [], // [1920, 1024] => destroy if window.width if bigger than 1920 or less than 1024
-    activeSection: 0, // will show order of item show, close all if activeSection < 0 or activeSection >= length item
-    allowCollapseAll: false,
-    onBeforeOpen: (data, el) => {
-    },
-    onBeforeClose: (data, el) => {
-    },
-    onAfterOpen: (data, el) => {
-    },
-    onAfterClose: (data, el) => {
-    },
-    onAfterDestroy: (data, el) => {
-    },
 });
 ```
 
-Hash and animation could be set via attributes.
+## Options
 
-```html
-<div data-eta data-eta-hash="true" data-eta-animation="fade">
-    ...
-</div>
-```
+### Attribute options
+
+### Selectors
+
+| Name         | Type        | Default               | Required | Description                                |
+|--------------|-------------|-----------------------|----------|--------------------------------------------|
+| 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 milisecond                                                                       |
+
+### 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   |
+
+### 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,el) => {}`  |             |
+| `onBeforeClose: (data,el) => {}` |             |
+| `onAfterOpen: (data,el) => {}`   |             |
+| `onAfterClose: (data,el) => {}`  |             |
+| `onDestroy: (data) => {}`        |             |
+| `onUpdate: (data) => {}`         |             |
 
 ## Methods
 
+| Name            | Usage                      | Description                 | 
+|-----------------|----------------------------|-----------------------------|
+| `toggle`        | `eta.toggle(id)`           | Toggle a section by ID      |
+| `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              |
+
+Get the instance with JS init
+
 ```js
-const eta = new EasyTabAccordion({});
+const options = {};
+const eta = new EasyTabAccordion(options);
 
-eta.activate('section-2');
-eta.activateByIndex(1);
-eta.destroy();
+// use methods
 ```
 
 ## Deployment
 
-Install gulp
+Install node environment
 
 ```shell
 npm install
 ```
 
-And start server
+Start dev server
 
 ```shell
-gulp serve
+npm run dev
 ```
 
-Release new version
+Build
 
 ```shell
-gulp release
+npm run build
 ```
+
+## License
+
+[MIT License](https://github.com/viivue/easy-tab-accordion/blob/main/LICENSE)
+
+Copyright (c) 2022 ViiVue