Changed file search a bit (instant search) and made scroll bar adjust directly when file list changes

This commit is contained in:
Gina Häußge 2014-05-13 17:59:24 +02:00
parent 4ce4786a58
commit 98063422de
3 changed files with 21 additions and 9 deletions

View file

@ -302,12 +302,24 @@ $(function() {
};
$(element).popover(options);
}
}
};
ko.bindingHandlers.allowBindings = {
init: function (elem, valueAccessor) {
return { controlsDescendantBindings: !valueAccessor() };
}
init: function (elem, valueAccessor) {
return { controlsDescendantBindings: !valueAccessor() };
}
};
ko.bindingHandlers.slimScrolledForeach = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
return ko.bindingHandlers.foreach.init(element, valueAccessor(), allBindings, viewModel, bindingContext);
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
setTimeout(function() {
$(element).slimScroll({scrollBy: 0});
}, 10);
return ko.bindingHandlers.foreach.update(element, valueAccessor(), allBindings, viewModel, bindingContext);
}
};
ko.applyBindings(connectionViewModel, document.getElementById("connection_accordion"));

View file

@ -14,6 +14,9 @@ function GcodeFilesViewModel(printerStateViewModel, loginStateViewModel) {
self.isSdReady = ko.observable(undefined);
self.searchQuery = ko.observable(undefined);
self.searchQuery.subscribe(function() {
self.performSearch();
});
self.freeSpace = ko.observable(undefined);
self.freeSpaceString = ko.computed(function() {

View file

@ -184,12 +184,9 @@
<div class="accordion-body collapse in overflow_visible" id="files">
<div class="accordion-inner">
<form class="form-search">
<div class="input-append">
<input type="text" class="input-medium search-query" data-bind="value: searchQuery">
<button class="btn" type="button" data-bind="click: performSearch"><i class=" icon-search"></i></button>
</div>
<input type="text" class="input-block search-query" data-bind="value: searchQuery, valueUpdate: 'input'" placeholder="Search...">
</form>
<div class="gcode_files" data-bind="foreach: listHelper.paginatedItems">
<div class="gcode_files" data-bind="slimScrolledForeach: listHelper.paginatedItems">
<div class="entry" data-bind="attr: { id: $root.getEntryId($data) }">
<div class="title" data-bind="css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: name"></div>
<div class="uploaded">Uploaded: <span data-bind="text: formatTimeAgo(date)"></span></div>