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
openedx-unsupported · Nov 5, 2014 · b20a8da · b20a8da
1 parent 54027a5
commit b20a8da
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 %}