From 5746121f5c984424dbabcb4dbc597305cce0fc42 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Thu, 9 May 2013 12:30:11 -0400
Subject: [PATCH] Set up Notification and Prompt

---
 cms/static/js/models/feedback.js    |  9 +++++++-
 cms/static/js/views/feedback.js     | 33 +++++++++++++++++++++++------
 cms/static/js/views/server_error.js | 11 ++++++++--
 cms/templates/base.html             | 31 ++++++++++++++++-----------
 cms/templates/widgets/header.html   |  1 -
 5 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/cms/static/js/models/feedback.js b/cms/static/js/models/feedback.js
index 34eaec0d69..54873f4147 100644
--- a/cms/static/js/models/feedback.js
+++ b/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);
     }
 });
diff --git a/cms/static/js/views/feedback.js b/cms/static/js/views/feedback.js
index 36b4e1d7cb..e1c1344f6b 100644
--- a/cms/static/js/views/feedback.js
+++ b/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);
+    }
 });
diff --git a/cms/static/js/views/server_error.js b/cms/static/js/views/server_error.js
index 4b95bf176f..71b2a2ca6f 100644
--- a/cms/static/js/views/server_error.js
+++ b/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;
 };
diff --git a/cms/templates/base.html b/cms/templates/base.html
index f14e2fa447..34637b03c2 100644
--- a/cms/templates/base.html
+++ b/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>
 
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html
index c2d9a4f93a..3c8a598b5e 100644
--- a/cms/templates/widgets/header.html
+++ b/cms/templates/widgets/header.html
@@ -116,4 +116,3 @@
     </div>
   </header>
 </div>
-<div id="page-alert"></div>