1- import  {  fnapp ,  fnbind ,  fnstate ,  h ,  resetState  }  from  '../node_modules/fntags/src/fntags.js' 
1+ import  {  findElement ,   fnapp ,  fnbind ,  fnstate ,  h ,  resetState  }  from  '../node_modules/fntags/src/fntags.js' 
22
3- const  data  =  fnstate (  {  current : [ ]  }  ) 
4- const  selected  =  fnstate (  {  id : 0  }  ) 
3+ let  data  =  fnstate (  {  current : [ ]  }  ) 
54
65function  random (  max  )  {  return  Math . round (  Math . random ( )  *  1000  )  %  max  } 
76
@@ -13,85 +12,63 @@ const N = [ 'table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', '
1312    'keyboard'  ] 
1413
1514let  nextId  =  1 
16- 
1715function  buildData (  count  )  { 
18-     const  data  =  new  Array (  count  ) 
16+     const  newData  =  new  Array (  count  ) 
1917    for (  let  i  =  0 ;  i  <  count ;  i ++  )  { 
20-         data [  i  ]  =  fnstate (  { 
18+         newData [  i  ]  =  fnstate (  { 
2119                                 id : nextId ++ , 
2220                                 label : `${ A [  random (  A . length  )  ] }   ${ C [  random (  C . length  )  ] }   ${ N [  random (  N . length  )  ] }  ` 
2321                             }  ) 
2422    } 
25-     return  data 
26- } 
27- 
28- const  createOneThousand  =  ( )  =>  { 
29-     resetState (  selected ,  true  ) 
30-     data . current  =  buildData (  1000  ) 
31- } 
32- 
33- const  createTenThousand  =  ( )  =>  { 
34-     resetState (  selected ,  true  ) 
35-     data . current  =  buildData (  10000  ) 
36- } 
37- 
38- const  appendOneThousand  =  ( )  => 
39-     data . current  =  data . current . concat (  buildData (  1000  )  ) 
40- 
41- const  updateEveryTenth  =  ( )  =>  { 
42-     for (  let  i  =  0 ;  i  <  data . current . length ;  i  +=  10  )  { 
43-         data . current [  i  ] . label  +=  ' !!!' 
44-     } 
23+     return  newData 
4524} 
4625
47- const  swapRows  =  ( )  =>  { 
48-     const  theData  =  data . current 
49-     if (  theData . length  >  998  )  { 
50-         const  a  =  Object . assign (  { } ,  theData [  1  ]  ) 
51-         Object . assign (  theData [  1  ] ,  theData [  998  ]  ) 
52-         Object . assign (  theData [  998  ] ,  a  ) 
53-     } 
54- } 
55- 
56- const  clear  =  ( )  =>  { 
57-     resetState (  selected ,  true  ) 
58- 
59-     data . current  =  [ ] 
60- } 
61- 
62- const  Button  =  (  id ,  title ,  onclick  )  =>  ( 
26+ const  Button  =  (  id ,  title ,  onclick  )  => 
6327    h (  'div' ,  {  class : 'col-sm-6 smallpad'  } , 
6428       h (  'button' ,  {  id,  type : 'button' ,  class : 'btn btn-primary btn-block' ,  onclick : onclick  } ,  title  ) 
6529    ) 
66- ) 
67- 
68- const  row  =  (  item ,  idx  )  =>  { 
69-     let  tr  =  h (  'tr' ,  {  id : item . id  } , 
70-                 h (  'td' ,  {  class : 'col-md-1'  } ,  fnbind (  item ,  ( )  =>  item . id  ) ) , 
71-                    h (  'td' ,  {  class : 'col-md-4'  } ,  h (  'a' ,  {  onclick : ( )  =>  selected . id  =  item . id  } ,  fnbind (  item ,  ( )  =>  item . label  )  )  ) , 
72-                    h (  'td' ,  { 
73-                           class : 'col-md-1' , 
74-                           onclick : (  e  )  =>  { 
75-                               tr . replaceWith (  ''  ) 
76-                               resetState (  item  ) 
77-                               data . current . splice (  idx ,  1  ) 
78-                           } 
79-                       } , 
80-                       h (  'a' , 
81-                          h (  'span' ,  {  class : 'glyphicon glyphicon-remove' ,  'aria-hidden' : 'true'  }  ) 
82-                       ) 
83-                    ) , 
84-                    h (  'td' ,  {  class : 'col-md-6'  }  ) 
85-                 ) 
86-     return  fnbind (  selected ,  tr ,  (  el ,  st  )  =>  { 
87-         if (  st . id  ===  item . id  ) 
88-             el . className  =  'danger' 
89-         else 
90-             el . className  =  '' 
9130
92-     }  ) 
31+ let  selectedId =  0 
32+ const  row  =  (  item  )  =>  { 
33+     let  label  =  h (  'a' ,  { 
34+         onclick : ( )  =>  { 
35+             let  currentSelection  =  data . current . find (  i  =>  i  &&  i . id  ==  selectedId  ) 
36+             if (  currentSelection  )  findElement (  currentSelection  ) . className  =  '' 
37+             findElement (  item  ) . className  =  'danger' 
38+             selectedId  =  item . id 
39+         } 
40+     } ,  item . label  ) 
41+     let  id  =  h (  'td' ,  {  class : 'col-md-1'  } ,  item . id  ) 
42+     let  tr  =  h (  'tr' ,  {  id : item . id . toString ( ) ,  class : selectedId  ===  item . id  ? 'danger'  : ''  } , 
43+                 id , 
44+                 h (  'td' ,  {  class : 'col-md-4'  } ,  label  ) , 
45+                 h (  'td' ,  { 
46+                        class : 'col-md-1' , 
47+                        onclick : (  e  )  =>  { 
48+                            e . preventDefault ( ) 
49+                            tr . replaceWith (  ''  ) 
50+                            resetState (  item  ) 
51+                            data . current [  data . current . findIndex (  i  =>  i  &&  i . id  ===  item . id  )  ]  =  null 
52+                            tr  =  null 
53+                        } 
54+                    } , 
55+                    h (  'a' , 
56+                       h (  'span' ,  {  class : 'glyphicon glyphicon-remove' ,  'aria-hidden' : 'true'  }  ) 
57+                    ) 
58+                 ) , 
59+                 h (  'td' ,  {  class : 'col-md-6'  }  ) 
60+     ) 
61+     return  fnbind ( 
62+         item , 
63+         tr , 
64+         ( )  =>  { 
65+             label . innerText  =  item . label 
66+             id . innerText  =  item . id 
67+         } 
68+     ) 
9369} 
9470
71+ const  dataTable  =  h (  'tbody'  ) 
9572fnapp (  document . body , 
9673       h (  'div' ,  {  class : 'container'  } , 
9774          h (  'div' ,  {  class : 'jumbotron'  } , 
@@ -101,22 +78,48 @@ fnapp( document.body,
10178                ) , 
10279                h (  'div' ,  {  class : 'col-md-6'  } , 
10380                   h (  'div' ,  {  class : 'row'  } , 
104-                       Button (  'run' ,  'Create 1,000 rows' ,  createOneThousand  ) , 
105-                       Button (  'runlots' ,  'Create 10,000 rows' ,  createTenThousand  ) , 
106-                       Button (  'add' ,  'Append 1,000 rows' ,  appendOneThousand  ) , 
107-                       Button (  'update' ,  'Update every 10th row' ,  updateEveryTenth  ) , 
108-                       Button (  'clear' ,  'Clear' ,  clear  ) , 
109-                       Button (  'swaprows' ,  'Swap Rows' ,  swapRows  ) 
81+                       Button (  'run' ,  'Create 1,000 rows' ,  ( )  =>  data . current  =  buildData (  1000  )  ) , 
82+                       Button (  'runlots' ,  'Create 10,000 rows' ,  ( )  =>  data . current  =  buildData (  10000  )  ) , 
83+                       Button (  'add' ,  'Append 1,000 rows' ,  ( )  =>  { 
84+                           let  newData  =  buildData (  1000  ) 
85+                           data . current . push (  ...data . current . concat (  newData  )  ) 
86+                           dataTable . append (  ...newData . map (  row  )  ) 
87+                       }  ) , 
88+                       Button (  'update' ,  'Update every 10th row' ,  ( )  =>  { 
89+                           for (  let  i  =  0 ;  i  <  data . current . length ;  i  +=  10  )  { 
90+                               data . current [  i  ] . label  +=  ' !!!' 
91+                           } 
92+                       }  ) , 
93+                       Button (  'clear' ,  'Clear' ,  ( )  =>  data . current  =  [ ]  ) , 
94+                       Button (  'swaprows' ,  'Swap Rows' ,  (  )  =>  { 
95+                           const  theData  =  data . current 
96+                           if (  theData . length  >  998  )  { 
97+ 
98+                               let  rowa  =  findElement (  theData [  1  ] ,  el  =>  el . getAttribute (  'id'  )  ==  theData [  1  ] . id  ) 
99+                               let  rowb  =  findElement (  theData [  998  ] ,  el  =>  el . getAttribute (  'id'  )  ==  theData [  998  ] . id  ) 
100+ 
101+                               const  a  =  theData [  1  ] 
102+                               theData [  1  ]  =  theData [  998  ] 
103+                               theData [  998  ]  =  a 
104+                               let  sib  =  rowa . nextSibling 
105+                               let  parent  =  rowa . parentNode 
106+                               parent . insertBefore (  rowa ,  rowb  ) 
107+                               parent . insertBefore (  rowb ,  sib  ) 
108+ 
109+                           } 
110+                       }  ) 
110111                   ) 
111112                ) 
112113             ) 
113114          ) 
114115       ) , 
115116       h (  'table' ,  {  class : 'table table-hover table-striped test-data'  } , 
116-           fnbind (  data ,  ( )  => 
117-               h (  'tbody' ,  ...data . current . map (  row  )  ) 
118-           ) 
117+           fnbind (  data ,  dataTable ,  (  el ,  st  )  =>  { 
118+               while (  el . firstChild  )  { 
119+                   el . removeChild (  el . firstChild  ) 
120+               } 
121+               el . append (  ...st . current . filter (  r  =>  r  ) . map (  row  )  ) 
122+           }  ) 
119123       ) , 
120124       h (  'span' ,  {  class : 'preloadicon glyphicon glyphicon-remove' ,  'aria-hidden' : 'true'  }  ) 
121- ) 
122- 
125+ ) 
0 commit comments