Merge pull request #8 from williamtroup/0.3.0

0.3.0

Author: William Troup

README.md

@@ -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.2.3-blue)](https://www.npmjs.com/package/jselect.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.2.3-purple)](https://www.nuget.org/packages/jSelect.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jselect.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.3.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.2.3</p>
+> <p align="center">v0.3.0</p>
 <br />
 
 ![Select.js](docs/images/main.png)
@@ -25,6 +25,7 @@ Select.js
 - Fully styled in CSS/SASS (including the buttons) and compatible with the Bootstrap library.
 - Full CSS theme support (using :root variables, with a default dark-mode theme).
 - Custom triggers for actions (when elements are rendered, selection is changed, etc).
+- Shortcut keys (click [here](docs/SHORTCUT_KEYS.md) to see the full list).
 <br />
 <br />
 
@@ -79,9 +80,9 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows
 </select>
 ```
 
-To see a list of all the available binding options you can use for "data-select-options", click [here](docs/BINDING_OPTIONS.md).
+To see a list of all the available binding options you can use for "data-select-options", click [here](docs/binding/OPTIONS.md).
 
-To see a list of all the available custom triggers you can use for "data-select-options", click [here](docs/BINDING_OPTIONS_CUSTOM_TRIGGERS.md).
+To see a list of all the available custom triggers you can use for "data-select-options", click [here](docs/binding/CUSTOM_TRIGGERS.md).
 
 <br>
 
@@ -116,4 +117,4 @@ Configuration options allow you to customize how Select.js will function.  You c
 </script>
 ```
 
-To see a list of all the available configuration options you can use, click [here](docs/CONFIGURATION_OPTIONS.md).
+To see a list of all the available configuration options you can use, click [here](docs/configuration/OPTIONS.md).

README_NUGET.md

@@ -1,8 +1,8 @@
-# Select.js v0.2.3
+# Select.js v0.3.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.2.3-blue)](https://www.npmjs.com/package/jselect.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.2.3-purple)](https://www.nuget.org/packages/jSelect.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jselect.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.3.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)
@@ -18,6 +18,7 @@
 - Fully styled in CSS/SASS (including the buttons) and compatible with the Bootstrap library.
 - Full CSS theme support (using :root variables, with a default dark-mode theme).
 - Custom triggers for actions (when elements are rendered, selection is changed, etc).
+- Shortcut keys (click [here](https://github.com/williamtroup/docs/SHORTCUT_KEYS.md) to see the full list).
 
 
 ## What browsers are supported?
@@ -65,9 +66,9 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows
 </select>
 ```
 
-To see a list of all the available binding options you can use for "data-select-options", click [here](https://github.com/williamtroup/Select.js/blob/main/docs/BINDING_OPTIONS.md).
+To see a list of all the available binding options you can use for "data-select-options", click [here](https://github.com/williamtroup/Select.js/blob/main/docs/binding/OPTIONS.md).
 
-To see a list of all the available custom triggers you can use for "data-select-options", click [here](https://github.com/williamtroup/Select.js/blob/main/docs/BINDING_OPTIONS_CUSTOM_TRIGGERS.md).
+To see a list of all the available custom triggers you can use for "data-select-options", click [here](https://github.com/williamtroup/Select.js/blob/main/docs/binding/CUSTOM_TRIGGERS.md).
 
 
 ### 4. Finishing Up:
@@ -97,4 +98,4 @@ Configuration options allow you to customize how Select.js will function.  You c
 </script>
 ```
 
-To see a list of all the available configuration options you can use, click [here](https://github.com/williamtroup/Select.js/blob/main/docs/CONFIGURATION_OPTIONS.md).
+To see a list of all the available configuration options you can use, click [here](https://github.com/williamtroup/Select.js/blob/main/docs/configuration/OPTIONS.md).

dist/select.js

@@ -1,4 +1,4 @@
-/*! Select.js v0.2.3 | (c) Bunoon | MIT License */
+/*! Select.js v0.3.0 | (c) Bunoon | MIT License */
 (function() {
   function render() {
     var tagTypes = _configuration.domElementTypes;
@@ -87,7 +87,9 @@
         showDropDownMenu(control, dropDown, element, bindingOptions);
       };
     }
-    return {control:control, dropDown:dropDown, select:element, bindingOptions:bindingOptions, multiSelectEnabled:element.hasAttribute("multiple")};
+    var controlElements = {control:control, dropDown:dropDown, select:element, bindingOptions:bindingOptions, multiSelectEnabled:element.hasAttribute("multiple")};
+    _control_Elements.push(controlElements);
+    return controlElements;
   }
   function renderControlButton(controlElements) {
     if (controlElements.bindingOptions.showDropDownButton) {
@@ -195,6 +197,7 @@
         controlElements.dropDown.style.display = "block";
         renderDropDownItems(controlElements);
         renderSelectedItems(controlElements, false);
+        fireCustomTrigger(controlElements.bindingOptions.onDropDownShow);
       }, controlElements.bindingOptions.dropDownShowDelay);
     } else {
       hideDropDownMenu(controlElements);
@@ -204,6 +207,7 @@
     if (controlElements.dropDown !== null && controlElements.dropDown.style.display !== "none") {
       controlElements.dropDown.style.display = "none";
       renderSelectedItems(controlElements, false);
+      fireCustomTrigger(controlElements.bindingOptions.onDropDownHide);
     }
   }
   function isDropDownMenuVisible(controlElements) {
@@ -238,8 +242,28 @@
   function buildAttributeOptionCustomTriggers(options) {
     options.onRenderComplete = getDefaultFunction(options.onRenderComplete, null);
     options.onSelectedItemsChanged = getDefaultFunction(options.onSelectedItemsChanged, null);
+    options.onDropDownShow = getDefaultFunction(options.onDropDownShow, null);
+    options.onDropDownHide = getDefaultFunction(options.onDropDownHide, null);
     return options;
   }
+  function buildGlobalDocumentEvents(addEvents) {
+    addEvents = isDefined(addEvents) ? addEvents : true;
+    var documentFunc = addEvents ? _parameter_Document.addEventListener : _parameter_Document.removeEventListener;
+    documentFunc("keydown", onWindowKeyDown);
+  }
+  function onWindowKeyDown(e) {
+    if (e.keyCode === _enum_KeyCodes.escape) {
+      e.preventDefault();
+      hideDropDownMenus();
+    }
+  }
+  function hideDropDownMenus() {
+    var controlElementsLength = _control_Elements.length;
+    var controlElementIndex = 0;
+    for (; controlElementIndex < controlElementsLength; controlElementIndex++) {
+      hideDropDownMenu(_control_Elements[controlElementIndex]);
+    }
+  }
   function isDefined(value) {
     return value !== null && value !== undefined && value !== _string.empty;
   }
@@ -341,23 +365,26 @@
   var _parameter_Document = null;
   var _parameter_Window = null;
   var _configuration = {};
+  var _enum_KeyCodes = {escape:27};
   var _string = {empty:"", space:" "};
   var _elements_Type = {};
+  var _control_Elements = [];
   var _attribute_Name_Options = "data-select-options";
   this.setConfiguration = function(newOptions) {
     _configuration = !isDefinedObject(newOptions) ? {} : newOptions;
     buildDefaultConfiguration();
     return this;
   };
   this.getVersion = function() {
-    return "0.2.3";
+    return "0.3.0";
   };
   (function(documentObject, windowObject) {
     _parameter_Document = documentObject;
     _parameter_Window = windowObject;
     buildDefaultConfiguration();
     _parameter_Document.addEventListener("DOMContentLoaded", function() {
       render();
+      buildGlobalDocumentEvents();
     });
     if (!isDefined(_parameter_Window.$select)) {
       _parameter_Window.$select = this;

dist/select.js.css

@@ -1,5 +1,5 @@
 /*
- * Select.js Library v0.2.3
+ * Select.js Library v0.3.0
  *
  * Copyright 2023 Bunoon
  * Released under the MIT License
@@ -121,6 +121,11 @@ div.select-js div.control div.button:hover {
   opacity: 0.7;
   transition: var(--transition);
 }
+div.select-js div.control div.button:active {
+  cursor: pointer;
+  opacity: 0.5;
+  transition: var(--transition);
+}
 div.select-js div.control div.button-open {
   transform: rotate(-135deg);
   top: 18px;