Merge pull request #29 from viivue/2.1.3

2.1.3

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### [2.1.3] - 2023-01-13
+
+- Improve performances
+
 ### [2.1.2] - 2022-12-21
 
 - Slide down function > fix a minor bug

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.2/dist/easy-tab-accordion.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/viivue/easy-tab-accordion@2.1.3/dist/easy-tab-accordion.min.js"></script>
 ```
 
 ## Initialize
@@ -226,26 +226,19 @@ eta.update();
 
 ## Deployment
 
-Start dev server
-
 ```shell
+# Start dev server
 npm run dev
-```
 
-Distribute production files (set new version in `package.json` first)
-
-```shell
+# Distribute production files (set new version in `package.json` first)
 npm run prod
-```
-
-Build dev site (for Netlify only)
 
-```shell
+# Build dev site (for Netlify only)
 npm run build
 ```
 
 ## License
 
 [MIT License](https://github.com/viivue/easy-tab-accordion/blob/main/LICENSE)
 
-Copyright (c) 2022 ViiVue
+Copyright (c) 2023 ViiVue

dev/index.html

@@ -217,7 +217,7 @@ <h2 class="heading-separator"><span>Accordion initialize with JSON format</span>
     <footer class="footer ta-center mb">
         <hr class="mb bold">
         <p>
-            <a href="https://github.com/phucbm/flickity-responsive" target="_blank">
+            <a href="https://github.com/viivue/easy-tab-accordion" target="_blank">
                 <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32"
                      data-view-component="true"
                      class="octicon octicon-mark-github v-align-middle">

dev/script.js

@@ -17,7 +17,7 @@ const packageInfo = require('../package.json');
  */
 // update title
 const title = `${packageInfo.prettyName} v${packageInfo.version}`;
-document.title = `[DEV] ${title} - ${packageInfo.description}`;
+document.title = `${title} - ${packageInfo.description}`;
 document.querySelector('[data-title]').innerHTML = title;
 document.querySelector('[data-description]').innerHTML = packageInfo.description;
 

package.json

@@ -2,7 +2,7 @@
   "name": "@viivue/easy-tab-accordion",
   "filename": "easy-tab-accordion",
   "prettyName": "Easy Tabs & Accordion",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Javascript library to create tabs or accordion.",
   "homepage": "https://github.com/viivue/easy-tab-accordion",
   "repository": {
@@ -27,7 +27,6 @@
   "license": "MIT",
   "scripts": {
     "dev": "webpack serve --config config/webpack.dev.js",
-    "web": "cross-env ENTRY=web PORT=8081 webpack serve --config config/webpack.dev.js",
     "build": "webpack --config config/webpack.build.js",
     "build-dev": "cross-env ENTRY=dev webpack --config config/webpack.build.js",
     "prod": "webpack --config config/webpack.prod.js && cross-env TARGET=module webpack --config config/webpack.prod.js",

src/_index.js

@@ -121,7 +121,7 @@ export class EasyTabAccordion{
         this.options.animation = animationValue !== null ? animationValue : this.options.animation;
 
         // get options init by data attribute (JSON format)
-        getOptions(this);
+        this.options = getOptions(this);
 
         // assign id to wrapper
         this.wrapper.setAttribute(this._attr.container, this.id);

src/helpers.js

@@ -192,37 +192,53 @@ export function log(context, status, ...message){
 
 /**
  * Get JSON options
- * @returns void
+ * ID priority: data-attribute > selector#id > unique id
+ * @version 0.0.1
+ * @returns {object}
  */
-export function getOptions(context){
+export function getOptions(context, defaultOptions){
+    if(!defaultOptions){
+        defaultOptions = context.options || context.config || {};
+    }
+
+    const numeric = ['duration', 'activeSection']; // convert these props to float
+    const wrapper = context.wrapper;
+
     // options from attribute
-    let string = context.wrapper.getAttribute(context._attr.container);
+    let dataAttribute = wrapper.getAttribute(context._attr.container);
     let options = {};
 
-    if(!isJSON(string)){
-        context.id = context.options.id;
-        return;
-    }
+    // data attribute doesn't exist or not JSON format -> string
+    const attributeIsNotJSON = !dataAttribute || !isJSON(dataAttribute);
 
-    // option priority: attribute > js object > default
-    options = {...JSON.parse(string)};
+    // data attribute is not json format or string
+    if(attributeIsNotJSON){
+        options = {...defaultOptions};
 
-    // convert boolean string to real boolean
-    for(const [key, value] of Object.entries(options)){
-        if(value === "false") options[key] = false;
-        if(value === "true") options[key] = true;
-        if(!isNaN(value)) options[key] = parseInt(value);
-    }
-
-    // get ID
-    if(options['id'] && !isEmptyString(options['id'])){
-        context.id = options['id'];
+        // data attribute exist => string
+        if(dataAttribute) options.id = dataAttribute;
+        else options.id = '';
     }else{
-        context.id = context.options.id;
+        options = JSON.parse(dataAttribute);
+
+        for(const [key, value] of Object.entries(options)){
+            // convert boolean string to real boolean
+            if(value === "false") options[key] = false;
+            else if(value === "true") options[key] = true;
+            // convert string to float
+            else if(numeric.includes(key) && typeof value === 'string' && value.length > 0) options[key] = parseFloat(value);
+            else options[key] = value;
+        }
     }
 
-    // replace default options
-    context.options = {...context.options, ...options};
+    // reassign id
+    const id = options.id || wrapper.id || defaultOptions.id;
+    context.id = id;
+    options.id = id;
+
+    options = {...defaultOptions, ...options};
+
+    return options;
 }