dual-listbox
Version:
Dual listbox for multi-select elements
482 lines (454 loc) • 19.4 kB
HTML
<html lang="en">
<head>
<title>Dual listbox example</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/themes/prism.min.css"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<link href="dist/dual-listbox.css" rel="stylesheet" />
</head>
<body>
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Dual Listbox</h1>
<h2 class="subtitle">
A better way to manage your multi select element.
</h2>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="subtitle">
Select by class
<span class="source" data-source="dlb1">source</span>
</h2>
<pre
class="dlb1"
><code class="language-html"><select class="select1" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<script>
let dlb1 = new DualListbox('.select1');
</script></code></pre>
<select class="select1" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="subtitle">
Add options and add eventListeners
<span class="source" data-source="dlb2">source</span>
</h2>
<pre
class="dlb2"
><code class="language-html"><select class="select2" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<script>
let dlb2 = new DualListbox('.select2', {
availableTitle:'Available numbers',
selectedTitle: 'Selected numbers',
addButtonText: '>',
removeButtonText: '<',
addAllButtonText: '>>',
removeAllButtonText: '<<',
searchPlaceholder: 'search numbers'
});
dlb2.addEventListener('added', function(event){
console.log(event);
});
dlb2.addEventListener('removed', function(event){
console.log(event);
});
</script></code></pre>
<div class="selected-element">
<p>Selected element:</p>
<ul class="changed-element">
<li>Nothing yet</li>
</ul>
</div>
<select class="select2" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="subtitle">
Remove all the buttons from being rendered.
<span class="source" data-source="dlb3">source</span>
</h2>
<pre
class="dlb3"
><code class="language-html"><select class="select3" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<script>
let dlb3 = new DualListbox('.select3', {
showAddButton: false,
showAddAllButton: false,
showRemoveButton: false,
showRemoveAllButton: false
});
</script></code></pre>
<select class="select3" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="subtitle">
Show the sort buttons
<span class="source" data-source="dlb4">source</span>
</h2>
<pre
class="dlb4"
><code class="language-html"><select class="select4" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<script>
let dlb4 = new DualListbox('.select4', {
showSortButtons: true,
});
</script></code></pre>
<select class="select4" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="title is-2">All options</h2>
<table class="table">
<thead>
<tr>
<th>Option</th>
<th>Default</th>
<th>Excepted values</th>
<th>Explanation</th>
</tr>
</thead>
<tbody>
<tr>
<th>draggable</th>
<td><code>true</code></td>
<td><code>boolean</code></td>
<td>If the list items should be draggable.</td>
</tr>
<tr>
<th>showSortButtons</th>
<td><code>false</code></td>
<td><code>boolean</code></td>
<td>
If the sort buttons should be shown. (up and
down)
</td>
</tr>
<tr>
<th>enableDoubleClick</th>
<td><code>true</code></td>
<td><code>boolean</code></td>
<td>
If double clicking a list items should change
column.
</td>
</tr>
<tr>
<th>showAddButton</th>
<td><code>true</code></td>
<td><code>boolean</code></td>
<td>If the "add" button should be shown.</td>
</tr>
<tr>
<th>showRemoveButton</th>
<td><code>true</code></td>
<td><code>boolean</code></td>
<td>If the "remove" button should be shown.</td>
</tr>
<tr>
<th>showAddAllButton</th>
<td><code>true</code></td>
<td><code>boolean</code></td>
<td>If the "add all" button should be shown.</td>
</tr>
<tr>
<th>showRemoveAllButton</th>
<td><code>true</code></td>
<td><code>boolean</code></td>
<td>If the "remove all" button should be shown.</td>
</tr>
<tr>
<th>availableTitle</th>
<td><code>"Available options"</code></td>
<td><code>string</code></td>
<td>
The title that should be shown above the
"Available options"
</td>
</tr>
<tr>
<th>selectedTitle</th>
<td><code>"Selected options"</code></td>
<td><code>string</code></td>
<td>
The title that should be shown above the
"Selected options"
</td>
</tr>
<tr>
<th>addButtonText</th>
<td><code>"add"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the "add"
button.
</td>
</tr>
<tr>
<th>removeButtonText</th>
<td><code>"remove"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the
"remove" button.
</td>
</tr>
<tr>
<th>addAllButtonText</th>
<td><code>"add all"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the "add
all" button.
</td>
</tr>
<tr>
<th>removeAllButtonText</th>
<td><code>"remove all"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the "remove
all" button.
</td>
</tr>
<tr>
<th>searchPlaceholder</th>
<td><code>"Search"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the
"search" fields.
</td>
</tr>
<tr>
<th>upButtonText</th>
<td><code>"up"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the "up"
button. (only when sorting is enabled)
</td>
</tr>
<tr>
<th>downButtonText</th>
<td><code>"down"</code></td>
<td><code>string</code></td>
<td>
The text that should be displayed in the "down"
button. (only when sorting is enabled)
</td>
</tr>
<tr>
<th>options</th>
<td>
<code>undefined</code>
</td>
<td>
<code
>Array<{text:"text to display", value: "what
the select value should be", selected:
false, order: 1}></code
>
</td>
<td>
A list of options that should be added. This
will overwrite the select options
</td>
</tr>
<tr>
<th>sortFunction</th>
<td>
<code>Function</code>
</td>
<td><code>Function</code></td>
<td>
A function to overwrite the default sorting that
will be applied.
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="title is-2">Public functions</h2>
<table class="table">
<thead>
<tr>
<th>Function name</th>
<th>Arguments</th>
<th>Explanation</th>
</tr>
</thead>
<tbody>
<tr>
<th>changeOrder</th>
<td>liItem, newPosition</td>
<td>
Change the order of the given list Element and
the new position
</td>
</tr>
<tr>
<th>addOptions</th>
<td>options</td>
<td>Add a single option to the options list.</td>
</tr>
<tr>
<th>addOption</th>
<td>option, index (optional)</td>
<td>
Add a single option to the options list.
Optionally add the index.
</td>
</tr>
<tr>
<th>addEventListener</th>
<td>eventName, callback</td>
<td>Add an eventListener</td>
</tr>
<tr>
<th>changeSelected</th>
<td>listItem</td>
<td>
Change the selected state of the list element.
</td>
</tr>
<tr>
<th>actionAllSelected</th>
<td>event (optional)</td>
<td>Change all items to be selected.</td>
</tr>
<tr>
<th>actionAllDeselected</th>
<td>event (optional)</td>
<td>Change all items to not be selected.</td>
</tr>
<tr>
<th>redraw</th>
<td></td>
<td>Redraw the lists.</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Dual Listbox</strong> by
<a href="http://maykinmedia.nl/">Maykin Media</a>
</p>
<p>
<a
class="icon"
href="https://github.com/maykinmedia/dual-listbox"
>
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/prism.min.js"></script>
<script src="dist/dual-listbox.js"></script>
<script>
var dlb1 = new DualListbox(".select1");
var dlb2 = new DualListbox(".select2", {
availableTitle: "Available numbers",
selectedTitle: "Selected numbers",
addButtonText: ">",
removeButtonText: "<",
addAllButtonText: ">>",
removeAllButtonText: "<<",
searchPlaceholder: "search numbers",
enableDoubleClick: false,
});
dlb2.addEventListener("added", function (event) {
document.querySelector(".changed-element").innerHTML =
event.addedElement.outerHTML;
});
dlb2.addEventListener("removed", function (event) {
document.querySelector(".changed-element").innerHTML =
event.removedElement.outerHTML;
});
var dlb3 = new DualListbox(".select3", {
showAddButton: false,
showAddAllButton: false,
showRemoveButton: false,
showRemoveAllButton: false,
});
var dlb4 = new DualListbox(".select4", {
showSortButtons: true,
});
var sources = document.querySelectorAll(".source");
for (var i = 0; i < sources.length; i++) {
var source = sources[i];
source.addEventListener("click", function (event) {
var code = document.querySelector(
"." + event.currentTarget.dataset.source
);
code.classList.toggle("open");
});
}
</script>
</body>
</html>