Fossil SCM
add graceful fallback for users without Javascript
Commit
6280151831c0c0a63cc4df301a27da1d3c1233e68ce7400ebebe352f8ed5769f
Parent
6206191a031e755…
4 files changed
+5
+2
-2
+1
-1
+4
+5
| --- src/quickfilter.js | ||
| +++ src/quickfilter.js | ||
| @@ -8,10 +8,15 @@ | ||
| 8 | 8 | ** |
| 9 | 9 | ** The user can type to filter the table for elements matching the typed text. |
| 10 | 10 | */ |
| 11 | 11 | |
| 12 | 12 | const quickfilter = document.getElementById('quickfilter'); |
| 13 | + | |
| 14 | +document.addEventListener('DOMContentLoaded', function(){ | |
| 15 | + quickfilter.style.display = ''; | |
| 16 | +}); | |
| 17 | + | |
| 13 | 18 | quickfilter.addEventListener('input', function(){ |
| 14 | 19 | const filterrows = document.querySelectorAll('.filterable tbody tr'); |
| 15 | 20 | const filter = quickfilter.value.toLowerCase().trim(); |
| 16 | 21 | for(row of filterrows){ |
| 17 | 22 | const orig = row.innerHTML; |
| 18 | 23 |
| --- src/quickfilter.js | |
| +++ src/quickfilter.js | |
| @@ -8,10 +8,15 @@ | |
| 8 | ** |
| 9 | ** The user can type to filter the table for elements matching the typed text. |
| 10 | */ |
| 11 | |
| 12 | const quickfilter = document.getElementById('quickfilter'); |
| 13 | quickfilter.addEventListener('input', function(){ |
| 14 | const filterrows = document.querySelectorAll('.filterable tbody tr'); |
| 15 | const filter = quickfilter.value.toLowerCase().trim(); |
| 16 | for(row of filterrows){ |
| 17 | const orig = row.innerHTML; |
| 18 |
| --- src/quickfilter.js | |
| +++ src/quickfilter.js | |
| @@ -8,10 +8,15 @@ | |
| 8 | ** |
| 9 | ** The user can type to filter the table for elements matching the typed text. |
| 10 | */ |
| 11 | |
| 12 | const quickfilter = document.getElementById('quickfilter'); |
| 13 | |
| 14 | document.addEventListener('DOMContentLoaded', function(){ |
| 15 | quickfilter.style.display = ''; |
| 16 | }); |
| 17 | |
| 18 | quickfilter.addEventListener('input', function(){ |
| 19 | const filterrows = document.querySelectorAll('.filterable tbody tr'); |
| 20 | const filter = quickfilter.value.toLowerCase().trim(); |
| 21 | for(row of filterrows){ |
| 22 | const orig = row.innerHTML; |
| 23 |
+2
-2
| --- src/repolist.c | ||
| +++ src/repolist.c | ||
| @@ -405,11 +405,11 @@ | ||
| 405 | 405 | ** for display. */ |
| 406 | 406 | login_check_credentials(); |
| 407 | 407 | style_set_current_feature("repolist"); |
| 408 | 408 | style_header("Repository List"); |
| 409 | 409 | if( quickfilter ){ |
| 410 | - @ <input type="search" id="quickfilter" placeholder="filter repository list..."> | |
| 410 | + @ <input type="search" id="quickfilter" style="display: none" placeholder="filter repository list..."> | |
| 411 | 411 | } |
| 412 | 412 | @ %s(blob_str(&html)) |
| 413 | 413 | style_table_sorter(); |
| 414 | 414 | if( quickfilter ){ |
| 415 | 415 | style_quickfilter(); |
| @@ -426,11 +426,11 @@ | ||
| 426 | 426 | @ <title>%h(zTitle)</title> |
| 427 | 427 | @ </head> |
| 428 | 428 | @ <body> |
| 429 | 429 | @ <h1 align="center">%h(zTitle)</h1> |
| 430 | 430 | if( quickfilter ){ |
| 431 | - @ <input type="search" id="quickfilter" placeholder="filter repository list..."> | |
| 431 | + @ <input type="search" id="quickfilter" style="display: none" placeholder="filter repository list..."> | |
| 432 | 432 | } |
| 433 | 433 | @ %s(blob_str(&html)) |
| 434 | 434 | @ <script>%s(builtin_text("sorttable.js"))</script> |
| 435 | 435 | if( quickfilter ){ |
| 436 | 436 | @ <script>%s(builtin_text("quickfilter.js"))</script> |
| 437 | 437 |
| --- src/repolist.c | |
| +++ src/repolist.c | |
| @@ -405,11 +405,11 @@ | |
| 405 | ** for display. */ |
| 406 | login_check_credentials(); |
| 407 | style_set_current_feature("repolist"); |
| 408 | style_header("Repository List"); |
| 409 | if( quickfilter ){ |
| 410 | @ <input type="search" id="quickfilter" placeholder="filter repository list..."> |
| 411 | } |
| 412 | @ %s(blob_str(&html)) |
| 413 | style_table_sorter(); |
| 414 | if( quickfilter ){ |
| 415 | style_quickfilter(); |
| @@ -426,11 +426,11 @@ | |
| 426 | @ <title>%h(zTitle)</title> |
| 427 | @ </head> |
| 428 | @ <body> |
| 429 | @ <h1 align="center">%h(zTitle)</h1> |
| 430 | if( quickfilter ){ |
| 431 | @ <input type="search" id="quickfilter" placeholder="filter repository list..."> |
| 432 | } |
| 433 | @ %s(blob_str(&html)) |
| 434 | @ <script>%s(builtin_text("sorttable.js"))</script> |
| 435 | if( quickfilter ){ |
| 436 | @ <script>%s(builtin_text("quickfilter.js"))</script> |
| 437 |
| --- src/repolist.c | |
| +++ src/repolist.c | |
| @@ -405,11 +405,11 @@ | |
| 405 | ** for display. */ |
| 406 | login_check_credentials(); |
| 407 | style_set_current_feature("repolist"); |
| 408 | style_header("Repository List"); |
| 409 | if( quickfilter ){ |
| 410 | @ <input type="search" id="quickfilter" style="display: none" placeholder="filter repository list..."> |
| 411 | } |
| 412 | @ %s(blob_str(&html)) |
| 413 | style_table_sorter(); |
| 414 | if( quickfilter ){ |
| 415 | style_quickfilter(); |
| @@ -426,11 +426,11 @@ | |
| 426 | @ <title>%h(zTitle)</title> |
| 427 | @ </head> |
| 428 | @ <body> |
| 429 | @ <h1 align="center">%h(zTitle)</h1> |
| 430 | if( quickfilter ){ |
| 431 | @ <input type="search" id="quickfilter" style="display: none" placeholder="filter repository list..."> |
| 432 | } |
| 433 | @ %s(blob_str(&html)) |
| 434 | @ <script>%s(builtin_text("sorttable.js"))</script> |
| 435 | if( quickfilter ){ |
| 436 | @ <script>%s(builtin_text("quickfilter.js"))</script> |
| 437 |
+1
-1
| --- src/report.c | ||
| +++ src/report.c | ||
| @@ -1233,11 +1233,11 @@ | ||
| 1233 | 1233 | @ <br> |
| 1234 | 1234 | } |
| 1235 | 1235 | output_color_key(zClrKey, 1, |
| 1236 | 1236 | "border=\"0\" cellpadding=\"3\" cellspacing=\"0\" class=\"report\""); |
| 1237 | 1237 | if( quickfilter ){ |
| 1238 | - @ <input type="search" id="quickfilter" placeholder="filter ticket list..."> | |
| 1238 | + @ <input type="search" id="quickfilter" style="display: none" placeholder="filter ticket list..."> | |
| 1239 | 1239 | } |
| 1240 | 1240 | @ <table border="1" cellpadding="2" cellspacing="0" class="report sortable filterable" |
| 1241 | 1241 | @ data-column-types='' data-init-sort='0'> |
| 1242 | 1242 | sState.rn = rn; |
| 1243 | 1243 | sState.nCount = 0; |
| 1244 | 1244 |
| --- src/report.c | |
| +++ src/report.c | |
| @@ -1233,11 +1233,11 @@ | |
| 1233 | @ <br> |
| 1234 | } |
| 1235 | output_color_key(zClrKey, 1, |
| 1236 | "border=\"0\" cellpadding=\"3\" cellspacing=\"0\" class=\"report\""); |
| 1237 | if( quickfilter ){ |
| 1238 | @ <input type="search" id="quickfilter" placeholder="filter ticket list..."> |
| 1239 | } |
| 1240 | @ <table border="1" cellpadding="2" cellspacing="0" class="report sortable filterable" |
| 1241 | @ data-column-types='' data-init-sort='0'> |
| 1242 | sState.rn = rn; |
| 1243 | sState.nCount = 0; |
| 1244 |
| --- src/report.c | |
| +++ src/report.c | |
| @@ -1233,11 +1233,11 @@ | |
| 1233 | @ <br> |
| 1234 | } |
| 1235 | output_color_key(zClrKey, 1, |
| 1236 | "border=\"0\" cellpadding=\"3\" cellspacing=\"0\" class=\"report\""); |
| 1237 | if( quickfilter ){ |
| 1238 | @ <input type="search" id="quickfilter" style="display: none" placeholder="filter ticket list..."> |
| 1239 | } |
| 1240 | @ <table border="1" cellpadding="2" cellspacing="0" class="report sortable filterable" |
| 1241 | @ data-column-types='' data-init-sort='0'> |
| 1242 | sState.rn = rn; |
| 1243 | sState.nCount = 0; |
| 1244 |
+4
| --- www/javascript.md | ||
| +++ www/javascript.md | ||
| @@ -489,10 +489,14 @@ | ||
| 489 | 489 | |
| 490 | 490 | ### <a id="filter"></a>Quickfilter |
| 491 | 491 | |
| 492 | 492 | On some pages adding the ability to filter a table of items down to the |
| 493 | 493 | rows matching the text typed in by the user. |
| 494 | + | |
| 495 | +_Graceful Fallback:_ The input field for typing your search does not | |
| 496 | +appear when JS is unavailable, removing a feature that would be unusable | |
| 497 | +without Javascript. | |
| 494 | 498 | |
| 495 | 499 | |
| 496 | 500 | ### <a id="tree"></a>File Browser Tree View |
| 497 | 501 | |
| 498 | 502 | The [file browser’s tree view mode][tv] uses JavaScript to handle clicks |
| 499 | 503 |
| --- www/javascript.md | |
| +++ www/javascript.md | |
| @@ -489,10 +489,14 @@ | |
| 489 | |
| 490 | ### <a id="filter"></a>Quickfilter |
| 491 | |
| 492 | On some pages adding the ability to filter a table of items down to the |
| 493 | rows matching the text typed in by the user. |
| 494 | |
| 495 | |
| 496 | ### <a id="tree"></a>File Browser Tree View |
| 497 | |
| 498 | The [file browser’s tree view mode][tv] uses JavaScript to handle clicks |
| 499 |
| --- www/javascript.md | |
| +++ www/javascript.md | |
| @@ -489,10 +489,14 @@ | |
| 489 | |
| 490 | ### <a id="filter"></a>Quickfilter |
| 491 | |
| 492 | On some pages adding the ability to filter a table of items down to the |
| 493 | rows matching the text typed in by the user. |
| 494 | |
| 495 | _Graceful Fallback:_ The input field for typing your search does not |
| 496 | appear when JS is unavailable, removing a feature that would be unusable |
| 497 | without Javascript. |
| 498 | |
| 499 | |
| 500 | ### <a id="tree"></a>File Browser Tree View |
| 501 | |
| 502 | The [file browser’s tree view mode][tv] uses JavaScript to handle clicks |
| 503 |