Skip to content

Commit 55da71a

Browse files
gfrankogfranko
committed
Close #84, close #85 - Releasing SelectBoxIt v2.5.0
1 parent d4610a8 commit 55da71a

12 files changed

+251
-205
lines changed

‎README.markdown

+10
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,16 @@ If you find that you need a feature that SelectBoxIt does not currently support,
7070

7171
##Change Log
7272

73+
`2.5.0` - January 6, 2013
74+
75+
**Default Behavior Change**
76+
77+
- SelectBoxIt will no longer select a drop down option (and trigger the change event on the original select box) when a user navigates to an option using the up and down arrow keys via the keyboard, or searches for an option using the keyboard. An option will only be `selected` when a user clicks an option or presses the `enter` key when an option is actively "focused". [#85](https://github.com/gfranko/jquery.selectBoxIt.js/issues/85)
78+
79+
- Added a new option, **aggressiveChange**, which _will_ select a drop down option (and trigger the change event on the original select box) when a user navigates to an option using the up and down arrow keys via the keyboard, or searchs for an option using the keyboard.
80+
81+
- There is now always an "active" class when drop down options are moused over. [#84](https://github.com/gfranko/jquery.selectBoxIt.js/issues/84)
82+
7383
`2.4.0` - January 2, 2013
7484

7585
- Added the **data-iconurl** HTML5 data attribute to support relative and absolute image url's

‎demos/default.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<body>
1515
<form>
1616
<select id="test">
17-
<option value="Select a Month">Select a Month</option>
18-
<option value="January">January</option>
17+
<option value="Select a Month" disabled>Select a Month</option>
18+
<option value="January" disabled>January</option>
1919
<option value="February">February</option>
2020
<option value="March">March</option>
2121
<option value="April">April</option>
@@ -54,8 +54,6 @@
5454
$(function() {
5555
window.selectBox = $("#test").selectBoxIt().data("selectBoxIt");
5656

57-
$("select").bind("tab-focus", function() { $(this).data("selectBoxIt").open(); });
58-
5957
$('#test1').selectBoxIt({theme: "jqueryui"}).data("selectBoxIt");
6058

6159
});

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "jquery.selectBoxIt",
33
"title": "jquery Selectboxit",
44
"description": "A jQuery plugin that progressively enhances an HTML Select Box into a single option dropdown list. The dropdown list can be optionally styled with jQuery ThemeRoller and optionally animated with jQueryUI show/hide effects.",
5-
"version": "2.4.0",
5+
"version": "2.5.0",
66
"homepage": "http://www.selectboxit.com",
77
"author": {
88
"name": "Greg Franko",

‎src/javascripts/jquery.selectBoxIt.core.js

+112-70
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* jquery Selectboxit - v2.4.0 - 2013-1-2
1+
/* jquery Selectboxit - v2.5.0 - 2013-1-6
22
* http://www.gregfranko.com/jQuery.selectBoxIt.js/
33
* Copyright (c) 2012 Greg Franko; Licensed MIT */
44

@@ -26,7 +26,7 @@
2626

2727
// Plugin version
2828

29-
VERSION: "2.4.0",
29+
VERSION: "2.5.0",
3030

3131
// These options will be used as defaults
3232
options: {
@@ -81,7 +81,10 @@
8181
"nostyle": false,
8282

8383
// **native**: Triggers the native select box when a user interacts with the drop down
84-
"native": false
84+
"native": false,
85+
86+
// **aggressiveChange**: Will select a drop down item (and trigger a change event) when a user navigates to the item via the keyboard (up and down arrow or search), before a user selects an option with a click or the enter key
87+
"aggressiveChange": false
8588

8689
},
8790

@@ -995,6 +998,18 @@
995998
// If the user presses the `enter key`
996999
case enterKey:
9971000

1001+
var activeElem = self.list.find("li." + self.focusClass);
1002+
1003+
// If there is no active Elem yet
1004+
if(!activeElem.length) {
1005+
1006+
activeElem = self.listItems.first();
1007+
1008+
}
1009+
1010+
// Updates the dropdown list value
1011+
self._update(activeElem);
1012+
9981013
// Prevents the default event from being triggered
9991014
e.preventDefault();
10001015

@@ -1006,8 +1021,6 @@
10061021

10071022
}
10081023

1009-
self._checkDefaultText();
1010-
10111024
// Triggers the `enter` events on the original select box
10121025
self.selectBox.trigger("enter");
10131026

@@ -1125,49 +1138,35 @@
11251138
// Select box individual options events bound with the jQuery `delegate` method. `Delegate` was used because binding individual events to each list item (since we don't know how many there will be) would decrease performance. Instead, we bind each event to the unordered list, provide the list item context, and allow the list item events to bubble up (`event bubbling`). This greatly increases page performance because we only have to bind an event to one element instead of x number of elements. Delegates the `click` event with the `selectBoxIt` namespace to the list items
11261139
.delegate("li", "click.selectBoxIt", function() {
11271140

1128-
if ($(this).attr("data-disabled") === "false") {
1129-
1130-
// Sets the original dropdown list value and triggers the `change` event on the original select box
1131-
self.selectBox.val($(this).attr("data-val"));
1132-
1133-
// Sets `currentFocus` to the currently focused dropdown list option.
1134-
// The unary `+` operator casts the string to a number
1135-
// [James Padolsey Blog Post](http://james.padolsey.com/javascript/terse-javascript-101-part-2/)
1136-
self.currentFocus = +this.id;
1137-
1138-
// Closes the list after selecting an option
1139-
self.close();
1140-
1141-
// Triggers the dropdown list `change` event if a value change occurs
1142-
if (self.originalElem.value !== self.divText.attr("data-val")) {
1141+
self._update($(this));
11431142

1144-
self.selectBox.trigger("change", true);
1143+
var currentIndex = self.options["showFirstOption"] ? self.currentFocus : ((self.currentFocus - 1) >= 0 ? self.currentFocus: 0 );
11451144

1146-
}
1145+
// Triggers the custom option-click event on the original select box and passes the select box option
1146+
self.selectBox.trigger("option-click", { "elem": self.selectBox.eq(currentIndex), "dropdown-elem": self.listItems.eq(self.currentFocus) });
11471147

1148-
self._checkDefaultText();
1148+
// If the current drop down option is not disabled
1149+
if ($(this).attr("data-disabled") === "false") {
11491150

1150-
var currentIndex = self.options["showFirstOption"] ? self.currentFocus : ((self.currentFocus - 1) >= 0 ? self.currentFocus: 0 );
1151+
// Closes the drop down list
1152+
self.close();
11511153

1152-
// Triggers the custom option-click event on the original select box and passes the select box option
1153-
self.selectBox.trigger("option-click", { elem: self.selectBox.eq(currentIndex) });
11541154
}
1155+
11551156
})
11561157

11571158
// Delegates the `focus` event with the `selectBoxIt` namespace to the list items
11581159
.delegate("li", "focus.selectBoxIt", function() {
11591160

1160-
if ($(this).attr("data-disabled") === "false") {
1161+
// Removes the hover class from the previous drop down option
1162+
self.listItems.not($(this)).removeAttr("data-active");
11611163

1162-
// Sets the original select box current value and triggers the change event
1163-
self.originalElem.value = $(this).attr("data-val");
1164+
$(this).attr("data-active", "");
11641165

1165-
// Triggers the dropdown list `change` event if a value change occurs
1166-
if (self.originalElem.value !== self.divText.attr("data-val")) {
1166+
if(self.options["aggressiveChange"]) {
11671167

1168-
self.selectBox.trigger("change", true);
1168+
self._update($(this));
11691169

1170-
}
11711170
}
11721171

11731172
});
@@ -1216,13 +1215,15 @@
12161215

12171216
// Adds the `disabled` CSS class to the new dropdown list to visually show that it is disabled
12181217
self.div.addClass(self.disabledClasses);
1218+
12191219
},
12201220

12211221
// `enable` event with the `selectBoxIt` namespace
12221222
"enable.selectBoxIt": function() {
12231223

12241224
// Removes the `disabled` CSS class from the new dropdown list to visually show that it is enabled
12251225
self.div.removeClass(self.disabledClasses);
1226+
12261227
}
12271228

12281229
});
@@ -1232,6 +1233,48 @@
12321233

12331234
},
12341235

1236+
// _update
1237+
// -------
1238+
// Updates the drop down and select box with the current value
1239+
_update: function(elem) {
1240+
1241+
var self = this;
1242+
1243+
if (elem.attr("data-disabled") === "false") {
1244+
1245+
// If the default text option is set and the current drop down option is not disabled
1246+
if ((self.options["defaultText"] && self.divText.text() === self.options["defaultText"])) {
1247+
1248+
// Updates the dropdown list value
1249+
self.divText.text(self.listItems.eq(self.currentFocus).text()).
1250+
1251+
trigger("internal-change", true);
1252+
1253+
}
1254+
1255+
else {
1256+
1257+
// Sets the original dropdown list value and triggers the `change` event on the original select box
1258+
self.selectBox.val(elem.attr("data-val"));
1259+
1260+
// Sets `currentFocus` to the currently focused dropdown list option.
1261+
// The unary `+` operator casts the string to a number
1262+
// [James Padolsey Blog Post](http://james.padolsey.com/javascript/terse-javascript-101-part-2/)
1263+
self.currentFocus = +elem.attr("id");
1264+
1265+
// Triggers the dropdown list `change` event if a value change occurs
1266+
if (self.originalElem.value !== self.divText.attr("data-val")) {
1267+
1268+
self.selectBox.trigger("change", true);
1269+
1270+
}
1271+
1272+
}
1273+
1274+
}
1275+
1276+
},
1277+
12351278
// _addClasses
12361279
// -----------
12371280
// Adds SelectBoxIt CSS classes
@@ -1241,8 +1284,6 @@
12411284

12421285
focusClass = obj.focusClasses || "selectboxit-focus",
12431286

1244-
hoverClass = obj.hoverClasses || "selectboxit-hover",
1245-
12461287
buttonClass = obj.buttonClasses || "selectboxit-btn",
12471288

12481289
listClass = obj.listClasses || "selectboxit-dropdown";
@@ -1287,10 +1328,25 @@
12871328
// `click` event with the `selectBoxIt` namespace
12881329
"open.selectBoxIt": function() {
12891330

1290-
// Removes the jQueryUI hover class from the dropdown list and adds the jQueryUI focus class for both the dropdown list and the currently selected dropdown list option
1291-
self.div.removeClass(hoverClass).add(self.listItems.eq(self.currentFocus)).
1331+
var currentElem = self.list.find("li[data-val='" + self.divText.attr("data-val") + "']");
1332+
1333+
// If no current element can be found, then select the first drop down option
1334+
if(!currentElem.length) {
1335+
1336+
currentElem = self.listItems.first();
1337+
1338+
}
1339+
1340+
self.currentFocus = +currentElem.attr("id");
1341+
1342+
var activeElem = self.listItems.eq(self.currentFocus);
1343+
1344+
// Removes the focus class from the dropdown list and adds the library focus class for both the dropdown list and the currently selected dropdown list option
1345+
self.div.removeClass(focusClass);
12921346

1293-
addClass(focusClass);
1347+
self.listItems.removeAttr("data-active").not(activeElem).removeClass(focusClass);
1348+
1349+
activeElem.addClass(focusClass);
12941350

12951351
},
12961352

@@ -1303,15 +1359,15 @@
13031359
// `mousenter` event with the `selectBoxIt` namespace
13041360
"mouseenter.selectBoxIt": function() {
13051361

1306-
self.div.addClass(hoverClass);
1362+
self.div.addClass(focusClass);
13071363

13081364
},
13091365

13101366
// `mouseleave` event with the `selectBoxIt` namespace
13111367
"mouseleave.selectBoxIt": function() {
13121368

1313-
// Removes the hover CSS class on the previously hovered dropdown list option
1314-
self.div.removeClass(hoverClass);
1369+
// Removes the focus CSS class on the previously hovered dropdown list option
1370+
self.div.removeClass(focusClass);
13151371

13161372
}
13171373

@@ -1324,19 +1380,30 @@
13241380
// If the currently moused over drop down option is not disabled
13251381
if($(this).attr("data-disabled") === "false") {
13261382

1327-
// Sets the dropdown list individual options back to the default state and sets the hover CSS class on the currently hovered option
1383+
self.listItems.removeAttr("data-active");
1384+
1385+
$(this).addClass(focusClass).attr("data-active", "");
1386+
1387+
// Sets the dropdown list individual options back to the default state and sets the focus CSS class on the currently hovered option
13281388
self.listItems.not($(this)).removeClass(focusClass);
13291389

1330-
$(this).addClass(hoverClass);
1390+
$(this).addClass(focusClass);
1391+
1392+
self.currentFocus = +$(this).attr("id");
13311393

13321394
}
13331395

13341396
},
13351397

13361398
"mouseleave.selectBoxIt": function() {
13371399

1338-
// Removes the hover class from the previous drop down option
1339-
$(this).removeClass(hoverClass);
1400+
// If the currently moused over drop down option is not disabled
1401+
if($(this).attr("data-disabled") === "false") {
1402+
1403+
// Removes the focus class from the previous drop down option
1404+
self.listItems.not($(this)).removeClass(focusClass).removeAttr("data-active");
1405+
1406+
}
13401407

13411408
}
13421409

@@ -1360,8 +1427,6 @@
13601427

13611428
focusClasses: "ui-state-focus",
13621429

1363-
hoverClasses: "ui-state-hover",
1364-
13651430
arrowClasses: "ui-icon ui-icon-triangle-1-s",
13661431

13671432
buttonClasses: "ui-widget ui-state-default",
@@ -1388,8 +1453,6 @@
13881453

13891454
focusClasses: "active",
13901455

1391-
hoverClasses: "",
1392-
13931456
arrowClasses: "caret",
13941457

13951458
buttonClasses: "btn",
@@ -1417,8 +1480,6 @@
14171480

14181481
focusClasses: "ui-btn-active-" + theme + " ui-btn-down-" + theme,
14191482

1420-
hoverClasses: "ui-btn-hover-" + theme,
1421-
14221483
arrowClasses: "ui-icon ui-icon-arrow-d ui-icon-shadow",
14231484

14241485
buttonClasses: "ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-" + theme,
@@ -1585,25 +1646,6 @@
15851646
.replace(/</g, '&lt;')
15861647
.replace(/>/g, '&gt;');
15871648

1588-
},
1589-
1590-
// Check Default Text
1591-
// ------------------
1592-
// Default Text Option Logic
1593-
_checkDefaultText: function() {
1594-
1595-
var self = this;
1596-
1597-
// If the default text option is set and the current drop down option is not disabled
1598-
if (self.options["defaultText"] && self.divText.text() === self.options["defaultText"]) {
1599-
1600-
// Updates the dropdown list value
1601-
self.divText.text(self.listItems.eq(self.currentFocus).text()).
1602-
1603-
trigger("internal-change", true);
1604-
1605-
}
1606-
16071649
}
16081650

16091651
});

0 commit comments

Comments
 (0)