Added ability to set custom css classes on search messages

open-craft · Feb 3, 2015 · d7ba0fc · d7ba0fc
1 parent 30a7318
commit d7ba0fc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/common/static/coffee/spec/discussion/discussion_spec_helper.coffee b/common/static/coffee/spec/discussion/discussion_spec_helper.coffee
@@ -303,7 +303,7 @@ browser and pasting the output.  When that file changes, this one should be rege
 </script>
 
 <script aria-hidden="true" type="text/template" id="search-alert-template">
-    <div class="search-alert" id="search-alert-<%- cid %>">
+    <div class="search-alert <%= css_class %>" id="search-alert-<%- cid %>">
         <div class="search-alert-content">
           <p class="message"><%= message %></p>
         </div>

diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -274,6 +274,11 @@ describe "DiscussionThreadListView", ->
               $(@).html()
             ).get()).toEqual(expectedMessages)
 
+        getAlertMessagesAndClasses = () ->
+            $(".search-alert").map( ->
+              { text: $('.message', @).html(), 'css_class': $(@).attr('class') }
+            ).get()
+
         it "renders and removes search alerts", ->
             testAlertMessages []
             foo = @view.addSearchAlert("foo")
@@ -285,6 +290,23 @@ describe "DiscussionThreadListView", ->
             @view.removeSearchAlert(bar.cid)
             testAlertMessages []
 
+        it "renders search alert with custom class", ->
+            testAlertMessages []
+            foo = @view.addSearchAlert("foo", "custom-class")
+            messages = getAlertMessagesAndClasses()
+            expect(messages.length).toEqual(1);
+            expect(messages[0].text).toEqual("foo")
+            expect(messages[0].css_class).toEqual("search-alert custom-class")
+
+            foo = @view.addSearchAlert("bar", "other-class")
+
+            messages = getAlertMessagesAndClasses()
+            expect(messages.length).toEqual(2);
+            expect(messages[0].text).toEqual("foo")
+            expect(messages[0].css_class).toEqual("search-alert custom-class")
+            expect(messages[1].text).toEqual("bar")
+            expect(messages[1].css_class).toEqual("search-alert other-class")
+
         it "clears all search alerts", ->
             @view.addSearchAlert("foo")
             @view.addSearchAlert("bar")

diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -42,8 +42,12 @@ if Backbone?
       @searchAlertCollection.on "add", (searchAlert) =>
         content = _.template(
           $("#search-alert-template").html(),
-          {'message': searchAlert.attributes.message, 'cid': searchAlert.cid}
-          )
+          {
+            'message': searchAlert.attributes.message,
+            'cid': searchAlert.cid,
+            'css_class': searchAlert.attributes.css_class
+          }
+        )
         @$(".search-alerts").append(content)
         @$("#search-alert-" + searchAlert.cid + " a.dismiss").bind "click", searchAlert, (event) =>
           @removeSearchAlert(event.data.cid)
@@ -54,8 +58,8 @@ if Backbone?
       @searchAlertCollection.on "reset", =>
         @$(".search-alerts").empty()
 
-    addSearchAlert: (message) =>
-      m = new Backbone.Model({"message": message})
+    addSearchAlert: (message, css_class="") =>
+      m = new Backbone.Model({"message": message, "css_class": css_class})
       @searchAlertCollection.add(m)
       m
 
@@ -496,7 +500,7 @@ if Backbone?
               },
               true
             )
-            @addSearchAlert(message)
+            @addSearchAlert(message, 'search-by-user')
 
     clearSearch: ->
       @$(".forum-nav-search-input").val("")

diff --git a/common/templates/discussion/_underscore_templates.html b/common/templates/discussion/_underscore_templates.html
@@ -371,7 +371,7 @@ <h1 class="home-title">${course.display_name_with_default}</h1>
 </script>
 
 <script aria-hidden="true" type="text/template" id="search-alert-template">
-    <div class="search-alert" id="search-alert-${'<%- cid %>'}">
+    <div class="search-alert ${'<%= css_class %>'}" id="search-alert-${'<%- cid %>'}">
         <div class="search-alert-content">
           <p class="message">${'<%= message %>'}</p>
         </div>