From b20a8daa2ba8f2727470b642f0fc87d32cea0e3b Mon Sep 17 00:00:00 2001
From: Clinton Blackburn <cblackburn@edx.org>
Date: Wed, 5 Nov 2014 16:44:52 -0500
Subject: [PATCH] Fixed Announcement Dismissal

- Loading application-main.js for all pages
- Using standard click event instead of Bootstrap event.
- Removing DOM element explicitly
- Updated/fixed tests
---
 analytics_dashboard/static/js/common.js       |  3 +-
 .../js/test/specs/announcement-view-spec.js   |  8 ++--
 .../static/js/views/announcement-view.js      |  8 +++-
 .../templates/announcements.html              | 44 +++++++++----------
 4 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/analytics_dashboard/static/js/common.js b/analytics_dashboard/static/js/common.js
index 23399482e..031fb768f 100644
--- a/analytics_dashboard/static/js/common.js
+++ b/analytics_dashboard/static/js/common.js
@@ -5,6 +5,7 @@ require([
     'bootstrap',
     'bootstrap_accessibility',
     'vendor/domReady!',
-    'load/init-page'
+    'load/init-page',
+    'js/application-main'
 ], function () {
 });
diff --git a/analytics_dashboard/static/js/test/specs/announcement-view-spec.js b/analytics_dashboard/static/js/test/specs/announcement-view-spec.js
index 668cce4af..a13345ea2 100644
--- a/analytics_dashboard/static/js/test/specs/announcement-view-spec.js
+++ b/analytics_dashboard/static/js/test/specs/announcement-view-spec.js
@@ -4,7 +4,9 @@ define(['views/announcement-view', 'jquery', 'underscore'], function (Announceme
     var view, $el,
         csrftoken = '1234',
         url = 'http://example.com',
-        template = _.template('<div id="announcement" data-dismiss-url="<%=url%>"><input type="hidden" name="csrfmiddlewaretoken" value="<%=csrftoken%>"</div>');   // jshint ignore:line
+        template = _.template('<div id="announcement" data-dismiss-url="<%=url%>">' +
+            '<input type="hidden" name="csrfmiddlewaretoken" value="<%=csrftoken%>">' +
+            '<a class="dismiss">Close</a></div>');
 
     describe('AnnouncementView', function () {
         beforeEach(function () {
@@ -22,11 +24,11 @@ define(['views/announcement-view', 'jquery', 'underscore'], function (Announceme
             });
         });
 
-        it('should call dismiss when the closed.bs.alert event is fired', function () {
+        it('should call dismiss when the dismiss element is clicked', function () {
             spyOn(view, 'dismiss');
 
             view.delegateEvents();
-            $el.trigger('closed.bs.alert');
+            $('.dismiss', $el).click();
 
             expect(view.dismiss).toHaveBeenCalled();
         });
diff --git a/analytics_dashboard/static/js/views/announcement-view.js b/analytics_dashboard/static/js/views/announcement-view.js
index c1a7f7d0e..47e997674 100644
--- a/analytics_dashboard/static/js/views/announcement-view.js
+++ b/analytics_dashboard/static/js/views/announcement-view.js
@@ -3,7 +3,7 @@ define(['backbone', 'jquery'], function (Backbone, $) {
 
     var AnnouncementView = Backbone.View.extend({
         events: {
-            'closed.bs.alert': 'dismiss'
+            'click .dismiss': 'dismiss'
         },
 
         initialize: function () {
@@ -26,9 +26,15 @@ define(['backbone', 'jquery'], function (Backbone, $) {
                 }
             });
 
+            // Record the dismissal on the server.
             if (url) {
                 $.post(url);
             }
+
+            // Remove the DOM elements
+            self.remove();
+
+            return true;
         }
     });
 
diff --git a/analytics_dashboard/templates/announcements.html b/analytics_dashboard/templates/announcements.html
index 6169525f3..ebfcad00e 100644
--- a/analytics_dashboard/templates/announcements.html
+++ b/analytics_dashboard/templates/announcements.html
@@ -3,30 +3,30 @@
 {% announcements as announcements_list %}
 
 {% with announcements_list|first as announcement %}
-    {% if announcement %}
-        <div class="announcement-container" role="alert" data-dismiss-url="{{ announcement.dismiss_url }}"
-             data-view="announcement">
-            <div class="container"
-            {% csrf_token %}
-            <a class="dismiss" data-dismiss="alert">
-                <span aria-hidden="true"><i class="fa fa-times"></i></span><span class="sr-only">Close</span>
-            </a>
+  {% if announcement %}
+    <div class="announcement-container" data-dismiss-url="{{ announcement.dismiss_url }}"
+         data-view="announcement">
+      <div class="container">
+        {% csrf_token %}
+        <a class="dismiss">
+          <span aria-hidden="true"><i class="fa fa-times"></i></span><span class="sr-only">Close</span>
+        </a>
 
-            <div class="container">
-                <div class="row">
-                    <div class="col-xs-1 col-md-1">
-                        <div class="icon"><i class="fa fa-bullhorn"></i></div>
-                    </div>
+        <div class="container">
+          <div class="row">
+            <div class="col-xs-1 col-md-1">
+              <div class="icon"><i class="fa fa-bullhorn"></i></div>
+            </div>
 
-                    <div class="col-xs-9 col-md-9">
-                        <div class="message">
-                            <div class="title">{{ announcement.title }}</div>
-                            <div class="body">{{ announcement.content|safe }}</div>
-                        </div>
-                    </div>
-                </div>
+            <div class="col-xs-9 col-md-9">
+              <div class="message">
+                <div class="title">{{ announcement.title }}</div>
+                <div class="body">{{ announcement.content|safe }}</div>
+              </div>
             </div>
+          </div>
         </div>
-        </div>
-    {% endif %}
+      </div>
+    </div>
+  {% endif %}
 {% endwith %}