Skip to content
This repository was archived by the owner on Aug 15, 2022. It is now read-only.

Commit 15d5099

Browse files
committed
Optimize updates for rows.
This patch optimizes the updating of data coming back from the API, used for sticky checkboxes mostly.
1 parent aa7af80 commit 15d5099

File tree

1 file changed

+54
-36
lines changed

1 file changed

+54
-36
lines changed

assets/js/rest-example-jquery.js

Lines changed: 54 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,19 @@ jQuery( function( $ ) {
1616
$( '#post-table' ).replaceWith( newTable );
1717
};
1818

19+
// Regenerates a single updated post.
20+
var regeneratePost = function( updatedPost ) {
21+
g_posts.filter( function( post ) {
22+
if ( post.id === updatedPost.id ) {
23+
var index = g_posts.indexOf( post );
24+
g_posts[ index ] = updatedPost;
25+
}
26+
} );
27+
28+
var row = generatePostRow( updatedPost, g_users );
29+
$( 'tr[key="' + updatedPost.id + '"]' ).replaceWith( row );
30+
};
31+
1932
// Creates a new table to display post results.
2033
var generateTable = function( posts, users ) {
2134
var i18n = screen_data.i18n;
@@ -33,38 +46,46 @@ jQuery( function( $ ) {
3346

3447
// For each post, create a row.
3548
posts.filter( function( post ) {
36-
var row = $( '<tr/>' ).appendTo( table );
37-
38-
// Post Title
39-
var titleCell = $( '<td/>' ).appendTo( row );
40-
$( '<a/>', {
41-
'href': post.link,
42-
text: post.title.rendered
43-
} ).appendTo( titleCell );
44-
45-
// Post Author
46-
var author = users[ post.author.toString() ];
47-
var authorCell = $( '<td/>' ).appendTo( row );
48-
$( '<a/>', {
49-
'href': author.link,
50-
text: author.name
51-
} ).appendTo( authorCell );
52-
53-
// Sticky
54-
var stickyCell = $( '<td/>' ).appendTo( row );
55-
var stickyInput = $( '<input/>', {
56-
'type': 'checkbox',
57-
} ).appendTo( stickyCell );
58-
stickyInput.prop( 'checked', post.sticky );
59-
60-
stickyInput.on( 'change', function( evt ) {
61-
toggleSticky( post, stickyInput );
62-
} );
49+
var row = generatePostRow( post, users );
50+
row.appendTo( table );
6351
} );
6452

6553
return table;
6654
};
6755

56+
// Creates a new TR element for a post.
57+
var generatePostRow = function( post, users ) {
58+
var row = $( '<tr/>', { 'key': post.id } );
59+
60+
// Post Title
61+
var titleCell = $( '<td/>' ).appendTo( row );
62+
$( '<a/>', {
63+
'href': post.link,
64+
text: post.title.rendered
65+
} ).appendTo( titleCell );
66+
67+
// Post Author
68+
var author = users[ post.author.toString() ];
69+
var authorCell = $( '<td/>' ).appendTo( row );
70+
$( '<a/>', {
71+
'href': author.link,
72+
text: author.name
73+
} ).appendTo( authorCell );
74+
75+
// Sticky
76+
var stickyCell = $( '<td/>' ).appendTo( row );
77+
var stickyInput = $( '<input/>', {
78+
'type': 'checkbox',
79+
} ).appendTo( stickyCell );
80+
stickyInput.prop( 'checked', post.sticky );
81+
82+
stickyInput.on( 'change', function( evt ) {
83+
toggleSticky( post, stickyInput );
84+
} );
85+
86+
return row;
87+
}
88+
6889
// Returns the ids which aren't in the users list.
6990
var filterUnfetchedUsers = function( ids, users ) {
7091
var unfetched = [];
@@ -118,6 +139,7 @@ jQuery( function( $ ) {
118139
} );
119140
};
120141

142+
// Toggles the sticky state of a post.
121143
var toggleSticky = function( post, checkbox ) {
122144
var sticky = ! post.sticky;
123145
checkbox.prop( 'disabled', true );
@@ -133,30 +155,26 @@ jQuery( function( $ ) {
133155
},
134156
success: function( data ) {
135157
// Update the global state
136-
g_posts[ data.id ] = data;
158+
regeneratePost( data );
137159
},
138160
error: function( req ) {
139161
console.error( 'error on sticky update' );
140162
console.error( req );
141-
},
142-
complete: function() {
143-
// Either way, make sure the checkbox matches.
144-
var sticky = g_posts[ post.id ].sticky;
145-
if ( sticky !== checkbox.prop( 'checked' ) ) {
146-
checkbox.prop( 'checked', g_posts[ post.id ].sticky );
147-
}
148-
checkbox.prop( 'disabled', false );
163+
// Reset the post to its previous state.
164+
regeneratePost( post );
149165
}
150166
} );
151167
};
152168

169+
// Clears the search timeout.
153170
var clearTimeout = function() {
154171
if ( g_searchTimeout ) {
155172
window.clearTimeout( g_searchTimeout );
156173
g_searchTimeout = null;
157174
}
158175
};
159176

177+
// Sends an API call to search for posts.
160178
var searchPosts = function() {
161179
updateMessage( screen_data.i18n.loading );
162180

0 commit comments

Comments
 (0)