From 5b2014dd2ac06c05e5a864e374680a61e7566298 Mon Sep 17 00:00:00 2001
From: Dan Keck <keck.60@osu.edu>
Date: Mon, 29 Jan 2024 01:01:56 -0500
Subject: [PATCH] Fixed naming
---
listbox.bux.css | 18 +++++++-------
listbox.bux.js | 65 +++++++++++++++++++++++++++++++++----------------
sample.html | 2 +-
3 files changed, 54 insertions(+), 31 deletions(-)
diff --git a/listbox.bux.css b/listbox.bux.css
index 9cd516b..8332fef 100644
--- a/listbox.bux.css
+++ b/listbox.bux.css
@@ -1,5 +1,5 @@
-.bux-multiselection-dropdown button,
-.bux-multiselection-dropdown button:hover
+.bux-listbox button,
+.bux-listbox button:hover
{
background-color: #fff;
text-align: left;
@@ -10,14 +10,14 @@
padding: 0.625rem 1.25rem 0.625rem 6px;
color: #000;
}
-.bux-multiselection-dropdown button:focus
+.bux-listbox button:focus
{
background-color: #fff;
color: #000;
outline: 2px solid #3492b8;
border: 2px solid #212325;
}
-.bux-multiselection-dropdown .bux-checkbox
+.bux-listbox .bux-checkbox
{
border: 2px solid #212325;
background-color: #fff;
@@ -29,20 +29,20 @@
border: 2px solid #B0B0B0;
box-shadow: 1px 1px 5px #C0C0C0;
}
-.bux-multiselection-dropdown tr:hover,
-.bux-multiselection-dropdown tr:focus-within
+.bux-listbox tr:hover,
+.bux-listbox tr:focus-within
{
background-color:#E0E0E6;
}
-.bux-multiselection-dropdown fieldset table
+.bux-listbox fieldset table
{
width:100%;
}
-.bux-multiselection-dropdown fieldset td
+.bux-listbox fieldset td
{
padding: 8px 8px 8px 8px;
}
-.bux-multiselection-dropdown fieldset .bux-checkbox__option
+.bux-listbox fieldset .bux-checkbox__option
{
margin: 0 0.125rem 0 0.125rem;
}
diff --git a/listbox.bux.js b/listbox.bux.js
index ffc5270..ca06413 100644
--- a/listbox.bux.js
+++ b/listbox.bux.js
@@ -1,8 +1,8 @@
// opening = true, false, or the word "toggle"
-function buxMultiselectionDropdownChangeState($multiselect, opening, focus)
+function buxListboxChangeState($listbox, opening, focus)
{
- var $checkboxContainer = $multiselect.find(".bux-checkbox");
- var $button = $multiselect.find("button");
+ var $checkboxContainer = $listbox.find(".bux-checkbox");
+ var $button = $listbox.find("button");
if(opening == "toggle")
{
@@ -22,39 +22,44 @@ function buxMultiselectionDropdownChangeState($multiselect, opening, focus)
}
}
-// Update the text of the button to reflect the newly selected values.
-$(document).on("refreshText", ".bux-multiselection-dropdown button", function ()
+function buxListboxUpdateButtonText($listbox)
{
- var $multiselect = $(this).parent().parent();
- var selectedLabels = $multiselect.find("input[type=checkbox]:checked").toArray().map(cb => { return $(cb).parent().find("label").text(); }).join(", ");
+ var selectedLabels = $listbox.find("input[type=checkbox]:checked").toArray().map(cb => { return $(cb).parent().find("label").text(); }).join(", ");
if(selectedLabels.trim().length == 0) selectedLabels = " ";
- $(this).html(selectedLabels);
+ $listbox.find("button").html(selectedLabels);
+}
+
+// Update the text of the button to reflect the newly selected values.
+$(document).on("refreshText", ".bux-listbox button", function ()
+{
+ var $listbox = $(this).parent().parent();
+ buxListboxUpdateButtonText($listbox);
});
// User changed state of a checkbox.
-$(document).on("change", ".bux-multiselection-dropdown input[type=checkbox]", function()
+$(document).on("change", ".bux-listbox input[type=checkbox]", function()
{
- var $multiselect = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
- $multiselect.find("button").trigger("refreshText");
+ var $listbox = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
+ $listbox.find("button").trigger("refreshText");
});
// User toggled open the checkbox list.
-$(document).on("click", ".bux-multiselection-dropdown button", function ()
+$(document).on("click", ".bux-listbox button", function(e)
{
- var $multiselect = $(this).parent().parent();
- buxMultiselectionDropdownChangeState($multiselect, "toggle", true);
+ var $listbox = $(this).parent().parent();
+ buxListboxChangeState($listbox, "toggle", true);
});
// Handle keystrokes inside the checkbox list.
-$(".bux-multiselection-dropdown").on("keyup", "input[type=checkbox]", function(e)
+$(".bux-listbox").on("keyup", "input[type=checkbox]", function(e)
{
var $tr = $(this).parent().parent().parent();
var $table = $tr.parent();
- var $multiselect = $table.parent().parent().parent().parent();
+ var $listbox = $table.parent().parent().parent().parent();
- if (e.key === "Escape" || e.key === "Enter")
+ if (e.key === "Escape")
{
- buxMultiselectionDropdownChangeState($multiselect, false, true);
+ buxListboxChangeState($listbox, false, true);
e.preventDefault();
}
@@ -66,7 +71,7 @@ $(".bux-multiselection-dropdown").on("keyup", "input[type=checkbox]", function(e
case "End": $table.children().last().find("input[type=checkbox]").focus(); e.preventDefault(); break;
}
});
-$(".bux-multiselection-dropdown").on("keydown", "input[type=checkbox]", function (e)
+$(".bux-listbox").on("keydown", "input[type=checkbox]", function (e)
{
switch (e.key)
{
@@ -77,6 +82,24 @@ $(".bux-multiselection-dropdown").on("keydown", "input[type=checkbox]", function
}
});
+// Close the checkbox list with Escape
+$(".bux-listbox").on("keyup", "button", function(e)
+{
+ var $listbox = $(this).parent().parent();
+
+ if (e.key === "Escape")
+ {
+ buxListboxChangeState($listbox, false, true);
+ e.preventDefault();
+ }s
+});
+
// User leaves the checkbox list.
-$(document).mouseup(function (e) { $(".bux-multiselection-dropdown").each(function (i, ms) { var $ms = $(ms); if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxMultiselectionDropdownChangeState($ms, false); }); });
-$(document).keyup(function (e) { $(".bux-multiselection-dropdown").each(function (i, ms) { var $ms = $(ms); if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxMultiselectionDropdownChangeState($ms, false); }); });
+$(document).mouseup(function (e) { $(".bux-listbox").each(function (i, ms) { var $ms = $(ms); if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxListboxChangeState($ms, false); }); });
+$(document).keyup(function (e) { $(".bux-listbox").each(function (i, ms) { var $ms = $(ms); if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxListboxChangeState($ms, false); }); });
+
+// Initialization
+$(function()
+{
+ $(".bux-listbox").each((i, lb) => buxListboxUpdateButtonText($(lb)));
+});
\ No newline at end of file
diff --git a/sample.html b/sample.html
index c5250b3..bc60bc8 100644
--- a/sample.html
+++ b/sample.html
@@ -15,7 +15,7 @@
<main>
<div class="bux-container bux-grid">
<div class="bux-grid__cell bux-grid__cell--12">
- <div class="bux-selection-dropdown bux-multiselection-dropdown">
+ <div class="bux-selection-dropdown bux-listbox">
<label for="weekdays" class="bux-selection-dropdown__label">Weekdays</label>
<div class="bux-selection-dropdown__input">
<button id="weekdays" type="button" name="weekdays" role="combobox" aria-expanded="false" aria-controls="weekdays-checkboxlist" aria-description="multiselect"> </button>
--
GitLab