Skip to content

Commit 3386d88

Browse files
jschwindjschwind
committed
Add event listener support to AvalynxSelect.
Implemented `onChange` and `onLoaded` callback options in AvalynxSelect for enhanced interactivity. Updated documentation and examples to demonstrate event listener functionality.
1 parent e04691b commit 3386d88

File tree

4 files changed

+134
-33
lines changed

4 files changed

+134
-33
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Here's a simple example of how to use AvalynxSelect in your project:
1616
* [Simple select](https://avalynx-select.jbs-newmedia.de/examples/simple-select.html)
1717
* [Simple select with livesearch and different options](https://avalynx-select.jbs-newmedia.de/examples/simple-select-livesearch.html)
1818
* [Simple select with responsive design](https://avalynx-select.jbs-newmedia.de/examples/simple-select-responsive.html)
19+
* [Simple select with event listeners](https://avalynx-select.jbs-newmedia.de/examples/simple-select-event-listeners.html)
1920

2021
## Installation
2122

@@ -123,6 +124,8 @@ AvalynxSelect allows the following options for customization:
123124
- `scrollList`: (boolean) Enable scrollable list (default: `true`).
124125
- `scrollItems`: (number) Number of items to display before scrolling (default: `8`).
125126
- `noDefaultSelection`: (boolean) Do not select any option by default (default: `false`).
127+
- `onChange`: (function) Callback function to be executed when an option is selected (default: `null`).
128+
- `onLoaded`: (function) Callback function to be executed when the component is loaded (default: `null`).
126129
- `language`: An object containing the following keys:
127130
- `searchPlaceholder`: (string) Placeholder text for the search input (default: `'Search...'`).
128131
- `selectPlaceholder`: (string) Placeholder text for the select dropdown (default: `'Please select...'`).
@@ -131,6 +134,7 @@ AvalynxSelect allows the following options for customization:
131134
- Add support for multiple selection
132135
- Add support for grouped options
133136
- Add support for styling options
137+
- Add ajax loading of list items
134138

135139
## Contributing
136140

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ <h1>AvalynxSelect examples</h1>
2323
<li class="list-group-item"><a href="simple-select.html">Simple select</a></li>
2424
<li class="list-group-item"><a href="simple-select-livesearch.html">Simple select with livesearch and different options</a></li>
2525
<li class="list-group-item"><a href="simple-select-responsive.html">Simple select with responsive design</a></li>
26+
<li class="list-group-item"><a href="simple-select-event-listeners.html">Simple select with event listeners</a></li>
2627
</ul>
2728

2829
<a href="https://github.com/avalynx/avalynx-select" target="_blank" class="btn btn-primary">AvalynxSelect on GitHub</a> <a href="https://github.com/avalynx/" target="_blank" class="btn btn-primary">Avalynx on GitHub</a>

‎examples/simple-select-event-listeners.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="de" data-bs-theme="auto">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Simple select with event listeners | AvalynxSelect Example</title>
7+
8+
<!-- Bootstrap 5.3 -->
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
10+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
11+
12+
<!-- Highlight.js 11.9 -->
13+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/default.min.css">
14+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/highlight.min.js"></script>
15+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/javascript.min.js"></script>
16+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
17+
<script>hljs.highlightAll();</script>
18+
19+
<!-- AvalynxSelect 0.0.1 -->
20+
<script src="https://cdn.jsdelivr.net/npm/avalynx-select@0.0.1/dist/js/avalynx-select.js"></script>
21+
22+
<!-- Example helper -->
23+
<link href="./css/helper.css" rel="stylesheet">
24+
<script src="./js/helper.js"></script>
25+
</head>
26+
<body>
27+
28+
<div class="container py-5">
29+
30+
<a class="btn btn-secondary float-end m-3" href=".">Back</a> <button id="modeToggle" class="btn btn-primary float-end m-3">Toggle to Dark Mode</button>
31+
32+
<br/>
33+
<br/>
34+
<br/>
35+
<br/>
36+
<select class="form-select avalynx-select" id="test-select">
37+
<option value="">Please select...</option>
38+
<option value="1">Option 1</option>
39+
<option value="2">Option 2</option>
40+
<option value="3">Option 3</option>
41+
</select>
42+
<br/>
43+
<br/>
44+
<div class="alert alert-info">
45+
<!-- example with events --->
46+
Create a simple select with AvalynxSelect and add events.
47+
<br/>
48+
<br/>
49+
<strong>Events:</strong>
50+
<ul>
51+
<li><strong>onChange:</strong> Triggered when the selected value changes.</li>
52+
<li><strong>onLoaded:</strong> Triggered when the select is loaded.</li>
53+
</ul>
54+
<p>To see the events in action, open the console and select a value.</p>
55+
</div>
56+
57+
<div class="alert alert-secondary">
58+
<p><strong>Event-Log:</strong></p>
59+
<ul id="event-log"></ul>
60+
</div>
61+
62+
<script>
63+
64+
document.addEventListener("DOMContentLoaded", function () {
65+
new AvalynxSelect(".avalynx-select", {
66+
liveSearch: true,
67+
scrollList: true,
68+
scrollItems: 5,
69+
onChange: (value) => {
70+
logEvent('Selected value: ' + value);
71+
},
72+
onLoaded: () => {
73+
logEvent('Select loaded');
74+
}
75+
});
76+
77+
function logEvent(message) {
78+
const logList = document.getElementById("event-log");
79+
const newItem = document.createElement("li");
80+
newItem.textContent = message;
81+
logList.appendChild(newItem);
82+
}
83+
});
84+
85+
</script>
86+
87+
<br/>
88+
<h3>Source of example<a class="p-1 float-end btn btn-secondary btn-small" id="copyButton">Copy to clipboard</a></h3>
89+
<pre><code class="language-javascript" id="codeBlock">
90+
document.addEventListener("DOMContentLoaded", function () {
91+
new AvalynxSelect(".avalynx-select", {
92+
liveSearch: true,
93+
scrollList: true,
94+
scrollItems: 5,
95+
onChange: (value) => {
96+
logEvent('Selected value: ' + value);
97+
},
98+
onLoaded: () => {
99+
logEvent('Select loaded');
100+
}
101+
});
102+
103+
function logEvent(message) {
104+
const logList = document.getElementById("event-log");
105+
const newItem = document.createElement("li");
106+
newItem.textContent = message;
107+
logList.appendChild(newItem);
108+
}
109+
});
110+
</code></pre>
111+
112+
<a href="https://github.com/avalynx/avalynx-select" target="_blank" class="btn btn-primary">AvalynxSelect on GitHub</a> <a href="https://github.com/avalynx/" target="_blank" class="btn btn-primary">Avalynx on GitHub</a>
113+
114+
</div>
115+
</body>
116+
</html>

‎src/js/avalynx-select.js‎

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
* @param {boolean} options.scrollList - Enable scrollable list (default: true).
2020
* @param {number} options.scrollItems - Number of items to display before scrolling (default: 8).
2121
* @param {boolean} options.noDefaultSelection - Do not select any option by default (default: false).
22+
* @param {function} options.onChange - Callback function to be executed when an option is selected (default: null).
23+
* @param {function} options.onLoaded - Callback function to be executed when the component is loaded (default: null).
2224
* @param {object} language - An object containing the following keys:
2325
* @param {string} language.searchPlaceholder - Placeholder text for the search input (default: 'Search...').
2426
* @param {string} language.selectPlaceholder - Placeholder text for the select dropdown (default: 'Please select...').
@@ -47,14 +49,21 @@ class AvalynxSelect {
4749
scrollList: true,
4850
scrollItems: 8,
4951
noDefaultSelection: false,
52+
onChange: options.onChange || null,
53+
onLoaded: options.onLoaded || null,
5054
...options
5155
};
5256
this.language = {
5357
searchPlaceholder: 'Search...',
5458
selectPlaceholder: 'Please select...',
5559
...language
5660
};
61+
this.initialized = false;
5762
this.elements.forEach(select => this.init(select));
63+
this.initialized = true;
64+
if (this.options.onLoaded) {
65+
this.options.onLoaded();
66+
}
5867
}
5968

6069
init(select) {
@@ -214,39 +223,10 @@ class AvalynxSelect {
214223
this.filterDropdown(dropdown, '');
215224
const dropdownMenu = new bootstrap.Dropdown(button);
216225
dropdownMenu.hide();
217-
}
218-
}
219-
220-
reset(button, dropdown, select) {
221-
button.textContent = this.language.selectPlaceholder;
222-
select.value = '';
223-
dropdown.querySelectorAll('.dropdown-item.active').forEach(activeItem => {
224-
activeItem.classList.remove('active');
225-
});
226-
const emptyOption = dropdown.querySelector('.dropdown-item[data-value=""]');
227-
if (emptyOption) {
228-
emptyOption.classList.add('active');
229-
}
230-
this.filterDropdown(dropdown, '');
231-
}
232-
233-
get value() {
234-
return Array.from(this.elements).map(select => select.value);
235-
}
236-
237-
set value(vals) {
238-
if (!Array.isArray(vals)) vals = [vals];
239-
this.elements.forEach((select, index) => {
240-
const val = vals[index] || '';
241-
const option = Array.from(select.options).find(opt => opt.value === val);
242-
const button = select.nextElementSibling;
243-
if (option) {
244-
button.textContent = option.textContent;
245-
select.value = val;
246-
} else {
247-
button.textContent = this.language.selectPlaceholder;
248-
select.value = '';
226+
if (this.initialized && this.options.onChange) {
227+
this.options.onChange(select.value);
249228
}
250-
});
229+
}
251230
}
252231
}
232+

0 commit comments

Comments
 (0)