Set up Notification and Prompt

cms/static/js/models/feedback.js

@@ -4,7 +4,8 @@ CMS.Models.SystemFeedback = Backbone.Model.extend({
         "title": null,
         "message": null,
         "shown": true,
-        "close": false  // show a close button?
+        "close": false,  // show a close button?
+        "icon": true  // show an icon?
         /* could also have an "actions" hash: here is an example demonstrating
            the expected structure
         "actions": {
@@ -28,5 +29,11 @@ CMS.Models.SystemFeedback = Backbone.Model.extend({
             ]
         }
         */
+    },
+    show: function() {
+        this.set("shown", true);
+    },
+    hide: function() {
+        this.set("shown", false);
     }
 });

cms/static/js/views/feedback.js

@@ -1,20 +1,27 @@
 CMS.Views.SystemFeedback = Backbone.View.extend({
     initialize: function() {
-        this.setElement(document.getElementById(this.id));
+        this.setElement($("#page-"+this.type));
         this.listenTo(this.model, 'change', this.render);
         return this.render();
     },
+    template: _.template($("#system-feedback-tpl").text()),
     render: function() {
-        this.$el.html(this.template(this.model.attributes));
+        var attrs = this.model.attributes;
+        if(attrs.type) {
+            attrs.modelType = attrs.type;
+            delete attrs.type;
+        }
+        attrs.viewType = this.type;
+        this.$el.html(this.template(attrs));
         return this;
     },
     events: {
-        "click .action-alert-close": "hide",
+        "click .action-close": "hide",
         "click .action-primary": "primaryClick",
         "click .action-secondary": "secondaryClick"
     },
     hide: function() {
-        this.model.set("shown", false);
+        this.model.hide();
     },
     primaryClick: function() {
         var primary = this.model.get("actions").primary;
@@ -37,6 +44,20 @@ CMS.Views.SystemFeedback = Backbone.View.extend({
 });
 
 CMS.Views.Alert = CMS.Views.SystemFeedback.extend({
-    template: _.template($("#alert-tpl").text()),
-    id: "page-alert"
+    type: "alert"
+});
+CMS.Views.Notification = CMS.Views.SystemFeedback.extend({
+    type: "notification"
+});
+CMS.Views.Prompt = CMS.Views.SystemFeedback.extend({
+    type: "prompt",
+    render: function() {
+        if(this.model.get('shown')) {
+            $body.addClass('prompt-is-shown');
+        } else {
+            $body.removeClass('prompt-is-shown');
+        }
+        // super() in Javascript has awkward syntax :(
+        return CMS.Views.SystemFeedback.prototype.render.apply(this, arguments);
+    }
 });

cms/static/js/views/server_error.js

@@ -3,8 +3,15 @@ CMS.ServerError = function(model, error) {
         "type": "error",
         "title": "Server Error",
         "message": error.responseText,
-        "close": true
+        "actions": {
+            "primary": {
+                "text": "Dismiss",
+                "click": function(model) {
+                    model.hide();
+                }
+            }
+        }
     });
-    new CMS.Views.Alert({model: m});
+    new CMS.Views.Notification({model: m});
     return m;
 };

cms/templates/base.html

@@ -53,15 +53,23 @@
 
     <!-- templates -->
     <%text>
-    <script id="alert-tpl" type="text/template">
-<div class="wrapper wrapper-alert <% if(obj.type) { %>wrapper-alert-<%= type %> <% }; if(obj.shown) { %>is-shown <% } else { %>is-hiding<% } %>">
-  <div class="alert <%= type %> <% if(obj.actions) { %>has-actions <% } %>">
-    <% var iconText = {"warning": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1"} %>
-    <i class="ss-icon ss-symbolicons-block icon icon-<%= type %>"><%= iconText[type] %></i>
+    <script id="system-feedback-tpl" type="text/template">
+<div class="wrapper wrapper-<%= viewType %> wrapper-<%= viewType %>-<%= modelType %> <% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>"
+     id="<%= viewType %>-<%= modelType %>"
+     aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
+     aria-labelledby="<%= viewType %>-<%= modelType %>-title"
+     <% if (obj.message) { %>aria-describedby="<%= viewType %>-<%= modelType %>-description" <% } %>
+     <% if (obj.actions) { %>role="dialog"<% } %>
+  >
+  <div class="<%= modelType %> <%= viewType %> <% if(obj.actions) { %>has-actions <% } %>">
+    <% if (icon) { %>
+      <% var iconText = {"warning": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;"} %>
+      <i class="ss-icon ss-symbolicons-block icon icon-<%= modelType %>"><%= iconText[modelType] %></i>
+    <% } %>
 
     <div class="copy">
-      <h2 class="title title-3"><%= title %></h2>
-      <% if(obj.message) { %><p class="message"><%= message %></p><% } %>
+      <h2 class="title title-3" id="<%= viewType %>-<%= modelType %>-title"><%= title %></h2>
+      <% if(obj.message) { %><p class="message" id="<%= viewType %>-<%= modelType %>-description"><%= message %></p><% } %>
     </div>
 
     <% if(obj.actions) { %>
@@ -85,7 +93,7 @@
     <% } %>
 
     <% if(obj.close) { %>
-    <a href="#" rel="view" class="action action-alert-close">
+    <a href="#" rel="view" class="action action-close action-<%= viewType %>-close">
       <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
       <span class="label">close alert</span>
     </a>
@@ -101,8 +109,7 @@
     <div class="wrapper wrapper-view">
       <%include file="widgets/header.html" />
 
-      <%block name="view_alerts"></%block>
-      <%block name="view_banners"></%block>
+      <div id="page-alert"></div>
 
       <%block name="content"></%block>
 
@@ -113,10 +120,10 @@
       <%include file="widgets/footer.html" />
       <%include file="widgets/tender.html" />
 
-      <%block name="view_notifications"></%block>
+      <div id="page-notification"></div>
     </div>
 
-    <%block name="view_prompts"></%block>
+    <div id="page-prompt"></div>
     <%block name="jsextra"></%block>
   </body>
 

cms/templates/widgets/header.html

@@ -116,4 +116,3 @@
     </div>
   </header>
 </div>
-<div id="page-alert"></div>