Clippy Lints page - Delay updating of the URL in response to search input

Update on blur, enter keypress, and a debounced delay of 1000 ms.

This keeps the URL updated, but not distractingly so.
This commit is contained in:
Brian Hetro 2023-05-27 13:50:56 -04:00
parent 7c1bca4be8
commit a865d8432c
2 changed files with 26 additions and 9 deletions

View File

@ -501,9 +501,11 @@ Otherwise, have a great day =^.^=
<div class="col-12 col-md-7 search-control">
<div class="input-group">
<label class="input-group-addon" id="filter-label" for="search-input">Filter:</label>
<input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input" ng-model="search" ng-model-options="{debounce: 50}"/>
<input type="text" class="form-control filter-input" placeholder="Keywords or search string" id="search-input"
ng-model="search" ng-blur="updatePath()" ng-keyup="$event.keyCode == 13 && updatePath()"
ng-model-options="{debounce: 50}" />
<span class="input-group-btn">
<button class="filter-clear btn" type="button" ng-click="search = ''">
<button class="filter-clear btn" type="button" ng-click="search = ''; updatePath();">
Clear
</button>
</span>

View File

@ -106,7 +106,7 @@
}
};
})
.controller("lintList", function ($scope, $http, $location) {
.controller("lintList", function ($scope, $http, $location, $timeout) {
// Level filter
var LEVEL_FILTERS_DEFAULT = {allow: true, warn: true, deny: true, none: true};
$scope.levels = { ...LEVEL_FILTERS_DEFAULT };
@ -265,12 +265,6 @@
}
}, true);
$scope.$watch('search', function (newVal, oldVal) {
if (newVal !== oldVal) {
$location.path(newVal);
}
});
// Watch for changes in the URL path and update the search and lint display
$scope.$watch(function () {
return $location.path();
@ -283,12 +277,33 @@
}
});
let debounceTimeout;
$scope.$watch('search', function (newVal, oldVal) {
if (newVal !== oldVal) {
if (debounceTimeout) {
$timeout.cancel(debounceTimeout);
}
debounceTimeout = $timeout(function () {
$location.path(newVal);
}, 1000);
}
});
$scope.$watch(function () {
return $location.search();
}, function (newParameters) {
loadFromURLParameters();
});
$scope.updatePath = function () {
if (debounceTimeout) {
$timeout.cancel(debounceTimeout);
}
$location.path($scope.search);
}
$scope.selectTheme = function (theme) {
setTheme(theme, true);
}