Merge pull request #33 from viivue/2.1.4

2.1.4
viivue · Feb 13, 2023 · 70d2ce8 · 70d2ce8
2 parents 724ada0 + 40de3d9
commit 70d2ce8
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ import "@viivue/easy-tab-accordion";
 
 ```html
 <!-- JS (10KB) -->
-<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@2.1.3/dist/easy-tab-accordion.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@latest/dist/easy-tab-accordion.min.js"></script>
 ```
 
 ## Initialize
@@ -139,10 +139,11 @@ ETA.init({
 
 ### 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                                                                       |
+| 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
 
@@ -178,15 +179,21 @@ For instance:
 | 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`  |
+| Attribute                           | As for option             | 
+|-------------------------------------|---------------------------|
+| `data-eta-animation="fade"`         | `animation: "fade"`       |
+| `data-eta-hash`                     | `hash: true`              | 
+| `data-eta-hash-scroll`              | `hashScroll: true`        |
 
 ## Events
 

diff --git a/dev/index.html b/dev/index.html
@@ -171,10 +171,10 @@ <h2 class="heading-separator"><span>Tab</span></h2>
 
     <h2 class="heading-separator"><span>Accordion initialize with JSON format</span></h2>
 
-    <div data-eta='{ "id":"my-id", "animation":"slide", "hash":"false", "duration":"1000"}'>
+    <div data-eta='{ "id":"my-id", "animation":"slide", "hash":"false", "duration":"1000", "isPreventDefault": "true"}'>
         <!-- section 1 -->
         <div>
-            <button data-eta-trigger="section-1">Section 1</button>
+            <a href="https://github.com" target="_blank" data-eta-trigger="section-1">Section 1</a>
             <div data-eta-receiver="section-1">
 
                 <p>Fusce quisque nam ac tortor sagittis. Nullam habitasse integer
@@ -199,7 +199,7 @@ <h2 class="heading-separator"><span>Accordion initialize with JSON format</span>
 
         <!-- section 2 -->
         <div>
-            <button data-eta-trigger="section-2">Section 2</button>
+            <a href="https://google.com" target="_blank" data-eta-trigger="section-2">Section 2</a>
             <div data-eta-receiver="section-2">
                 <p>Mauris leo rutrum auctor si massa. Nibh parturient nam porta congue tincidunt consectetuer
                     lacinia molestie quis justo. Auctor aliquam aptent nulla conubia enim ornare si. Est

diff --git a/dev/style.scss b/dev/style.scss
@@ -54,6 +54,9 @@ img {
   margin-bottom: 20px;
 }
 
+[data-eta-trigger] {
+  display: inline-block
+}
 
 .hidden {
   display: none;

diff --git a/dist/easy-tab-accordion.min.js b/dist/easy-tab-accordion.min.js
diff --git a/dist/easy-tab-accordion.module.js b/dist/easy-tab-accordion.module.js
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@viivue/easy-tab-accordion",
   "filename": "easy-tab-accordion",
   "prettyName": "Easy Tabs & Accordion",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Javascript library to create tabs or accordion.",
   "homepage": "https://github.com/viivue/easy-tab-accordion",
   "repository": {

diff --git a/src/_index.js b/src/_index.js
@@ -11,20 +11,22 @@ import {
 import {debounce, uniqueId} from "./utils";
 import {initSetup, onLoad, onResize} from "./methods";
 import {isLive, validBreakpoints} from "./responsive";
+import {scrollIntoView} from "./animation";
 
 export class EasyTabAccordion{
     constructor(options){
         this._class = {
             enabled: 'easy-tab-accordion-enabled',
-            active: 'active'
+            active: 'active',
+            hasAssignedTriggerEvent: 'assigned-trigger-event'
         };
         this._attr = {
             container: 'data-eta',
             trigger: 'data-eta-trigger',
             receiver: 'data-eta-receiver',
             hash: 'data-eta-hash',
             hashScroll: 'data-eta-hash-scroll',
-            animation: 'data-eta-animation'
+            animation: 'data-eta-animation',
         };
         this.defaultOptions = {
             // selectors
@@ -39,6 +41,7 @@ export class EasyTabAccordion{
             // animation
             animation: 'slide', // slide, fade
             duration: 450,
+            scrollIntoView: false, // scroll panel into view when open
 
             // hash
             hash: false, // update hash URL
@@ -58,6 +61,9 @@ export class EasyTabAccordion{
             allowCollapseAll: false, // for slide animation only
             allowExpandAll: false, // for slide animation only
 
+            // prevent default when click to trigger element
+            isPreventDefault: true,
+
             // events
             onBeforeInit: (data) => {
             },
@@ -222,6 +228,11 @@ export class EasyTabAccordion{
         const afterOpen = (target) => {
             hashScroll(this);
 
+            // scroll into view
+            if(this.options.scrollIntoView){
+                scrollIntoView({context: this, target});
+            }
+
             this.options.onAfterOpen(this, target);
 
             // log

diff --git a/src/animation.js b/src/animation.js
@@ -5,8 +5,18 @@
  * @since 1.0.0
  */
 export function scrollIntoView({context, target}){
+    // skip auto trigger
+    if(context.type === 'auto') return;
+
+    // animation:fade => change target to wrapper
+    if(context.options.animation === 'fade'){
+        target = context.wrapper;
+    }
+
     // scroll to wrapper if target is not set
-    if(!target) target = context.wrapper;
+    if(!target){
+        target = context.wrapper;
+    }
 
     target.scrollIntoView({
         behavior: 'smooth'

diff --git a/src/helpers.js b/src/helpers.js
@@ -1,4 +1,4 @@
-import {arrayUnique, isEmptyString} from "./utils";
+import {arrayUnique} from "./utils";
 
 
 /**

diff --git a/src/methods.js b/src/methods.js
@@ -1,5 +1,5 @@
 import {responsive} from "./responsive";
-import {scrollIntoView, setCSS} from "./animation";
+import {setCSS} from "./animation";
 import {getHash} from "./hash";
 
 export function initSetup(context){
@@ -13,6 +13,9 @@ export function initSetup(context){
     context.wrapper.querySelectorAll(context.options.trigger).forEach(trigger => {
         // assign click event
         trigger.addEventListener('click', e => manualTriggerFunction(context, e));
+
+        // add a class to check if the trigger has assigned an event
+        trigger.classList.add(context._class.hasAssignedTriggerEvent);
     });
 
     // loop through receivers
@@ -59,11 +62,15 @@ function assignTriggerElements(context){
 
         context.dataset.forEach(item => {
             if(item.id === id){
+                // already assigned trigger event
+                if(trigger.classList.contains(context._class.hasAssignedTriggerEvent)) return;
+
                 // valid trigger
                 trigger.addEventListener('click', e => {
-                    e.preventDefault();
+                    if(context.options.isPreventDefault){
+                        e.preventDefault();
+                    }
                     context.toggle(id, 'manual');
-                    scrollIntoView({context});
                 });
             }
         });
@@ -72,7 +79,9 @@ function assignTriggerElements(context){
 
 
 function manualTriggerFunction(context, e){
-    e.preventDefault();
+    if(context.options.isPreventDefault){
+        e.preventDefault();
+    }
     e.stopPropagation();
 
     const id = e.target.getAttribute(context.options.triggerAttr) || e.target.closest(context.options.trigger).getAttribute(context.options.triggerAttr);