simp-select 1.0.16 → 1.0.18

package/docs/style.css

@@ -0,0 +1,29 @@
+.container {
+	max-width: 800px;
+	margin: 50px auto;
+}
+.items {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 10px;
+	margin: 20px auto;
+}
+.item {
+	display: block;
+	width: 350px;
+}
+.item_full {
+	display: block;
+	width: 700px;
+}
+
+.code {
+	padding: 10px;
+	background-color: #c7c7c7;
+}
+
+.description {
+	font-size: 18px;
+	font-weight: bold;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "simp-select",
-	"version": "1.0.16",
+	"version": "1.0.18",
 	"description": "simp-select - this plugin replaces the select",
 	"main": "dist/simpleSelect.js",
 	"types": "dist/simpleSelect.d.ts",

package/src/const/simpleSelection.const.ts

@@ -7,7 +7,7 @@ export const simpleSelectLocale: ISimpleSelectLocale = {
   selected: 'Selected:',
   all: 'all',
   ok: 'Ok',
-  cansel: 'Cansel',
+  cancel: 'Cancel',
   selectAll: 'Select all',
   resetAll: 'Reset all',
 };
@@ -19,6 +19,8 @@ export const simpleSelectionOptions: ISimpleSelectOptions = {
   countShowSelected: 3,
   isOnlyPlaceholder: false,
 
+  historyMaxSize: 0,
+
   isRemoveTop: false,
 
   isConfirmInMulti: false,

package/src/demo/index.html

@@ -45,6 +45,26 @@
 <div id="app"></div>
 
 <div class="items">
+	<div class="item">
+		<select
+		        multiple
+		        data-simple-placeholder="custom width float"
+		        data-simple-float-width="1000"
+		        >
+			<option value="custom-1">custom float 1</option>
+			<option value="custom-2">custom float 2</option>
+		</select>
+	</div>
+	<div class="item">
+		<select
+		        multiple
+		        data-simple-placeholder="none float"
+		        data-simple-float-none="true"
+		        >
+			<option value="custom-none-1">none float 1</option>
+			<option value="custom-none-2">none float 2</option>
+		</select>
+	</div>
 	<div class="item">
 		<select id="select_first"
 
@@ -279,12 +299,13 @@
     // // detectNative: () => {
     // //   return false;
     // // },
-    // callbackChangeSelect: (e, that) => {
-    //   console.group();
-    //   console.log(e);
-    //   console.log(that);
-    //   console.groupEnd();
-    // },
+    historyMaxSize: 2,
+    callbackChangeSelect: (e, that) => {
+      console.group();
+      // console.log(e);
+      console.log(that.history);
+      console.groupEnd();
+    },
 
     // isUp: true,
     // sepChars: ',',

package/src/simpleSelect.ts

@@ -79,6 +79,19 @@ export default class SimpleSelect {
   createMethods(select: SimpleSelectItem) {
     const self = this;
     return {
+      getHistory: () => select.history,
+      getHistoryLast: () => {
+        if (select.history.length) {
+          return select.history[select.history.length - 1];
+        }
+        return null;
+      },
+      getHistoryFirst: () => {
+        if (select.history.length) {
+          return select.history[0];
+        }
+        return null;
+      },
       getNativeSelect: () => select.getSelect(),
       reload() {
         self.rebuild(select);

package/src/simpleSelectItem.ts

@@ -1,5 +1,5 @@
 import { IItemLocalOptions, ISimpleSelectOptions } from './types/simpleSelect.types';
-import { IOptionItems } from './types/item.types';
+import { IHistoryItem, IOptionItems } from './types/item.types';
 import {
   compareObj,
   getCreateListItem,
@@ -27,6 +27,8 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
 
   timeoutDebounceId: NodeJS.Timeout | null = null;
 
+  history: IHistoryItem[] = [];
+
   constructor(select: HTMLSelectElement, options: ISimpleSelectOptions, localOptions: IItemLocalOptions) {
     super(select, options, localOptions);
 
@@ -189,7 +191,12 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
       if (!option || option.disabled) {
         return;
       }
-      option.selected = item.dataset[toCamelCase('sel-opt-checked')] === 'true';
+      const isSelected = item.dataset[toCamelCase('sel-opt-checked')] === 'true';
+
+      if (isSelected !== option.selected) {
+        this.addHistory(option, isSelected);
+      }
+      option.selected = isSelected;
     });
     this.state.setState('isOpen', false);
     this.triggerInit();
@@ -255,6 +262,20 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
     }
   }
 
+  addHistory(option: HTMLOptionElement, isCheck: boolean) {
+    if (this.options.historyMaxSize > 0) {
+      this.history.push({
+        value: option.value,
+        text: option.innerHTML,
+        selected: isCheck,
+        indexOption: option.index,
+      });
+      if (this.history.length > this.options.historyMaxSize) {
+        this.history = this.history.slice(this.history.length - this.options.historyMaxSize);
+      }
+    }
+  }
+
   changeClickItem(item: HTMLLIElement) {
     if (item) {
       const pos = Number(item.dataset[toCamelCase('sel-position')]) || 0;
@@ -264,7 +285,9 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
           if (this.options.isConfirmInMulti || this.isFloatWidth) {
             this.changeClickItemDom(item);
           } else {
-            option.selected = !option.selected;
+            const nextSelected = !option.selected;
+            option.selected = nextSelected;
+            this.addHistory(option, nextSelected);
             this.changeClickItemDom(item);
             this.createList();
             this.multiDebounceChange();
@@ -272,6 +295,7 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
         } else {
           // option.selected = !option.selected;
           option.selected = true;
+          this.addHistory(option, true);
           this.createList();
           this.state.setState('isOpen', false);
           this.triggerInit();

package/src/simpleSelectItemDOM.ts

@@ -55,6 +55,8 @@ export class SimpleSelectItemDOM {
 
   elemTitle!: HTMLDivElement; // not native
 
+  confirmWrap: HTMLElement | null = null; // not native
+
   confirmOk: HTMLButtonElement | null = null; // not native
 
   confirmNo: HTMLButtonElement | null = null; // not native
@@ -171,6 +173,17 @@ export class SimpleSelectItemDOM {
       this.options.isRemoveTop = ifTrueDataAttr(this.$select.getAttribute('data-simple-remove-top'));
     }
 
+    if (this.$select.hasAttribute('data-simple-float-none')) {
+      this.isFloatWidth = false;
+      this.options.floatWidth = 0;
+    }
+    if (this.$select.hasAttribute('data-simple-float-width')) {
+      const newWidth = Number(this.$select.dataset[toCamelCase('simple-float-width')]);
+      if (newWidth) {
+        this.options.floatWidth = newWidth;
+      }
+    }
+
     if (this.$select.hasAttribute('data-simple-always-open')) {
       this.options.isAlwaysOpen = ifTrueDataAttr(this.$select.getAttribute('data-simple-always-open'));
 
@@ -202,8 +215,14 @@ export class SimpleSelectItemDOM {
       const cls = getClass('float', true);
       if (val) {
         this.elemWrap.classList.add(cls);
+        if (!document.body.classList.contains(this.bodyOpenClass) && this.state.getState('isOpen')) {
+          document.body.classList.add(this.bodyOpenClass);
+        }
       } else {
         this.elemWrap.classList.remove(cls);
+        if (document.body.classList.contains(this.bodyOpenClass)) {
+          document.body.classList.remove(this.bodyOpenClass);
+        }
       }
     });
   }
@@ -369,16 +388,16 @@ export class SimpleSelectItemDOM {
   }
 
   private createIsConfirmInMultiHTML() {
-    const confirm = document.createElement('div');
+    this.confirmWrap = document.createElement('div');
 
     const classesItem = getClass('bottom_control');
     this.confirmOk = createButton();
     this.confirmNo = createButton();
-    confirm.appendChild(this.confirmOk);
-    confirm.appendChild(this.confirmNo);
+    this.confirmWrap.appendChild(this.confirmOk);
+    this.confirmWrap.appendChild(this.confirmNo);
 
     this.confirmOk.innerHTML = this.options.locale.ok;
-    this.confirmNo.innerHTML = this.options.locale.cansel;
+    this.confirmNo.innerHTML = this.options.locale.cancel;
 
     this.confirmOk.className = `${classesItem} ${getClass('ok', true, classesItem)}`;
     this.confirmNo.className = `${classesItem} ${getClass('no', true, classesItem)}`;
@@ -387,9 +406,9 @@ export class SimpleSelectItemDOM {
     if (!this.options.isConfirmInMulti) {
       classes += ` ${getClass('hide', true, classes)}`;
     }
-    confirm.className = classes;
+    this.confirmWrap.className = classes;
 
-    this.elemDropDown?.appendChild(confirm);
+    this.elemDropDown?.appendChild(this.confirmWrap);
   }
 
   private createTitleHTML() {

package/src/style.css

@@ -324,7 +324,10 @@
 	bottom: 0;
 }
 .SimpleSel__bottom_controls--hide {
-	display: none !important;
+	display: none;
+}
+.SimpleSel--float .SimpleSel__bottom_controls--hide{
+	display: flex;
 }
 .SimpleSel__bottom_control--hide {
 	display: none;

package/src/types/item.types.ts

@@ -24,3 +24,10 @@ export interface ICreateLiReturn {
 }
 
 export type selectorType = string | HTMLSelectElement | NodeListOf<HTMLSelectElement> | HTMLSelectElement[];
+
+export interface IHistoryItem {
+  value: string;
+  text: string;
+  selected: boolean;
+  indexOption: number;
+}

package/src/types/simpleSelect.types.ts

@@ -7,7 +7,7 @@ export interface ISimpleSelectLocale {
   selected: string;
   all: string;
   ok: string;
-  cansel: string;
+  cancel: string;
 
   resetAll: string;
   selectAll: string;
@@ -32,6 +32,8 @@ export interface ISimpleSelectOptions {
 
   sepChars: string;
 
+  historyMaxSize: number;
+
   selectAll: boolean;
   selectAllAfterClose: boolean;
   resetAll: boolean;