1. noobtech
  2. hFrameWorks

Commits

noobtech  committed 2931e3b

Made some updates to the tooltip to make it work on jquery dialog boxes.

  • Participants
  • Parent commits d816496
  • Branches custom_tooltip

Comments (0)

Files changed (3)

File .hgignore

View file
  • Ignore whitespace
 *.VisualState.xml.*
 *.VisualState.xml
 Thumbs.db
-*_HERCULES_GEN_*
+*_HERCULES_GEN_*
+_svn

File TestWebsite/Scripts/hAutoComplete/hAutoComplete.css

View file
  • Ignore whitespace
 */
 * html .ui-autocomplete {
     height: 100px;
+}
+
+.transparent_class_75 {
+/* IE 8 */
+-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+
+/* IE 5-7 */
+filter: alpha(opacity=75);
+
+/* Netscape */
+-moz-opacity: 0.75;
+
+/* Safari 1.x */
+-khtml-opacity: 0.75;
+
+/* Good browsers */
+opacity: 0.75;
 }

File TestWebsite/Scripts/hAutoComplete/hAutoComplete.js

View file
  • Ignore whitespace
 */
 
 (function($) {
-
     /*
     extends the jquery expressions to be able to determin if an element is in focus
     by $(element).is(':focus')
     });
 
     $.fn.hAutoComplete = function(options) {
-        var padding, shadow, offset, minimumSearchLength, toolTipContainer, toolTipShadow, showallButton, defaults, that, repositionPopup, getFilterResultsFromServer, hideToolTip, showToolTip;
+        var padding, shadow, offset, minimumSearchLength, toolTipContainer, toolTipShadow, showallButton, defaults, that, repositionPopup, getFilterResultsFromServer, hideToolTip, showToolTip, showAllButtonId;
 
 
         that = this; //self reference variable to be used inside functions
         shadow = 7; //how much shadow to leave
         offset = 7; //ammount of offset from the text box
         minimumSearchLength = 3;
-        toolTipContainer = $('<div class="ui-widget ui-widget-content ui-corner-all">');
+        toolTipContainer = $('<div class="transparent_class_75 ui-widget ui-widget-content ui-corner-all">');
         toolTipShadow = $('<div class="ui-widget-shadow ui-corner-all"></div>');
         showallButton = $('<button>Get All Items</button>');
         this.attr('name', ('hAutoCompleteBox_' + this.attr('id'))); //We will set the ajax name so that we will know what ajaxID to wait for if we need to
+        showAllButtonId = 'hAutoCompleteBoxClick_' + this.attr('id');
+        showallButton.attr('id', showAllButtonId);
 
         //Make sure that a URL was specified
         if ((options.source === null) || (options.source === undefined)) {
             alert(msg);
         }
 
+        //$(document).click(function(event) {
+        //console.log("$(document).click(function(event)");
+        //hideToolTip(event);
+        //});
+
+        var otherElementFocus = function(event) {
+            hideToolTip(event);
+            //event.stopPropagation(); return false;
+        };
+
+        $('body').undelegate('*', 'focus', otherElementFocus);
+        $('body').delegate('*', 'focus', otherElementFocus);
+
+        /*
+        $(window).resize(function() {
+        if (($.fn.hAutoComplete.prototype.lastfocusedInputbox !== null) && ($.fn.hAutoComplete.prototype.lastfocusedInputbox !== undefined)) {
+        repositionPopup($.fn.hAutoComplete.prototype.lastfocusedInputbox);
+        }
+        });
+        */
+
+
         var getFilterResultsFromServer = function(searchObject, response, surpressErrors) {
             //Spawn an ajax request here to the filter controller
             //Make sure some kind of loading screen appears.
         };
 
 
-        //The jQuery-UI autocomplete plugin default settings
-        defaults = {
-            source: getFilterResultsFromServer,
-            select: function(event, ui) {
-                var element = $(this);
-                element.data("uiItem", ui.item.id);
-                element.val(ui.item.id);
-                setTimeout(function() { element.val(element.data("uiItem")); element.focus(); }, 10);
-            },
-            close: function(event, ui) {
-                //var element = $(this);
-                //setTimeout(function() { element.val(element.data("uiItem")); }, 10);
-            },
-            open: function(event, ui) {
-                var element = $(this);
-                setTimeout(function() { element.focus(); }, 100);
-            },
-            minLength: minimumSearchLength
-        };
-        //$.extend(defaults, options);
+
 
         /*
         a public function and lets user to programatically pre-fill
         };
 
         var hideToolTip = function(event) {
+            var targetElement = $(event.target);
+            if (targetElement.hasClass('ui-autocomplete-input')) {
+                return;
+            }
+            if (targetElement.attr('id') == showAllButtonId) {
+                return;
+            }
             toolTipContainer.remove();
             toolTipShadow.remove();
         };
-        var showToolTip = function(element) {
-            element.after(toolTipShadow);
-            element.after(toolTipContainer);
+
+
+        var showToolTip = function(textInputElement) {
+            //textInputElement.after(toolTipShadow);
+            textInputElement.after(toolTipContainer);
             toolTipContainer.show();
             toolTipShadow.show();
             showallButton.button({ icons: { primary: 'ui-icon-folder-open' }, text: false });
-        };
-        $(document).click(function(event) {
-            hideToolTip(event);
-        });
-        $('body *').focus(function(event) {
-            hideToolTip(event);
-            event.stopPropagation(); return false;
-        });
-        $(window).resize(function() {
-            if (($.fn.hAutoComplete.prototype.lastfocusedInputbox !== null) && ($.fn.hAutoComplete.prototype.lastfocusedInputbox !== undefined)) {
-                repositionPopup($.fn.hAutoComplete.prototype.lastfocusedInputbox);
-            }
-        });
-
-
-
-        //Create our toolTip containter
-
-        showallButton.click(function() {
-            $.fn.hAutoComplete.prototype.lastfocusedInputbox.autocomplete("option", { minLength: 0 });
-            $.fn.hAutoComplete.prototype.lastfocusedInputbox.autocomplete("search", '');
-            $.fn.hAutoComplete.prototype.lastfocusedInputbox.autocomplete("option", { minLength: minimumSearchLength });
-        });
-
-        toolTipContainer.click(function(event) {
+            /*if (!toolTipContainer.data('clickEventRegistered')) {
+            toolTipContainer.click(function(event) {
             event.stopPropagation();
             return false;
-        });
+            });
+            toolTipContainer.data('clickEventRegistered', true);
+            }*/
+
+            showallButton.unbind('click.showallbutton');
+            showallButton.bind('click.showallbutton', function() {
+                var txtInput = toolTipContainer.data('associated');
+                txtInput.autocomplete("option", { minLength: 0 });
+                txtInput.autocomplete("search", '');
+                txtInput.autocomplete("option", { minLength: minimumSearchLength });
+            });
+            showallButton.each(function() {
+                this.tabIndex = -1;
+            });
+
+            repositionPopup(textInputElement);
+            toolTipContainer.data('associated', textInputElement);
+        };
+
+
+
+
+
 
         toolTipContainer.css({
             position: 'absolute',
             padding: (padding + 'px')
         });
 
-        toolTipContainer.append($('<span style="display:inline">Start typing the description or the part number to filter, or click </span>'));
+        toolTipContainer.append($('<span style="display:inline">Start typing the description or the part number to filter.<br /> Or click </span>'));
         toolTipContainer.append(showallButton);
         toolTipContainer.append($('<span style="display:inline"> if you want to see the whole list.</span>'));
 
         });
 
         repositionPopup = function(element) {
+            toolTipContainer.css({
+                width: (element.width() - padding)
+            });
             toolTipShadow.css({
-                width: element.width()
+                width: toolTipContainer.width()
             });
+            
             toolTipContainer.css({
-                width: element.width()
-            });
-            toolTipContainer.css({
-                top: (element.position().top - toolTipContainer.height() - (padding * 2) - offset),
-                left: element.position().left,
+                //    top: (element.position().top - toolTipContainer.height() - (padding * 2) - offset),
+                //    left: element.position().left,
                 'z-index': 5000
             });
 
             toolTipShadow.css({
-                top: (element.position().top - toolTipContainer.height() - (padding * 2) - offset - shadow),
-                left: element.position().left - shadow,
-                height: toolTipContainer.height() + shadow,
-                width: toolTipContainer.width() + shadow,
-                'z-index': (toolTipContainer.css('z-index') - 2)
+            //    top: (toolTipContainer.position().top() - shadow),
+                left: toolTipContainer.position().left
+            //    height: toolTipContainer.height() + shadow,
+            //    width: toolTipContainer.width() + shadow,
+            //    'z-index': (toolTipContainer.css('z-index') - 2)
             });
         };
 
-        this.focus(function() {
+
+        this.unbind('focus.focusToShowToolTip');
+        this.bind('focus.focusToShowToolTip', function() {
             var element = $(this);
             showToolTip(element);
 
             $.fn.hAutoComplete.prototype.lastfocusedInputbox = $(this);
-            repositionPopup(element);
-            toolTipContainer.data('associated', element);
-
         });
 
 
 
+        //The jQuery-UI autocomplete plugin default settings
+        defaults = {
+            source: getFilterResultsFromServer,
+            select: function(event, ui) {
+                var element = $(this);
+                element.data("uiItem", ui.item.id);
+                element.val(ui.item.id);
+                setTimeout(function() { element.val(element.data("uiItem")); }, 10);
+            },
+            close: function(event, ui) {
+                //var element = $(this);
+                //setTimeout(function() { element.val(element.data("uiItem")); }, 10);
+            },
+            open: function(event, ui) {
+                var element = $(this);
+                setTimeout(function() { element.focus(); }, 100);
+            },
+            minLength: minimumSearchLength
+        };
 
-
-        this.autocomplete(defaults)
-        .bind("blur", function(a) {
+        this.autocomplete(defaults);
+        this.unbind("blur.BlurInputTextBox");
+        this.bind("blur.BlurInputTextBox", function(event) {
             var theInputBox = $(this);
             theInputBox.val(theInputBox.data("uiItem"));
-            if (!theInputBox.is(':focus')) {
-                theInputBox.autocomplete("close");
-            }
-        })
-        .data("uiItem", that.val());
+        });
+        this.data("uiItem", that.val());
 
     };
 } (jQuery));