simp-select 1.0.5 → 1.0.7
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/.eslintignore +2 -1
- package/README.md +113 -0
- package/dist/const/simpleSelection.const.d.ts +1 -1
- package/dist/demo/index.html +63 -63
- package/dist/simpleSelect.d.ts +4 -3
- package/dist/simpleSelect.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/simpleSelect.types.d.ts +1 -0
- package/package.json +1 -1
- package/src/const/simpleSelection.const.ts +5 -4
- package/src/demo/index.html +89 -79
- package/src/polyfill.js +136 -0
- package/src/simpleSelect.ts +2 -1
- package/src/simpleSelectItem.ts +9 -8
- package/src/simpleSelectItemDOM.ts +52 -30
- package/src/style.css +3 -0
- package/src/types/simpleSelect.types.ts +1 -0
- package/src/utils/simpleSelection.utils.ts +13 -5
@@ -8,15 +8,16 @@ export const simpleSelectLocale: ISimpleSelectLocale = {
|
|
8
8
|
all: 'all',
|
9
9
|
ok: 'Ok',
|
10
10
|
cansel: 'Cansel',
|
11
|
-
|
12
11
|
selectAll: 'Select all',
|
13
12
|
resetAll: 'Reset all',
|
14
13
|
};
|
15
14
|
export const simpleSelectionOptions: ISimpleSelectOptions = {
|
16
|
-
isSearch:
|
15
|
+
isSearch: false,
|
17
16
|
isSearchInDropdown: false,
|
18
17
|
|
19
|
-
countShowSelected:
|
18
|
+
countShowSelected: 3,
|
19
|
+
isOnlyPlaceholder: false,
|
20
|
+
|
20
21
|
isConfirmInMulti: false,
|
21
22
|
isConfirmInMultiOkClickOutside: false,
|
22
23
|
|
@@ -35,7 +36,7 @@ export const simpleSelectionOptions: ISimpleSelectOptions = {
|
|
35
36
|
|
36
37
|
};
|
37
38
|
|
38
|
-
export const nameSelect = '
|
39
|
+
export const nameSelect = 'SimpSelect';
|
39
40
|
const markPrefix = 'simple-select-';
|
40
41
|
export const nameMark = `${markPrefix}init`;
|
41
42
|
|
package/src/demo/index.html
CHANGED
@@ -46,7 +46,9 @@
|
|
46
46
|
<div class="items">
|
47
47
|
<div class="item">
|
48
48
|
<select id="select_first"
|
49
|
-
|
49
|
+
|
50
|
+
data-simple-placeholder="Custom title"
|
51
|
+
data-simple-is-only-placeholder="true"
|
50
52
|
multiple>
|
51
53
|
<option value="a1">a 1</option>
|
52
54
|
<option value="a2">a 2</option>
|
@@ -95,6 +97,8 @@
|
|
95
97
|
|
96
98
|
<div class="item">
|
97
99
|
<select
|
100
|
+
|
101
|
+
data-simple-select-search-dropdown="true"
|
98
102
|
data-simple-show-checkbox="true"
|
99
103
|
class="color_red"
|
100
104
|
data-simple-add-classes="class1"
|
@@ -116,33 +120,37 @@
|
|
116
120
|
</select>
|
117
121
|
</div>
|
118
122
|
|
119
|
-
<
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
123
|
+
<div class="item">
|
124
|
+
<select
|
125
|
+
data-simple-add-classes="class1 class2"
|
126
|
+
data-simple-item-html-before="<div>before</div>"
|
127
|
+
data-simple-item-html-after="<div>after</div>"
|
128
|
+
data-simple-select-search-dropdown="true"
|
129
|
+
data-simple-up="true"
|
130
|
+
>
|
131
|
+
<option>Опция 5.1</option>
|
132
|
+
<option>Опция 5.2</option>
|
133
|
+
</select>
|
134
|
+
</div>
|
135
|
+
|
129
136
|
|
130
137
|
<!--
|
131
138
|
|
132
139
|
<select
|
133
|
-
data-simple-select-search
|
134
|
-
data-simple-select-search-dropdown
|
140
|
+
data-simple-select-search="true"
|
141
|
+
data-simple-select-search-dropdown="true"
|
142
|
+
data-simple-is-only-placeholder="true"
|
135
143
|
data-simple-count-shows-selected="3"
|
136
144
|
data-simple-is-confirm="true" // only multiselect
|
137
|
-
data-simple-debounce-time // only multiselect
|
145
|
+
data-simple-debounce-time="1000" // only multiselect
|
138
146
|
data-simple-placeholder="text"
|
139
147
|
data-simple-reset-all="true" // only multiselect
|
140
148
|
data-simple-select-all="true" // only multiselect
|
141
149
|
data-simple-show-checkbox="true" // only not multiselect
|
142
150
|
|
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"
|
151
|
+
!data-simple-item-html-before="<div>before</div>"
|
152
|
+
!data-simple-item-html-after="<div>after</div>"
|
153
|
+
!data-simple-add-classes="class1 class2"
|
146
154
|
|
147
155
|
data-simple-float-width="1000"
|
148
156
|
data-simple-up="true"
|
@@ -171,24 +179,24 @@
|
|
171
179
|
<script>
|
172
180
|
|
173
181
|
const sel = new SimpleSelect('select', {
|
174
|
-
callbackOpen: (item) => {
|
175
|
-
|
176
|
-
},
|
177
|
-
callbackClose: (item) => {
|
178
|
-
|
179
|
-
},
|
180
|
-
callbackDestroy: (item) => {
|
181
|
-
|
182
|
-
},
|
183
|
-
// detectNative: () => {
|
184
|
-
// return false;
|
182
|
+
// callbackOpen: (item) => {
|
183
|
+
// console.log('open', item);
|
184
|
+
// },
|
185
|
+
// callbackClose: (item) => {
|
186
|
+
// console.log('close', item);
|
187
|
+
// },
|
188
|
+
// callbackDestroy: (item) => {
|
189
|
+
// console.log('callbackDestroy', item);
|
190
|
+
// },
|
191
|
+
// // detectNative: () => {
|
192
|
+
// // return false;
|
193
|
+
// // },
|
194
|
+
// callbackChangeSelect: (e, that) => {
|
195
|
+
// console.group();
|
196
|
+
// console.log(e);
|
197
|
+
// console.log(that);
|
198
|
+
// console.groupEnd();
|
185
199
|
// },
|
186
|
-
callbackChangeSelect: (e, that) => {
|
187
|
-
console.group();
|
188
|
-
console.log(e);
|
189
|
-
console.log(that);
|
190
|
-
console.groupEnd();
|
191
|
-
},
|
192
200
|
|
193
201
|
// isUp: true,
|
194
202
|
// sepChars: ',',
|
@@ -198,54 +206,56 @@
|
|
198
206
|
// debounceTime: 2000
|
199
207
|
})
|
200
208
|
// @ts-ignore
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
`
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
209
|
+
// window['sel'] = sel;
|
210
|
+
//
|
211
|
+
// setTimeout(() => {
|
212
|
+
// console.log('first', sel.getSelectFirst());
|
213
|
+
//
|
214
|
+
// const second = document.getElementById('select_second');
|
215
|
+
//
|
216
|
+
// const id = second.getAttribute('data-simple-select-init');
|
217
|
+
//
|
218
|
+
// console.log('by id', sel.getSelectById(id));
|
219
|
+
// }, 1500)
|
220
|
+
//
|
221
|
+
// const app = document.querySelector('#app')
|
222
|
+
// const select = document.createElement('select');
|
223
|
+
// select.innerHTML = '<option value="1">1</option><option value="2">2</option>'
|
224
|
+
// app.innerHTML = `
|
225
|
+
// <div>
|
226
|
+
// <select class="addSelect">
|
227
|
+
// <option selected>new option 0</option>
|
228
|
+
// <option value='1'>new option</option>
|
229
|
+
// <option value='2'>new option2</option>
|
230
|
+
// <option value='3'>new option3</option>
|
231
|
+
// <select>
|
232
|
+
// </div>
|
233
|
+
// `
|
234
|
+
// app.append(select);
|
235
|
+
// const sel3 = new SimpleSelect(select)
|
236
|
+
// window['sel3'] = sel3;
|
237
|
+
//
|
238
|
+
// setTimeout(() => {
|
239
|
+
// const sel2 = new SimpleSelect('.addSelect', {
|
240
|
+
// locale: {
|
241
|
+
// noSearch: 'Не найдено: ',
|
242
|
+
// searchText: 'Поиск',
|
243
|
+
// title: 'Выбрать',
|
244
|
+
// selected: 'Выбрано:',
|
245
|
+
// all: 'все',
|
246
|
+
// cansel: 'Отмена',
|
247
|
+
// ok: 'OK',
|
248
|
+
// resetAll: 'reset all',
|
249
|
+
// selectAll: 'select all'
|
250
|
+
// }
|
251
|
+
// })
|
252
|
+
// window['sel2'] = sel2;
|
253
|
+
// }, 500)
|
246
254
|
|
247
255
|
// setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
|
248
256
|
|
257
|
+
|
258
|
+
|
249
259
|
</script>
|
250
260
|
|
251
261
|
|
package/src/polyfill.js
ADDED
@@ -0,0 +1,136 @@
|
|
1
|
+
if (!Array.from) {
|
2
|
+
Array.from = (function () {
|
3
|
+
var toStr = Object.prototype.toString;
|
4
|
+
var isCallable = function (fn) {
|
5
|
+
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
|
6
|
+
};
|
7
|
+
var toInteger = function (value) {
|
8
|
+
var number = Number(value);
|
9
|
+
if (isNaN(number)) { return 0; }
|
10
|
+
if (number === 0 || !isFinite(number)) { return number; }
|
11
|
+
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
12
|
+
};
|
13
|
+
var maxSafeInteger = Math.pow(2, 53) - 1;
|
14
|
+
var toLength = function (value) {
|
15
|
+
var len = toInteger(value);
|
16
|
+
return Math.min(Math.max(len, 0), maxSafeInteger);
|
17
|
+
};
|
18
|
+
|
19
|
+
return function from(arrayLike/*, mapFn, thisArg */) {
|
20
|
+
var C = this;
|
21
|
+
|
22
|
+
var items = Object(arrayLike);
|
23
|
+
|
24
|
+
if (arrayLike == null) {
|
25
|
+
throw new TypeError('Array.from requires an array-like object - not null or undefined');
|
26
|
+
}
|
27
|
+
|
28
|
+
var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
|
29
|
+
var T;
|
30
|
+
if (typeof mapFn !== 'undefined') {
|
31
|
+
if (!isCallable(mapFn)) {
|
32
|
+
throw new TypeError('Array.from: when provided, the second argument must be a function');
|
33
|
+
}
|
34
|
+
|
35
|
+
if (arguments.length > 2) {
|
36
|
+
T = arguments[2];
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
var len = toLength(items.length);
|
41
|
+
|
42
|
+
|
43
|
+
var A = isCallable(C) ? Object(new C(len)) : new Array(len);
|
44
|
+
|
45
|
+
var k = 0;
|
46
|
+
var kValue;
|
47
|
+
while (k < len) {
|
48
|
+
kValue = items[k];
|
49
|
+
if (mapFn) {
|
50
|
+
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
|
51
|
+
} else {
|
52
|
+
A[k] = kValue;
|
53
|
+
}
|
54
|
+
k += 1;
|
55
|
+
}
|
56
|
+
A.length = len;
|
57
|
+
return A;
|
58
|
+
};
|
59
|
+
}());
|
60
|
+
}
|
61
|
+
|
62
|
+
if (!Array.prototype.forEach) {
|
63
|
+
Array.prototype.forEach = function (callback, thisArg) {
|
64
|
+
var T, k;
|
65
|
+
|
66
|
+
if (this == null) {
|
67
|
+
throw new TypeError(" this is null or not defined");
|
68
|
+
}
|
69
|
+
|
70
|
+
var O = Object(this);
|
71
|
+
|
72
|
+
var len = O.length >>> 0;
|
73
|
+
|
74
|
+
if (typeof callback !== "function") {
|
75
|
+
throw new TypeError(callback + " is not a function");
|
76
|
+
}
|
77
|
+
|
78
|
+
if (arguments.length > 1) {
|
79
|
+
T = thisArg;
|
80
|
+
}
|
81
|
+
|
82
|
+
k = 0;
|
83
|
+
|
84
|
+
while (k < len) {
|
85
|
+
var kValue;
|
86
|
+
|
87
|
+
if (k in O) {
|
88
|
+
kValue = O[k];
|
89
|
+
|
90
|
+
callback.call(T, kValue, k, O);
|
91
|
+
}
|
92
|
+
k++;
|
93
|
+
}
|
94
|
+
};
|
95
|
+
}
|
96
|
+
|
97
|
+
if (typeof window !== 'undefined' && window.NodeList && !NodeList.prototype.forEach) {
|
98
|
+
NodeList.prototype.forEach = function (callback, thisArg) {
|
99
|
+
thisArg = thisArg || window;
|
100
|
+
for (var i = 0; i < this.length; i++) {
|
101
|
+
callback.call(thisArg, this[i], i, this);
|
102
|
+
}
|
103
|
+
};
|
104
|
+
}
|
105
|
+
|
106
|
+
if (!Element.prototype.matches) {
|
107
|
+
Element.prototype.matches = Element.prototype.msMatchesSelector ||
|
108
|
+
Element.prototype.webkitMatchesSelector;
|
109
|
+
}
|
110
|
+
|
111
|
+
if (!Element.prototype.closest) {
|
112
|
+
Element.prototype.closest = function(s) {
|
113
|
+
var el = this;
|
114
|
+
|
115
|
+
do {
|
116
|
+
if (Element.prototype.matches.call(el, s)) return el;
|
117
|
+
el = el.parentElement || el.parentNode;
|
118
|
+
} while (el !== null && el.nodeType === 1);
|
119
|
+
return null;
|
120
|
+
};
|
121
|
+
}
|
122
|
+
|
123
|
+
(function () {
|
124
|
+
if ( typeof window.CustomEvent === "function" ) return false; //If not IE
|
125
|
+
|
126
|
+
function CustomEvent ( event, params ) {
|
127
|
+
params = params || { bubbles: false, cancelable: false, detail: undefined };
|
128
|
+
var evt = document.createEvent( 'CustomEvent' );
|
129
|
+
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
|
130
|
+
return evt;
|
131
|
+
}
|
132
|
+
|
133
|
+
CustomEvent.prototype = window.Event.prototype;
|
134
|
+
|
135
|
+
window.CustomEvent = CustomEvent;
|
136
|
+
})();
|
package/src/simpleSelect.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import { ISimpleSelectOptions, ISimpleSelectProps } from './types/simpleSelect.types';
|
2
2
|
import { selectorType } from './types/item.types';
|
3
|
+
import './polyfill.js';
|
3
4
|
|
4
5
|
import {
|
5
6
|
nameMark, nameSelect, simpleSelectionOptions,
|
@@ -79,7 +80,7 @@ export default class SimpleSelect {
|
|
79
80
|
createMethods(select: SimpleSelectItem) {
|
80
81
|
const self = this;
|
81
82
|
return {
|
82
|
-
|
83
|
+
getNativeSelect: () => select.getSelect(),
|
83
84
|
reload() {
|
84
85
|
self.rebuild(select);
|
85
86
|
},
|
package/src/simpleSelectItem.ts
CHANGED
@@ -54,7 +54,7 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
|
|
54
54
|
}
|
55
55
|
|
56
56
|
if (!this.isNative && this.options.floatWidth) {
|
57
|
-
this.mql = window.matchMedia(`(max-width: ${this.options.floatWidth}px)`);
|
57
|
+
this.mql = window.matchMedia(`screen and (max-width: ${this.options.floatWidth}px)`);
|
58
58
|
if (this.mql) {
|
59
59
|
// @ts-ignore
|
60
60
|
this.mql.onchange = this.handleResize;
|
@@ -67,16 +67,12 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
|
|
67
67
|
if (!val && this.options.isConfirmInMulti) {
|
68
68
|
this.createList();
|
69
69
|
}
|
70
|
-
if (val) {
|
70
|
+
if (!val) {
|
71
71
|
if (this.elemInputSearch) {
|
72
72
|
this.elemInputSearch.value = '';
|
73
|
+
this.state.setState('filterStr', '');
|
73
74
|
}
|
74
75
|
}
|
75
|
-
// if (!val) {
|
76
|
-
// if (this.options.isConfirmInMulti) {
|
77
|
-
// this.triggerInit();
|
78
|
-
// }
|
79
|
-
// }
|
80
76
|
});
|
81
77
|
|
82
78
|
this.state.subscribe('filterStr', (val: string) => {
|
@@ -381,6 +377,11 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
|
|
381
377
|
this.options.callbackOpen(this);
|
382
378
|
}
|
383
379
|
this.countOpen++;
|
380
|
+
if (this.elemDropDown) {
|
381
|
+
setTimeout(() => {
|
382
|
+
this.elemDropDown!.scrollTop = 0;
|
383
|
+
}, 10);
|
384
|
+
}
|
384
385
|
} else {
|
385
386
|
this.state.setState('filterList', '');
|
386
387
|
this.elemWrap.classList.remove('SimpleSel--open');
|
@@ -444,7 +445,7 @@ export class SimpleSelectItem extends SimpleSelectItemDOM {
|
|
444
445
|
items.forEach((group) => {
|
445
446
|
let isShowGroup = false;
|
446
447
|
group.items.forEach((item) => {
|
447
|
-
if (item.title.toLowerCase().
|
448
|
+
if (item.title.toLowerCase().indexOf(val) >= 0) {
|
448
449
|
isShowGroup = true;
|
449
450
|
item.isShowFilter = true;
|
450
451
|
} else {
|
@@ -111,9 +111,8 @@ export class SimpleSelectItemDOM {
|
|
111
111
|
this.options.changeBodyLi = options.changeBodyLi;
|
112
112
|
}
|
113
113
|
|
114
|
-
|
115
|
-
|
116
|
-
this.options.isConfirmInMulti = dataConfirm === '1' || dataConfirm === 'true';
|
114
|
+
if (this.isMulti && this.$select.hasAttribute('data-simple-is-confirm')) {
|
115
|
+
this.options.isConfirmInMulti = ifTrueDataAttr(this.$select.getAttribute('data-simple-is-confirm'));
|
117
116
|
}
|
118
117
|
|
119
118
|
this.optionOverride();
|
@@ -131,10 +130,8 @@ export class SimpleSelectItemDOM {
|
|
131
130
|
this.titlePlaceholder = this.options.locale.title;
|
132
131
|
}
|
133
132
|
|
134
|
-
|
135
|
-
|
136
|
-
const resReset = this.$select.dataset[dataResetAll];
|
137
|
-
this.options.resetAll = !(resReset === 'false' || resReset === '0');
|
133
|
+
if (this.$select.hasAttribute('data-simple-reset-all')) {
|
134
|
+
this.options.resetAll = ifTrueDataAttr(this.$select.getAttribute('data-simple-reset-all'));
|
138
135
|
}
|
139
136
|
// const dataSelect = toCamelCase('simple-select-all');
|
140
137
|
// if (dataSelect in this.$select.dataset) {
|
@@ -165,6 +162,10 @@ export class SimpleSelectItemDOM {
|
|
165
162
|
if (this.$select.hasAttribute('data-simple-up')) {
|
166
163
|
this.options.isUp = ifTrueDataAttr(this.$select.getAttribute('data-simple-up'));
|
167
164
|
}
|
165
|
+
|
166
|
+
if (this.$select.hasAttribute('data-simple-is-only-placeholder')) {
|
167
|
+
this.options.isOnlyPlaceholder = ifTrueDataAttr(this.$select.getAttribute('data-simple-is-only-placeholder'));
|
168
|
+
}
|
168
169
|
}
|
169
170
|
|
170
171
|
initDom() {
|
@@ -184,7 +185,11 @@ export class SimpleSelectItemDOM {
|
|
184
185
|
this.state.subscribe('isFloat', (val: boolean) => {
|
185
186
|
this.isFloatWidth = val;
|
186
187
|
const cls = getClass('float', true);
|
187
|
-
|
188
|
+
if (val) {
|
189
|
+
this.elemWrap.classList.add(cls);
|
190
|
+
} else {
|
191
|
+
this.elemWrap.classList.remove(cls);
|
192
|
+
}
|
188
193
|
});
|
189
194
|
}
|
190
195
|
|
@@ -192,7 +197,11 @@ export class SimpleSelectItemDOM {
|
|
192
197
|
const tabIndex = isOpen ? 0 : -1;
|
193
198
|
|
194
199
|
if (this.state.getState('isFloat')) {
|
195
|
-
|
200
|
+
if (isOpen) {
|
201
|
+
document.body.classList.add(this.bodyOpenClass);
|
202
|
+
} else {
|
203
|
+
document.body.classList.remove(this.bodyOpenClass);
|
204
|
+
}
|
196
205
|
}
|
197
206
|
|
198
207
|
if (this.elemInputSearch) {
|
@@ -224,7 +233,7 @@ export class SimpleSelectItemDOM {
|
|
224
233
|
this.elemTopBody.tabIndex = this.isDisabled ? -1 : 0;
|
225
234
|
|
226
235
|
this.createIcon();
|
227
|
-
this.elemTop.
|
236
|
+
this.elemTop.appendChild(this.elemTopBody);
|
228
237
|
let resClassesWrap = initClass;
|
229
238
|
if (this.options.isCloneClass) {
|
230
239
|
resClassesWrap += ` ${this.cloneClasses}`;
|
@@ -250,7 +259,7 @@ export class SimpleSelectItemDOM {
|
|
250
259
|
parentElement.replaceChild(this.elemWrap, this.$select);
|
251
260
|
this.elemWrap.appendChild(this.$select);
|
252
261
|
}
|
253
|
-
this.elemWrap.
|
262
|
+
this.elemWrap.appendChild(this.elemTop);
|
254
263
|
|
255
264
|
if (this.isNative) {
|
256
265
|
this.$select.classList.add(getClass('native', true, this.classSelectInit));
|
@@ -276,7 +285,8 @@ export class SimpleSelectItemDOM {
|
|
276
285
|
this.elemControl = document.createElement('div');
|
277
286
|
this.elemControl.classList.add(getClass('controls'));
|
278
287
|
|
279
|
-
this.elemDropDown.prepend(this.elemControl);
|
288
|
+
// this.elemDropDown.prepend(this.elemControl);
|
289
|
+
this.elemDropDown.insertBefore(this.elemControl, this.elemDropDown.childNodes[0]);
|
280
290
|
|
281
291
|
const classControl = getClass('control');
|
282
292
|
if (this.options.selectAll) {
|
@@ -285,7 +295,7 @@ export class SimpleSelectItemDOM {
|
|
285
295
|
|
286
296
|
this.elemSelectAll.innerHTML = `<span class="${getClass('select_all__icon')}"></span> ${this.options.locale.selectAll}`;
|
287
297
|
|
288
|
-
this.elemControl.
|
298
|
+
this.elemControl.appendChild(this.elemSelectAll);
|
289
299
|
}
|
290
300
|
|
291
301
|
if (this.options.resetAll) {
|
@@ -294,14 +304,14 @@ export class SimpleSelectItemDOM {
|
|
294
304
|
|
295
305
|
this.elemResetAll.innerHTML = `<span class="${getClass('reset_all__icon')}"></span> ${this.options.locale.resetAll}`;
|
296
306
|
|
297
|
-
this.elemControl.
|
307
|
+
this.elemControl.appendChild(this.elemResetAll);
|
298
308
|
}
|
299
309
|
}
|
300
310
|
|
301
311
|
private createIcon() {
|
302
312
|
const icon = document.createElement('span');
|
303
313
|
icon.className = getClass('icon');
|
304
|
-
this.elemTopBody.
|
314
|
+
this.elemTopBody.appendChild(icon);
|
305
315
|
}
|
306
316
|
|
307
317
|
private createDropDown() {
|
@@ -314,13 +324,13 @@ export class SimpleSelectItemDOM {
|
|
314
324
|
|
315
325
|
this.elemListBody.className = getClass('list');
|
316
326
|
|
317
|
-
this.elemWrap.
|
318
|
-
this.elemDropDown.
|
327
|
+
this.elemWrap.appendChild(this.elemDropDown);
|
328
|
+
this.elemDropDown.appendChild(this.elemListBody);
|
319
329
|
|
320
330
|
this.elemDropDownClose = createButton();
|
321
331
|
this.elemDropDownClose.classList.add(getClass('close'));
|
322
332
|
|
323
|
-
this.elemDropDown.
|
333
|
+
this.elemDropDown.appendChild(this.elemDropDownClose);
|
324
334
|
|
325
335
|
if (this.isMulti) {
|
326
336
|
this.createIsConfirmInMultiHTML();
|
@@ -334,8 +344,8 @@ export class SimpleSelectItemDOM {
|
|
334
344
|
const classesItem = getClass('bottom_control');
|
335
345
|
this.confirmOk = createButton();
|
336
346
|
this.confirmNo = createButton();
|
337
|
-
confirm.
|
338
|
-
confirm.
|
347
|
+
confirm.appendChild(this.confirmOk);
|
348
|
+
confirm.appendChild(this.confirmNo);
|
339
349
|
|
340
350
|
this.confirmOk.innerHTML = this.options.locale.ok;
|
341
351
|
this.confirmNo.innerHTML = this.options.locale.cansel;
|
@@ -349,22 +359,28 @@ export class SimpleSelectItemDOM {
|
|
349
359
|
}
|
350
360
|
confirm.className = classes;
|
351
361
|
|
352
|
-
this.elemDropDown?.
|
362
|
+
this.elemDropDown?.appendChild(confirm);
|
353
363
|
}
|
354
364
|
|
355
365
|
private createTitleHTML() {
|
356
366
|
if (!this.elemTitle) {
|
357
367
|
this.elemTitle = document.createElement('div');
|
358
|
-
|
359
|
-
this.
|
368
|
+
let classesTitle = getClass('title');
|
369
|
+
if (this.options.isOnlyPlaceholder) {
|
370
|
+
classesTitle += ` ${getClass('only-placeholder', true, classesTitle)}`;
|
371
|
+
}
|
372
|
+
this.elemTitle.className = classesTitle;
|
373
|
+
// this.elemTopBody.prepend(this.elemTitle);
|
374
|
+
this.elemTopBody.insertBefore(this.elemTitle, this.elemTopBody.childNodes[0]);
|
360
375
|
}
|
361
376
|
|
362
377
|
const itemsChecked = this.getChecked();
|
363
378
|
|
364
379
|
this.elemTop.title = '';
|
380
|
+
|
365
381
|
const isPlaceholder = !itemsChecked.length;
|
366
382
|
let title:string = this.titlePlaceholder;
|
367
|
-
if (itemsChecked.length) {
|
383
|
+
if (itemsChecked.length && !this.options.isOnlyPlaceholder) {
|
368
384
|
let attrTitle = '';
|
369
385
|
itemsChecked.forEach((item, index) => {
|
370
386
|
if (index !== 0) {
|
@@ -391,10 +407,15 @@ export class SimpleSelectItemDOM {
|
|
391
407
|
}
|
392
408
|
|
393
409
|
this.elemTitle.innerHTML = title;
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
410
|
+
if (isPlaceholder) {
|
411
|
+
this.elemTitle.classList.add('SimpleSel__title--placeholder');
|
412
|
+
this.elemTitle.classList.remove('SimpleSel__title--fill');
|
413
|
+
this.elemWrap.classList.remove(getClass('fill', true));
|
414
|
+
} else {
|
415
|
+
this.elemTitle.classList.remove('SimpleSel__title--placeholder');
|
416
|
+
this.elemTitle.classList.add('SimpleSel__title--fill');
|
417
|
+
this.elemWrap.classList.add(getClass('fill', true));
|
418
|
+
}
|
398
419
|
}
|
399
420
|
|
400
421
|
protected createListHTML() {
|
@@ -471,11 +492,12 @@ export class SimpleSelectItemDOM {
|
|
471
492
|
if (isSearchInDropdown) {
|
472
493
|
if (this.elemDropDown) {
|
473
494
|
this.elemInputSearch.className = `${className} ${getClass('dropdown', true, className)}`;
|
474
|
-
this.elemDropDown.prepend(this.elemInputSearch);
|
495
|
+
// this.elemDropDown.prepend(this.elemInputSearch);
|
496
|
+
this.elemDropDown.insertBefore(this.elemInputSearch, this.elemDropDown.childNodes[0]);
|
475
497
|
}
|
476
498
|
} else {
|
477
499
|
this.elemInputSearch.className = `${className} ${getClass('top', true, className)}`;
|
478
|
-
this.elemTop.
|
500
|
+
this.elemTop.appendChild(this.elemInputSearch);
|
479
501
|
}
|
480
502
|
|
481
503
|
this.inputSearchHandler();
|
package/src/style.css
CHANGED