From 04ed80f066df517b5eb82f7874299a207dc9dad6 Mon Sep 17 00:00:00 2001
From: mcramer <m.cramer@pixcept.de>
Date: Mon, 08 Oct 2012 14:49:15 -0400
Subject: [PATCH] Implemented: replaced select boxes by jQuery UI combobox (modified)
---
interface/web/js/jquery.tipsy.js | 138 ++++++++++++++++++++++++++++++++++++++++++++++
interface/web/themes/default/templates/main.tpl.htm | 2
interface/web/themes/default/css/styles.css | 6 +
interface/web/js/scrigo.js.php | 10 +++
4 files changed, 154 insertions(+), 2 deletions(-)
diff --git a/interface/web/js/jquery.tipsy.js b/interface/web/js/jquery.tipsy.js
index 9567ed3..f4baf77 100644
--- a/interface/web/js/jquery.tipsy.js
+++ b/interface/web/js/jquery.tipsy.js
@@ -239,3 +239,141 @@
};
})(jQuery);
+
+
+
+(function( $ ) {
+ $.widget( "ui.combobox", {
+ _create: function() {
+ var elwidth = this.element.width();
+ var elheight = this.element.height();
+ var input,
+ self = this,
+ select = this.element.hide(),
+ selected = select.children( ":selected" ),
+ value = selected.val() ? selected.text() : "",
+ wrapper = this.wrapper = $( "<span>" )
+ .addClass( "ui-combobox" )
+ .insertAfter( select );
+
+ input = $( "<input>" )
+ .appendTo( wrapper )
+ .val( value )
+ .addClass( "ui-state-default ui-combobox-input" )
+ .css( { "width": elwidth - 15, "height": elheight })
+ .autocomplete({
+ delay: 0,
+ minLength: 0,
+ source: function( request, response ) {
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+ response( select.children( "option" ).map(function() {
+ var text = $( this ).text();
+ //if ( this.value && ( !request.term || matcher.test(text) ) )
+ if ( !request.term || matcher.test(text) )
+ return {
+ label: (text == "" ? " " : text.replace(
+ new RegExp(
+ "(?![^&;]+;)(?!<[^<>]*)(" +
+ $.ui.autocomplete.escapeRegex(request.term) +
+ ")(?![^<>]*>)(?![^&;]+;)", "gi"
+ ), "<strong>$1</strong>" )),
+ value: text,
+ option: this
+ };
+ }) );
+ },
+ select: function( event, ui ) {
+ ui.item.option.selected = true;
+ self._trigger( "selected", event, {
+ item: ui.item.option
+ });
+ if (jQuery(".panel #Filter").length > 0) {
+ jQuery(".panel #Filter").trigger('click');
+ }
+ },
+ change: function( event, ui ) {
+ if ( !ui.item ) {
+ var matcher = new RegExp( "" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "", "i" ),
+ matchtext = $(this).val();
+ valid = false;
+ select.children( "option" ).each(function() {
+ if( ($(this).text() == "" && matchtext == "") || $( this ).text().match( matcher ) ) {
+ select.val($(this).val());
+ this.selected = valid = true;
+ return false;
+ }
+ });
+ if ( !valid ) {
+ // remove invalid value, as it didn't match anything
+ $( this ).val( "" );
+ select.val( "" );
+ input.data( "autocomplete" ).term = "";
+ return false;
+ }
+ }
+ }
+ })
+ .keypress(function(event) {
+ if(event.keyCode == 13) {
+ event.preventDefault();
+ var matcher = new RegExp( "" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "", "i" ),
+ matchtext = $(this).val();
+ valid = false,
+ selected = false;
+ select.children( "option" ).each(function() {
+ if( ($(this).val() == "" && matchtext == "") || $( this ).text().match( matcher ) ) {
+ valid = true;
+ selected = $(this);
+ return false;
+ }
+ });
+ if(!valid) return false;
+
+ $(this).autocomplete('option','select').call($(this), event, { item: { option: selected.get(0) } });
+ }
+ })
+ .addClass( "ui-widget ui-widget-content ui-corner-left" );
+
+ input.data( "autocomplete" )._renderItem = function( ul, item ) {
+ return $( "<li></li>" )
+ .data( "item.autocomplete", item )
+ .append( "<a>" + item.label + "</a>" )
+ .appendTo( ul );
+ };
+
+ $( "<a>" )
+ .attr( "tabIndex", -1 )
+ .attr( "title", "Show All Items" )
+ .appendTo( wrapper )
+ .button({
+ icons: {
+ primary: "ui-icon-triangle-1-s"
+ },
+ text: false
+ })
+ .removeClass( "ui-corner-all" )
+ .addClass( "ui-corner-right ui-combobox-toggle" )
+ .css( { "width": 15, "height": elheight })
+ .click(function() {
+ // close if already visible
+ if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
+ input.autocomplete( "close" );
+ return;
+ }
+
+ // work around a bug (likely same cause as #5265)
+ $( this ).blur();
+
+ // pass empty string as value to search for, displaying all results
+ input.autocomplete( "search", "" );
+ input.focus();
+ });
+ },
+
+ destroy: function() {
+ this.wrapper.remove();
+ this.element.show();
+ $.Widget.prototype.destroy.call( this );
+ }
+ });
+})( jQuery );
diff --git a/interface/web/js/scrigo.js.php b/interface/web/js/scrigo.js.php
index 04803a1..1bb61f7 100644
--- a/interface/web/js/scrigo.js.php
+++ b/interface/web/js/scrigo.js.php
@@ -55,6 +55,10 @@
}
}
+function onAfterContentLoad() {
+ $('#pageContent').find("select").combobox();
+}
+
function loadContentRefresh(pagename) {
if(document.getElementById('refreshinterval').value > 0) {
@@ -68,6 +72,7 @@
success: function(data, textStatus, jqXHR) {
hideLoadIndicator();
jQuery('#pageContent').html(jqXHR.responseText);
+ onAfterContentLoad();
pageFormChanged = false;
},
error: function() {
@@ -142,6 +147,7 @@
document.location.href = 'index.php';
} else {
jQuery('#pageContent').html(jqXHR.responseText);
+ onAfterContentLoad();
pageFormChanged = false;
}
loadMenus();
@@ -179,6 +185,7 @@
//window.setTimeout('loadContent(redirect)', 1000);
} else {
jQuery('#pageContent').html(jqXHR.responseText);
+ onAfterContentLoad();
pageFormChanged = false;
}
},
@@ -217,6 +224,7 @@
//window.setTimeout('loadContent(redirect)', 1000);
} else {
jQuery('#pageContent').html(jqXHR.responseText);
+ onAfterContentLoad();
pageFormChanged = false;
}
},
@@ -294,6 +302,7 @@
//jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
jQuery('#pageContent').html(jqXHR.responseText);
+ onAfterContentLoad();
pageFormChanged = false;
}
},
@@ -320,6 +329,7 @@
loadContent(parts[1]);
} else {
jQuery('#pageContent').html(jqXHR.responseText);
+ onAfterContentLoad();
pageFormChanged = false;
}
},
diff --git a/interface/web/themes/default/css/styles.css b/interface/web/themes/default/css/styles.css
index dd4607d..45679c8 100644
--- a/interface/web/themes/default/css/styles.css
+++ b/interface/web/themes/default/css/styles.css
@@ -1770,4 +1770,8 @@
color:#000000;
}
.ui-widget { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; }
\ No newline at end of file
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; }
+ul.ui-autocomplete { max-height: 250px; overflow-y: auto; }
+.ui-combobox { position: relative; display: inline-block; }
+.ui-combobox-toggle { position: absolute !important; top: 0; bottom: 0; margin-left: -1px; padding: 1px !important; background: none repeat scroll 0 0 #FFFFFF !important; border: 1px solid #DFDFDF !important;}
+.ui-combobox-input { background: none repeat scroll 0 0 #FFFFFF !important; border: 1px solid #DFDFDF !important; padding: 1px; font-weight: normal !important; }
\ No newline at end of file
diff --git a/interface/web/themes/default/templates/main.tpl.htm b/interface/web/themes/default/templates/main.tpl.htm
index e46da4a..5b9a916 100644
--- a/interface/web/themes/default/templates/main.tpl.htm
+++ b/interface/web/themes/default/templates/main.tpl.htm
@@ -64,7 +64,7 @@
jQuery(document).bind("keypress", function(event) {
//Use jQuery submit with keypress Enter in panel filterbar
- if (event.which == '13' && jQuery(".panel #Filter").length > 0) {
+ if (event.which == '13' && jQuery(".panel #Filter").length > 0 && jQuery(event.target).hasClass('ui-autocomplete-input') == false ) {
event.preventDefault();
jQuery(".panel #Filter").trigger('click');
}
--
Gitblit v1.9.1