svn commit: r1072784 - in /ofbiz/trunk: framework/images/webapp/images/ framework/widget/config/ framework/widget/templates/ themes/bizznesstime/webapp/bizznesstime/css/ themes/bluelight/webapp/bluelight/ themes/droppingcrumbs/webapp/droppingcrumbs/css...

Author: jleroux
Date: Sun Feb 20 22:43:59 2011
New Revision: 1072784

URL: http://svn.apache.org/viewvc?rev=1072784&view=rev
Log:
Introduces widget.autocompleter.defaultMinLength in widget.properties and set it to 2: Default minimum number of characters an user has to type before the ajax autocompleter activates (jQuery default is 1).
Note: not to be confused with the the minChars option of the old plugin (not in jQuery UI but the  external plugin from bassistance.de) which allowed this so this page is wrong: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions. Now replaced by minLength, the right page is http://docs.jquery.com/UI/API/1.8/Autocomplete#options

Also adds a css trick (from http://jqueryui.com/demos/autocomplete/maxheight.html) to have a vertical scroolbar when having dozens of items in autocomplete (using widget.autocompleter.defaultViewSize=100 for instance)


Modified:
    ofbiz/trunk/framework/images/webapp/images/fieldlookup.js
    ofbiz/trunk/framework/images/webapp/images/selectall.js
    ofbiz/trunk/framework/widget/config/widget.properties
    ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl
    ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/style.css
    ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css
    ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css
    ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css
    ofbiz/trunk/themes/flatgrey/webapp/flatgrey/mainrtl.css
    ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css
    ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/stylertl.css

Modified: ofbiz/trunk/framework/images/webapp/images/fieldlookup.js
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/fieldlookup.js?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/framework/images/webapp/images/fieldlookup.js (original)
+++ ofbiz/trunk/framework/images/webapp/images/fieldlookup.js Sun Feb 20 22:43:59 2011
@@ -180,7 +180,7 @@ function initiallyCollapseDelayed() {
 /*************************************
 * Fieldlookup Class & Methods
 *************************************/
-function ConstructLookup(requestUrl, inputFieldId, dialogTarget, dialogOptionalTarget, formName, width, height, position, modal, ajaxUrl, showDescription, presentation, args) {
+function ConstructLookup(requestUrl, inputFieldId, dialogTarget, dialogOptionalTarget, formName, width, height, position, modal, ajaxUrl, showDescription, presentation, defaultMinLength, args) {
     
     // add the presentation attribute to the request url to let the request know which decorator should be loaded
     if(!presentation) {
@@ -213,7 +213,7 @@ function ConstructLookup(requestUrl, inp
          SHOW_DESCRIPTION = showDescription;
         //write the new input box id in the ajaxUrl Array
         ajaxUrl = ajaxUrl.replace(ajaxUrl.substring(0, ajaxUrl.indexOf(",")), newInputBoxId);
-        new ajaxAutoCompleter(ajaxUrl, showDescription, formName);
+        new ajaxAutoCompleter(ajaxUrl, showDescription, defaultMinLength, formName);
     }
     
     var positioning = null;
@@ -763,7 +763,7 @@ lookupDescriptionLoaded.prototype.update
     data: this.allParams,
     async: false,
     success: function(result){
-      // This would be far more reliable if we would remove the widget boundaries in LookupDecorator using widgetVerbose in context :/
+      // This would be far more reliable if we were removing the widget boundaries in LookupDecorator using widgetVerbose in context :/
       if (result.split("ajaxAutocompleteOptions.ftl -->")[1]) {
         setLookDescription(_fieldId, result.split("ajaxAutocompleteOptions.ftl -->")[1].trim().split("<!--")[0].trim(), "", "");
       }

Modified: ofbiz/trunk/framework/images/webapp/images/selectall.js
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/selectall.js?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/framework/images/webapp/images/selectall.js (original)
+++ ofbiz/trunk/framework/images/webapp/images/selectall.js Sun Feb 20 22:43:59 2011
@@ -390,20 +390,21 @@ function ajaxSubmitFormUpdateAreas(form,
  * form of: areaId, target, target parameters [, areaId, target, target parameters...].
 */
 
-function ajaxAutoCompleter(areaCsvString, showDescription, formName) {
-   var areaArray = areaCsvString.replace(/&amp;/g,'&').split(",");
-   var numAreas = parseInt(areaArray.length / 3);
-
-   for (var i = 0; i < numAreas * 3; i = i + 3) {
-          var url = areaArray[i + 1] + "?" + areaArray[i + 2];
-          var div = areaArray[i];
-          // create a separated div where the result JSON Opbject will be placed
-          if ((jQuery("#" + div + "_auto")).length < 1) {
-              jQuery("<div id='" + div + "_auto'></div>").insertBefore("#" + areaArray[i]);
-          }
-
-          jQuery("#" + div).autocomplete({
-            source: function(request, response) {
+function ajaxAutoCompleter(areaCsvString, showDescription, defaultMinLength, formName){
+    var areaArray = areaCsvString.replace(/&amp;/g, '&').split(",");
+    var numAreas = parseInt(areaArray.length / 3);
+    
+    for (var i = 0; i < numAreas * 3; i = i + 3) {
+        var url = areaArray[i + 1] + "?" + areaArray[i + 2];
+        var div = areaArray[i];
+        // create a separated div where the result JSON Opbject will be placed
+        if ((jQuery("#" + div + "_auto")).length < 1) {
+            jQuery("<div id='" + div + "_auto'></div>").insertBefore("#" + areaArray[i]);
+        }
+        
+        jQuery("#" + div).autocomplete({
+            minLength: defaultMinLength,
+            source: function(request, response){
                 jQuery.ajax({
                     url: url,
                     async: false,
@@ -412,7 +413,7 @@ function ajaxAutoCompleter(areaCsvString
                         //update the result div
                         jQuery("#" + div + "_auto").html(data);
                         if (typeof autocomp != 'undefined') {
-                            jQuery.each(autocomp, function(index, item) {
+                            jQuery.each(autocomp, function(index, item){
                                 item.label = jQuery("<div>").html(item.label).text();
                             })
                             // autocomp is the JSON Object which will be used for the autocomplete box
@@ -421,23 +422,23 @@ function ajaxAutoCompleter(areaCsvString
                     }
                 })
             },
-            select: function(event, ui) {
-             //jQuery("#" + areaArray[0]).html(ui.item);
-             jQuery("#" + areaArray[0]).val(ui.item.value); // setting a text field  
-             jQuery("#" + areaArray[0]).trigger("lookup:changed"); // notify the field has changed
-             if (showDescription) {
-             setLookDescription(areaArray[0] ,ui.item.label, areaArray[2], formName)
+            select: function(event, ui){
+                //jQuery("#" + areaArray[0]).html(ui.item);
+                jQuery("#" + areaArray[0]).val(ui.item.value); // setting a text field  
+                jQuery("#" + areaArray[0]).trigger("lookup:changed"); // notify the field has changed
+                if (showDescription) {
+                    setLookDescription(areaArray[0], ui.item.label, areaArray[2], formName)
                 }
             }
         });
         if (showDescription) {
-          var lookupDescriptionLoader = new lookupDescriptionLoaded(areaArray[i], areaArray[i + 1], areaArray[i + 2], formName);
-          lookupDescriptionLoader.update();
-          jQuery("#" + areaArray[i]).bind('change lookup:changed', function(){
+            var lookupDescriptionLoader = new lookupDescriptionLoaded(areaArray[i], areaArray[i + 1], areaArray[i + 2], formName);
             lookupDescriptionLoader.update();
-          });
+            jQuery("#" + areaArray[i]).bind('change lookup:changed', function(){
+                lookupDescriptionLoader.update();
+            });
         }
-   }
+    }
 }
 
 function setLookDescription(textFieldId, description, params, formName){

Modified: ofbiz/trunk/framework/widget/config/widget.properties
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/config/widget.properties?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/framework/widget/config/widget.properties (original)
+++ ofbiz/trunk/framework/widget/config/widget.properties Sun Feb 20 22:43:59 2011
@@ -30,6 +30,9 @@ widget.form.defaultViewSize=20
 # Default number of items to be displayed in lookup ajax autocompleter
 widget.autocompleter.defaultViewSize=10
 
+# Default minimum number of characters an user has to type before the ajax autocompleter activates (jQuery default is 1)
+widget.autocompleter.defaultMinLength=2
+
 # Show/hide the ID field that is returned from ajax autocompleter
 widget.autocompleter.displayReturnField=Y
 

Modified: ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl (original)
+++ ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl Sun Feb 20 22:43:59 2011
@@ -60,7 +60,8 @@ under the License.
     <#if clientAutocomplete?has_content && clientAutocomplete=="false"> autocomplete="off"</#if><#rt/>
     /><#t/>
     <#if ajaxEnabled?has_content && ajaxEnabled>
-        <script language="JavaScript" type="text/javascript">ajaxAutoCompleter('${ajaxUrl}', false);</script><#lt/>
+        <#assign defaultMinLength = Static["org.ofbiz.base.util.UtilProperties"].getPropertyValue("widget.properties", "widget.autocompleter.defaultMinLength")>
+        <script language="JavaScript" type="text/javascript">ajaxAutoCompleter('${ajaxUrl}', false, ${defaultMinLength});</script><#lt/>
     </#if>
 </#macro>
 
@@ -474,13 +475,15 @@ ${item.description}</span>
 </#macro>
 
 <#macro renderLookupField className alert name value size maxlength id event action disabled autocomplete descriptionFieldName formName fieldFormName targetParameterIter imgSrc ajaxUrl ajaxEnabled presentation width height position fadeBackground clearText showDescription initiallyCollapsed>
-<script type="text/javascript">
-jQuery(document).ready(function(){
-    if (!jQuery('form[name="${formName}"]').length) {
-        alert("Developer: for lookups to work you must provide a form name!")
-    }
-});
-</script>
+<#if ajaxEnabled?has_content && ajaxEnabled>
+    <script type="text/javascript">
+    jQuery(document).ready(function(){
+        if (!jQuery('form[name="${formName}"]').length) {
+            alert("Developer: for lookups to work you must provide a form name!")
+        }
+    });
+    </script>
+</#if>
 <span class="field-lookup">
 <#if size?has_content && size=="0"><input type="hidden" <#if name?has_content> name="${name}"/></#if><#else><input type="text" <@renderClass className alert /><#if name?has_content> name="${name}"</#if><#if value?has_content> value="${value}"</#if><#if size?has_content> size="${size}"</#if><#if maxlength?has_content> maxlength="${maxlength}"</#if><#if id?has_content> id="${id}"</#if><#rt/><#if disabled?has_content && disabled> disabled="disabled"</#if><#rt/><#if event?has_content && action?has_content> ${event}="${action}"</#if><#rt/><#if autocomplete?has_content> autocomplete="off"</#if>/><#rt/></#if>
 <#if presentation?has_content && descriptionFieldName?has_content && presentation == "window">
@@ -501,6 +504,7 @@ jQuery(document).ready(function(){
     );"></a><#rt>
 <#else>
     <#if ajaxEnabled?has_content && ajaxEnabled>
+      <#assign defaultMinLength = Static["org.ofbiz.base.util.UtilProperties"].getPropertyValue("widget.properties", "widget.autocompleter.defaultMinLength")>
       <#if parameters?has_content && parameters._LAST_VIEW_NAME_?has_content>
         <#local ajaxUrl = ajaxUrl + "&amp;_LAST_VIEW_NAME_=" + parameters._LAST_VIEW_NAME_ />
       <#else>
@@ -516,7 +520,7 @@ jQuery(document).ready(function(){
     </#if>
     <script type="text/javascript">
         jQuery(document).ready(function(){
-            new ConstructLookup("${fieldFormName}", "${id}", document.${formName?html}.${name?html}, <#if descriptionFieldName?has_content>document.${formName?html}.${descriptionFieldName}<#else>null</#if>, "${formName?html}", "${width}", "${height}", "${position}", "${fadeBackground}", <#if ajaxEnabled?has_content && ajaxEnabled>"${ajaxUrl}", "${showDescription}"<#else>"", ""</#if>, '${presentation!}'<#rt/>
+            new ConstructLookup("${fieldFormName}", "${id}", document.${formName?html}.${name?html}, <#if descriptionFieldName?has_content>document.${formName?html}.${descriptionFieldName}<#else>null</#if>, "${formName?html}", "${width}", "${height}", "${position}", "${fadeBackground}", <#if ajaxEnabled?has_content && ajaxEnabled>"${ajaxUrl}", "${showDescription}"<#else>"", ""</#if>, "${presentation!}", "${defaultMinLength}"<#rt/>
     <#if targetParameterIter?has_content>
       <#assign isFirst = true>
       <#lt/>, [<#rt/>
@@ -542,7 +546,7 @@ jQuery(document).ready(function(){
       <#elseif ajaxUrl?index_of("_LAST_VIEW_NAME_") < 0>
         <#local ajaxUrl = ajaxUrl + "&amp;_LAST_VIEW_NAME_=main"/>
       </#if>      
-    <script language="JavaScript" type="text/javascript">ajaxAutoCompleter('${ajaxUrl}', ${showDescription});</script><#t/>
+    <script language="JavaScript" type="text/javascript">ajaxAutoCompleter('${ajaxUrl}', ${showDescription}, ${defaultMinLength});</script><#t/>
 </#if>
 </#macro>
 

Modified: ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/style.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/style.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/style.css (original)
+++ ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/style.css Sun Feb 20 22:43:59 2011
@@ -2130,3 +2130,20 @@ height:22px;
  */
 .ui-progressbar { height:2em; text-align: left; }
 .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

Modified: ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css (original)
+++ ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css Sun Feb 20 22:43:59 2011
@@ -2689,3 +2689,20 @@ width:10%
 .quickaddtable span.qty {
 width:10%
 }
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

Modified: ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css (original)
+++ ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css Sun Feb 20 22:43:59 2011
@@ -2674,3 +2674,20 @@ width:10%
 .quickaddtable span.qty {
 width:10%
 }
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css (original)
+++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css Sun Feb 20 22:43:59 2011
@@ -2120,3 +2120,20 @@ float: left;
 overflow: auto;
 width: 30em;
 }
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/mainrtl.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/mainrtl.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/mainrtl.css (original)
+++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/mainrtl.css Sun Feb 20 22:43:59 2011
@@ -381,3 +381,20 @@ border-left: none;
 border-right: solid #222 0.1em;
 }
 
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

Modified: ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css (original)
+++ ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css Sun Feb 20 22:43:59 2011
@@ -2971,3 +2971,20 @@ width:10%
 .quickaddtable span.qty {
 width:10%
 }
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

Modified: ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/stylertl.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/stylertl.css?rev=1072784&r1=1072783&r2=1072784&view=diff
==============================================================================
--- ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/stylertl.css (original)
+++ ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/stylertl.css Sun Feb 20 22:43:59 2011
@@ -385,3 +385,20 @@ text-align: right;
 .nav-pager ul li {
 float: right;
 }
+
+/* From http://jqueryui.com/demos/autocomplete/maxheight.html */
+/* When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large */
+.ui-autocomplete {
+    max-height: 100px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}