Add button to clear article search (list.js customization)

This commit is contained in:
Julius 2013-09-23 21:31:54 +02:00
parent 3c8f56b24f
commit 9f083dd4d0
5 changed files with 40 additions and 3 deletions

View file

@ -11,30 +11,56 @@ var CustomizedList = function(id, options, values) {
this.defaults(options);
this.list(id, options, values);
this.callbacks(options);
this.onload(options);
},
defaults: function(options) {
options.delayedSearchClass = options.delayedSearchClass || 'delayed-search';
options.delayedSearchTime = options.delayedSearchTime || 500;
options.highlightClass = options.highlightClass || 'btn-primary';
options.resetSearchClass = options.resetSearchClass || 'reset-search';
},
list: function(id, options, values) {
self.list = new window.List(id, options, values);
},
callbacks: function(options) {
h.addEvent(h.getByClass(options.delayedSearchClass, self.list.listContainer), 'keyup', self.searchDelayStart);
var resetSearchButton = h.getByClass(options.resetSearchClass, self.list.listContainer);
$(resetSearchButton).click(self.resetSearch);
self.list.on('updated', self.highlightResetButton);
var delayedSearchInput = h.getByClass(options.delayedSearchClass, self.list.listContainer);
$(delayedSearchInput).keyup(self.searchDelayStart);
},
onload: function(options) {
var initialSearchTerm = $('.' + options.delayedSearchClass + ', .' + options.searchClass, self.list.listContainer).val();
if('' != initialSearchTerm) {
self.list.search(initialSearchTerm);
}
}
};
this.searchDelayStart = function(searchString, columns) {
// TODO: if keycode corresponds to 'ENTER' ? skip delay
// TODO: if search is about to be cleared (empty searchString) ? skip delay
clearTimeout(self.searchTimeout);
self.searchTimeout = window.setTimeout(function() {self.searchDelayEnd(searchString, columns)}, options.delayedSearchTime);
var resetSearchButton = h.getByClass(options.resetSearchClass, self.list.listContainer);
$(resetSearchButton).removeClass(options.highlightClass);
}
this.searchDelayEnd = function(searchString, columns) {
self.list.search(searchString, columns);
}
this.highlightResetButton = function() {
var resetSearchButton = h.getByClass(options.resetSearchClass, self.list.listContainer);
$(resetSearchButton).toggleClass(options.highlightClass, self.list.searched);
}
this.resetSearch = function() {
$('.' + options.delayedSearchClass + ', .' + options.searchClass, self.list.listContainer).val('');
self.list.search('');
}
init.start(id, options, values);
}

View file

@ -238,3 +238,8 @@ tr.unavailable {
margin-bottom: 15px
}
}
// allow buttons as input add-on (with proper height)
.input-append button.add-on {
height: inherit;
}

View file

@ -43,7 +43,11 @@
.row-fluid
.well.clear
= text_field_tag :article, params[:article], placeholder: t('.search_article'), class: 'search-query input-large delayed-search'
.form-search
.input-append
= text_field_tag :article, params[:article], placeholder: t('.search_article'), class: 'search-query delayed-search'
%button.add-on.btn.reset-search{:type => :button, :title => t('.reset_article_search')}
%i.icon.icon-remove
= form_for @group_order do |f|
= f.hidden_field :lock_version

View file

@ -787,6 +787,7 @@ de:
new_funds: Neuer Kontostand
note: Notiz
price: Preis
reset_article_search: Suche zurücksetzen
search_article: Artikel suchen...
sum: Summe
sum_amount: ! 'Gesamtbestellmenge bisher:'

View file

@ -791,6 +791,7 @@ en:
new_funds: New account balance
note: Note
price: Price
reset_article_search: Reset search
search_article: Search for article...
sum: Sum
sum_amount: Current amount