simp-select 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -1
- package/.babelrc +0 -3
- package/.browserslistrc +0 -3
- package/.eslintignore +0 -4
- package/.eslintrc +0 -29
- package/src/demo/index.html +0 -256
- package/src/simpleSelect.ts +0 -152
- package/src/simpleSelectItem.ts +0 -535
- package/src/simpleSelectItemDOM.ts +0 -608
- package/src/style.css +0 -413
- package/src/utils/simpleSelection.utils.ts +0 -66
- package/src/utils/store.ts +0 -60
- package/tsconfig.json +0 -16
- package/webpack.config.js +0 -79
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "simp-select",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "simp-select - this plugin replaces the select",
|
|
5
5
|
"main": "dist/simpleSelect.js",
|
|
6
6
|
"types": "dist/simpleSelect.d.ts",
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
"dev": "webpack --env development --watch",
|
|
11
11
|
"build": "webpack --env production"
|
|
12
12
|
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"src/const",
|
|
16
|
+
"src/types"
|
|
17
|
+
],
|
|
13
18
|
"repository": {
|
|
14
19
|
"type": "git",
|
|
15
20
|
"url": "https://github.com/yura-brd/SimpSelect"
|
package/.babelrc
DELETED
package/.browserslistrc
DELETED
package/.eslintignore
DELETED
package/.eslintrc
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"root": true,
|
|
3
|
-
"parser": "@typescript-eslint/parser",
|
|
4
|
-
"extends": [
|
|
5
|
-
"airbnb-base",
|
|
6
|
-
"airbnb-typescript/base",
|
|
7
|
-
"plugin:@typescript-eslint/eslint-recommended",
|
|
8
|
-
"plugin:@typescript-eslint/recommended"
|
|
9
|
-
],
|
|
10
|
-
"rules": {
|
|
11
|
-
"no-console": "off",
|
|
12
|
-
"no-param-reassign": "off",
|
|
13
|
-
"no-plusplus": "off",
|
|
14
|
-
"@typescript-eslint/no-this-alias": "off",
|
|
15
|
-
"@typescript-eslint/ban-ts-comment": "off",
|
|
16
|
-
"import/no-cycle": "off",
|
|
17
|
-
"import/prefer-default-export": "off",
|
|
18
|
-
"class-methods-use-this": "off",
|
|
19
|
-
"max-len": ["error", { "code": 140 }],
|
|
20
|
-
"@typescript-eslint/no-unused-vars": "off",
|
|
21
|
-
"@typescript-eslint/naming-convention": "off"
|
|
22
|
-
},
|
|
23
|
-
"plugins": [
|
|
24
|
-
"@typescript-eslint"
|
|
25
|
-
],
|
|
26
|
-
"parserOptions": {
|
|
27
|
-
"project": "./tsconfig.json"
|
|
28
|
-
}
|
|
29
|
-
}
|
package/src/demo/index.html
DELETED
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport"
|
|
6
|
-
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
7
|
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
|
-
<title>Document</title>
|
|
9
|
-
|
|
10
|
-
<link rel="stylesheet" href="../style.css" />
|
|
11
|
-
|
|
12
|
-
<script src="../simpleSelect.js"></script>
|
|
13
|
-
|
|
14
|
-
</head>
|
|
15
|
-
|
|
16
|
-
<style>
|
|
17
|
-
|
|
18
|
-
#app {
|
|
19
|
-
/* temp*/
|
|
20
|
-
width: 250px;
|
|
21
|
-
margin: 0 auto;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
#app {
|
|
25
|
-
margin-bottom: 30px;
|
|
26
|
-
border-bottom: 1px solid;
|
|
27
|
-
text-align: center;
|
|
28
|
-
padding-bottom: 10px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.items {
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-wrap: wrap;
|
|
34
|
-
justify-content: center;
|
|
35
|
-
gap: 10px;
|
|
36
|
-
margin: 20px auto;
|
|
37
|
-
max-width: 600px;
|
|
38
|
-
}
|
|
39
|
-
.item {
|
|
40
|
-
width: 250px;
|
|
41
|
-
}
|
|
42
|
-
</style>
|
|
43
|
-
<body>
|
|
44
|
-
<div id="app"></div>
|
|
45
|
-
|
|
46
|
-
<div class="items">
|
|
47
|
-
<div class="item">
|
|
48
|
-
<select id="select_first"
|
|
49
|
-
disabled
|
|
50
|
-
multiple>
|
|
51
|
-
<option value="a1">a 1</option>
|
|
52
|
-
<option value="a2">a 2</option>
|
|
53
|
-
<option value="a3">a 3</option>
|
|
54
|
-
<option value="a4">a 4</option>
|
|
55
|
-
<option value="a5">a 5</option>
|
|
56
|
-
</select>
|
|
57
|
-
</div>
|
|
58
|
-
<div class="item">
|
|
59
|
-
<select multiple
|
|
60
|
-
data-simple-placeholder="custom placeholder"
|
|
61
|
-
data-simple-is-confirm="true"
|
|
62
|
-
data-simple-count-shows-selected="3">
|
|
63
|
-
<option value="a1"
|
|
64
|
-
data-simple-html-before="<span>|before| </span>"
|
|
65
|
-
data-simple-html-after="<span> |after|</div>"
|
|
66
|
-
>b 1</option>
|
|
67
|
-
<option value="a22" disabled="disabled">b 2 dis</option>
|
|
68
|
-
<option value="a3">b 3</option>
|
|
69
|
-
<option value="a4">b 4</option>
|
|
70
|
-
<option value="a5">b 5</option>
|
|
71
|
-
</select>
|
|
72
|
-
</div>
|
|
73
|
-
<div class="item" >
|
|
74
|
-
<select id="select_second"
|
|
75
|
-
data-simple-is-confirm="false"
|
|
76
|
-
|
|
77
|
-
data-simple-reset-all="false"
|
|
78
|
-
data-simple-select-all="true"
|
|
79
|
-
data-simple-item-html-before="<span>before</span>"
|
|
80
|
-
multiple data-simple-debounce-time="1000">
|
|
81
|
-
<optgroup label="Группа 1">
|
|
82
|
-
<option value="1.1">multiple Опция 1.1</option>
|
|
83
|
-
</optgroup>
|
|
84
|
-
<optgroup label="Группа 2">
|
|
85
|
-
<option value="2.1">multiple Опция 2.1</option>
|
|
86
|
-
<option value="2.2">multiple Опция 2.2</option>
|
|
87
|
-
</optgroup>
|
|
88
|
-
<optgroup label="Группа 3" disabled>
|
|
89
|
-
<option value="3.1">multiple Опция 3.1</option>
|
|
90
|
-
<option value="3.2">multiple Опция 3.2</option>
|
|
91
|
-
<option value="3.3">multiple Опция 3.3</option>
|
|
92
|
-
</optgroup>
|
|
93
|
-
</select>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="item">
|
|
97
|
-
<select
|
|
98
|
-
data-simple-show-checkbox="true"
|
|
99
|
-
class="color_red"
|
|
100
|
-
data-simple-add-classes="class1"
|
|
101
|
-
|
|
102
|
-
data-simple-select-search="false"
|
|
103
|
-
>
|
|
104
|
-
<optgroup label="Группа 1">
|
|
105
|
-
<option value="1">Опция 1.1</option>
|
|
106
|
-
</optgroup>
|
|
107
|
-
<optgroup label="Группа 2">
|
|
108
|
-
<option value="1">Опция 2.1</option>
|
|
109
|
-
<option value="1">Опция 2.2</option>
|
|
110
|
-
</optgroup>
|
|
111
|
-
<optgroup label="Группа 3" disabled>
|
|
112
|
-
<option value="1">Опция 3.1</option>
|
|
113
|
-
<option value="1">Опция 3.2</option>
|
|
114
|
-
<option value="1">Опция 3.3</option>
|
|
115
|
-
</optgroup>
|
|
116
|
-
</select>
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
<select
|
|
120
|
-
data-simple-add-classes="class1 class2"
|
|
121
|
-
data-simple-item-html-before="<div>before</div>"
|
|
122
|
-
data-simple-item-html-after="<div>after</div>"
|
|
123
|
-
data-simple-select-search-dropdown="true"
|
|
124
|
-
data-simple-up="true"
|
|
125
|
-
>
|
|
126
|
-
<option>Опция 5.1</option>
|
|
127
|
-
<option>Опция 5.2</option>
|
|
128
|
-
</select>
|
|
129
|
-
|
|
130
|
-
<!--
|
|
131
|
-
|
|
132
|
-
<select
|
|
133
|
-
data-simple-select-search
|
|
134
|
-
data-simple-select-search-dropdown
|
|
135
|
-
data-simple-count-shows-selected="3"
|
|
136
|
-
data-simple-is-confirm="true" // only multiselect
|
|
137
|
-
data-simple-debounce-time // only multiselect
|
|
138
|
-
data-simple-placeholder="text"
|
|
139
|
-
data-simple-reset-all="true" // only multiselect
|
|
140
|
-
data-simple-select-all="true" // only multiselect
|
|
141
|
-
data-simple-show-checkbox="true" // only not multiselect
|
|
142
|
-
|
|
143
|
-
data-simple-item-html-before="<div>before</div>"
|
|
144
|
-
data-simple-item-html-after="<div>after</div>"
|
|
145
|
-
data-simple-add-classes="class1 class2"
|
|
146
|
-
|
|
147
|
-
data-simple-float-width="1000"
|
|
148
|
-
data-simple-up="true"
|
|
149
|
-
|
|
150
|
-
></select>
|
|
151
|
-
-->
|
|
152
|
-
<!--
|
|
153
|
-
<div class="wrapper">
|
|
154
|
-
<select></select>
|
|
155
|
-
<div class="wrapper__top">
|
|
156
|
-
<div class="wrapper__top_body"></div>
|
|
157
|
-
*? <div class="wrapper__search"></div>
|
|
158
|
-
</div>
|
|
159
|
-
* <div class="wrapper__body">
|
|
160
|
-
? <div class="wrapper__search"></div>
|
|
161
|
-
? <div class="wrapper__setting"></div>
|
|
162
|
-
<div class="wrapper__list_items">
|
|
163
|
-
тут или список или группа списков
|
|
164
|
-
</div>
|
|
165
|
-
? <div class="wrapper__setting_bottom"></div>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
-->
|
|
169
|
-
</div>
|
|
170
|
-
|
|
171
|
-
<script>
|
|
172
|
-
|
|
173
|
-
const sel = new SimpleSelect('select', {
|
|
174
|
-
callbackOpen: (item) => {
|
|
175
|
-
console.log('open', item);
|
|
176
|
-
},
|
|
177
|
-
callbackClose: (item) => {
|
|
178
|
-
console.log('close', item);
|
|
179
|
-
},
|
|
180
|
-
callbackDestroy: (item) => {
|
|
181
|
-
console.log('callbackDestroy', item);
|
|
182
|
-
},
|
|
183
|
-
// detectNative: () => {
|
|
184
|
-
// return false;
|
|
185
|
-
// },
|
|
186
|
-
callbackChangeSelect: (e, that) => {
|
|
187
|
-
console.group();
|
|
188
|
-
console.log(e);
|
|
189
|
-
console.log(that);
|
|
190
|
-
console.groupEnd();
|
|
191
|
-
},
|
|
192
|
-
|
|
193
|
-
// isUp: true,
|
|
194
|
-
// sepChars: ',',
|
|
195
|
-
// // changeBodyLi: (liBody:HTMLDivElement, option: HTMLOptionElement) => {
|
|
196
|
-
// return liBody
|
|
197
|
-
// }
|
|
198
|
-
// debounceTime: 2000
|
|
199
|
-
})
|
|
200
|
-
// @ts-ignore
|
|
201
|
-
window['sel'] = sel;
|
|
202
|
-
|
|
203
|
-
setTimeout(() => {
|
|
204
|
-
console.log('first', sel.getSelectFirst());
|
|
205
|
-
|
|
206
|
-
const second = document.getElementById('select_second');
|
|
207
|
-
|
|
208
|
-
const id = second.getAttribute('data-simple-select-init');
|
|
209
|
-
|
|
210
|
-
console.log('by id', sel.getSelectById(id));
|
|
211
|
-
}, 1500)
|
|
212
|
-
|
|
213
|
-
const app = document.querySelector('#app')
|
|
214
|
-
const select = document.createElement('select');
|
|
215
|
-
select.innerHTML = '<option value="1">1</option><option value="2">2</option>'
|
|
216
|
-
app.innerHTML = `
|
|
217
|
-
<div>
|
|
218
|
-
<select class="addSelect">
|
|
219
|
-
<option selected>new option 0</option>
|
|
220
|
-
<option value='1'>new option</option>
|
|
221
|
-
<option value='2'>new option2</option>
|
|
222
|
-
<option value='3'>new option3</option>
|
|
223
|
-
<select>
|
|
224
|
-
</div>
|
|
225
|
-
`
|
|
226
|
-
app.append(select);
|
|
227
|
-
const sel3 = new SimpleSelect(select)
|
|
228
|
-
window['sel3'] = sel3;
|
|
229
|
-
|
|
230
|
-
setTimeout(() => {
|
|
231
|
-
const sel2 = new SimpleSelect('.addSelect', {
|
|
232
|
-
locale: {
|
|
233
|
-
noSearch: 'Не найдено: ',
|
|
234
|
-
searchText: 'Поиск',
|
|
235
|
-
title: 'Выбрать',
|
|
236
|
-
selected: 'Выбрано:',
|
|
237
|
-
all: 'все',
|
|
238
|
-
cansel: 'Отмена',
|
|
239
|
-
ok: 'OK',
|
|
240
|
-
resetAll: 'reset all',
|
|
241
|
-
selectAll: 'select all'
|
|
242
|
-
}
|
|
243
|
-
})
|
|
244
|
-
window['sel2'] = sel2;
|
|
245
|
-
}, 500)
|
|
246
|
-
|
|
247
|
-
// setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
|
|
248
|
-
|
|
249
|
-
</script>
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
</body>
|
|
256
|
-
</html>
|
package/src/simpleSelect.ts
DELETED
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
import { ISimpleSelectOptions, ISimpleSelectProps } from './types/simpleSelect.types';
|
|
2
|
-
import { selectorType } from './types/item.types';
|
|
3
|
-
|
|
4
|
-
import { nameMark, nameSelect, simpleSelectionOptions } from './const/simpleSelection.const';
|
|
5
|
-
import { createDataAttr, toCamelCase } from './utils/simpleSelection.utils';
|
|
6
|
-
import { SimpleSelectItem } from './simpleSelectItem';
|
|
7
|
-
import './style.css';
|
|
8
|
-
|
|
9
|
-
export default class SimpleSelect {
|
|
10
|
-
callCount = Date.now();
|
|
11
|
-
|
|
12
|
-
countInit = 0;
|
|
13
|
-
|
|
14
|
-
// $selects: HTMLSelectElement[] = [];
|
|
15
|
-
$selects: SimpleSelectItem[] = [];
|
|
16
|
-
|
|
17
|
-
options!: ISimpleSelectOptions;
|
|
18
|
-
|
|
19
|
-
nameMarkTransform = toCamelCase(nameMark);
|
|
20
|
-
|
|
21
|
-
dataNameMark = createDataAttr(nameMark);
|
|
22
|
-
|
|
23
|
-
isNative!: boolean;
|
|
24
|
-
|
|
25
|
-
constructor(selector: selectorType, options?: ISimpleSelectProps) {
|
|
26
|
-
if (!selector) {
|
|
27
|
-
selector = 'select';
|
|
28
|
-
}
|
|
29
|
-
// this.$selects = Array.from(document.querySelectorAll(selector));
|
|
30
|
-
|
|
31
|
-
this.options = {
|
|
32
|
-
...simpleSelectionOptions,
|
|
33
|
-
...options,
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
if (typeof selector === 'string') {
|
|
37
|
-
this.init(Array.from(document.querySelectorAll(selector)));
|
|
38
|
-
} else if (selector instanceof HTMLSelectElement) {
|
|
39
|
-
this.init([selector]);
|
|
40
|
-
} else if (selector instanceof NodeList) {
|
|
41
|
-
this.init(Array.from(selector));
|
|
42
|
-
} else if (Array.isArray(selector)) {
|
|
43
|
-
this.init(selector);
|
|
44
|
-
} else {
|
|
45
|
-
console.warn('Wrong selector: ', selector);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
detectMobile() {
|
|
50
|
-
if (this.options.detectNative) {
|
|
51
|
-
this.isNative = this.options.detectNative();
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
55
|
-
// @ts-ignore
|
|
56
|
-
const ua = navigator.userAgent || navigator.vendor || window.opera;
|
|
57
|
-
|
|
58
|
-
let res = false;
|
|
59
|
-
// Checks for iOs, Android, Blackberry, Opera Mini, and Windows mobile devices
|
|
60
|
-
for (let i = 0; i < this.options.nativeOnDevice.length; i++) {
|
|
61
|
-
if (ua.toString().toLowerCase().indexOf(this.options.nativeOnDevice[i].toLowerCase()) > 0) {
|
|
62
|
-
if (this.options.nativeOnDevice[i]) {
|
|
63
|
-
res = true;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
this.isNative = res;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
private init(selects: HTMLSelectElement[]) {
|
|
71
|
-
this.detectMobile();
|
|
72
|
-
selects.forEach(($select) => {
|
|
73
|
-
this.build($select);
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
createMethods(select: SimpleSelectItem) {
|
|
78
|
-
const self = this;
|
|
79
|
-
return {
|
|
80
|
-
getInstance: () => select.getSelect(),
|
|
81
|
-
reload() {
|
|
82
|
-
self.rebuild(select);
|
|
83
|
-
},
|
|
84
|
-
update() {
|
|
85
|
-
select.updateHTML();
|
|
86
|
-
},
|
|
87
|
-
detach() {
|
|
88
|
-
self.detach(select);
|
|
89
|
-
},
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
setMethods(select: SimpleSelectItem) {
|
|
94
|
-
// @ts-ignore
|
|
95
|
-
select.$select[nameSelect] = this.createMethods(select);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
setMethodsClear(select: SimpleSelectItem) {
|
|
99
|
-
// @ts-ignore
|
|
100
|
-
delete select.$select[nameSelect];
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
private build(select: HTMLSelectElement) {
|
|
104
|
-
const isProcessed = this.nameMarkTransform in select.dataset;
|
|
105
|
-
if (isProcessed) {
|
|
106
|
-
console.warn('This element has already been initialized', select);
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
this.countInit += 1;
|
|
111
|
-
const id = `${this.callCount}-${this.countInit}`;
|
|
112
|
-
select.setAttribute(this.dataNameMark, id);
|
|
113
|
-
// this.$selects.push(select);
|
|
114
|
-
|
|
115
|
-
const newSelect = new SimpleSelectItem(select, this.options, {
|
|
116
|
-
id, isNative: this.isNative,
|
|
117
|
-
});
|
|
118
|
-
this.$selects.push(newSelect);
|
|
119
|
-
this.setMethods(newSelect);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
private detach(itemSelect: SimpleSelectItem) {
|
|
123
|
-
itemSelect.detachItem();
|
|
124
|
-
|
|
125
|
-
itemSelect.$select.removeAttribute(this.dataNameMark);
|
|
126
|
-
this.setMethodsClear(itemSelect);
|
|
127
|
-
this.$selects = this.$selects.filter((item) => item !== itemSelect);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
public rebuild(selectsItems: SimpleSelectItem) {
|
|
131
|
-
const select = selectsItems.$select;
|
|
132
|
-
this.detach(selectsItems);
|
|
133
|
-
this.build(select);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
public getSelects() {
|
|
137
|
-
return this.$selects;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
public getSelectFirst() {
|
|
141
|
-
// return this.$selects[0];
|
|
142
|
-
return this.createMethods(this.$selects[0]);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
public getSelectById(id:string) {
|
|
146
|
-
const search = this.$selects.filter((item) => item.id === id)[0];
|
|
147
|
-
if (!search) {
|
|
148
|
-
return null;
|
|
149
|
-
}
|
|
150
|
-
return this.createMethods(search);
|
|
151
|
-
}
|
|
152
|
-
}
|