Skip to content

Commit

Permalink
Close #84, close #85 - Releasing SelectBoxIt v2.5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfranko
gfranko committed Jan 7, 2013
1 parent d4610a8 commit 55da71a
Show file tree
Hide file tree
Showing 12 changed files with 251 additions and 205 deletions.
10 changes: 10 additions & 0 deletions README.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,16 @@ If you find that you need a feature that SelectBoxIt does not currently support,

##Change Log

`2.5.0` - January 6, 2013

**Default Behavior Change**

- 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)

- 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.

- There is now always an "active" class when drop down options are moused over. [#84](https://github.com/gfranko/jquery.selectBoxIt.js/issues/84)

`2.4.0` - January 2, 2013

- Added the **data-iconurl** HTML5 data attribute to support relative and absolute image url's
Expand Down
6 changes: 2 additions & 4 deletions demos/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<body>
<form>
<select id="test">
<option value="Select a Month">Select a Month</option>
<option value="January">January</option>
<option value="Select a Month" disabled>Select a Month</option>
<option value="January" disabled>January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
Expand Down Expand Up @@ -54,8 +54,6 @@
$(function() {
window.selectBox = $("#test").selectBoxIt().data("selectBoxIt");

$("select").bind("tab-focus", function() { $(this).data("selectBoxIt").open(); });

$('#test1').selectBoxIt({theme: "jqueryui"}).data("selectBoxIt");

});
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "jquery.selectBoxIt",
"title": "jquery Selectboxit",
"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.",
"version": "2.4.0",
"version": "2.5.0",
"homepage": "http://www.selectboxit.com",
"author": {
"name": "Greg Franko",
Expand Down
182 changes: 112 additions & 70 deletions src/javascripts/jquery.selectBoxIt.core.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* jquery Selectboxit - v2.4.0 - 2013-1-2
/* jquery Selectboxit - v2.5.0 - 2013-1-6
* http://www.gregfranko.com/jQuery.selectBoxIt.js/
* Copyright (c) 2012 Greg Franko; Licensed MIT */

Expand Down Expand Up @@ -26,7 +26,7 @@

// Plugin version

VERSION: "2.4.0",
VERSION: "2.5.0",

// These options will be used as defaults
options: {
Expand Down Expand Up @@ -81,7 +81,10 @@
"nostyle": false,

// **native**: Triggers the native select box when a user interacts with the drop down
"native": false
"native": false,

// **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
"aggressiveChange": false

},

Expand Down Expand Up @@ -995,6 +998,18 @@
// If the user presses the `enter key`
case enterKey:

var activeElem = self.list.find("li." + self.focusClass);

// If there is no active Elem yet
if(!activeElem.length) {

activeElem = self.listItems.first();

}

// Updates the dropdown list value
self._update(activeElem);

// Prevents the default event from being triggered
e.preventDefault();

Expand All @@ -1006,8 +1021,6 @@

}

self._checkDefaultText();

// Triggers the `enter` events on the original select box
self.selectBox.trigger("enter");

Expand Down Expand Up @@ -1125,49 +1138,35 @@
// 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
.delegate("li", "click.selectBoxIt", function() {

if ($(this).attr("data-disabled") === "false") {

// Sets the original dropdown list value and triggers the `change` event on the original select box
self.selectBox.val($(this).attr("data-val"));

// Sets `currentFocus` to the currently focused dropdown list option.
// The unary `+` operator casts the string to a number
// [James Padolsey Blog Post](http://james.padolsey.com/javascript/terse-javascript-101-part-2/)
self.currentFocus = +this.id;

// Closes the list after selecting an option
self.close();

// Triggers the dropdown list `change` event if a value change occurs
if (self.originalElem.value !== self.divText.attr("data-val")) {
self._update($(this));

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

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

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

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

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

})

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

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

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

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

self.selectBox.trigger("change", true);
self._update($(this));

}
}

});
Expand Down Expand Up @@ -1216,13 +1215,15 @@

// Adds the `disabled` CSS class to the new dropdown list to visually show that it is disabled
self.div.addClass(self.disabledClasses);

},

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

// Removes the `disabled` CSS class from the new dropdown list to visually show that it is enabled
self.div.removeClass(self.disabledClasses);

}

});
Expand All @@ -1232,6 +1233,48 @@

},

// _update
// -------
// Updates the drop down and select box with the current value
_update: function(elem) {

var self = this;

if (elem.attr("data-disabled") === "false") {

// If the default text option is set and the current drop down option is not disabled
if ((self.options["defaultText"] && self.divText.text() === self.options["defaultText"])) {

// Updates the dropdown list value
self.divText.text(self.listItems.eq(self.currentFocus).text()).

trigger("internal-change", true);

}

else {

// Sets the original dropdown list value and triggers the `change` event on the original select box
self.selectBox.val(elem.attr("data-val"));

// Sets `currentFocus` to the currently focused dropdown list option.
// The unary `+` operator casts the string to a number
// [James Padolsey Blog Post](http://james.padolsey.com/javascript/terse-javascript-101-part-2/)
self.currentFocus = +elem.attr("id");

// Triggers the dropdown list `change` event if a value change occurs
if (self.originalElem.value !== self.divText.attr("data-val")) {

self.selectBox.trigger("change", true);

}

}

}

},

// _addClasses
// -----------
// Adds SelectBoxIt CSS classes
Expand All @@ -1241,8 +1284,6 @@

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

hoverClass = obj.hoverClasses || "selectboxit-hover",

buttonClass = obj.buttonClasses || "selectboxit-btn",

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

// 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
self.div.removeClass(hoverClass).add(self.listItems.eq(self.currentFocus)).
var currentElem = self.list.find("li[data-val='" + self.divText.attr("data-val") + "']");

// If no current element can be found, then select the first drop down option
if(!currentElem.length) {

currentElem = self.listItems.first();

}

self.currentFocus = +currentElem.attr("id");

var activeElem = self.listItems.eq(self.currentFocus);

// 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
self.div.removeClass(focusClass);

addClass(focusClass);
self.listItems.removeAttr("data-active").not(activeElem).removeClass(focusClass);

activeElem.addClass(focusClass);

},

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

self.div.addClass(hoverClass);
self.div.addClass(focusClass);

},

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

// Removes the hover CSS class on the previously hovered dropdown list option
self.div.removeClass(hoverClass);
// Removes the focus CSS class on the previously hovered dropdown list option
self.div.removeClass(focusClass);

}

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

// Sets the dropdown list individual options back to the default state and sets the hover CSS class on the currently hovered option
self.listItems.removeAttr("data-active");

$(this).addClass(focusClass).attr("data-active", "");

// Sets the dropdown list individual options back to the default state and sets the focus CSS class on the currently hovered option
self.listItems.not($(this)).removeClass(focusClass);

$(this).addClass(hoverClass);
$(this).addClass(focusClass);

self.currentFocus = +$(this).attr("id");

}

},

"mouseleave.selectBoxIt": function() {

// Removes the hover class from the previous drop down option
$(this).removeClass(hoverClass);
// If the currently moused over drop down option is not disabled
if($(this).attr("data-disabled") === "false") {

// Removes the focus class from the previous drop down option
self.listItems.not($(this)).removeClass(focusClass).removeAttr("data-active");

}

}

Expand All @@ -1360,8 +1427,6 @@

focusClasses: "ui-state-focus",

hoverClasses: "ui-state-hover",

arrowClasses: "ui-icon ui-icon-triangle-1-s",

buttonClasses: "ui-widget ui-state-default",
Expand All @@ -1388,8 +1453,6 @@

focusClasses: "active",

hoverClasses: "",

arrowClasses: "caret",

buttonClasses: "btn",
Expand Down Expand Up @@ -1417,8 +1480,6 @@

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

hoverClasses: "ui-btn-hover-" + theme,

arrowClasses: "ui-icon ui-icon-arrow-d ui-icon-shadow",

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

},

// Check Default Text
// ------------------
// Default Text Option Logic
_checkDefaultText: function() {

var self = this;

// If the default text option is set and the current drop down option is not disabled
if (self.options["defaultText"] && self.divText.text() === self.options["defaultText"]) {

// Updates the dropdown list value
self.divText.text(self.listItems.eq(self.currentFocus).text()).

trigger("internal-change", true);

}

}

});
Expand Down
Loading

0 comments on commit 55da71a

Please sign in to comment.