Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #10903 from wanderview/contacts-full-defer-order-s…
Browse files Browse the repository at this point in the history 
…earch

Bug 892155: Fully defer order/search string calc.  r=arcturus
  • Loading branch information
Ben Kelly committed Jul 11, 2013
2 parents 5cd0c74 + 7dbfc3e commit 4f4fa7b
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 57 deletions.
39 changes: 29 additions & 10 deletions apps/communications/contacts/js/contacts_list.js
View file
Expand Up @@ -63,13 +63,23 @@ contacts.List = (function() {
var renderLoadedContact = function(el, id) {
if (el.dataset.rendered)
return;
var id = id || el.dataset.uuid;
id = id || el.dataset.uuid;
var group = el.dataset.group;
var contact = loadedContacts[id] ? loadedContacts[id][group] : null;
if (!contact)
return;
renderContact(contact, el);
loadedContacts[id][group] = null;
clearLoadedContact(el, id, group);
};

var clearLoadedContact = function(el, id, group) {
if (!el.dataset.rendered || !el.dataset.order || !el.dataset.search)
return;

id = id || el.dataset.uuid;
group = group || el.dataset.group;
if (loadedContacts[id])
loadedContacts[id][group] = null;
};

var offscreen = function(el) {
Expand Down Expand Up @@ -309,9 +319,6 @@ contacts.List = (function() {
container.appendChild(nameElement);
renderOrg(contact, container, true);

renderSearchString(container, contact);
renderOrderString(container, contact);

container.dataset.rendered = true;
return container;
};
Expand All @@ -331,6 +338,8 @@ contacts.List = (function() {

var display = getDisplayName(contact);
node.dataset.search = getSearchString(contact, display);

clearLoadedContact(node, contact.id, node.dataset.group);
};

var renderOrderString = function renderOrderString(node, contact) {
Expand All @@ -344,6 +353,8 @@ contacts.List = (function() {

var display = getDisplayName(contact);
node.dataset.order = getStringToBeOrdered(contact, display);

clearLoadedContact(node, contact.id, node.dataset.group);
};

// Create a mostly empty list item as a placeholder for the contact. All
Expand Down Expand Up @@ -539,13 +550,13 @@ contacts.List = (function() {
renderContact(contact, ph);

// Otherwise save contact to render later
} else {
if (!loadedContacts[contact.id])
loadedContacts[contact.id] = {};

loadedContacts[contact.id][group] = contact;
}

if (!loadedContacts[contact.id])
loadedContacts[contact.id] = {};

loadedContacts[contact.id][group] = contact;

list.appendChild(ph);
if (list.children.length === 1) {
showGroupByList(list);
Expand Down Expand Up @@ -850,6 +861,13 @@ contacts.List = (function() {

var addToList = function addToList(contact) {
var renderedNode = renderContact(contact);

// We must render all values here because the contact is not saved in
// the loadedContacts hash when added one at a via refresh(). Therefore
// we can not lazy render these values.
renderSearchString(renderedNode, contact);
renderOrderString(renderedNode, contact);

if (updatePhoto(contact))
renderPhoto(renderedNode, contact.id);
var list = headers[renderedNode.dataset.group];
Expand Down Expand Up @@ -1081,6 +1099,7 @@ contacts.List = (function() {
return;
}
utils.dom.removeChildNodes(groupsList);
loadedContacts = {};
loaded = false;

initHeaders();
Expand Down
132 changes: 85 additions & 47 deletions apps/communications/contacts/test/unit/contacts_list_test.js
View file
Expand Up @@ -1134,63 +1134,101 @@ suite('Render contacts list', function() {
});
});

test('Order string lazy calculated', function(done) {
mockContacts = new MockContactsList();
doLoad(subject, mockContacts, function() {
// The nodes are there
var nodes = list.querySelectorAll('li');
assert.length(nodes, 3);

// But no order strings are rendered initially. This work is deferred
nodes = list.querySelectorAll('li[data-order]');
assert.length(nodes, 0);

// Adding a contact via refresh() should result in the order string
// being calculated.
var c = new MockContactAllFields();
c.id = 99;
c.familyName = ['AZ'];
c.category = [];
subject.refresh(c);

nodes = list.querySelectorAll('li');
assert.length(nodes, 4);

nodes = list.querySelectorAll('li[data-order]');
assert.length(nodes, 2);

done();
});
});

test('Order by lastname', function(done) {
resetDom(document);
subject.init(list);

mockContacts = new MockContactsList();
doLoad(subject, mockContacts, function() {
var nodes = document.querySelectorAll('[data-order]');

assert.length(nodes, mockContacts.length);
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var mockContact = mockContacts[i];
var expected = getStringToBeOrdered(mockContact, true);
assert.equal(node.dataset['order'],
Normalizer.escapeHTML(expected, true));

var printed = node.querySelector('p');

// Check as well the correct highlight
// familyName to be in bold
var highlight =
Normalizer.escapeHTML(mockContact.givenName[0], true) +
' <strong>' +
Normalizer.escapeHTML(mockContact.familyName[0], true) +
'</strong>';
assert.isTrue(printed.innerHTML.indexOf(highlight) == 0);
}
done();
});

// Use refresh() to load list since it forces order strings to be
// calculated and used for sorting.
for (var i = 0; i < mockContacts.length; ++i) {
subject.refresh(mockContacts[i]);
}

var nodes = document.querySelectorAll('li[data-order]');

assert.length(nodes, mockContacts.length);
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var mockContact = mockContacts[i];
var expected = getStringToBeOrdered(mockContact, true);
assert.equal(node.dataset['order'],
Normalizer.escapeHTML(expected, true));

var printed = node.querySelector('p');

// Check as well the correct highlight
// familyName to be in bold
var highlight =
Normalizer.escapeHTML(mockContact.givenName[0], true) +
' <strong>' +
Normalizer.escapeHTML(mockContact.familyName[0], true) +
'</strong>';
assert.isTrue(printed.innerHTML.indexOf(highlight) == 0);
}
done();
});

test('NOT order by lastname', function(done) {
subject.setOrderByLastName(false);

doLoad(subject, mockContacts, function() {
// First one should be the last one from the list,
// with the current names
var node = document.querySelector('[data-order]');
var mockContact = mockContacts[mockContacts.length - 1];
var expected = getStringToBeOrdered(mockContact, false);

assert.equal(
node.dataset['order'], Normalizer.escapeHTML(expected, true));

var name = node.querySelector('p');

// Check highlight
// Given name to be in bold
var highlight = '<strong>' +
Normalizer.escapeHTML(mockContact.givenName[0], true) +
'</strong> ' +
Normalizer.escapeHTML(mockContact.familyName[0], true);
assert.equal(name.innerHTML.indexOf(highlight), 0);

subject.setOrderByLastName(true);
done();
});
// Use refresh() to load list since it forces order strings to be
// calculated and used for sorting.
for (var i = 0; i < mockContacts.length; ++i) {
subject.refresh(mockContacts[i]);
}

// First one should be the last one from the list,
// with the current names
var node = document.querySelector('[data-order]');
var mockContact = mockContacts[mockContacts.length - 1];
var expected = getStringToBeOrdered(mockContact, false);

assert.equal(
node.dataset['order'], Normalizer.escapeHTML(expected, true));

var name = node.querySelector('p');

// Check highlight
// Given name to be in bold
var highlight = '<strong>' +
Normalizer.escapeHTML(mockContact.givenName[0], true) +
'</strong> ' +
Normalizer.escapeHTML(mockContact.familyName[0], true);
assert.equal(name.innerHTML.indexOf(highlight), 0);

subject.setOrderByLastName(true);
done();
});
});
});

0 comments on commit 4f4fa7b

Please sign in to comment.