diff --git a/src/_index.js b/src/_index.js index 0f1998e..aa25ad0 100644 --- a/src/_index.js +++ b/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}`); diff --git a/src/helpers.js b/src/helpers.js new file mode 100644 index 0000000..779482d --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/methods.js b/src/methods.js index b0420e6..9faf52c 100644 --- a/src/methods.js +++ b/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