Skip to content

Commit f579a70

Browse files
author
William Troup
authored
Merge pull request #1 from williamtroup/0.2.0
0.2.0
2 parents 16d3203 + ab0dbd5 commit f579a70

16 files changed

+487
-145
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
Select.js
33

44
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Select.js%2C%20a%20free%20JavaScript%select%builder&url=https://github.com/williamtroup/Select.js&hashtags=javascript,html,select)
5-
[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jselect.js)
6-
[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jSelect.js/)
5+
[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jselect.js)
6+
[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jSelect.js/)
77
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
88
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
99
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
1010
</h1>
1111

1212
> <p align="center">A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!</p>
13-
> <p align="center">v0.1.0</p>
13+
> <p align="center">v0.2.0</p>
1414
<br />
1515
1616
![Select.js](docs/images/main.png)

‎README_NUGET.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# Select.js v0.1.0
1+
# Select.js v0.2.0
22

33
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Select.js%2C%20a%20free%20JavaScript%select%builder&url=https://github.com/williamtroup/Select.js&hashtags=javascript,html,select)
4-
[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jselect.js)
5-
[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jSelect.js/)
4+
[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jselect.js)
5+
[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jSelect.js/)
66
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
77
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
88
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)

‎dist/select.js‎

Lines changed: 95 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! Select.js v0.1.0 | (c) Bunoon | MIT License */
1+
/*! Select.js v0.2.0 | (c) Bunoon | MIT License */
22
(function() {
33
function render() {
44
var tagTypes = _configuration.domElementTypes;
@@ -28,9 +28,9 @@
2828
element.removeAttribute(_attribute_Name_Options);
2929
var container = renderContainer(element);
3030
var controlElements = renderControl(container, element, bindingOptions);
31-
renderDropDownItems(controlElements.control, controlElements.dropDown, element);
32-
renderSelectedItems(controlElements.control, controlElements.dropDown, element, bindingOptions, false);
33-
buildDocumentEvents(controlElements.dropDown);
31+
renderDropDownItems(controlElements);
32+
renderSelectedItems(controlElements, false);
33+
buildDocumentEvents(controlElements);
3434
fireCustomTrigger(bindingOptions.onRenderComplete, element);
3535
}
3636
} else {
@@ -82,123 +82,157 @@
8282
var dropDown = createElement("div", "drop-down");
8383
dropDown.style.display = "none";
8484
container.appendChild(dropDown);
85-
control.onclick = function(e) {
86-
showDropDownMenu(e, control, dropDown, element, bindingOptions);
87-
};
88-
return {control:control, dropDown:dropDown};
85+
if (!bindingOptions.showDropDownButton) {
86+
control.onclick = function() {
87+
showDropDownMenu(control, dropDown, element, bindingOptions);
88+
};
89+
}
90+
return {control:control, dropDown:dropDown, select:element, bindingOptions:bindingOptions, multiSelectEnabled:element.hasAttribute("multiple")};
8991
}
90-
function renderDropDownItems(control, dropDown, element, bindingOptions) {
91-
var options = element.options;
92+
function renderControlButton(controlElements) {
93+
if (controlElements.bindingOptions.showDropDownButton) {
94+
var dropDownButton = createElement("div", "button");
95+
controlElements.control.appendChild(dropDownButton);
96+
if (isDropDownMenuVisible(controlElements)) {
97+
dropDownButton.className += _string.space + "button-open";
98+
}
99+
dropDownButton.onclick = function() {
100+
showDropDownMenu(controlElements);
101+
};
102+
}
103+
}
104+
function renderDropDownItems(controlElements) {
105+
var options = controlElements.select.options;
92106
var optionsLength = options.length;
93-
var multiSelectEnabled = element.hasAttribute("multiple");
94-
dropDown.innerHTML = _string.empty;
107+
controlElements.dropDown.innerHTML = _string.empty;
95108
var optionIndex = 0;
96109
for (; optionIndex < optionsLength; optionIndex++) {
97-
renderDropDownItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions);
110+
renderDropDownItem(controlElements, optionIndex);
98111
}
99112
}
100-
function renderDropDownItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions) {
113+
function renderDropDownItem(controlElements, optionIndex) {
101114
var item = createElement("div", "item");
102-
var option = element.options[optionIndex];
115+
var option = controlElements.select.options[optionIndex];
103116
item.innerHTML = option.text;
104-
dropDown.appendChild(item);
117+
controlElements.dropDown.appendChild(item);
105118
if (option.selected) {
106119
item.className += " selected";
107120
}
108121
item.onclick = function(e) {
109122
cancelBubble(e);
110-
if (!multiSelectEnabled) {
111-
var optionsLength = element.options.length;
123+
if (!controlElements.multiSelectEnabled) {
124+
var optionsLength = controlElements.select.options.length;
112125
var optionResetIndex = 0;
113126
for (; optionResetIndex < optionsLength; optionResetIndex++) {
114-
element.options[optionResetIndex].selected = false;
127+
controlElements.select.options[optionResetIndex].selected = false;
115128
}
116129
}
117-
element.options[optionIndex].selected = !element.options[optionIndex].selected;
118-
if (element.options[optionIndex].selected) {
130+
controlElements.select.options[optionIndex].selected = !controlElements.select.options[optionIndex].selected;
131+
if (controlElements.select.options[optionIndex].selected) {
119132
item.className = "item selected";
120133
} else {
121134
item.className = "item";
122135
}
123-
renderSelectedItems(control, dropDown, element, bindingOptions);
124-
if (!multiSelectEnabled) {
125-
hideDropDownMenu(dropDown);
136+
renderSelectedItems(controlElements);
137+
if (!controlElements.multiSelectEnabled) {
138+
hideDropDownMenu(controlElements);
126139
}
127140
};
128141
}
129-
function renderSelectedItems(control, dropDown, element, bindingOptions, callCustomTrigger) {
142+
function renderSelectedItems(controlElements, callCustomTrigger) {
130143
callCustomTrigger = isDefinedBoolean(callCustomTrigger) ? callCustomTrigger : true;
131-
var options = element.options;
144+
var options = controlElements.select.options;
132145
var optionsLength = options.length;
133146
var optionsSelected = false;
134-
var multiSelectEnabled = element.hasAttribute("multiple");
135-
control.innerHTML = _string.empty;
147+
controlElements.control.innerHTML = _string.empty;
148+
renderControlButton(controlElements);
136149
var optionIndex = 0;
137150
for (; optionIndex < optionsLength; optionIndex++) {
138151
var option = options[optionIndex];
139152
if (option.selected) {
140153
optionsSelected = true;
141-
renderSelectedItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions);
154+
renderSelectedItem(controlElements, optionIndex);
142155
}
143156
}
144157
if (!optionsSelected) {
145158
var noItemsSelected = createElement("div", "no-items-selected");
146-
noItemsSelected.innerHTML = "There are no items selected";
147-
control.appendChild(noItemsSelected);
159+
noItemsSelected.innerHTML = controlElements.bindingOptions.noItemsSelectedText;
160+
controlElements.control.appendChild(noItemsSelected);
148161
}
149162
if (callCustomTrigger) {
150-
fireCustomTrigger(bindingOptions.onSelectedItemsChanged);
163+
fireCustomTrigger(controlElements.bindingOptions.onSelectedItemsChanged, getValuesSelected(controlElements));
151164
}
152165
}
153-
function renderSelectedItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions) {
166+
function renderSelectedItem(controlElements, optionIndex) {
154167
var selectedItem = createElement("div", "selected-item");
155-
control.appendChild(selectedItem);
168+
controlElements.control.appendChild(selectedItem);
156169
var selectedItemText = createElement("span", "text");
157-
selectedItemText.innerHTML = element.options[optionIndex].text;
170+
selectedItemText.innerHTML = controlElements.select.options[optionIndex].text;
158171
selectedItem.appendChild(selectedItemText);
159-
if (multiSelectEnabled) {
172+
if (controlElements.multiSelectEnabled) {
160173
var removeButton = createElement("div", "remove");
161-
removeButton.innerHTML = bindingOptions.removeText;
174+
removeButton.innerHTML = controlElements.bindingOptions.removeText;
162175
selectedItem.appendChild(removeButton);
163176
removeButton.onclick = function(e) {
164177
cancelBubble(e);
165-
element.options[optionIndex].selected = false;
166-
hideDropDownMenu(dropDown);
167-
renderSelectedItems(control, dropDown, element, bindingOptions);
178+
controlElements.select.options[optionIndex].selected = false;
179+
hideDropDownMenu(controlElements);
180+
renderSelectedItems(controlElements);
168181
};
169182
}
170183
}
171-
function buildDocumentEvents(dropDown) {
184+
function buildDocumentEvents(controlElements) {
172185
var hideMenu = function() {
173-
hideDropDownMenu(dropDown);
186+
hideDropDownMenu(controlElements);
174187
};
175188
_parameter_Document.body.addEventListener("click", hideMenu);
176189
_parameter_Window.addEventListener("resize", hideMenu);
177190
_parameter_Window.addEventListener("click", hideMenu);
178191
}
179-
function showDropDownMenu(e, control, dropDown, element, bindingOptions) {
180-
setTimeout(function() {
181-
if (dropDown !== null && dropDown.style.display !== "block") {
182-
dropDown.style.display = "block";
183-
renderDropDownItems(control, dropDown, element, bindingOptions);
184-
} else {
185-
hideDropDownMenu(dropDown);
186-
}
187-
}, 50);
192+
function showDropDownMenu(controlElements) {
193+
if (!isDropDownMenuVisible(controlElements)) {
194+
setTimeout(function() {
195+
controlElements.dropDown.style.display = "block";
196+
renderDropDownItems(controlElements);
197+
renderSelectedItems(controlElements, false);
198+
}, controlElements.bindingOptions.dropDownShowDelay);
199+
} else {
200+
hideDropDownMenu(controlElements);
201+
}
188202
}
189-
function hideDropDownMenu(dropDown) {
190-
if (dropDown !== null && dropDown.style.display !== "none") {
191-
dropDown.style.display = "none";
203+
function hideDropDownMenu(controlElements) {
204+
if (controlElements.dropDown !== null && controlElements.dropDown.style.display !== "none") {
205+
controlElements.dropDown.style.display = "none";
206+
renderSelectedItems(controlElements, false);
192207
}
193208
}
209+
function isDropDownMenuVisible(controlElements) {
210+
return controlElements.dropDown !== null && controlElements.dropDown.style.display === "block";
211+
}
212+
function getValuesSelected(controlElements) {
213+
var options = controlElements.select.options;
214+
var optionsLength = options.length;
215+
var optionValuesSelected = [];
216+
var optionIndex = 0;
217+
for (; optionIndex < optionsLength; optionIndex++) {
218+
var option = options[optionIndex];
219+
if (option.selected) {
220+
optionValuesSelected.push(option.value);
221+
}
222+
}
223+
return optionValuesSelected;
224+
}
194225
function buildAttributeOptions(newOptions) {
195226
var options = !isDefinedObject(newOptions) ? {} : newOptions;
196227
options.render = getDefaultBoolean(options.render, true);
228+
options.dropDownShowDelay = getDefaultNumber(options.dropDownShowDelay, 50);
229+
options.showDropDownButton = getDefaultBoolean(options.showDropDownButton, true);
197230
options = buildAttributeOptionStrings(options);
198231
return buildAttributeOptionCustomTriggers(options);
199232
}
200233
function buildAttributeOptionStrings(options) {
201234
options.removeText = getDefaultString(options.removeText, "X");
235+
options.noItemsSelectedText = getDefaultString(options.noItemsSelectedText, "There are no items selected");
202236
return options;
203237
}
204238
function buildAttributeOptionCustomTriggers(options) {
@@ -221,6 +255,9 @@
221255
function isDefinedFunction(object) {
222256
return isDefined(object) && typeof object === "function";
223257
}
258+
function isDefinedNumber(object) {
259+
return isDefined(object) && typeof object === "number";
260+
}
224261
function isDefinedArray(object) {
225262
return isDefinedObject(object) && object instanceof Array;
226263
}
@@ -260,6 +297,9 @@
260297
function getDefaultArray(value, defaultValue) {
261298
return isDefinedArray(value) ? value : defaultValue;
262299
}
300+
function getDefaultNumber(value, defaultValue) {
301+
return isDefinedNumber(value) ? value : defaultValue;
302+
}
263303
function getDefaultStringOrArray(value, defaultValue) {
264304
if (isDefinedString(value)) {
265305
value = value.split(_string.space);
@@ -310,7 +350,7 @@
310350
return this;
311351
};
312352
this.getVersion = function() {
313-
return "0.1.0";
353+
return "0.2.0";
314354
};
315355
(function(documentObject, windowObject) {
316356
_parameter_Document = documentObject;

‎dist/select.js.css‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Select.js Library v0.1.0
2+
* Select.js Library v0.2.0
33
*
44
* Copyright 2023 Bunoon
55
* Released under the MIT License
@@ -37,14 +37,23 @@ div.select-js {
3737
margin-bottom: var(--spacing);
3838
position: relative;
3939
}
40+
div.select-js * {
41+
box-sizing: content-box;
42+
line-height: normal;
43+
}
44+
div.select-js *::before, div.select-js *::after {
45+
box-sizing: content-box;
46+
line-height: normal;
47+
}
4048
div.select-js select {
4149
display: none !important;
4250
}
4351
div.select-js div.control {
4452
background-color: var(--container-background-color);
4553
border: var(--border-size) solid var(--container-border-color);
4654
border-radius: var(--border-radius);
47-
padding: var(--spacing);
55+
padding: calc(var(--spacing) - 2px);
56+
padding-right: 32px;
4857
overflow: hidden;
4958
}
5059

@@ -57,7 +66,6 @@ div.select-js div.drop-down {
5766
background-color: var(--container-background-color-drop-down);
5867
border: var(--border-size) solid var(--container-border-color-drop-down);
5968
border-radius: var(--border-radius);
60-
overflow: hidden;
6169
-webkit-user-select: none;
6270
-ms-user-select: none;
6371
user-select: none;
@@ -67,6 +75,8 @@ div.select-js div.drop-down {
6775
max-height: 400px;
6876
margin-top: 2px;
6977
box-shadow: var(--spacing-shadow-size) var(--spacing-shadow-size) var(--spacing-shadow-size) var(--color-gray);
78+
overflow-y: auto;
79+
overflow-x: hidden;
7080
}
7181
div.select-js div.drop-down div.item {
7282
padding: var(--spacing);
@@ -94,12 +104,33 @@ div.select-js div.control {
94104
-webkit-user-select: none;
95105
-ms-user-select: none;
96106
user-select: none;
107+
position: relative;
108+
}
109+
div.select-js div.control div.button {
110+
position: absolute;
111+
border-right: 5px solid var(--color-black);
112+
border-bottom: 5px solid var(--color-black);
113+
height: 8px;
114+
width: 8px;
115+
right: 14px;
116+
top: 14px;
117+
transform: rotate(45deg);
118+
}
119+
div.select-js div.control div.button:hover {
120+
cursor: pointer;
121+
opacity: 0.7;
122+
transition: var(--transition);
123+
}
124+
div.select-js div.control div.button-open {
125+
transform: rotate(-135deg);
126+
top: 18px;
97127
}
98128
div.select-js div.control div.selected-item {
99129
padding: var(--spacing);
100130
background-color: var(--color-gray);
101131
border-radius: var(--border-radius);
102132
display: inline-block;
133+
margin: 2px;
103134
margin-right: var(--spacing);
104135
}
105136
div.select-js div.control div.selected-item:last-child {

‎dist/select.js.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)