Skip to content

Commit f022950

Browse files
snowbldrsnowbldr
committed
update to fntags 0.3.4
1 parent e851879 commit f022950

File tree

2 files changed

+66
-84
lines changed

2 files changed

+66
-84
lines changed

‎frameworks/keyed/fntags/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"author": "Robert Kempton",
1515
"dependencies": {
16-
"fntags": "0.3.2"
16+
"fntags": "0.3.4"
1717
},
1818
"devDependencies": {
1919
"fs-extra": "8.1.0",

‎frameworks/keyed/fntags/src/Main.js‎

Lines changed: 65 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fnapp, fnstate, h } from 'https://cdn.jsdelivr.net/npm/%3Ca%20href="http://github.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42242c3623253102726c71">[email protected].2/src/fntags.min.js'
1+
import { fnstate, h } from 'https://cdn.jsdelivr.net/npm/%3Ca%20href="http://github.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14727a6075736754243a27">[email protected].4/src/fntags.min.js'
22

33
let data = fnstate( [], d => d.id )
44

@@ -30,93 +30,75 @@ const Button = ( id, title, onclick ) =>
3030
)
3131

3232
const row = ( item ) => {
33-
const id = h( 'td', {
34-
class: 'col-md-1'
35-
},
36-
item().id
37-
)
38-
let currentLabel = item().label
3933
let label = h( 'a', item().label )
40-
let removeBtn = h( 'span', {
41-
onclick: ( e ) => {
42-
e.preventDefault()
43-
e.stopPropagation()
44-
data( data().filter( d => d().id !== item().id ) )
45-
},
46-
class: 'glyphicon glyphicon-remove', 'aria-hidden': 'true'
47-
} )
48-
49-
let isSelected = item().selected
50-
const tr = h( 'tr', {
51-
id: item().id,
52-
class: isSelected ? 'danger' : '',
53-
onclick: () => {
54-
let currentSelection = data().find( d => d().selected )
55-
if( currentSelection ) currentSelection.patch( { selected: false } )
56-
item.patch( { selected: true } )
57-
}
58-
},
59-
id,
60-
h( 'td', { class: 'col-md-4' }, label ),
61-
h( 'td', { class: 'col-md-1' },
62-
h( 'a',
63-
removeBtn
64-
)
65-
),
66-
h( 'td', { class: 'col-md-6' } )
34+
return item.bindAs(
35+
h( 'tr', {
36+
id: item().id,
37+
onclick: () => data.select( item().id ),
38+
onselect: ( e ) => e.target.className = 'danger',
39+
ondeselect: ( e ) => e.target.className = ''
40+
},
41+
h( 'td', {
42+
class: 'col-md-1'
43+
},
44+
item().id
45+
),
46+
h( 'td', { class: 'col-md-4' }, label ),
47+
h( 'td', { class: 'col-md-1' },
48+
h( 'a',
49+
h( 'span', {
50+
onclick: ( e ) => {
51+
e.stopPropagation()
52+
data( data().filter( d => d().id !== item().id ) )
53+
},
54+
class: 'glyphicon glyphicon-remove', 'aria-hidden': 'true'
55+
} )
56+
)
57+
),
58+
h( 'td', { class: 'col-md-6' } )
59+
),
60+
() => label.innerText = item().label
6761
)
68-
69-
item.subscribe( () => {
70-
if( isSelected && !item().selected ) {
71-
tr.className = ''
72-
} else if( !isSelected && item().selected ) {
73-
tr.className = 'danger'
74-
}
75-
isSelected = item().selected
76-
77-
if( currentLabel != item().label ) {
78-
label.innerText = item().label
79-
currentLabel = item().label
80-
}
81-
} )
82-
83-
return tr
8462
}
8563

86-
fnapp( document.body,
87-
h( 'div', { class: 'container' },
88-
h( 'div', { class: 'jumbotron' },
89-
h( 'div', { class: 'row' },
90-
h( 'div', { class: 'col-md-6' },
91-
h( 'h1', 'fntags keyed' )
92-
),
93-
h( 'div', { class: 'col-md-6' },
94-
h( 'div', { class: 'row' },
95-
Button( 'run', 'Create 1,000 rows', () => data( buildData( 1000 ) ) ),
96-
Button( 'runlots', 'Create 10,000 rows', () => data( buildData( 10000 ) ) ),
97-
Button( 'add', 'Append 1,000 rows', () => data( data().concat( buildData( 1000 ) ) ) ),
98-
Button( 'update', 'Update every 10th row', () => {
99-
for( let i = 0; i < data().length; i += 10 ) {
100-
data()[ i ].patch( { label: data()[ i ]().label + ' !!!' } )
101-
}
102-
} ),
103-
Button( 'clear', 'Clear', () => data( [] ) ),
104-
Button( 'swaprows', 'Swap Rows', () => {
105-
const d = data()
106-
if( d.length > 998 ) {
107-
const a = d[ 1 ]
108-
d[ 1 ] = d[ 998 ]
109-
d[ 998 ] = a
110-
}
111-
data( d )
112-
} )
113-
)
64+
document.body.append(
65+
h( 'div', { class: 'container' },
66+
h( 'div', { class: 'jumbotron' },
67+
h( 'div', { class: 'row' },
68+
h( 'div', { class: 'col-md-6' },
69+
h( 'h1', 'fntags keyed' )
70+
),
71+
h( 'div', { class: 'col-md-6' },
72+
h( 'div', { class: 'row' },
73+
Button( 'run', 'Create 1,000 rows', () => data( buildData( 1000 ) ) ),
74+
Button( 'runlots', 'Create 10,000 rows', () => data( buildData( 10000 ) ) ),
75+
Button( 'add', 'Append 1,000 rows', () => data( data().concat( buildData( 1000 ) ) ) ),
76+
Button( 'update', 'Update every 10th row', () => {
77+
let items = data()
78+
for( let i = 0; i < items.length; i += 10 ) {
79+
let d = items[ i ]
80+
let it = d()
81+
it.label += ' !!!'
82+
d( it )
83+
}
84+
} ),
85+
Button( 'clear', 'Clear', () => data( [] ) ),
86+
Button( 'swaprows', 'Swap Rows', () => {
87+
const d = data()
88+
if( d.length > 998 ) {
89+
const a = d[ 1 ]
90+
d[ 1 ] = d[ 998 ]
91+
d[ 998 ] = a
92+
}
93+
data( d )
94+
} )
11495
)
11596
)
11697
)
117-
),
118-
h( 'table', { class: 'table table-hover table-striped test-data' },
119-
data.bindValues( h( 'tbody' ), row )
120-
),
121-
h( 'span', { class: 'preloadicon glyphicon glyphicon-remove', 'aria-hidden': 'true' } )
98+
)
99+
),
100+
h( 'table', { class: 'table table-hover table-striped test-data' },
101+
data.bindValues( h( 'tbody' ), row )
102+
),
103+
h( 'span', { class: 'preloadicon glyphicon glyphicon-remove', 'aria-hidden': 'true' } )
122104
)

0 commit comments

Comments
 (0)