Merge pull request #2 from viivue/dev

Easy Select v3.0.2
viivue · Mar 15, 2022 · 0915c8d · 0915c8d
2 parents 87dd7f2 + 26239f3
commit 0915c8d
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+### [3.0.2] - 2022-03-15
+
+- Close dropdown when select on the same value
+- `wrapDefaultSelect`: option to not wrap default select tag
+- Add event `beforeInit`
+- Add private method `val()`
+
 ### [3.0.1] - 2021-11-29
 
 - Fix bug: recognize disabled option.

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Easy Select
+# Easy Select v3.0.2
 
 [![release](https://badgen.net/github/release/viivue/easy-select/)](https://github.com/viivue/easy-select/releases/latest)
 [![minified](https://badgen.net/badge/minified/7KB/cyan)](https://www.jsdelivr.com/package/gh/viivue/easy-select)
@@ -21,20 +21,20 @@
 
 ```html
 <!-- CSS (3 KB) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/easy-select@latest/easy-select.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/easy-select@3.0.2/easy-select.css">
 
 <!-- JS (13 KB) -->
-<script src="https://cdn.jsdelivr.net/gh/viivue/easy-select@latest/easy-select.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/viivue/easy-select@3.0.2/easy-select.js"></script>
 ```
 
 or minified version
 
 ```html
 <!-- CSS (2 KB) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/easy-select@latest/dist/easy-select.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/easy-select@3.0.2/dist/easy-select.min.css">
 
 <!-- JS (5 KB) -->
-<script src="https://cdn.jsdelivr.net/gh/viivue/easy-select@latest/dist/easy-select.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/viivue/easy-select@3.0.2/dist/easy-select.min.js"></script>
 ```
 
 ### Init
@@ -126,4 +126,4 @@ gulp serve
 
 [MIT License](https://github.com/viivue/easy-select/blob/master/LICENSE)
 
-Copyright (c) 2021 ViiVue
+Copyright (c) 2022 ViiVue
diff --git a/build/easy-select.css b/build/easy-select.css
@@ -1,7 +1,7 @@
 /*!
- * Easy Select v3.0.1
+ * Easy Select v3.0.2
  * https://github.com/viivue/easy-select
- * MIT license - 2021
+ * MIT license - 2022
  */
 
 /****************************

diff --git a/build/easy-select.js b/build/easy-select.js
@@ -1,16 +1,19 @@
 /**!
- * Easy Select v3.0.1
+ * Easy Select v3.0.2
  * https://github.com/viivue/easy-select
- * MIT license - 2021
+ * MIT license - 2022
  */
 ;(function($, window, document, undefined){
     const pluginName = "easySelect";
     const defaults = {
         wrapperClass: '',
         nativeSelect: false,
         warning: false,
+        wrapDefaultSelect: true,
         customDropDownOptionHTML: option => {
         },
+        beforeInit: data => {
+        },
         onInit: data => {
         },
         onRefresh: data => {
@@ -48,7 +51,15 @@
         this.config = {...defaults, ...options};
         this.isOpen = false;
         this.isDisabled = false;
-        this.value = this.select.val();
+        this.value = this.val();
+        this.isWrapped = this.config.wrapDefaultSelect && !this.config.nativeSelect;
+        this.selectData = this.getSelectData();
+
+        if(this.config.nativeSelect && this.config.wrapDefaultSelect){
+            this.isWrapped = true;
+            console.warn(`Default select must be wrapped in Native select mode.`);
+        }
+
         this.init();
     }
 
@@ -57,6 +68,7 @@
      ********************** Methods *********************
      ***************************************************/
     EasySelect.prototype.init = function(){
+        this.config.beforeInit(this);
         this.create();
         this.config.onInit(this);
     }
@@ -66,10 +78,17 @@
         if(this.select.closest(`.${names.wrapperClass}`).length) return;
 
         // create wrapper
-        this.selectData = this.getSelectData();
         this.id = this.uniqueId();
-        this.select.wrapAll(`<div class="${names.wrapperClass} ${this.config.wrapperClass}" ${names.wrapperIdAttr}="${this.id}"></div>`);
-        this.wrapper = this.select.closest(`[${names.wrapperIdAttr}="${this.id}"]`);
+        const wrapperHTML = `<div class="${names.wrapperClass} ${this.config.wrapperClass}" ${names.wrapperIdAttr}="${this.id}"></div>`;
+        const wrapperSelector = `[${names.wrapperIdAttr}="${this.id}"]`;
+
+        if(this.isWrapped){
+            this.select.wrapAll(wrapperHTML);
+            this.wrapper = this.select.closest(wrapperSelector);
+        }else{
+            $(wrapperHTML).insertAfter(this.select);
+            this.wrapper = this.select.next();
+        }
 
         // add current HTML
         this.wrapper.append(this.getCurrentHTML());
@@ -164,8 +183,13 @@
             this.dropdown.detach();
         }
 
-        this.current.detach();
-        this.select.unwrap();
+        if(this.isWrapped){
+            this.current.detach();
+            this.select.unwrap();
+        }else{
+            this.wrapper.detach();
+        }
+
         this.select.show();
 
         // Event: on destroy
@@ -178,7 +202,10 @@
      */
     EasySelect.prototype.update = function(value){
         // skip duplicate values
-        if(value === this.select.val()) return;
+        if(value === this.val()){
+            this.close();
+            return;
+        }
 
         // update value
         if(typeof this.findObjectInArray(this.selectData, 'value', value) !== 'undefined'){
@@ -192,16 +219,14 @@
      * Change HTML based on selected value
      */
     EasySelect.prototype.change = function(type = 'easySelectEvent'){
-        this.value = this.select.val();
-
         // update current HTML
         this.current.html(this.getOptionHTML());
 
         /** Dropdown **/
         if(!this.config.nativeSelect){
             // active option
             this.dropdown.find(`[${names.optionAttr}]`).removeClass(names.optionActiveClass);
-            this.dropdown.find(`[${names.optionAttr}="${this.value}"]`).addClass(names.optionActiveClass);
+            this.dropdown.find(`[${names.optionAttr}="${this.val()}"]`).addClass(names.optionActiveClass);
 
             // close
             this.close();
@@ -334,7 +359,7 @@
      */
     EasySelect.prototype.getOptionHTML = function(option = undefined){
         // is active
-        const isActive = typeof option !== 'undefined' && option['value'] === this.select.val();
+        const isActive = typeof option !== 'undefined' && option['value'] === this.val();
 
         // return selected option
         if(typeof option === 'undefined'){
@@ -371,6 +396,15 @@
     /****************************************************
      ********************** Data *********************
      ***************************************************/
+    /**
+     * Get value
+     * @returns {*}
+     */
+    EasySelect.prototype.val = function(){
+        this.value = this.select.val();
+        return this.value;
+    }
+
     /**
      * Get select data
      * @returns {*[]}
@@ -397,7 +431,7 @@
         const value = $option.val();
         const index = $option.index();
         const id = this.stringToSlug(value) + '-' + index;
-        const isSelected = value === this.select.val();
+        const isSelected = value === this.val();
         const el = $option;
         const isDisabled = $option.is(':disabled');
 

diff --git a/dist/easy-select.min.css b/dist/easy-select.min.css
diff --git a/dist/easy-select.min.js b/dist/easy-select.min.js