Switch input to `type=number`; Separate version validation out of `byVersion`

2 files changed, 58 insertions, 57 deletions

diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html
index 11d99f39b55..8bba9640a77 100644
--- a/util/gh-pages/index.html
+++ b/util/gh-pages/index.html
@@ -291,7 +291,7 @@ Otherwise, have a great day =^.^=
             border: 1px solid var(--theme-popup-border);
         }
 
-        #version-filter-selector .checkbox {
+        #version-filter-selector .item {
             display: flex;
         }
 
@@ -440,23 +440,24 @@ Otherwise, have a great day =^.^=
                                     <span class="caret"></span>
                                 </button>
                                 <ul id="version-filter-selector" class="dropdown-menu">
-                                    <li class="checkbox">
+                                    <li class="item">
                                         <label ng-click="clearVersionFilters()">
                                             <input type="checkbox" class="invisible" />
                                             Clear filters
                                         </label>
                                     </li>
                                     <li role="separator" class="divider"></li>
-                                    <li class="checkbox" ng-repeat="(filter, vars) in versionFilters">
+                                    <li class="item" ng-repeat="(filter, vars) in versionFilters">
                                         <label ng-attr-for="filter-{filter}">{{filter}}</label>
                                         <span>1.</span>
-                                        <input type="text"
+                                        <input type="number"
+                                                min="29"
                                                 ng-attr-id="filter-{filter}"
                                                 class="version-filter-input form-control filter-input"
                                                 maxlength="2"
-                                                placeholder="xx"
                                                 ng-model="versionFilters[filter].minorVersion"
-                                                ng-model-options="{debounce: 50}" />
+                                                ng-model-options="{debounce: 50}"
+                                                ng-change="updateVersionFilters()" />
                                         <span>.0</span>
                                     </li>
                                 </ul>
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index 8f6832aef53..f72fe8c7f8b 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -137,9 +137,9 @@
             $scope.themes = THEMES_DEFAULT;
 
             $scope.versionFilters = {
-                "≥": {enabled: false, minorVersion: ""},
-                "≤": {enabled: false, minorVersion: ""},
-                "=": {enabled: false, minorVersion: ""},
+                "≥": {enabled: false, minorVersion: null },
+                "≤": {enabled: false, minorVersion: null },
+                "=": {enabled: false, minorVersion: null },
             };
 
             $scope.selectTheme = function (theme) {
@@ -170,7 +170,7 @@
 
             $scope.clearVersionFilters = function () {
                 for (let filter in $scope.versionFilters) {
-                    $scope.versionFilters[filter] = { enabled: false, minorVersion: "" };
+                    $scope.versionFilters[filter] = { enabled: false, minorVersion: null };
                 }
             }
 
@@ -178,62 +178,62 @@
                 return Object.values(obj).filter(x => x.enabled).length;
             }
 
-            $scope.byVersion = function(lint) {
-                function validateVersionStr(ver) {
-                    return ver.length === 2 && !isNaN(ver);
-                }
+            $scope.updateVersionFilters = function() {
+                for (const filter in $scope.versionFilters) {
+                    let minorVersion = $scope.versionFilters[filter].minorVersion;
 
-                let filters = $scope.versionFilters;
+                    // 1.29.0 and greater
+                    if (minorVersion && minorVersion > 28) {
+                        $scope.versionFilters[filter].enabled = true;
+                    }
 
-                // Strip the "pre " prefix for pre 1.29.0 lints
-                let lintVersion = lint.version.startsWith("pre ") ? lint.version.substring(4, lint.version.length) : lint.version;
-                let lintMinorVersion = lintVersion.substring(2, 4);
+                    $scope.versionFilters[filter].enabled = false;
+                }
+            }
 
+            $scope.byVersion = function(lint) {
+                let filters = $scope.versionFilters;
                 for (const filter in filters) {
-                    let minorVersion = filters[filter].minorVersion;
-
-                    // Skip the work for version strings with invalid lengths or characters
-                    if (!validateVersionStr(minorVersion)) {
-                        filters[filter].enabled = false;
-                        continue;
-                    }
+                    if (filters[filter].enabled) {
+                        let minorVersion = filters[filter].minorVersion;
+
+                        // Strip the "pre " prefix for pre 1.29.0 lints
+                        let lintVersion = lint.version.startsWith("pre ") ? lint.version.substring(4, lint.version.length) : lint.version;
+                        let lintMinorVersion = lintVersion.substring(2, 4);
+
+                        let result;
+                        switch (filter) {
+                            case "≥":
+                                result = (lintMinorVersion >= minorVersion);
+                                break;
+                            case "≤":
+                                result = (lintMinorVersion <= minorVersion);
+                                break;
+                            // "=" gets the highest priority, since all filters are inclusive
+                            case "=":
+                                return (lintMinorVersion == minorVersion);
+                            default:
+                                return true
+                        }
 
-                    filters[filter].enabled = true;
-
-                    let result;
-                    switch (filter) {
-                        case "≥":
-                            result = (lintMinorVersion >= minorVersion);
-                            break;
-                        case "≤":
-                            result = (lintMinorVersion <= minorVersion);
-                            break;
-                        // "=" gets the highest priority, since all filters are inclusive
-                        case "=":
-                            return (lintMinorVersion === minorVersion);
-                        default:
-                            return true
-                    }
+                        if (!result) {
+                            return false;
+                        }
 
-                    if (!result) {
-                        return false;
-                    }
+                        let cmpFilter;
+                        if (filter === "≥") {
+                            cmpFilter = "≤";
+                        } else {
+                            cmpFilter = "≥";
+                        }
 
-                    let cmpFilter;
-                    if (filter === "≥") {
-                        cmpFilter = "≤";
-                    } else {
-                        cmpFilter = "≥";
-                    }
+                        if (filters[cmpFilter].enabled) {
+                            let cmpMinorVersion = filters[cmpFilter].minorVersion;
+                            result = (cmpFilter === "≥") ? (lintMinorVersion >= cmpMinorVersion) : (lintMinorVersion <= cmpMinorVersion);
+                        }
 
-                    let cmpMinorVersion = filters[cmpFilter].minorVersion;
-                    if (!validateVersionStr(cmpMinorVersion)) {
-                        filters[cmpFilter].enabled = false;
-                        return true;
+                        return result;
                     }
-
-                    filters[cmpFilter].enabled = true;
-                    return (cmpFilter === "≥") ? (lintMinorVersion >= cmpMinorVersion) : (lintMinorVersion <= cmpMinorVersion);
                 }
 
                 return true;