update to fntags 0.3.2

Author: snowbldr

frameworks/keyed/fntags/package.json

@@ -12,7 +12,7 @@
   },
   "author": "Robert Kempton",
   "dependencies": {
-    "fntags": "0.2.10"
+    "fntags": "0.3.2"
   },
   "devDependencies": {
     "fs-extra": "8.1.0",

frameworks/keyed/fntags/src/Main.js

@@ -1,25 +1,25 @@
-import { fnapp, fnbind, fnstate, h } from 'https://cdn.jsdelivr.net/npm/fntags@0.%3Cspan%20class="x x-first x-last">2.10/src/fntags.min.js'
+import { fnapp, fnstate, h } from 'https://cdn.jsdelivr.net/npm/fntags@0.%3Cspan%20class="x x-first x-last">3.2/src/fntags.min.js'
 
-let data = fnstate( [] )
+let data = fnstate( [], d => d.id )
 
 function random( max ) { return Math.round( Math.random() * 1000 ) % max }
 
-const A = [ 'pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean',
+const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean',
     'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive',
-    'cheap', 'expensive', 'fancy' ]
-const C = [ 'red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange' ]
-const N = [ 'table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse',
-    'keyboard' ]
+    'cheap', 'expensive', 'fancy']
+const C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange']
+const N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse',
+    'keyboard']
 
 let nextId = 1
 
 function buildData( count ) {
     const newData = new Array( count )
     for( let i = 0; i < count; i++ ) {
-        newData[ i ] = fnstate( {
-                                    id: nextId++,
-                                    label: `${A[ random( A.length ) ]} ${C[ random( C.length ) ]} ${N[ random( N.length ) ]}`
-                                } )
+        newData[ i ] = {
+            id: nextId++,
+            label: `${A[ random( A.length ) ]} ${C[ random( C.length ) ]} ${N[ random( N.length ) ]}`
+        }
     }
     return newData
 }
@@ -29,49 +29,59 @@ const Button = ( id, title, onclick ) =>
        h( 'button', { id, type: 'button', class: 'btn btn-primary btn-block', onclick: onclick }, title )
     )
 
-let rowTemplate =
-    h( 'tr',
-       h( 'td', { class: 'col-md-1' } ),
-       h( 'td', { class: 'col-md-4' }, h( 'a' ) ),
-       h( 'td', { class: 'col-md-1' },
-          h( 'a',
-             h( 'span', { class: 'glyphicon glyphicon-remove', 'aria-hidden': 'true' } )
-          )
-       ),
-       h( 'td', { class: 'col-md-6' } )
-    )
-let selected = null
-
 const row = ( item ) => {
-    const tr = rowTemplate.cloneNode( true )
-    const id = tr.firstChild
-    const label = id.nextSibling.firstChild
-    const removeBtn = id.nextSibling.nextSibling
-
-    removeBtn.addEventListener( 'click', (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        tr.replaceWith('')
-        item.reset()
-        item(null)
+    const id = h( 'td', {
+                      class: 'col-md-1'
+                  },
+                  item().id
+    )
+    let label = h( 'a', item().label )
+    let removeBtn = h( 'span', {
+        onclick: ( e ) => {
+            e.preventDefault()
+            e.stopPropagation()
+            data( data().filter( d => d().id !== item().id ) )
+        },
+        class: 'glyphicon glyphicon-remove', 'aria-hidden': 'true'
     } )
 
-    tr.addEventListener( 'click', () => {
-        if( selected ) selected.patch( { selected: false } )
-        item.patch( { selected: true } )
-        selected = item
-    } )
+    const tr = h( 'tr', {
+                      id: item().id,
+                      onclick: () => {
+                          let currentSelection = data().find( d => d().selected )
+                          if( currentSelection ) currentSelection.patch( { selected: false } )
+                          item.patch( { selected: true } )
+                      }
+                  },
+                  id,
+                  h( 'td', { class: 'col-md-4' }, label ),
+                  h( 'td', { class: 'col-md-1' },
+                     h( 'a',
+                        removeBtn
+                     )
+                  ),
+                  h( 'td', { class: 'col-md-6' } )
+    )
 
-    tr.setAttribute( 'id', item().id.toString() )
+    //cache the current values to prevent reading the dom or making the same change over the top of itself
+    let currentLabel = item().label
+    let isSelected = item().isSelected
 
-    const update = () => {
-        tr.className = item().selected ? 'danger' : ''
-        label.innerText = item().label
-        id.innerText = item().id
-    }
+    item.subscribe( () => {
+        if( isSelected && !item().selected ) {
+            tr.className = ''
+        } else if( !isSelected && item().selected ) {
+            tr.className = 'danger'
+        }
+        isSelected = item().selected
 
-    update()
-    return fnbind( item, tr, update )
+        if( currentLabel != item().label ) {
+            label.innerText = item().label
+            currentLabel = item().label
+        }
+    } )
+
+    return tr
 }
 
 fnapp( document.body,
@@ -85,31 +95,29 @@ fnapp( document.body,
                    h( 'div', { class: 'row' },
                       Button( 'run', 'Create 1,000 rows', () => data( buildData( 1000 ) ) ),
                       Button( 'runlots', 'Create 10,000 rows', () => data( buildData( 10000 ) ) ),
-                      Button( 'add', 'Append 1,000 rows', () => {
-                          data( data().concat( buildData( 1000 ) ) )
-                      } ),
+                      Button( 'add', 'Append 1,000 rows', () => data( data().concat( buildData( 1000 ) ) ) ),
                       Button( 'update', 'Update every 10th row', () => {
                           for( let i = 0; i < data().length; i += 10 ) {
                               data()[ i ].patch( { label: data()[ i ]().label + ' !!!' } )
                           }
                       } ),
                       Button( 'clear', 'Clear', () => data( [] ) ),
                       Button( 'swaprows', 'Swap Rows', () => {
-                          const theData = data()
-                          if( theData.length > 998 ) {
-                              const a = theData[ 1 ]
-                              theData[ 1 ] = theData[ 998 ]
-                              theData[ 998 ] = a
-                              data( theData )
+                          const d = data()
+                          if( d.length > 998 ) {
+                              const a = d[ 1 ]
+                              d[ 1 ] = d[ 998 ]
+                              d[ 998 ] = a
                           }
+                          data( d )
                       } )
                    )
                 )
              )
           )
        ),
        h( 'table', { class: 'table table-hover table-striped test-data' },
-          data.mapChildren( h( 'tbody' ), ( item ) => item().id, row )
+          data.bindValues( h( 'tbody' ), row )
        ),
        h( 'span', { class: 'preloadicon glyphicon glyphicon-remove', 'aria-hidden': 'true' } )
 )