Better support for modification of HTML of existing lists

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build
+    - run: npm test

__test__/search.test.js

@@ -196,22 +196,24 @@ describe('Search', function () {
     })
   })
 
-  //
-  // describe('Special characters', function() {
-  //   it('should escape and handle special characters', function() {
-  //     list.add([
-  //       { name: 'Jonny&Jabba' },
-  //       { name: '<Leia' },
-  //       { name: '>Luke' },
-  //       { name: '"Chewie"' },
-  //       { name: "'Ewok'" }
-  //     ]);
-  //     var result = list.search('Leia');
-  //     console.log(result);
-  //     expect(result.length).toEqual(1);
-  //     var result = list.search('<');
-  //     console.log(result);
-  //     expect(result.length).toEqual(1);
-  //   });
-  // });
+  describe('Special characters', function() {
+    it('should escape and handle special characters', function() {
+      list.add([
+        { name: 'Jonny Jr.' },
+        { name: 'Jonny&Jabba' },
+        { name: '<Leia' },
+        { name: '>Luke' },
+        { name: '"Chewie"' },
+        { name: "'Ewok'" }
+      ]);
+      var result = list.search('Leia');
+      expect(result.length).toEqual(1);
+
+      var result = list.search('<');
+      expect(result.length).toEqual(1);
+
+      var result = list.search('Jr.');
+      expect(result.length).toEqual(1);
+    });
+  });
 })

__test__/sort.test.js

@@ -184,20 +184,37 @@ describe('Sort', function () {
       expect(list.items[5].values().val).toBe('my.string_41299.tif')
     })
     it('should show order of sorted floates (a bit wrong)', function () {
-      i1.values({ val: '10.0401' })
-      i2.values({ val: '10.022' })
-      i3.values({ val: '10.021999' })
-      i4.values({ val: '11.231' })
-      i5.values({ val: '0003.123' })
-      i6.values({ val: '09.2123' })
+      i1.values({ val: '0.5' })
+      i2.values({ val: '0.26' })
+      i3.values({ val: '0.040' })
+      i4.values({ val: '0.50' })
+      i5.values({ val: '0.500' })
+      i6.values({ val: '0.3' })
       list.sort('val', { order: 'asc' })
-      expect(list.items[0].values().val).toBe('0003.123')
-      expect(list.items[1].values().val).toBe('09.2123')
-      expect(list.items[2].values().val).toBe('10.022')
-      expect(list.items[3].values().val).toBe('10.0401')
-      expect(list.items[4].values().val).toBe('10.021999')
-      expect(list.items[5].values().val).toBe('11.231')
+      expect(list.items[0].values().val).toBe('0.040')
+      expect(list.items[1].values().val).toBe('0.26')
+      expect(list.items[2].values().val).toBe('0.3')
+      expect(list.items[3].values().val).toBe('0.5')
+      expect(list.items[4].values().val).toBe('0.50')
+      expect(list.items[5].values().val).toBe('0.500')
     })
+
+    it('should sort text with dots', function () {
+      i1.values({ val: 'a.b' })
+      i2.values({ val: '.a' })
+      i3.values({ val: '.b' })
+      i4.values({ val: 'a.' })
+      i5.values({ val: 'b.' })
+      i6.values({ val: 'b.a' })
+      list.sort('val', { order: 'asc' })
+      expect(list.items[0].values().val).toBe('.a')
+      expect(list.items[1].values().val).toBe('.b')
+      expect(list.items[2].values().val).toBe('a.')
+      expect(list.items[3].values().val).toBe('a.b')
+      expect(list.items[4].values().val).toBe('b.')
+      expect(list.items[5].values().val).toBe('b.a')
+    })
+
     it('should sort IP addresses', function () {
       i1.values({ val: '192.168.1.1' })
       i2.values({ val: '192.168.0.100' })

__test__/usage/table.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../../dist/list.min.js"></script>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="card my-2">
+      <div class="card-body">
+        <div class="table-responsive" data-pre-init="table">
+          <div class="p-2">
+            <input type="search" class="form-control form-control-rounded fs-6 search" placeholder="Search…" value="" />
+          </div>
+          <table class="table">
+            <thead>
+              <tr>
+                <th class="Forename"><button class="table-sort sort d-inline" data-sort="Forename">Forename</button></th>
+                <th class="Surname"><button class="table-sort sort d-inline" data-sort="Surname">Surname</button></th>
+                <th class="Pseudonym"><button class="table-sort sort d-inline" data-sort="Pseudonym">Pseudonym</button></th>
+              </tr>
+            </thead>
+            <tbody class="table-tbody list">
+              <tr class=" ">
+                <td class="Forename align-middle"><a href="https://x.com/aaronabrams">Aaron</a></td>
+                <td class="Surname align-middle">Abrams</td>
+                <td class="Pseudonym align-middle">aaronabrams</td>
+              </tr>
+
+              <tr class=" ">
+                <td class="Forename align-middle"><a href="https://example.com">Zinédine</a></td>
+                <td class="Surname align-middle">Zidane</td>
+                <td class="Pseudonym align-middle">zizou</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      for (const r of document.querySelectorAll('[data-pre-init=table]')) {
+        const list = new List(r, {
+          valueNames: [...r.getElementsByTagName('th')].map((t) => t.textContent),
+          searchDelay: 100,
+        })
+        const search_input = r.querySelector('input.search')
+        if (search_input && search_input.value) {
+          list.search(search_input.value)
+        }
+        r.removeAttribute('data-pre-init')
+      }
+    </script>
+  </body>
+</html>