getOptions > refactor code for reuse through multiple ESLibs

src/_index.js

@@ -1,7 +1,8 @@
 import {getSelectData, val} from "./data";
-import {eventData, fireOnChangeEvent, getID, getOptions, init} from "./methods";
+import {eventData, fireOnChangeEvent, init} from "./methods";
 import {getOptionHTML, updateDropdownHTML} from "./layout";
 import {findObjectInArray, getSelectTag, uniqueId} from "./utils";
+import {getOptions} from "@/helpers";
 
 const pluginName = "easySelect";
 const classes = {
@@ -71,8 +72,9 @@ class EasySelect{
         // avoid duplicate init
         if(this.selectTag.classList.contains(this.classes.enabled)) return;
 
+        // get options and assign ID
         this.config = getOptions(this, {...defaults, ...options});
-        this.id = getID(this);
+
         this.wrapper = this.selectTag.parentElement;
         this.dropdown = this.wrapper.querySelector(`.${this.classes.dropdown}`);
         this.current = this.wrapper.querySelector(`.${this.classes.current}`);

src/helpers.js

@@ -0,0 +1,52 @@
+import {isJSON} from "@/utils";
+
+/**
+ * Get JSON options
+ * ID priority: data-attribute > selector#id > unique id
+ * @version 0.0.1
+ * @returns {object}
+ */
+export function getOptions(context, defaultOptions){
+    if(!defaultOptions){
+        defaultOptions = context.options || context.config || {};
+    }
+
+    const numeric = ['autoShow']; // convert these props to float
+    const wrapper = context.selectTag;
+
+    // options from attribute
+    let dataAttribute = wrapper.getAttribute(context.atts.init);
+    let options = {};
+
+    // data attribute doesn't exist or not JSON format -> string
+    const attributeIsNotJSON = !dataAttribute || !isJSON(dataAttribute);
+
+    // data attribute is not json format or string
+    if(attributeIsNotJSON){
+        options = {...defaultOptions};
+
+        // data attribute exist => string
+        if(dataAttribute) options.id = dataAttribute;
+        else options.id = '';
+    }else{
+        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;
+        }
+    }
+
+    // reassign id
+    const id = options.id || wrapper.id || defaultOptions.id;
+    context.id = id;
+    options.id = id;
+
+    options = {...defaultOptions, ...options};
+
+    return options;
+}

src/methods.js

@@ -1,4 +1,4 @@
-import {createEl, insertAfter, isEmptyString, isJSON, wrapAll} from "./utils";
+import {createEl, insertAfter, wrapAll} from "./utils";
 import {getCurrentHTML, updateDropdownHTML} from "./layout";
 import {val} from "./data";
 
@@ -101,43 +101,6 @@ export function create(context){
 }
 
 
-/**
- * Get ID from attribute
- * @param context
- * @returns {*|string}
- */
-export function getID(context){
-    // id from data attribute
-    let id = context.selectTag.getAttribute(context.atts.init);
-
-    // string from init attribute always be treated as ID
-    if(isJSON(id)) return context.config.id;
-
-    // respect select#id
-    id = id !== null && !isEmptyString(id) ? id : context.selectTag.id;
-
-    // default unique id
-    id = id !== null && !isEmptyString(id) ? id : context.config.id;
-
-    return id;
-}
-
-export function getOptions(context, options){
-    // options from attribute
-    let string = context.selectTag.getAttribute(context.atts.init);
-
-    // option priority: attribute > js object > default
-    if(isJSON(string)) options = {...options, ...JSON.parse(string)};
-
-    // 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;
-    }
-
-    return options;
-}
-
 /**
  * Fire on change event manually
  * @param context