Add button to clear article search (list.js customization)
This commit is contained in:
parent
3c8f56b24f
commit
9f083dd4d0
5 changed files with 40 additions and 3 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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:'
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue