MDL-64137 core_message: highlight message search results

diff --git a/message/amd/build/message_drawer_view_search.min.js b/message/amd/build/message_drawer_view_search.min.js
index 2f3881e..926dd73 100644 (file)
Binary files a/message/amd/build/message_drawer_view_search.min.js and b/message/amd/build/message_drawer_view_search.min.js differ

diff --git a/message/amd/src/message_drawer_view_search.js b/message/amd/src/message_drawer_view_search.js
index 8db0aa7..b5e4580 100644 (file)
--- a/message/amd/src/message_drawer_view_search.js
+++ b/message/amd/src/message_drawer_view_search.js
@@ -612,6 +612,22 @@ function(
         }
     };
 
+    /**
+     * Highlight words in search results.
+     *
+     * @param  {String} content HTML to search.
+     * @param  {String} searchText Search text.
+     * @return {String} searchText with search wrapped in matchtext span.
+     */
+    var highlightSearch = function(content, searchText) {
+        if (!content) {
+            return '';
+        }
+        var regex = new RegExp('(' + searchText + ')', 'gi');
+        return content.replace(regex, '<span class="matchtext">$1</span>');
+    };
+
+
     /**
      * Render contacts in the contacts search results.
      *
@@ -702,6 +718,18 @@ function(
                 var contactsCount = results.contacts.length;
                 var nonContactsCount = results.noncontacts.length;
 
+                if (contactsCount) {
+                    results.contacts.forEach(function(contact) {
+                        contact.highlight = highlightSearch(contact.fullname, text);
+                    });
+                }
+
+                if (nonContactsCount) {
+                    results.noncontacts.forEach(function(contact) {
+                        contact.highlight = highlightSearch(contact.fullname, text);
+                    });
+                }
+
                 return $.when(
                     contactsCount ? renderContacts(root, results.contacts) : true,
                     nonContactsCount ? renderNonContacts(root, results.noncontacts) : true
@@ -756,6 +784,9 @@ function(
             })
             .then(function(messages) {
                 if (messages.length) {
+                    messages.forEach(function(message) {
+                        message.lastmessage = highlightSearch(message.lastmessage, text);
+                    });
                     return renderMessages(root, messages)
                         .then(function() {
                             return messages.length;

diff --git a/message/templates/message_drawer_contacts_list.mustache b/message/templates/message_drawer_contacts_list.mustache
index bb395da..9fbd13c 100644 (file)
--- a/message/templates/message_drawer_contacts_list.mustache
+++ b/message/templates/message_drawer_contacts_list.mustache
@@ -60,7 +60,7 @@
         {{#showonlinestatus}}
             <span class="contact-status {{#isonline}}online{{/isonline}}"></span>
         {{/showonlinestatus}}
-        <h6 class="ml-2 font-weight-bold" data-region="searchable">{{fullname}}</h6>
+        <h6 class="ml-2 font-weight-bold">{{#highlight}}{{{highlight}}}{{/highlight}}{{^highlight}}{{fullname}}{{/highlight}}</h6>
         <div
             class="ml-auto align-self-end {{^isblocked}}hidden{{/isblocked}}"
             data-region="block-icon-container"

diff --git a/message/templates/message_drawer_conversations_list.mustache b/message/templates/message_drawer_conversations_list.mustache
index df496af..c249ed7 100644 (file)
--- a/message/templates/message_drawer_conversations_list.mustache
+++ b/message/templates/message_drawer_conversations_list.mustache
@@ -77,7 +77,7 @@
                         {{#str}} sender, core_message, {{.}} {{/str}}
                     {{/lastsendername}}
                 {{/sentfromcurrentuser}}
-                <span class='text-muted'>{{lastmessage}}</span>
+                <span class="text-muted">{{lastmessage}}</span>
             </p>
         </div>
         <div class="d-flex align-self-stretch">

diff --git a/message/templates/message_drawer_messages_list.mustache b/message/templates/message_drawer_messages_list.mustache
index fb96cf6..cf6d699 100644 (file)
--- a/message/templates/message_drawer_messages_list.mustache
+++ b/message/templates/message_drawer_messages_list.mustache
@@ -79,7 +79,7 @@
             </div>
             <p class="m-0 font-weight-light text-truncate" data-region="last-message">
                 {{#sentfromcurrentuser}}{{#str}} you, core_message {{/str}}{{/sentfromcurrentuser}}
-                {{lastmessage}}
+                <span>{{{lastmessage}}}</span>
             </p>
         </div>
 

diff --git a/message/templates/message_drawer_non_contacts_list.mustache b/message/templates/message_drawer_non_contacts_list.mustache
index 9da0778..ab03df4 100644 (file)
--- a/message/templates/message_drawer_non_contacts_list.mustache
+++ b/message/templates/message_drawer_non_contacts_list.mustache
@@ -55,7 +55,7 @@
             aria-hidden="true"
             style="height: 38px"
         >
-        <h6 class="ml-2 font-weight-bold" data-region="searchable">{{fullname}}</h6>
+        <h6 class="ml-2 font-weight-bold">{{#highlight}}{{{highlight}}}{{/highlight}}{{^highlight}}{{fullname}}{{/highlight}}</h6>
         {{#isblocked}}
             <div class="ml-auto align-self-end">
                 {{#pix}} t/block, core, {{#str}} contactblocked, message {{/str}} {{/pix}}

diff --git a/message/templates/message_drawer_view_group_info_participants_list.mustache b/message/templates/message_drawer_view_group_info_participants_list.mustache
index fc7d839..5be0cc8 100644 (file)
--- a/message/templates/message_drawer_view_group_info_participants_list.mustache
+++ b/message/templates/message_drawer_view_group_info_participants_list.mustache
@@ -60,7 +60,7 @@
         {{#showonlinestatus}}
             <span class="contact-status {{#isonline}}online{{/isonline}}"></span>
         {{/showonlinestatus}}
-        <h6 class="ml-2" data-region="searchable">{{fullname}}</h6>
+        <h6 class="ml-2">{{fullname}}</h6>
         <div
             class="ml-auto align-self-end {{^isblocked}}hidden{{/isblocked}}"
             data-region="block-icon-container"