Skip to content

Commit

Permalink
Merge pull request #1 from williamtroup/0.2.0
Browse files Browse the repository at this point in the history 
0.2.0
  • Loading branch information
William Troup authored Dec 8, 2023
2 parents 16d3203 + ab0dbd5 commit f579a70
Show file tree
Hide file tree
Showing 16 changed files with 487 additions and 145 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
Select.js

[![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)
[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jselect.js)
[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jSelect.js/)
[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jselect.js)
[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jSelect.js/)
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
</h1>

> <p align="center">A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!</p>
> <p align="center">v0.1.0</p>
> <p align="center">v0.2.0</p>
<br />
![Select.js](docs/images/main.png)
Expand Down
6 changes: 3 additions & 3 deletions README_NUGET.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Select.js v0.1.0
# Select.js v0.2.0

[![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)
[![npm](https://img.shields.io/badge/npmjs-v0.1.0-blue)](https://www.npmjs.com/package/jselect.js)
[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jSelect.js/)
[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jselect.js)
[![nuget](https://img.shields.io/badge/nuget-v0.2.0-purple)](https://www.nuget.org/packages/jSelect.js/)
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
Expand Down
150 changes: 95 additions & 55 deletions dist/select.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Select.js v0.1.0 | (c) Bunoon | MIT License */
/*! Select.js v0.2.0 | (c) Bunoon | MIT License */
(function() {
function render() {
var tagTypes = _configuration.domElementTypes;
Expand Down Expand Up @@ -28,9 +28,9 @@
element.removeAttribute(_attribute_Name_Options);
var container = renderContainer(element);
var controlElements = renderControl(container, element, bindingOptions);
renderDropDownItems(controlElements.control, controlElements.dropDown, element);
renderSelectedItems(controlElements.control, controlElements.dropDown, element, bindingOptions, false);
buildDocumentEvents(controlElements.dropDown);
renderDropDownItems(controlElements);
renderSelectedItems(controlElements, false);
buildDocumentEvents(controlElements);
fireCustomTrigger(bindingOptions.onRenderComplete, element);
}
} else {
Expand Down Expand Up @@ -82,123 +82,157 @@
var dropDown = createElement("div", "drop-down");
dropDown.style.display = "none";
container.appendChild(dropDown);
control.onclick = function(e) {
showDropDownMenu(e, control, dropDown, element, bindingOptions);
};
return {control:control, dropDown:dropDown};
if (!bindingOptions.showDropDownButton) {
control.onclick = function() {
showDropDownMenu(control, dropDown, element, bindingOptions);
};
}
return {control:control, dropDown:dropDown, select:element, bindingOptions:bindingOptions, multiSelectEnabled:element.hasAttribute("multiple")};
}
function renderDropDownItems(control, dropDown, element, bindingOptions) {
var options = element.options;
function renderControlButton(controlElements) {
if (controlElements.bindingOptions.showDropDownButton) {
var dropDownButton = createElement("div", "button");
controlElements.control.appendChild(dropDownButton);
if (isDropDownMenuVisible(controlElements)) {
dropDownButton.className += _string.space + "button-open";
}
dropDownButton.onclick = function() {
showDropDownMenu(controlElements);
};
}
}
function renderDropDownItems(controlElements) {
var options = controlElements.select.options;
var optionsLength = options.length;
var multiSelectEnabled = element.hasAttribute("multiple");
dropDown.innerHTML = _string.empty;
controlElements.dropDown.innerHTML = _string.empty;
var optionIndex = 0;
for (; optionIndex < optionsLength; optionIndex++) {
renderDropDownItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions);
renderDropDownItem(controlElements, optionIndex);
}
}
function renderDropDownItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions) {
function renderDropDownItem(controlElements, optionIndex) {
var item = createElement("div", "item");
var option = element.options[optionIndex];
var option = controlElements.select.options[optionIndex];
item.innerHTML = option.text;
dropDown.appendChild(item);
controlElements.dropDown.appendChild(item);
if (option.selected) {
item.className += " selected";
}
item.onclick = function(e) {
cancelBubble(e);
if (!multiSelectEnabled) {
var optionsLength = element.options.length;
if (!controlElements.multiSelectEnabled) {
var optionsLength = controlElements.select.options.length;
var optionResetIndex = 0;
for (; optionResetIndex < optionsLength; optionResetIndex++) {
element.options[optionResetIndex].selected = false;
controlElements.select.options[optionResetIndex].selected = false;
}
}
element.options[optionIndex].selected = !element.options[optionIndex].selected;
if (element.options[optionIndex].selected) {
controlElements.select.options[optionIndex].selected = !controlElements.select.options[optionIndex].selected;
if (controlElements.select.options[optionIndex].selected) {
item.className = "item selected";
} else {
item.className = "item";
}
renderSelectedItems(control, dropDown, element, bindingOptions);
if (!multiSelectEnabled) {
hideDropDownMenu(dropDown);
renderSelectedItems(controlElements);
if (!controlElements.multiSelectEnabled) {
hideDropDownMenu(controlElements);
}
};
}
function renderSelectedItems(control, dropDown, element, bindingOptions, callCustomTrigger) {
function renderSelectedItems(controlElements, callCustomTrigger) {
callCustomTrigger = isDefinedBoolean(callCustomTrigger) ? callCustomTrigger : true;
var options = element.options;
var options = controlElements.select.options;
var optionsLength = options.length;
var optionsSelected = false;
var multiSelectEnabled = element.hasAttribute("multiple");
control.innerHTML = _string.empty;
controlElements.control.innerHTML = _string.empty;
renderControlButton(controlElements);
var optionIndex = 0;
for (; optionIndex < optionsLength; optionIndex++) {
var option = options[optionIndex];
if (option.selected) {
optionsSelected = true;
renderSelectedItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions);
renderSelectedItem(controlElements, optionIndex);
}
}
if (!optionsSelected) {
var noItemsSelected = createElement("div", "no-items-selected");
noItemsSelected.innerHTML = "There are no items selected";
control.appendChild(noItemsSelected);
noItemsSelected.innerHTML = controlElements.bindingOptions.noItemsSelectedText;
controlElements.control.appendChild(noItemsSelected);
}
if (callCustomTrigger) {
fireCustomTrigger(bindingOptions.onSelectedItemsChanged);
fireCustomTrigger(controlElements.bindingOptions.onSelectedItemsChanged, getValuesSelected(controlElements));
}
}
function renderSelectedItem(control, dropDown, element, optionIndex, multiSelectEnabled, bindingOptions) {
function renderSelectedItem(controlElements, optionIndex) {
var selectedItem = createElement("div", "selected-item");
control.appendChild(selectedItem);
controlElements.control.appendChild(selectedItem);
var selectedItemText = createElement("span", "text");
selectedItemText.innerHTML = element.options[optionIndex].text;
selectedItemText.innerHTML = controlElements.select.options[optionIndex].text;
selectedItem.appendChild(selectedItemText);
if (multiSelectEnabled) {
if (controlElements.multiSelectEnabled) {
var removeButton = createElement("div", "remove");
removeButton.innerHTML = bindingOptions.removeText;
removeButton.innerHTML = controlElements.bindingOptions.removeText;
selectedItem.appendChild(removeButton);
removeButton.onclick = function(e) {
cancelBubble(e);
element.options[optionIndex].selected = false;
hideDropDownMenu(dropDown);
renderSelectedItems(control, dropDown, element, bindingOptions);
controlElements.select.options[optionIndex].selected = false;
hideDropDownMenu(controlElements);
renderSelectedItems(controlElements);
};
}
}
function buildDocumentEvents(dropDown) {
function buildDocumentEvents(controlElements) {
var hideMenu = function() {
hideDropDownMenu(dropDown);
hideDropDownMenu(controlElements);
};
_parameter_Document.body.addEventListener("click", hideMenu);
_parameter_Window.addEventListener("resize", hideMenu);
_parameter_Window.addEventListener("click", hideMenu);
}
function showDropDownMenu(e, control, dropDown, element, bindingOptions) {
setTimeout(function() {
if (dropDown !== null && dropDown.style.display !== "block") {
dropDown.style.display = "block";
renderDropDownItems(control, dropDown, element, bindingOptions);
} else {
hideDropDownMenu(dropDown);
}
}, 50);
function showDropDownMenu(controlElements) {
if (!isDropDownMenuVisible(controlElements)) {
setTimeout(function() {
controlElements.dropDown.style.display = "block";
renderDropDownItems(controlElements);
renderSelectedItems(controlElements, false);
}, controlElements.bindingOptions.dropDownShowDelay);
} else {
hideDropDownMenu(controlElements);
}
}
function hideDropDownMenu(dropDown) {
if (dropDown !== null && dropDown.style.display !== "none") {
dropDown.style.display = "none";
function hideDropDownMenu(controlElements) {
if (controlElements.dropDown !== null && controlElements.dropDown.style.display !== "none") {
controlElements.dropDown.style.display = "none";
renderSelectedItems(controlElements, false);
}
}
function isDropDownMenuVisible(controlElements) {
return controlElements.dropDown !== null && controlElements.dropDown.style.display === "block";
}
function getValuesSelected(controlElements) {
var options = controlElements.select.options;
var optionsLength = options.length;
var optionValuesSelected = [];
var optionIndex = 0;
for (; optionIndex < optionsLength; optionIndex++) {
var option = options[optionIndex];
if (option.selected) {
optionValuesSelected.push(option.value);
}
}
return optionValuesSelected;
}
function buildAttributeOptions(newOptions) {
var options = !isDefinedObject(newOptions) ? {} : newOptions;
options.render = getDefaultBoolean(options.render, true);
options.dropDownShowDelay = getDefaultNumber(options.dropDownShowDelay, 50);
options.showDropDownButton = getDefaultBoolean(options.showDropDownButton, true);
options = buildAttributeOptionStrings(options);
return buildAttributeOptionCustomTriggers(options);
}
function buildAttributeOptionStrings(options) {
options.removeText = getDefaultString(options.removeText, "X");
options.noItemsSelectedText = getDefaultString(options.noItemsSelectedText, "There are no items selected");
return options;
}
function buildAttributeOptionCustomTriggers(options) {
Expand All @@ -221,6 +255,9 @@
function isDefinedFunction(object) {
return isDefined(object) && typeof object === "function";
}
function isDefinedNumber(object) {
return isDefined(object) && typeof object === "number";
}
function isDefinedArray(object) {
return isDefinedObject(object) && object instanceof Array;
}
Expand Down Expand Up @@ -260,6 +297,9 @@
function getDefaultArray(value, defaultValue) {
return isDefinedArray(value) ? value : defaultValue;
}
function getDefaultNumber(value, defaultValue) {
return isDefinedNumber(value) ? value : defaultValue;
}
function getDefaultStringOrArray(value, defaultValue) {
if (isDefinedString(value)) {
value = value.split(_string.space);
Expand Down Expand Up @@ -310,7 +350,7 @@
return this;
};
this.getVersion = function() {
return "0.1.0";
return "0.2.0";
};
(function(documentObject, windowObject) {
_parameter_Document = documentObject;
Expand Down
37 changes: 34 additions & 3 deletions dist/select.js.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Select.js Library v0.1.0
* Select.js Library v0.2.0
*
* Copyright 2023 Bunoon
* Released under the MIT License
Expand Down Expand Up @@ -37,14 +37,23 @@ div.select-js {
margin-bottom: var(--spacing);
position: relative;
}
div.select-js * {
box-sizing: content-box;
line-height: normal;
}
div.select-js *::before, div.select-js *::after {
box-sizing: content-box;
line-height: normal;
}
div.select-js select {
display: none !important;
}
div.select-js div.control {
background-color: var(--container-background-color);
border: var(--border-size) solid var(--container-border-color);
border-radius: var(--border-radius);
padding: var(--spacing);
padding: calc(var(--spacing) - 2px);
padding-right: 32px;
overflow: hidden;
}

Expand All @@ -57,7 +66,6 @@ div.select-js div.drop-down {
background-color: var(--container-background-color-drop-down);
border: var(--border-size) solid var(--container-border-color-drop-down);
border-radius: var(--border-radius);
overflow: hidden;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Expand All @@ -67,6 +75,8 @@ div.select-js div.drop-down {
max-height: 400px;
margin-top: 2px;
box-shadow: var(--spacing-shadow-size) var(--spacing-shadow-size) var(--spacing-shadow-size) var(--color-gray);
overflow-y: auto;
overflow-x: hidden;
}
div.select-js div.drop-down div.item {
padding: var(--spacing);
Expand Down Expand Up @@ -94,12 +104,33 @@ div.select-js div.control {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
div.select-js div.control div.button {
position: absolute;
border-right: 5px solid var(--color-black);
border-bottom: 5px solid var(--color-black);
height: 8px;
width: 8px;
right: 14px;
top: 14px;
transform: rotate(45deg);
}
div.select-js div.control div.button:hover {
cursor: pointer;
opacity: 0.7;
transition: var(--transition);
}
div.select-js div.control div.button-open {
transform: rotate(-135deg);
top: 18px;
}
div.select-js div.control div.selected-item {
padding: var(--spacing);
background-color: var(--color-gray);
border-radius: var(--border-radius);
display: inline-block;
margin: 2px;
margin-right: var(--spacing);
}
div.select-js div.control div.selected-item:last-child {
Expand Down
2 changes: 1 addition & 1 deletion dist/select.js.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit f579a70

Please sign in to comment.