Fossil

Check-in [a6ac88cbb0]
Login

Check-in [a6ac88cbb0]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:move quickfilter javascript into own js-file
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | quickfilter
Files: files | file ages | folders
SHA3-256: a6ac88cbb00938659deeaa80f34de1ab63fede763ef910bfe8c5bde3c628b7bc
User & Date: jkosche 2025-03-26 16:36:33.130
Context
2025-03-30
10:39
make the quickfilter optional for reports by editing the report ... (check-in: 7d20f50207 user: jkosche tags: quickfilter)
2025-03-26
16:36
move quickfilter javascript into own js-file ... (check-in: a6ac88cbb0 user: jkosche tags: quickfilter)
13:54
add quickfilter to repolist as well ... (check-in: 8974b306ee user: jkosche tags: quickfilter)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/main.mk.
︙︙
248
249
250
251
252
253
254

255
256
257
258
259
260
261

  $(SRCDIR)/graph.js \
  $(SRCDIR)/hbmenu.js \
  $(SRCDIR)/href.js \
  $(SRCDIR)/login.js \
  $(SRCDIR)/markdown.md \
  $(SRCDIR)/menu.js \
  $(SRCDIR)/merge.tcl \

  $(SRCDIR)/scroll.js \
  $(SRCDIR)/skin.js \
  $(SRCDIR)/sorttable.js \
  $(SRCDIR)/sounds/0.wav \
  $(SRCDIR)/sounds/1.wav \
  $(SRCDIR)/sounds/2.wav \
  $(SRCDIR)/sounds/3.wav \








>








248
249
250
251
252
253
254
255
256
257
258
259
260
261
262

  $(SRCDIR)/graph.js \
  $(SRCDIR)/hbmenu.js \
  $(SRCDIR)/href.js \
  $(SRCDIR)/login.js \
  $(SRCDIR)/markdown.md \
  $(SRCDIR)/menu.js \
  $(SRCDIR)/merge.tcl \
  $(SRCDIR)/quickfilter.js \
  $(SRCDIR)/scroll.js \
  $(SRCDIR)/skin.js \
  $(SRCDIR)/sorttable.js \
  $(SRCDIR)/sounds/0.wav \
  $(SRCDIR)/sounds/1.wav \
  $(SRCDIR)/sounds/2.wav \
  $(SRCDIR)/sounds/3.wav \
︙︙
Added src/quickfilter.js. 






























































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/* Javascript code that will enable quick filtering of items in tables.
** 
** Add an input field with the id 'quickfilter' as follows:
**   <input type="text" id="quickfilter" placeholder="filter list..."
**    style="display: none">
** Mark the table with the filter items with the class 'filterlist'.
** The table is expected to have a tbody around the rows that are
** filtered (to avoid filtering the header).
**
** The input field is hidden at standard ('display:none'), but the script
** will display it, if the list contains more than five elements.
**
** If shown the user can type to filter the table for elements matching
** the typed text.
*/

const quickfilter = document.getElementById('quickfilter');
const filterlist = document.querySelectorAll('.filterlist tbody tr');

document.addEventListener('DOMContentLoaded', function(){
  if (filterlist.length > 5) quickfilter.style.display = '';
});

quickfilter.addEventListener('input', function (){
  const filter = quickfilter.value.toLowerCase().trim();
  filterlist.forEach(function(row){
    const rowText = row.textContent.toLowerCase().trim();
    row.style.display = rowText.includes(filter) ? 'table-row' : 'none';
  });
});
Changes to src/repolist.c.
︙︙
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

    g.repositoryOpen = 0;
    g.localOpen = 0;
    return 0;
  }else{
    Stmt q;
    double rNow;
    blob_append_sql(&html,
      "<table border='0' class='sortable' data-init-sort='1'"
      " data-column-types='txtxkxt' id=\"repolist\"><thead>\n"
      "<tr><th>Filename<th width='20'>"
      "<th>Project Name<th width='20'>"
      "<th>Last Modified<th width='20'>"
      "<th>Login Group</tr>\n"
      "</thead><tbody>\n");
    db_prepare(&q, "SELECT pathname"
                   " FROM sfile ORDER BY pathname COLLATE nocase;");








|
|








159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

    g.repositoryOpen = 0;
    g.localOpen = 0;
    return 0;
  }else{
    Stmt q;
    double rNow;
    blob_append_sql(&html,
      "<table border='0' class='sortable filterlist' data-init-sort='1'"
      " data-column-types='txtxkxt'><thead>\n"
      "<tr><th>Filename<th width='20'>"
      "<th>Project Name<th width='20'>"
      "<th>Last Modified<th width='20'>"
      "<th>Login Group</tr>\n"
      "</thead><tbody>\n");
    db_prepare(&q, "SELECT pathname"
                   " FROM sfile ORDER BY pathname COLLATE nocase;");
︙︙
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335

336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374

    ** that repository open in g.db.  Use the skin of that repository
    ** for display. */
    login_check_credentials();
    style_set_current_feature("repolist");
    style_header("Repository List");
    @ <input type="text" id="quickfilter" placeholder="filter repository list..." style="display: none">
    @ %s(blob_str(&html))
    @ <script nonce="%h(style_nonce())">
    @   const quickfilter = document.getElementById('quickfilter');
    @   const ticketlist = document.querySelectorAll('#repolist tbody tr');
    @
    @   document.addEventListener('DOMContentLoaded', function(){
    @     if (ticketlist.length > 5) quickfilter.style.display = '';
    @   });
    @
    @   quickfilter.addEventListener('input', function (){
    @     const filter = quickfilter.value.toLowerCase().trim();
    @     ticketlist.forEach(function(row){
    @       const rowText = row.textContent.toLowerCase().trim();
    @       row.style.display = rowText.includes(filter) ? 'table-row' : 'none';
    @     });
    @   });
    @ </script>
    style_table_sorter();

    style_finish_page();
  }else{
    const char *zTitle = PD("FOSSIL_REPOLIST_TITLE","Repository List");
    /* If no repositories were found that had the "repolist_skin"
    ** property set, then use a default skin */
    @ <html>
    @ <head>
    @ <base href="%s(g.zBaseURL)/">
    @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @ <title>%h(zTitle)</title>
    @ </head>
    @ <body>
    @ <h1 align="center">%h(zTitle)</h1>
    @ <input type="text" id="quickfilter" placeholder="filter repository list..." style="display: none">
    @ %s(blob_str(&html))
    @ <script>%s(builtin_text("sorttable.js"))</script>
    @ <script>
    @   const quickfilter = document.getElementById('quickfilter');
    @   const ticketlist = document.querySelectorAll('#repolist tbody tr');
    @
    @   document.addEventListener('DOMContentLoaded', function(){
    @     if (ticketlist.length > 5) quickfilter.style.display = '';
    @   });
    @
    @   quickfilter.addEventListener('input', function (){
    @     const filter = quickfilter.value.toLowerCase().trim();
    @     ticketlist.forEach(function(row){
    @       const rowText = row.textContent.toLowerCase().trim();
    @       row.style.display = rowText.includes(filter) ? 'table-row' : 'none';
    @     });
    @   });
    @ </script>
    @ </body>
    @ </html>
  }
  blob_reset(&html);
  cgi_reply();
  return n;
}








<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<

>
















|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<








312
313
314
315
316
317
318
















319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337















338
339
340
341
342
343
344

    ** that repository open in g.db.  Use the skin of that repository
    ** for display. */
    login_check_credentials();
    style_set_current_feature("repolist");
    style_header("Repository List");
    @ <input type="text" id="quickfilter" placeholder="filter repository list..." style="display: none">
    @ %s(blob_str(&html))
















    style_table_sorter();
    style_quickfilter();
    style_finish_page();
  }else{
    const char *zTitle = PD("FOSSIL_REPOLIST_TITLE","Repository List");
    /* If no repositories were found that had the "repolist_skin"
    ** property set, then use a default skin */
    @ <html>
    @ <head>
    @ <base href="%s(g.zBaseURL)/">
    @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @ <title>%h(zTitle)</title>
    @ </head>
    @ <body>
    @ <h1 align="center">%h(zTitle)</h1>
    @ <input type="text" id="quickfilter" placeholder="filter repository list..." style="display: none">
    @ %s(blob_str(&html))
    @ <script>%s(builtin_text("sorttable.js"))</script>
    @ <script>%s(builtin_text("quickfilter.js"))</script>















    @ </body>
    @ </html>
  }
  blob_reset(&html);
  cgi_reply();
  return n;
}
︙︙
Changes to src/report.c.
︙︙
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261

      wiki_render_by_mimetype(&src, zMimetype);
      blob_reset(&src);
      @ <br>
    }
    output_color_key(zClrKey, 1,
        "border=\"0\" cellpadding=\"3\" cellspacing=\"0\" class=\"report\"");
    @ <input type="text" id="quickfilter" placeholder="filter ticket list..." style="display: none">
    @ <table border="1" cellpadding="2" cellspacing="0" class="report sortable"
    @  id="ticketlist" data-column-types='' data-init-sort='0'>
    sState.rn = rn;
    sState.nCount = 0;
    report_restrict_sql(&zErr1);
    db_exec_readonly(g.db, zSql, generate_html, &sState, &zErr2);
    report_unrestrict_sql();
    @ </tbody></table>
    @
    @ <script nonce="%h(style_nonce())">
    @   const quickfilter = document.getElementById('quickfilter');
    @   const ticketlist = document.querySelectorAll('#ticketlist tbody tr');
    @
    @   document.addEventListener('DOMContentLoaded', function(){
    @     if (ticketlist.length > 5) quickfilter.style.display = '';
    @   });
    @
    @   quickfilter.addEventListener('input', function (){
    @     const filter = quickfilter.value.toLowerCase().trim();
    @     ticketlist.forEach(function(row){
    @       const rowText = row.textContent.toLowerCase().trim();
    @       row.style.display = rowText.includes(filter) ? 'table-row' : 'none';
    @     });
    @   });
    @ </script>
    if( zErr1 ){
      @ <p class="reportError">Error: %h(zErr1)</p>
    }else if( zErr2 ){
      @ <p class="reportError">Error: %h(zErr2)</p>
    }
    style_table_sorter();
    if( pageWrap ) {








|
|






<
<
<
<
<
<
<
<
<
|
<
<
<
<
<
<
<








1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237









1238







1239
1240
1241
1242
1243
1244
1245

      wiki_render_by_mimetype(&src, zMimetype);
      blob_reset(&src);
      @ <br>
    }
    output_color_key(zClrKey, 1,
        "border=\"0\" cellpadding=\"3\" cellspacing=\"0\" class=\"report\"");
    @ <input type="text" id="quickfilter" placeholder="filter ticket list..." style="display: none">
    @ <table border="1" cellpadding="2" cellspacing="0" class="report sortable filterlist"
    @  data-column-types='' data-init-sort='0'>
    sState.rn = rn;
    sState.nCount = 0;
    report_restrict_sql(&zErr1);
    db_exec_readonly(g.db, zSql, generate_html, &sState, &zErr2);
    report_unrestrict_sql();
    @ </tbody></table>









    style_quickfilter();







    if( zErr1 ){
      @ <p class="reportError">Error: %h(zErr1)</p>
    }else if( zErr2 ){
      @ <p class="reportError">Error: %h(zErr2)</p>
    }
    style_table_sorter();
    if( pageWrap ) {
︙︙
Changes to src/style.c.
︙︙
875
876
877
878
879
880
881







882
883
884
885
886
887
888


/*
** Indicate that the table-sorting javascript is needed.
*/
void style_table_sorter(void){
  builtin_request_js("sorttable.js");
}








/*
** Generate code to load all required javascript files.
*/
static void style_load_all_js_files(void){
  if( needHrefJs && g.perm.Hyperlink ){
    int nDelay = db_get_int("auto-hyperlink-delay",0);








>
>
>
>
>
>
>








875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895


/*
** Indicate that the table-sorting javascript is needed.
*/
void style_table_sorter(void){
  builtin_request_js("sorttable.js");
}

/*
** Indicate that the quickfilter javascript is needed.
*/
void style_quickfilter(void){
  builtin_request_js("quickfilter.js");
}

/*
** Generate code to load all required javascript files.
*/
static void style_load_all_js_files(void){
  if( needHrefJs && g.perm.Hyperlink ){
    int nDelay = db_get_int("auto-hyperlink-delay",0);
︙︙
Changes to win/Makefile.mingw.
︙︙
634
635
636
637
638
639
640

641
642
643
644
645
646
647

  $(SRCDIR)/graph.js \
  $(SRCDIR)/hbmenu.js \
  $(SRCDIR)/href.js \
  $(SRCDIR)/login.js \
  $(SRCDIR)/markdown.md \
  $(SRCDIR)/menu.js \
  $(SRCDIR)/merge.tcl \

  $(SRCDIR)/scroll.js \
  $(SRCDIR)/skin.js \
  $(SRCDIR)/sorttable.js \
  $(SRCDIR)/sounds/0.wav \
  $(SRCDIR)/sounds/1.wav \
  $(SRCDIR)/sounds/2.wav \
  $(SRCDIR)/sounds/3.wav \








>








634
635
636
637
638
639
640
641
642
643
644
645
646
647
648

  $(SRCDIR)/graph.js \
  $(SRCDIR)/hbmenu.js \
  $(SRCDIR)/href.js \
  $(SRCDIR)/login.js \
  $(SRCDIR)/markdown.md \
  $(SRCDIR)/menu.js \
  $(SRCDIR)/merge.tcl \
  $(SRCDIR)/quickfilter.js \
  $(SRCDIR)/scroll.js \
  $(SRCDIR)/skin.js \
  $(SRCDIR)/sorttable.js \
  $(SRCDIR)/sounds/0.wav \
  $(SRCDIR)/sounds/1.wav \
  $(SRCDIR)/sounds/2.wav \
  $(SRCDIR)/sounds/3.wav \
︙︙
Changes to win/Makefile.msc.
︙︙
594
595
596
597
598
599
600

601
602
603
604
605
606
607

        "$(SRCDIR)\graph.js" \
        "$(SRCDIR)\hbmenu.js" \
        "$(SRCDIR)\href.js" \
        "$(SRCDIR)\login.js" \
        "$(SRCDIR)\markdown.md" \
        "$(SRCDIR)\menu.js" \
        "$(SRCDIR)\merge.tcl" \

        "$(SRCDIR)\scroll.js" \
        "$(SRCDIR)\skin.js" \
        "$(SRCDIR)\sorttable.js" \
        "$(SRCDIR)\sounds\0.wav" \
        "$(SRCDIR)\sounds\1.wav" \
        "$(SRCDIR)\sounds\2.wav" \
        "$(SRCDIR)\sounds\3.wav" \








>








594
595
596
597
598
599
600
601
602
603
604
605
606
607
608

        "$(SRCDIR)\graph.js" \
        "$(SRCDIR)\hbmenu.js" \
        "$(SRCDIR)\href.js" \
        "$(SRCDIR)\login.js" \
        "$(SRCDIR)\markdown.md" \
        "$(SRCDIR)\menu.js" \
        "$(SRCDIR)\merge.tcl" \
        "$(SRCDIR)\quickfilter.js" \
        "$(SRCDIR)\scroll.js" \
        "$(SRCDIR)\skin.js" \
        "$(SRCDIR)\sorttable.js" \
        "$(SRCDIR)\sounds\0.wav" \
        "$(SRCDIR)\sounds\1.wav" \
        "$(SRCDIR)\sounds\2.wav" \
        "$(SRCDIR)\sounds\3.wav" \
︙︙
1227
1228
1229
1230
1231
1232
1233

1234
1235
1236
1237
1238
1239
1240

	echo "$(SRCDIR)\graph.js" >> $@
	echo "$(SRCDIR)\hbmenu.js" >> $@
	echo "$(SRCDIR)\href.js" >> $@
	echo "$(SRCDIR)\login.js" >> $@
	echo "$(SRCDIR)\markdown.md" >> $@
	echo "$(SRCDIR)\menu.js" >> $@
	echo "$(SRCDIR)\merge.tcl" >> $@

	echo "$(SRCDIR)\scroll.js" >> $@
	echo "$(SRCDIR)\skin.js" >> $@
	echo "$(SRCDIR)\sorttable.js" >> $@
	echo "$(SRCDIR)\sounds/0.wav" >> $@
	echo "$(SRCDIR)\sounds/1.wav" >> $@
	echo "$(SRCDIR)\sounds/2.wav" >> $@
	echo "$(SRCDIR)\sounds/3.wav" >> $@








>








1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242

	echo "$(SRCDIR)\graph.js" >> $@
	echo "$(SRCDIR)\hbmenu.js" >> $@
	echo "$(SRCDIR)\href.js" >> $@
	echo "$(SRCDIR)\login.js" >> $@
	echo "$(SRCDIR)\markdown.md" >> $@
	echo "$(SRCDIR)\menu.js" >> $@
	echo "$(SRCDIR)\merge.tcl" >> $@
	echo "$(SRCDIR)\quickfilter.js" >> $@
	echo "$(SRCDIR)\scroll.js" >> $@
	echo "$(SRCDIR)\skin.js" >> $@
	echo "$(SRCDIR)\sorttable.js" >> $@
	echo "$(SRCDIR)\sounds/0.wav" >> $@
	echo "$(SRCDIR)\sounds/1.wav" >> $@
	echo "$(SRCDIR)\sounds/2.wav" >> $@
	echo "$(SRCDIR)\sounds/3.wav" >> $@
︙︙