Skip to content

Commit

Permalink
Closes #86, references #68 - Released SelectBoxIt v2.6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfranko
gfranko committed Jan 8, 2013
1 parent 60108b4 commit a27ce42
Show file tree
Hide file tree
Showing 15 changed files with 162 additions and 115 deletions.
9 changes: 9 additions & 0 deletions README.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,15 @@ If you find that you need a feature that SelectBoxIt does not currently support,

##Change Log


`2.6.0` - January 8, 2013

- Added support for styling the currently `selected` drop down option via the **selectboxit-selected** CSS class [#86](https://github.com/gfranko/jquery.selectBoxIt.js/issues/86)

- Fixed `refresh()` method mobile bug [#68](https://github.com/gfranko/jquery.selectBoxIt.js/issues/68)

- Refactored and fixed bugs for SelectBoxIt internal event triggering: All custom events now return an object containing both the currently selected select box and drop down options

`2.5.0` - January 6, 2013

**Default Behavior Change**
Expand Down
6 changes: 6 additions & 0 deletions demos/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@
$(function() {
window.selectBox = $("#test").selectBoxIt().data("selectBoxIt");

$('#test').bind("destroy", function() {

console.log('select box destroy event triggered');

});

$('#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.5.0",
"version": "2.6.0",
"homepage": "http://www.selectboxit.com",
"author": {
"name": "Greg Franko",
Expand Down
90 changes: 58 additions & 32 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.5.0 - 2013-1-6
/* jquery Selectboxit - v2.6.0 - 2013-1-8
* 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.5.0",
VERSION: "2.6.0",

// These options will be used as defaults
options: {
Expand Down Expand Up @@ -213,7 +213,7 @@
}

// Triggers a custom `create` event on the original dropdown list
self.selectBox.trigger("create");
self.triggerEvent("create");

// Maintains chainability
return self;
Expand Down Expand Up @@ -528,6 +528,9 @@

});

// Adds the `selectboxit-selected` class name to the currently selected drop down option
self.listItems.removeClass("selectboxit-selected").eq(self.currentFocus).addClass("selectboxit-selected");

}

// Maintains chainability
Expand Down Expand Up @@ -639,7 +642,7 @@
if(!this.list.is(":visible")) {

// Triggers a custom "open" event on the original select box
self.selectBox.trigger("open");
self.triggerEvent("open");

// Determines what jQuery effect to use when opening the dropdown list options list
switch (self.options["showEffect"]) {
Expand Down Expand Up @@ -727,7 +730,7 @@
if(self.list.is(":visible")) {

// Triggers a custom "close" event on the original select box
self.selectBox.trigger("close");
self.triggerEvent("close");

// Determines what jQuery effect to use when closing the dropdown list options list
switch (self.options["hideEffect"]) {
Expand Down Expand Up @@ -818,13 +821,13 @@
"click.selectBoxIt": function() {

// Used to make sure the div becomes focused (fixes IE issue)
self.div.focus();
self.div.trigger("focus", true);

// The `click` handler logic will only be applied if the dropdown list is enabled
if (!self.originalElem.disabled) {

// Triggers the `click` event on the original select box
self.selectBox.trigger("click");
self.triggerEvent("click");

// If the dropdown list options list is visible when a user clicks on the dropdown list
if (self.list.is(":visible")) {
Expand Down Expand Up @@ -856,10 +859,10 @@
if (self.blur) {

// Triggers both the `blur` and `focusout` events on the original select box.
// The `focusout` event was also triggered because the event bubbles
// The `focusout` event is also triggered because the event bubbles
// This event has to be used when using event delegation (such as the jQuery `delegate` or `on` methods)
// Popular open source projects such as Backbone.js utilize event delegation to bind events, so if you are using Backbone.js, use the `focusout` event instead of the `blur` event
self.selectBox.trigger("blur").trigger("focusout");
self.triggerEvent("blur");

//If the dropdown options list is visible
if (self.list.is(":visible")) {
Expand All @@ -869,7 +872,7 @@
}
},

"focus.selectBoxIt": function() {
"focus.selectBoxIt": function(event, internal) {

// Stores the data associated with the mousedown event inside of a local variable
var mdown = $(this).data("mdown");
Expand All @@ -878,22 +881,22 @@
$(this).removeData("mdown");

// If a mousedown event did not occur and no data was passed to the focus event (this correctly triggers the focus event), then the dropdown list gained focus from a tabstop
if (!mdown) {
if (!mdown && !internal) {

setTimeout(function() {

// Triggers the `tabFocus` custom event on the original select box
self.selectBox.trigger("tab-focus");
self.triggerEvent("tab-focus");

}, 0);

}

// Only trigger the `focus` event on the original select box if the dropdown list is hidden (this verifies that only the correct `focus` events are used to trigger the event on the original select box
if(!self.list.is(":visible")) {
if(!self.list.is(":visible") && !internal) {

//Triggers the `focus` default event on the original select box
self.selectBox.trigger("focus").trigger("focusin");
self.triggerEvent("focus");

}

Expand Down Expand Up @@ -1019,15 +1022,15 @@
}

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

break;

// If the user presses the `tab key`
case tabKey:

// Triggers the custom `tab-blur` event on the original select box
self.selectBox.trigger("tab-blur");
self.triggerEvent("tab-blur");

break;

Expand All @@ -1038,7 +1041,7 @@
e.preventDefault();

// Triggers the custom `backspace` event on the original select box
self.selectBox.trigger("backspace");
self.triggerEvent("backspace");

break;

Expand Down Expand Up @@ -1091,15 +1094,15 @@
"mouseenter.selectBoxIt": function() {

// Trigger the `mouseenter` event on the original select box
self.selectBox.trigger("mouseenter");
self.triggerEvent("mouseenter");

},

// `mouseleave` event with the `selectBoxIt` namespace. The mouseleave JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser.
"mouseleave.selectBoxIt": function() {

// Trigger the `mouseleave` event on the original select box
self.selectBox.trigger("mouseleave");
self.triggerEvent("mouseleave");

}

Expand Down Expand Up @@ -1137,10 +1140,7 @@

self._update($(this));

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.triggerEvent("option-click");

// If the current drop down option is not disabled
if ($(this).attr("data-disabled") === "false") {
Expand Down Expand Up @@ -1203,7 +1203,7 @@
}

// Triggers a custom changed event on the original select box
self.selectBox.trigger("changed");
self.triggerEvent("changed");

},

Expand Down Expand Up @@ -1245,7 +1245,7 @@
// Updates the dropdown list value
self.divText.text(self.listItems.eq(self.currentFocus).text()).

trigger("internal-change", true);
trigger("internal-change");

}

Expand All @@ -1262,7 +1262,7 @@
// 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);
self.triggerEvent("change");

}

Expand All @@ -1287,6 +1287,8 @@

self.focusClass = focusClass;

self.selectedClass = "selectboxit-selected";

self.downArrow.addClass(self.selectBox.data("downarrow") || self.options["downArrowIcon"] || obj.arrowClasses);

// Adds the correct container class to the dropdown list
Expand Down Expand Up @@ -1341,9 +1343,11 @@
// 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);

self.listItems.removeClass(self.selectedClass);

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

activeElem.addClass(focusClass);
activeElem.addClass(focusClass).addClass(self.selectedClass);

},

Expand All @@ -1363,7 +1367,7 @@
// `mouseleave` event with the `selectBoxIt` namespace
"mouseleave.selectBoxIt": function() {

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

}
Expand Down Expand Up @@ -1529,8 +1533,11 @@
//Remove all of the `selectBoxIt` DOM elements from the page
self.divContainer.remove();

//Triggers the custom `destroy` event on the original select box and then shows the original dropdown list
self.selectBox.trigger("destroy").show();
//Triggers the custom `destroy` event on the original select box
self.triggerEvent("destroy");

// Shows the original dropdown list
self.selectBox.removeAttr("style").show();

//Maintains chainability
return self;
Expand All @@ -1546,9 +1553,9 @@
var self = this;

// Destroys the plugin and then recreates the plugin
self._destroySelectBoxIt()._create()._callbackSupport(callback);
self._destroySelectBoxIt()._create(true)._callbackSupport(callback);

self.selectBox.trigger("refresh");
self.triggerEvent("refresh");

//Maintains chainability
return self;
Expand Down Expand Up @@ -1622,6 +1629,8 @@

if(this.options["isMobile"]()) {

window.console.log('is mobile');

self._applyNativeSelect();

}
Expand All @@ -1643,6 +1652,23 @@
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');

},

// triggerEvent
// ------------
// Trigger's an external event on the original select box
triggerEvent: function(eventName) {

var self = this,
// Finds the currently option index
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(eventName, { "elem": self.selectBox.eq(currentIndex), "dropdown-elem": self.listItems.eq(self.currentFocus) });

// Maintains chainability
return self;

}

});
Expand Down
Loading

0 comments on commit a27ce42

Please sign in to comment.