Changeset 4251

Timestamp:

Apr 28, 2008, 10:48:05 AM (14 years ago)

Author:

Nicklas Nordborg

Message:

Fixes #965: Filtering the list – selection list vs. input box for enumeration type annotations

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java (modified) (2 diffs)
• www/images/dropdown.png (deleted)
• www/images/pull_down.gif (modified) (previous)
• www/include/scripts/main.js (modified) (2 diffs)
• www/include/styles/main.css (modified) (2 diffs)

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java

@@ -630 +630 @@
         if (getEnumeration() != null)
         {
-          String filterValue = filter == null ? "" : Base.getPropertyFilterString(filter, dateFormatter);
+          String filterValue = filter == null ? "" : HTML.encodeTags(Base.getPropertyFilterString(filter, dateFormatter));
           if (smartEnum || isAnnotation)
           {
@@ -639 +639 @@
             sb.append(" value=\"").append(filterValue).append("\"");
             sb.append(">");
-            sb.append("<img class=\"smartimage\" src=\"").append(table.getPage().getRoot()).append("images/dropdown.png\"");
+            sb.append("<img class=\"smartimage\" src=\"").append(table.getPage().getRoot()).append("images/pull_down.gif\"");
             sb.append(" onclick=\"SmartEnum.activateAndDisplay('");
             sb.append(table.getId()).append("','").append(inputName).append("')\">");

trunk/www/include/scripts/main.js

@@ -1291 +1291 @@
   }
 
-}
-
-var SmartEnum = new SmartEnumClass();
-/*
-  Handles "smart" input fields which can have an attached list of
-  enumeration options. As the user types a popup-list is displayed
-  with the matching options.
-*/
-function SmartEnumClass()
-{
-  this.initialDelay = 300;
-  this.repeatDelay = 50;
-
-  this.activeField = null;
-  this.selected = -1;
-  this.lastSelected = null;
-  this.lastText = '';
-
-  /*
-    Initialise the smart enum system by creating the <div> tag that
-    is used to hold the options.
-  */
-  this.init = function()
-  {
-    if (this.div) return;
-    var div = document.createElement('div');
-    div.className = 'smartenum';
-    div.style.display = 'none';
-    document.body.appendChild(div);
-    this.div = div;
-    this.debug = document.createElement('div');
-    document.body.appendChild(this.debug);
-  }
-
-  /*
-    Enable the input field for smart enum. Ignored if
-    the form or field doesn't exists, the field is not an
-    input field or if there are no options. This method
-    changes event handlers for the input field.
-    @param frmName The name of the form 
-    @param fieldName The name of the field
-    @param An array object with the options
-  */
-  this.enableForField = function(frmName, fieldName, options)
-  {
-    if (!options) return;
-    var frm = document.forms[frmName];
-    if (!frm) return;
-    var field = frm[fieldName];
-    if (!field) return;
-
-    this.init();
-    field.smartOptions = options;
-    field.setAttribute('autocomplete', 'off');
-    Main.addClass(field, 'smartinput');
-    field.onfocus = this.onfocus;
-    field.onkeyup = this.onkeyup;
-    field.onkeydown = this.onkeydown;
-    field.onblur = this.onblur;
-  }
-
-  this.activateAndDisplay = function(formName, fieldName)
-  {
-    var frm = document.forms[formName];
-    if (!frm) return;
-    var field = frm[fieldName];
-    if (!field) return;
-    
-    if (this.blurTimerId) 
-    {
-      clearTimeout(this.blurTimerId);
-      this.blurTimerId = null;
-    }
-    this.setActive(field);
-    this.filterOptions(true);
-    this.showOptions();
-    var oldfocus = field.onfocus;
-    field.onfocus = null;
-    field.focus();
-    field.onfocus = oldFocus;
-  }
-
-  /*
-    Set a field as the active field. All other operations will
-    now use this field. Set to null to disable all smart enum.
-    Ignored if the field doesn't have any options. This method
-    also positions the <div> with the options.
-  */
-  this.setActive = function(field)
-  {
-    if (!field || !field.smartOptions) return;
-    this.activeField = field;
-    var pos = Main.getElementPosition(this.activeField);
-    var div = this.div;
-    div.style.top = (pos.top + this.activeField.offsetHeight) + 'px';
-    div.style.left = (pos.left-2) + 'px';
-    div.style.width = (this.activeField.offsetWidth + 10) + 'px';
-  }
-
-  /*
-    Hide the enum options.
-  */
-  this.hideOptions = function()
-  {
-    this.div.style.display = 'none';
-  }
-
-  /*
-    Show the enum options setting the correct position.
-  */
-  this.showOptions = function()
-  {
-    this.div.style.display = 'block';
-  }
-
-  /*
-    Filter the enum options by the text in the active field.
-    The options that passed the filter are added as <div> tags
-    to the enum <div>.
-    @return TRUE if the filter generated any options, FALSE otherwise
-  */
-  this.filterOptions = function(allowEmpty)
-  {
-    if (!this.activeField) return false;
-    var text = this.activeField.value.replace(/^[=!<>]*/, '');
-    if (text == this.lastMatchedText) return true;
-    if (text == '' && !allowEmpty) return false;
-    
-    var options = this.activeField.smartOptions;
-    this.lastMatchedText = text;
-    this.selected = -1;
-    this.lastSelected = null;
-    var matching = '';
-    var index = 0;
-    for (var i = 0; i < options.length; i++)
-    {
-      if (options[i].indexOf(text) >= 0)
-      {
-        matching += '<div class="smartoption" id="smartoption.' + index + '"';
-        matching += ' onmouseover="SmartEnum.setSelectedOption(' + index + ')"'; 
-        matching += ' onclick="SmartEnum.submitSelected()">' + options[i] + '</div>';
-        index++;
-      }
-    }
-    this.div.innerHTML = matching;
-    return true;
-  }
-
-  /*
-    Mark a specific enum option as selected. Also makes sure
-    that the selected option is within the viewable area.
-    @param index The index of the option
-  */
-  this.setSelectedOption = function(index)
-  {
-    if (this.lastSelected)
-    {
-      Main.removeClass(this.lastSelected, 'selected');
-      this.lastSelected = null;
-    }
-    var option = document.getElementById('smartoption.' + index);
-    if (option)
-    {
-      Main.addClass(option, 'selected');
-      this.lastSelected = option;
-      this.selected = index;
-      var optionTop = option.offsetTop;
-      var optionBottom = optionTop + option.offsetHeight;
-      var parent = option.offsetParent;
-      var parentTop = parent.scrollTop;
-      var parentBottom = parentTop + parent.offsetHeight;
-      if (optionTop < parentTop)
-      {
-        parent.scrollTop = optionTop;
-      }
-      else if (optionBottom > parentBottom)
-      {
-        parent.scrollTop = optionBottom - parent.offsetHeight;
-      }
-    }
-  }
-
-  /*
-    Moves the selection up or down, optionally
-    repeating the operation at specified time intervals.
-    @param delta The number of options to shift the selection
-    @param delayRepeat Number of milliseconds to wait until
-      the move is repeated for the first time
-    @param repeat Number of milliseconds to wait between
-      subsequent repeats
-  */
-  this.moveSelection = function(delta, delayRepeat, repeat)
-  {
-    var option = document.getElementById('smartoption.' + (this.selected + delta));
-    if (option)
-    {
-      this.setSelectedOption(this.selected + delta);
-    }
-    if (delayRepeat && repeat)
-    {
-      var call = 'SmartEnum.moveSelection(' + delta + ',' + repeat + ',' + repeat + ')';
-      this.timerId = setTimeout(call, delayRepeat);
-    }
-  }
-
-  /*
-    Copies the selected option to the active field and submits
-    the form. If no option is selected, just submit the form.
-  */
-  this.submitSelected = function(event)
-  {
-    if (!this.activeField) return;
-    if (this.lastSelected)
-    {
-      var text = this.activeField.value;
-      var selectedText = this.lastSelected.innerHTML;
-      this.activeField.value = text.replace(/^([=!<>]*).*/, '$1' + selectedText);
-    }
-    this.activeField.form.submit();
-  }
-
-  /*
-    Cancels a move selection repeat set in the 'moveSelection' method.
-  */
-  this.cancelKeyRepeat = function()
-  {
-    if (this.timerId)
-    {
-      clearTimeout(this.timerId);
-      this.timerId = null;
-    }
-  }
-
-  /*
-    Called when a smart-enum enabled field receivs
-    the focus. This should set the current field to
-    the active field.
-  */
-  this.onfocus = function(event)
-  {
-    if (!event) event = window.event;
-    var field = Main.getEventTarget(event);
-    SmartEnum.setActive(field);
-  }
-  
-  /*
-    Called when a smart-enum enabled field loses
-    the focus. This should hide the options and
-    set the current field to null.
-  */
-  this.onblur = function(event)
-  {
-    if (!event) event = window.event;
-    // Need timout, otherwise the options are hidden and can't receive
-    // a possible mouseclick that selects an options and submits the form.
-    SmartEnum.blurTimerId = setTimeout('SmartEnum.hideOptions(); SmartEnum.setActive(null);', 100);
-  }
-  
-  /*
-    Called when a key is pressed in a smart-enum enabled field.
-    This function detects:
-    * up/down arrow: moves the selected option
-    * enter: submits the form
-  */
-  this.onkeydown = function(event)
-  {
-    if (!event) event = window.event;
-    var charCode = Main.getEventCharCode(event);
-    if (charCode == 38)
-    {
-      // Up arrow
-      SmartEnum.moveSelection(-1, SmartEnum.initialDelay, SmartEnum.repeatDelay);
-    }
-    else if (charCode == 40)
-    {
-      // Down arrow
-      SmartEnum.moveSelection(1, SmartEnum.initialDelay, SmartEnum.repeatDelay);
-    }
-    else if (charCode == 13)
-    {
-      // Enter
-      SmartEnum.submitSelected(event);
-    }
-  }
-  
-  /*
-    Called when a key is released in a smart-enum enabled field. 
-    This function detects changes to the text and displays matching
-    options.
-  */
-  this.onkeyup = function(event)
-  {
-    if (!event) event = window.event;
-    SmartEnum.cancelKeyRepeat();
-    var charCode = Main.getEventCharCode(event);
-    if (SmartEnum.filterOptions(charCode == 40 || charCode == 38))
-    {
-      SmartEnum.showOptions();
-    }
-    else
-    {
-      SmartEnum.hideOptions();
-    }
-  }
-  
+  /**
+    Compare two strings ignoreing case.
+    returns -1 if a<b, +1 if a>b, 0 if a==b
+  */
+  this.compareIgnoreCase = function(a, b)
+  {
+    var lcA = a.toLowerCase();
+    var lcB = b.toLowerCase();
+    if (lcA < lcB) return -1;
+    if (lcA > lcB) return +1;
+    return 0;
+  }
 }
 
@@ -2073 +1780 @@
       request.send(null);
     }
+  }
+}
+
+var SmartEnum = new SmartEnumClass();
+/*
+  Handles "smart" input fields which can have an attached list of
+  enumeration options. As the user types a popup-list is displayed
+  with the matching options.
+*/
+function SmartEnumClass()
+{
+  // Configuration parameters
+  this.initialDelay = 300;
+  this.repeatDelay = 50;
+  this.leftOffset = Browser.isIE ? -1 : -2;
+  this.topOffset = Browser.isIE ? 2 : 0;
+  this.widthOffset = 15;
+
+  this.activeField = null;
+  this.selectedIndex = -1;
+  this.lastSelectedEnum = null;
+  this.lastMatchedText = null;
+
+  /*
+    Initialise the smart enum system by creating the <div> tag that
+    is used to hold the options.
+  */
+  this.init = function()
+  {
+    if (this.div) return;
+    var div = document.createElement('div');
+    div.className = 'smartenum';
+    div.style.display = 'none';
+    div.onmouseenter = function() {SmartEnum.disableHide = true; };
+    div.onmouseleave = function() {SmartEnum.disableHide = false; };
+    document.body.appendChild(div);
+    this.div = div;
+    this.debug = document.createElement('div');
+    document.body.appendChild(this.debug);
+  }
+
+  /*
+    Enable the input field for smart enum. Ignored if
+    the form or field doesn't exists, the field is not an
+    input field or if there are no options. This method
+    changes event handlers for the input field.
+    @param frmName The name of the form 
+    @param fieldName The name of the field
+    @param An array object with the options
+  */
+  this.enableForField = function(frmName, fieldName, options)
+  {
+    if (!options) return;
+    var frm = document.forms[frmName];
+    if (!frm) return;
+    var field = frm[fieldName];
+    if (!field) return;
+
+    this.init();
+    // Sort the options in alphabetical order, ignoring case
+    field.smartOptions = options.sort(Strings.compareIgnoreCase);
+    field.setAttribute('autocomplete', 'off');
+    Main.addClass(field, 'smartinput');
+    field.onfocus = this.onfocus;
+    field.onkeyup = this.onkeyup;
+    field.onkeydown = this.onkeydown;
+    field.onblur = this.onblur;
+  }
+
+  /*
+    Activate and display the enum options for a field.
+  */
+  this.activateAndDisplay = function(formName, fieldName)
+  {
+    var frm = document.forms[formName];
+    if (!frm) return;
+    var field = frm[fieldName];
+    if (!field) return;
     
-  }
-  
-
+    // We need to disable the onfocus event to make sure that
+    // methods are called in the correct order. In IE. the
+    // onfocus() event is called last, but in Firefox it is called
+    // immediately after the call to focus().
+    this.ignoreNextOnFocus = true;
+    field.focus();
+    this.hideOptions();
+    this.setActive(field);
+    this.filterOptions(true);
+    this.showOptions();
+  }
+
+  /*
+    Set a field as the active field. All other operations will
+    now use this field. Set to null to disable all smart enum.
+    Ignored if the field doesn't have any options. This method
+    also positions the <div> with the options.
+  */
+  this.setActive = function(field)
+  {
+    if (field == this.activeField) return;
+    this.activeField = field;
+    this.lastMatchedText = null;
+    if (!field || !field.smartOptions) return;
+    var pos = Main.getElementPosition(this.activeField);
+    var div = this.div;
+    div.innerHTML = '';
+    div.style.top = (pos.top + this.activeField.offsetHeight + this.topOffset) + 'px';
+    div.style.left = (pos.left + this.leftOffset) + 'px';
+    div.style.width = (this.activeField.offsetWidth + this.widthOffset) + 'px';
+  }
+
+  /*
+    Hide the enum options.
+  */
+  this.hideOptions = function()
+  {
+    this.div.style.display = 'none';
+    this.lastSelectedEnum = null;
+  }
+  
+  /*
+    Hide the enum options after a short delay. The delay is needed
+    in so a possible onClick event can get sent to the currently
+    selected option.
+  */
+  this.hideOptionsDelayed = function()
+  {
+    if (this.disableHide) return;
+    this.hideTimerId = setTimeout("SmartEnum.hideOptions();", 100);
+  }
+
+  /*
+    Show the enum options setting the correct position.
+  */
+  this.showOptions = function()
+  {
+    this.cancelHideOptions();
+    if (this.div.style.display == 'block') return;
+    this.div.style.display = 'block';
+    this.div.scrollTop = 0;
+  }
+
+  /*
+    Filter the enum options by the text in the active field.
+    The options that passed the filter are added as <div> tags
+    to the enum <div>.
+    @return TRUE if the filter generated any options, FALSE otherwise
+  */
+  this.filterOptions = function(allowEmpty)
+  {
+    if (!this.activeField) return false;
+    var text = this.activeField.value.replace(/^[=!<>]*/, '');
+    if (text == this.lastMatchedText) return true;
+    if (text == '' && !allowEmpty) return false;
+    
+    var options = this.activeField.smartOptions;
+    this.lastMatchedText = text;
+    this.selectedIndex = -1;
+    this.lastSelectedEnum = null;
+    var matching = '';
+    var index = 0;
+    for (var i = 0; i < options.length; i++)
+    {
+      if (text == '' || options[i].indexOf(text) >= 0)
+      {
+        matching += '<div class="smartoption" id="smartoption.' + index + '"';
+        matching += ' onmouseover="SmartEnum.setSelectedEnum(' + index + ')"'; 
+        matching += ' onclick="SmartEnum.submitSelected()">' + options[i] + '</div>';
+        index++;
+      }
+    }
+    this.div.innerHTML = matching;
+    return true;
+  }
+
+  /*
+    Mark a specific enum option as selected. Also makes sure
+    that the selected option is within the viewable area.
+    @param index The index of the option
+  */
+  this.setSelectedEnum = function(index)
+  {
+    if (this.lastSelectedEnum)
+    {
+      Main.removeClass(this.lastSelectedEnum, 'selected');
+      this.lastSelectedEnum = null;
+    }
+    var option = document.getElementById('smartoption.' + index);
+    if (option)
+    {
+      Main.addClass(option, 'selected');
+      this.lastSelectedEnum = option;
+      this.selectedIndex = index;
+      var optionTop = option.offsetTop;
+      var optionBottom = optionTop + option.offsetHeight;
+      var parent = option.offsetParent;
+      var parentTop = parent.scrollTop;
+      var parentBottom = parentTop + parent.offsetHeight;
+      if (optionTop < parentTop)
+      {
+        parent.scrollTop = optionTop;
+      }
+      else if (optionBottom > parentBottom)
+      {
+        parent.scrollTop = optionBottom - parent.offsetHeight + 2;
+      }
+    }
+  }
+
+  /*
+    Moves the selection up or down, optionally
+    repeating the operation at specified time intervals.
+    @param delta The number of options to shift the selection
+    @param delayRepeat Number of milliseconds to wait until
+      the move is repeated for the first time
+    @param repeat Number of milliseconds to wait between
+      subsequent repeats
+  */
+  this.moveSelection = function(delta, delayRepeat, repeat)
+  {
+    var option = document.getElementById('smartoption.' + (this.selectedIndex + delta));
+    if (option)
+    {
+      this.setSelectedEnum(this.selectedIndex + delta);
+    }
+    if (delayRepeat && repeat)
+    {
+      var call = 'SmartEnum.moveSelection(' + delta + ',' + repeat + ',' + repeat + ')';
+      if (this.timerId) clearTimeout(this.timerId);
+      this.timerId = setTimeout(call, delayRepeat);
+    }
+  }
+
+  /*
+    Copies the selected option to the active field and submits
+    the form. If no option is selected, just submit the form.
+  */
+  this.submitSelected = function(event)
+  {
+    if (!this.activeField) return;
+    if (this.lastSelectedEnum)
+    {
+      var text = this.activeField.value;
+      var selectedText = this.lastSelectedEnum.innerHTML;
+      this.activeField.value = text.replace(/^([=!<>]*).*/, '$1' + selectedText);
+    }
+    this.hideOptions();
+    this.activeField.onkeyup = null;
+    this.activeField.form.submit();
+  }
+
+  /*
+    Cancels a move selection repeat set in the 'moveSelection' method.
+  */
+  this.cancelKeyRepeat = function()
+  {
+    if (this.timerId)
+    {
+      clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+  }
+  
+  /*
+    Cancels a scheduled hide of the dropdown enum options.
+  */
+  this.cancelHideOptions = function()
+  {
+    if (this.hideTimerId) 
+    {
+      clearTimeout(this.hideTimerId);
+      this.hideTimerId = null;
+    }
+  }
+
+  /*
+    Called when a smart-enum enabled field receivs
+    the focus. This should set the current field to
+    the active field.
+  */
+  this.onfocus = function(event)
+  {
+    if (SmartEnum.ignoreNextOnFocus)
+    {
+      SmartEnum.ignoreNextOnFocus = false;
+      return;
+    }
+    if (!event) event = window.event;
+    var field = Main.getEventTarget(event);
+    SmartEnum.hideOptions();
+    SmartEnum.setActive(field);
+  }
+  
+  /*
+    Called when a smart-enum enabled field loses
+    the focus. This should hide the options and
+    set the current field to null.
+  */
+  this.onblur = function(event)
+  {
+    if (!event) event = window.event;
+    SmartEnum.hideOptionsDelayed();
+  }
+  
+  /*
+    Called when a key is pressed in a smart-enum enabled field.
+    This function detects:
+    * up/down arrow: moves the selected option
+    * enter: submits the form
+  */
+  this.onkeydown = function(event)
+  {
+    if (!event) event = window.event;
+    var charCode = Main.getEventCharCode(event);
+    if (charCode == 38)
+    {
+      // Up arrow
+      SmartEnum.moveSelection(-1, SmartEnum.initialDelay, SmartEnum.repeatDelay);
+    }
+    else if (charCode == 40)
+    {
+      // Down arrow
+      SmartEnum.moveSelection(1, SmartEnum.initialDelay, SmartEnum.repeatDelay);
+    }
+    else if (charCode == 13)
+    {
+      // Enter
+      SmartEnum.submitSelected(event);
+    }
+  }
+  
+  /*
+    Called when a key is released in a smart-enum enabled field. 
+    This function detects changes to the text and displays matching
+    options.
+  */
+  this.onkeyup = function(event)
+  {
+    if (!event) event = window.event;
+    SmartEnum.cancelKeyRepeat();
+    var charCode = Main.getEventCharCode(event);
+    if (SmartEnum.filterOptions(charCode == 40 || charCode == 38))
+    {
+      SmartEnum.showOptions();
+    }
+    else
+    {
+      SmartEnum.hideOptions();
+    }
+  }
 }

trunk/www/include/styles/main.css

@@ -350 +350 @@
 
 .smartenum {
-  position: absolute; 
-  width: 100px;
+  position: absolute;
   height: 200px;
-  background: #E0E0E0;
-  border-top: 1px solid #333333;
-  border-left: 1px solid #333333;
-  border-right: 1px solid #333333;
-  border-bottom: 1px solid #333333;
-  padding: 2px;
+  background: #FFFFFF;
+  border: 1px solid #666666;
   z-index: 999;
   overflow: auto;
@@ -368 +363 @@
   border-bottom: 2px ridge #FFFFFF;
   border-right: 2px ridge #FFFFFF;
-  
+  background: #ffffff;
 }
 
 .smartinput input {
   border: 0px;
+  border-right: 1px solid #999999;
 }
 
 .smartoption {
   cursor: pointer;
+  padding: 0px 2px 0px 2px;
+  
 }
 
 .smartimage {
   cursor: pointer;
-  border-left: 1px solid #999999;
+  border: 0px;
   background: #ffffff;
 }
       
 .smartenum .selected {
-  background: #cccccc;      
-}
+  background: #445577;
+  color: #ffffff;   
+}