Bug 866902 - [contacts] Search field usability and consistency improv…

…ements
mozshiao9 · May 31, 2013 · e01b9a4 · e01b9a4
1 parent 33abeca
commit e01b9a4
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 3 deletions.
diff --git a/apps/communications/contacts/js/contacts_list.js b/apps/communications/contacts/js/contacts_list.js
@@ -145,7 +145,7 @@ contacts.List = (function() {
         showNextGroup(true);
       }
     }
-    if (domTarget.offsetTop > 0)
+    if (domTarget.offsetTop >= 0)
       scrollable.scrollTop = domTarget.offsetTop;
   };
 

diff --git a/apps/communications/contacts/js/search.js b/apps/communications/contacts/js/search.js
@@ -53,6 +53,15 @@ contacts.Search = (function() {
 
     if (defaultEnabled)
       searchEnabled = true;
+
+    document.querySelector('#view-contacts-list')
+    .addEventListener('transitionend', function(event) {
+      if (event.propertyName == 'transform') {
+        if (document.body.classList.contains('insearchmode')) {
+          searchView.classList.add('insearchmode');
+        }
+      }
+    }, false);
   };
 
   var initialized = false;
@@ -97,6 +106,7 @@ contacts.Search = (function() {
   var exitSearchMode = function exitSearchMode(evt) {
     evt.preventDefault();
     searchView.classList.remove('insearchmode');
+    document.body.classList.remove('insearchmode');
 
     window.setTimeout(function exit_search() {
       hideProgressResults();
@@ -225,13 +235,14 @@ contacts.Search = (function() {
 
     if (!inSearchMode) {
       window.addEventListener('input', onInput);
-      searchView.classList.add('insearchmode');
       doInit();
       fillInitialSearchPage();
       inSearchMode = true;
+
       emptySearch = true;
 
       setTimeout(function nextTick() {
+        document.body.classList.add('insearchmode');
         searchBox.focus();
       });
     }
@@ -269,7 +280,6 @@ contacts.Search = (function() {
             currentSet[contact.dataset.uuid] = clonedNode;
             searchList.appendChild(clonedNode);
           }
-
           state.searchables.push({
             node: contact,
             text: contactText
@@ -303,6 +313,19 @@ contacts.Search = (function() {
           state.searchDoneCb();
         }
       }
+
+      if (c == contacts.length) {
+        var dedupedSearchables = dedupeSearchables(state);
+        //apply highlights to search result
+        for (var i = 0, contactNodes = searchList.childNodes,
+          length = contactNodes.length; i < length; i++) {
+          var contactNode = contactNodes[i];
+          var uuid = contactNode.dataset.uuid;
+
+          contactNode.innerHTML =
+            parseContactNode(dedupedSearchables[uuid].innerHTML, searchText);
+        }
+      }
     }
     else {
       canReuseSearchables = false;
@@ -389,6 +412,7 @@ contacts.Search = (function() {
     if (canReuseSearchables && newText.length > prevText.length &&
         prevText.length > 0 && newText.indexOf(prevText) === 0) {
       out = searchableNodes || getContactsDom();
+
     } else {
       utils.dom.removeChildNodes(searchList);
       currentSet = {};
@@ -431,6 +455,65 @@ contacts.Search = (function() {
     searchProgress.classList.add('hidden');
   }
 
+  function dedupeSearchables(state) {
+    var dedupedSearchables = {};
+    for (var i = 0, searchables = state.searchables,
+      length = searchables.length; i < length; i++) {
+      var searchable = searchables[i];
+      var key = searchable['node'].dataset.uuid;
+      if (!(key in dedupedSearchables)) {
+        dedupedSearchables[key] = searchable.node;
+      }
+    }
+    return dedupedSearchables;
+  }
+
+  function highlight(nodeString, searchText) {
+    var index = nodeString.toLocaleLowerCase().indexOf(searchText);
+    var ns = nodeString;
+    if (index > -1) {
+      ns = nodeString.substring(0, index) +
+        '<span class="search-highlight">' +
+        nodeString.substring(index, index + searchText.length) +
+        '</span>' +
+        nodeString.substring(index + searchText.length, nodeString.length);
+    }
+
+    return ns;
+  }
+
+  function parseContactNode(nodeString, searchText) {
+    var newNodeString = [];
+
+    function parse(nodeString) {
+      var index = 0;
+      var isNode = false;
+      if (nodeString.indexOf('<') === 0) {
+          // starts with element
+          index = nodeString.indexOf('>') + 1;
+          isNode = true;
+      } else if (nodeString.indexOf('<') !== -1) {
+          // starts with text
+          index = nodeString.indexOf('<');
+      } else {
+          // trailing text
+          index = nodeString.length;
+      }
+
+      var tempString = nodeString.substring(0, index);
+      var parsedString = isNode ?
+        tempString : highlight(tempString, searchText);
+      newNodeString.push(parsedString);
+
+      if (index !== nodeString.length) {
+          parse(nodeString.substring(index, nodeString.length));
+      }
+    }
+
+    parse(nodeString);
+    return newNodeString.join('');
+  }
+
   return {
     'init': init,
     'invalidateCache': invalidateCache,

diff --git a/apps/communications/contacts/style/contacts.css b/apps/communications/contacts/style/contacts.css
@@ -28,6 +28,14 @@ section[role="region"] > header:first-child .icon.icon-edit-contact {
   background-size: 100% auto;
 }
 
+body.insearchmode #view-contacts-list{
+  transform: translateY(-5rem);
+}
+
+#view-contacts-list {
+  transition: transform 500ms ease;
+}
+
 .view-contacts-list .block-list {
   padding-right: 1rem;
 }
@@ -567,3 +575,7 @@ section[role="region"] > header .icon.icon-settings
 #importSources > li.importService {
   height: 5rem;
 }
+
+.search-highlight {
+  background-color: rgb(0, 138, 170);
+}
diff --git a/apps/communications/contacts/style/search.css b/apps/communications/contacts/style/search.css
@@ -39,6 +39,11 @@ form.search button[type="submit"] {
   width: auto;
 }
 
+/* override bb to force show reset */
+form p input + button[type="reset"] {
+  opacity: 1;
+}
+
 /* Search view */
 #search-view {
   position: fixed;