selectBoxIt 0.1.0

data/app/assets/javascripts/selectBoxIt/modules/jquery.selectBoxIt.destroy.js

@@ -0,0 +1,58 @@
+// Destroy Module
+// ==============
+
+// Destroy
+// -------
+//    Removes the plugin from the page
+
+selectBoxIt.destroy = function(callback) {
+
+    // Stores the plugin context inside of the self variable
+    var self = this;
+
+    self._destroySelectBoxIt();
+
+    // Calls the jQueryUI Widget Factory destroy method
+    self.widgetProto.destroy.call(self);
+
+    // Provides callback function support
+    self._callbackSupport(callback);
+
+    // Maintains chainability
+    return self;
+
+};
+
+// Internal Destroy Method
+// -----------------------
+//    Removes the plugin from the page
+
+selectBoxIt._destroySelectBoxIt = function() {
+
+    // Stores the plugin context inside of the self variable
+    var self = this;
+
+    // Unbinds all of the dropdown list event handlers with the `selectBoxIt` namespace
+    self.dropdown.off(".selectBoxIt");
+
+    // If the original select box has been placed inside of the new drop down container
+    if ($.contains(self.dropdownContainer[0], self.originalElem)) {
+
+        // Moves the original select box before the drop down container
+        self.dropdownContainer.before(self.selectBox);
+
+    }
+
+    // Remove all of the `selectBoxIt` DOM elements from the page
+    self.dropdownContainer.remove();
+
+    // Resets the style attributes for the original select box
+    self.selectBox.removeAttr("style").attr("style", self.selectBoxStyles);
+
+    // Triggers the custom `destroy` event on the original select box
+    self.triggerEvent("destroy");
+
+    // Maintains chainability
+    return self;
+
+};

data/app/assets/javascripts/selectBoxIt/modules/jquery.selectBoxIt.disable.js

@@ -0,0 +1,137 @@
+
+    // Disable Module
+    // ==============
+
+    // Disable
+    // -------
+    //      Disables the new dropdown list
+
+    selectBoxIt.disable = function(callback) {
+
+        var self = this;
+
+        if(!self.options["disabled"]) {
+
+            // Makes sure the dropdown list is closed
+            self.close();
+
+            // Sets the `disabled` attribute on the original select box
+            self.selectBox.attr("disabled", "disabled");
+
+            // Makes the dropdown list not focusable by removing the `tabindex` attribute
+            self.dropdown.removeAttr("tabindex").
+
+            // Disables styling for enabled state
+            removeClass(self.theme["enabled"]).
+
+            // Enabled styling for disabled state
+            addClass(self.theme["disabled"]);
+
+            self.setOption("disabled", true);
+
+            // Triggers a `disable` custom event on the original select box
+            self.triggerEvent("disable");
+
+        }
+
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
+    // Disable Option
+    // --------------
+    //      Disables a single drop down option
+
+    selectBoxIt.disableOption = function(index, callback) {
+
+        var self = this, currentSelectBoxOption, hasNextEnabled, hasPreviousEnabled, type = $.type(index);
+
+        // If an index is passed to target an indropdownidual drop down option
+        if(type === "number") {
+
+            // Makes sure the dropdown list is closed
+            self.close();
+
+            // The select box option being targeted
+            currentSelectBoxOption = self.selectBox.find("option").eq(index);
+
+            // Triggers a `disable-option` custom event on the original select box and passes the disabled option
+            self.triggerEvent("disable-option");
+
+            // Disables the targeted select box option
+            currentSelectBoxOption.attr("disabled", "disabled");
+
+            // Disables the drop down option
+            self.listItems.eq(index).attr("data-disabled", "true").
+
+            // Applies disabled styling for the drop down option
+            addClass(self.theme["disabled"]);
+
+            // If the currently selected drop down option is the item being disabled
+            if(self.currentFocus === index) {
+
+                hasNextEnabled = self.listItems.eq(self.currentFocus).nextAll("li").not("[data-disabled='true']").first().length;
+
+                hasPreviousEnabled = self.listItems.eq(self.currentFocus).prevAll("li").not("[data-disabled='true']").first().length;
+
+                // If there is a currently enabled option beneath the currently selected option
+                if(hasNextEnabled) {
+
+                    // Selects the option beneath the currently selected option
+                    self.moveDown();
+
+                }
+
+                // If there is a currently enabled option above the currently selected option
+                else if(hasPreviousEnabled) {
+
+                    // Selects the option above the currently selected option
+                    self.moveUp();
+
+                }
+
+                // If there is not a currently enabled option
+                else {
+
+                    // Disables the entire drop down list
+                    self.disable();
+
+                }
+
+            }
+
+        }
+
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
+    // _Is Disabled
+    // -----------
+    //      Checks the original select box for the
+    //    disabled attribute
+
+    selectBoxIt._isDisabled = function(callback) {
+
+        var self = this;
+
+        // If the original select box is disabled
+        if (self.originalElem.disabled) {
+
+            // Disables the dropdown list
+            self.disable();
+
+        }
+
+        // Maintains chainability
+        return self;
+
+    };

data/app/assets/javascripts/selectBoxIt/modules/jquery.selectBoxIt.dynamicPositioning.js

@@ -0,0 +1,102 @@
+
+    // Dynamic Positioning Module
+    // ==========================
+
+    // _Dynamic positioning
+    // --------------------
+    //      Dynamically positions the dropdown list options list
+
+    selectBoxIt._dynamicPositioning = function() {
+
+        var self = this;
+
+        // If the `size` option is a number
+        if($.type(self.listSize) === "number") {
+
+            // Set's the max-height of the drop down list
+            self.list.css("max-height", self.maxHeight || "none");
+
+        }
+
+        // If the `size` option is not a number
+        else {
+
+            // Returns the x and y coordinates of the dropdown list options list relative to the document
+            var listOffsetTop = self.dropdown.offset().top,
+
+                // The height of the dropdown list options list
+                listHeight = self.list.data("max-height") || self.list.outerHeight(),
+
+                // The height of the dropdown list DOM element
+                selectBoxHeight = self.dropdown.outerHeight(),
+
+                viewport = self.options["viewport"],
+
+                viewportHeight = viewport.height(),
+
+                viewportScrollTop = $.isWindow(viewport.get(0)) ? viewport.scrollTop() : viewport.offset().top,
+
+                topToBottom = (listOffsetTop + selectBoxHeight + listHeight <= viewportHeight + viewportScrollTop),
+
+                bottomReached = !topToBottom;
+
+            if(!self.list.data("max-height")) {
+
+              self.list.data("max-height", self.list.outerHeight());
+
+            }
+
+            // If there is room on the bottom of the viewport to display the drop down options
+            if (!bottomReached) {
+
+                self.list.css("max-height", listHeight);
+
+                // Sets custom CSS properties to place the dropdown list options directly below the dropdown list
+                self.list.css("top", "auto");
+
+            }
+
+            // If there is room on the top of the viewport
+            else if((self.dropdown.offset().top - viewportScrollTop) >= listHeight) {
+
+                self.list.css("max-height", listHeight);
+
+                // Sets custom CSS properties to place the dropdown list options directly above the dropdown list
+                self.list.css("top", (self.dropdown.position().top - self.list.outerHeight()));
+
+            }
+
+            // If there is not enough room on the top or the bottom
+            else {
+
+                var outsideBottomViewport = Math.abs((listOffsetTop + selectBoxHeight + listHeight) - (viewportHeight + viewportScrollTop)),
+
+                    outsideTopViewport = Math.abs((self.dropdown.offset().top - viewportScrollTop) - listHeight);
+
+                // If there is more room on the bottom
+                if(outsideBottomViewport < outsideTopViewport) {
+
+                    self.list.css("max-height", listHeight - outsideBottomViewport - (selectBoxHeight/2));
+
+                    self.list.css("top", "auto");
+
+                }
+
+                // If there is more room on the top
+                else {
+
+                    self.list.css("max-height", listHeight - outsideTopViewport - (selectBoxHeight/2));
+
+                    // Sets custom CSS properties to place the dropdown list options directly above the dropdown list
+                    self.list.css("top", (self.dropdown.position().top - self.list.outerHeight()));
+
+                }
+
+            }
+
+        }
+
+        // Maintains chainability
+        return self;
+
+    };

data/app/assets/javascripts/selectBoxIt/modules/jquery.selectBoxIt.enable.js

@@ -0,0 +1,76 @@
+
+    // Enable Module
+    // =============
+
+    // Enable
+    // ------
+    //      Enables the new dropdown list
+
+    selectBoxIt.enable = function(callback) {
+
+        var self = this;
+
+        if(self.options["disabled"]) {
+
+            // Triggers a `enable` custom event on the original select box
+            self.triggerEvent("enable");
+
+            // Removes the `disabled` attribute from the original dropdown list
+            self.selectBox.removeAttr("disabled");
+
+            // Make the dropdown list focusable
+            self.dropdown.attr("tabindex", 0).
+
+            // Disable styling for disabled state
+            removeClass(self.theme["disabled"]).
+
+            // Enables styling for enabled state
+            addClass(self.theme["enabled"]);
+
+            self.setOption("disabled", false);
+
+            // Provide callback function support
+            self._callbackSupport(callback);
+
+        }
+
+        // Maintains chainability
+        return self;
+
+    };
+
+    // Enable Option
+    // -------------
+    //      Disables a single drop down option
+
+    selectBoxIt.enableOption = function(index, callback) {
+
+        var self = this, currentSelectBoxOption, currentIndex = 0, hasNextEnabled, hasPreviousEnabled, type = $.type(index);
+
+        // If an index is passed to target an indropdownidual drop down option
+        if(type === "number") {
+
+            // The select box option being targeted
+            currentSelectBoxOption = self.selectBox.find("option").eq(index);
+
+            // Triggers a `enable-option` custom event on the original select box and passes the enabled option
+            self.triggerEvent("enable-option");
+
+            // Disables the targeted select box option
+            currentSelectBoxOption.removeAttr("disabled");
+
+            // Disables the drop down option
+            self.listItems.eq(index).attr("data-disabled", "false").
+
+            // Applies disabled styling for the drop down option
+            removeClass(self.theme["disabled"]);
+
+        }
+
+        // Provides callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };

data/app/assets/javascripts/selectBoxIt/modules/jquery.selectBoxIt.endClosure.js

@@ -0,0 +1 @@
+})); // End of all modules

data/app/assets/javascripts/selectBoxIt/modules/jquery.selectBoxIt.keyboardNavigation.js

@@ -0,0 +1,143 @@
+
+    // Keyboard Navigation Module
+    // ==========================
+
+    // Move Down
+    // ---------
+    //      Handles the down keyboard navigation logic
+
+    selectBoxIt.moveDown = function(callback) {
+
+        var self = this;
+
+        // Increments `currentFocus`, which represents the currently focused list item `id` attribute.
+        self.currentFocus += 1;
+
+        // Determines whether the dropdown option the user is trying to go to is currently disabled
+        var disabled = self.listItems.eq(self.currentFocus).attr("data-disabled") === "true" ? true: false,
+
+            hasNextEnabled = self.listItems.eq(self.currentFocus).nextAll("li").not("[data-disabled='true']").first().length;
+
+        // If the user has reached the top of the list
+        if (self.currentFocus === self.listItems.length) {
+
+            // Does not allow the user to continue to go up the list
+            self.currentFocus -= 1;
+
+        }
+
+        // If the option the user is trying to go to is disabled, but there is another enabled option
+        else if (disabled && hasNextEnabled) {
+
+            // Blur the previously selected option
+            self.listItems.eq(self.currentFocus - 1).blur();
+
+           // Call the `moveDown` method again
+            self.moveDown();
+
+            // Exit the method
+            return;
+
+        }
+
+        // If the option the user is trying to go to is disabled, but there is not another enabled option
+        else if (disabled && !hasNextEnabled) {
+
+            self.currentFocus -= 1;
+
+        }
+
+        // If the user has not reached the bottom of the unordered list
+        else {
+
+            // Blurs the previously focused list item
+            // The jQuery `end()` method allows you to continue chaining while also using a different selector
+            self.listItems.eq(self.currentFocus - 1).blur().end().
+
+            // Focuses the currently focused list item
+            eq(self.currentFocus).focusin();
+
+            // Calls `scrollToView` to make sure the `scrollTop` is correctly updated. The `down` user action
+            self._scrollToView("down");
+
+            // Triggers the custom `moveDown` event on the original select box
+            self.triggerEvent("moveDown");
+
+        }
+
+        // Provide callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };
+
+    // Move Up
+    // ------
+    //      Handles the up keyboard navigation logic
+    selectBoxIt.moveUp = function(callback) {
+
+        var self = this;
+
+        // Increments `currentFocus`, which represents the currently focused list item `id` attribute.
+        self.currentFocus -= 1;
+
+        // Determines whether the dropdown option the user is trying to go to is currently disabled
+        var disabled = self.listItems.eq(self.currentFocus).attr("data-disabled") === "true" ? true: false,
+
+            hasPreviousEnabled = self.listItems.eq(self.currentFocus).prevAll("li").not("[data-disabled='true']").first().length;
+
+        // If the user has reached the top of the list
+        if (self.currentFocus === -1) {
+
+            // Does not allow the user to continue to go up the list
+            self.currentFocus += 1;
+
+        }
+
+        // If the option the user is trying to go to is disabled and the user is not trying to go up after the user has reached the top of the list
+        else if (disabled && hasPreviousEnabled) {
+
+            // Blur the previously selected option
+            self.listItems.eq(self.currentFocus + 1).blur();
+
+            // Call the `moveUp` method again
+            self.moveUp();
+
+            // Exits the method
+            return;
+
+        }
+
+        else if (disabled && !hasPreviousEnabled) {
+
+            self.currentFocus += 1;
+
+        }
+
+        // If the user has not reached the top of the unordered list
+        else {
+
+            // Blurs the previously focused list item
+            // The jQuery `end()` method allows you to continue chaining while also using a different selector
+            self.listItems.eq(this.currentFocus + 1).blur().end().
+
+            // Focuses the currently focused list item
+            eq(self.currentFocus).focusin();
+
+            // Calls `scrollToView` to make sure the `scrollTop` is correctly updated. The `down` user action
+            self._scrollToView("up");
+
+            // Triggers the custom `moveDown` event on the original select box
+            self.triggerEvent("moveUp");
+
+        }
+
+        // Provide callback function support
+        self._callbackSupport(callback);
+
+        // Maintains chainability
+        return self;
+
+    };