Skip to content

E
edx-platform
Commit 9e864834 by David Baumgold
Options

Unify system feedback templates 

Also, a SystemFeedback model no longer has a `type`, it has an `intent`. This is
because SystemFeedback views have `type`, as well, and this prevents a naming
collision.
parent 1e7e3882
Showing with 44 additions and 143 deletions
cms/static/coffee/fixtures/alert.underscore deleted 120000 → 0
../../../templates/js/alert.underscore
\ No newline at end of file
cms/static/coffee/fixtures/notification.underscore deleted 120000 → 0
../../../templates/js/notification.underscore
\ No newline at end of file
cms/static/coffee/fixtures/prompt.underscore deleted 120000 → 0
../../../templates/js/prompt.underscore
\ No newline at end of file
cms/static/coffee/fixtures/system-feedback.underscore 0 → 120000
../../../templates/js/system-feedback.underscore
\ No newline at end of file
cms/static/coffee/spec/models/feedback_spec.coffee
......@@ -8,27 +8,27 @@ describe "CMS.Models.SystemFeedback", ->
it "should have an empty title by default", ->
expect(@model.get("title")).toEqual("")
it "should not have a type set by default", ->
expect(@model.get("type")).toBeNull()
it "should not have an intent set by default", ->
expect(@model.get("intent")).toBeNull()
describe "CMS.Models.WarningMessage", ->
beforeEach ->
@model = new CMS.Models.WarningMessage()
it "should have the correct type", ->
expect(@model.get("type")).toEqual("warning")
it "should have the correct intent", ->
expect(@model.get("intent")).toEqual("warning")
describe "CMS.Models.ErrorMessage", ->
beforeEach ->
@model = new CMS.Models.ErrorMessage()
it "should have the correct type", ->
expect(@model.get("type")).toEqual("error")
it "should have the correct intent", ->
expect(@model.get("intent")).toEqual("error")
describe "CMS.Models.ConfirmationMessage", ->
beforeEach ->
@model = new CMS.Models.ConfirmationMessage()
it "should have the correct type", ->
expect(@model.get("type")).toEqual("confirmation")
it "should have the correct intent", ->
expect(@model.get("intent")).toEqual("confirmation")
cms/static/coffee/spec/views/feedback_spec.coffee
tpl = readFixtures('system-feedback.underscore')
beforeEach ->
setFixtures(sandbox({id: "page-alert"}))
appendSetFixtures(sandbox({id: "page-notification"}))
appendSetFixtures(sandbox({id: "page-prompt"}))
appendSetFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(tpl))
@addMatchers
toBeShown: ->
@actual.hasClass("is-shown") and not @actual.hasClass("is-hiding")
......@@ -6,12 +12,7 @@ beforeEach ->
@actual.hasClass("is-hiding") and not @actual.hasClass("is-shown")
describe "CMS.Views.Alert as base class", ->
tpl = readFixtures('alert.underscore')
beforeEach ->
setFixtures(sandbox({id: "page-alert"}))
appendSetFixtures($("<script>", {id: "alert-tpl", type: "text/template"}).text(tpl))
@model = new CMS.Models.ConfirmationMessage({
title: "Portal"
message: "Welcome to the Aperture Science Computer-Aided Enrichment Center"
......@@ -40,12 +41,7 @@ describe "CMS.Views.Alert as base class", ->
expect(view.$('.wrapper')).toBeHiding()
describe "CMS.Views.Prompt", ->
tpl = readFixtures('prompt.underscore')
beforeEach ->
setFixtures(sandbox({id: "page-prompt"}))
appendSetFixtures($("<script>", {id: "prompt-tpl", type: "text/template"}).text(tpl))
@model = new CMS.Models.ConfirmationMessage({
title: "Portal"
message: "Welcome to the Aperture Science Computer-Aided Enrichment Center"
......@@ -62,8 +58,6 @@ describe "CMS.Views.Prompt", ->
# expect($("body")).not.toHaveClass("prompt-is-shown")
describe "CMS.Views.Alert click events", ->
tpl = readFixtures('alert.underscore')
beforeEach ->
@model = new CMS.Models.WarningMessage(
title: "Unsaved",
......@@ -81,8 +75,6 @@ describe "CMS.Views.Alert click events", ->
)
setFixtures(sandbox({id: "page-alert"}))
appendSetFixtures($("<script>", {id: "alert-tpl", type: "text/template"}).text(tpl))
@view = new CMS.Views.Alert({model: @model})
it "should trigger the primary event on a primary click", ->
......@@ -100,14 +92,9 @@ describe "CMS.Views.Alert click events", ->
expect(@view.$(".action-secondary")).toHaveClass("cancel-button")
describe "CMS.Views.Notification minShown and maxShown", ->
tpl = readFixtures('notification.underscore')
beforeEach ->
setFixtures(sandbox({id: "page-notification"}))
appendSetFixtures($("<script>", {id: "notification-tpl", type: "text/template"}).text(tpl))
@model = new CMS.Models.SystemFeedback(
type: "saving"
intent: "saving"
title: "Saving"
)
spyOn(CMS.Views.Notification.prototype, 'show').andCallThrough()
......
cms/static/js/models/feedback.js
CMS.Models.SystemFeedback = Backbone.Model.extend({
defaults: {
"type": null, // "warning", "confirmation", "error", "announcement", "step-required", etc
"intent": null, // "warning", "confirmation", "error", "announcement", "step-required", etc
"title": "",
"message": ""
/* could also have an "actions" hash: here is an example demonstrating
......@@ -32,18 +32,18 @@ CMS.Models.SystemFeedback = Backbone.Model.extend({
CMS.Models.WarningMessage = CMS.Models.SystemFeedback.extend({
defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
"type": "warning"
"intent": "warning"
})
});
CMS.Models.ErrorMessage = CMS.Models.SystemFeedback.extend({
defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
"type": "error"
"intent": "error"
})
});
CMS.Models.ConfirmationMessage = CMS.Models.SystemFeedback.extend({
defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
"type": "confirmation"
"intent": "confirmation"
})
});
cms/static/js/models/section.js
......@@ -23,7 +23,7 @@ CMS.Models.Section = Backbone.Model.extend({
showNotification: function() {
if(!this.msg) {
this.msg = new CMS.Models.SystemFeedback({
type: "saving",
intent: "saving",
title: gettext("Saving&hellip;")
});
}
......
cms/static/js/views/feedback.js
......@@ -2,14 +2,15 @@ CMS.Views.Alert = Backbone.View.extend({
options: {
type: "alert",
shown: true, // is this view currently being shown?
icon: true, // should we render an icon related to the message intent?
closeIcon: true, // should we render a close button in the top right corner?
minShown: 0, // length of time after this view has been shown before it can be hidden (milliseconds)
maxShown: Infinity // length of time after this view has been shown before it will be automatically hidden (milliseconds)
},
initialize: function() {
var tpl = $("#"+this.options.type+"-tpl").text();
var tpl = $("#system-feedback-tpl").text();
if(!tpl) {
console.error("Couldn't load template from ID "+this.options.type+"-tpl");
console.error("Couldn't load system-feedback template");
}
this.template = _.template(tpl);
this.setElement($("#page-"+this.options.type));
......@@ -86,7 +87,8 @@ CMS.Views.Notification = CMS.Views.Alert.extend({
CMS.Views.Prompt = CMS.Views.Alert.extend({
options: $.extend({}, CMS.Views.Alert.prototype.options, {
type: "prompt",
closeIcon: false
closeIcon: false,
icon: false
}),
render: function() {
if(!window.$body) { window.$body = $(document.body); }
......
cms/templates/base.html
......@@ -32,14 +32,8 @@
<%include file="courseware_vendor_js.html"/>
## js templates
<script id="alert-tpl" type="text/template">
<%static:include path="js/alert.underscore" />
</script>
<script id="notification-tpl" type="text/template">
<%static:include path="js/notification.underscore" />
</script>
<script id="prompt-tpl" type="text/template">
<%static:include path="js/prompt.underscore" />
<script id="system-feedback-tpl" type="text/template">
<%static:include path="js/system-feedback.underscore" />
</script>
## javascript
......
cms/templates/js/notification.underscore deleted 100644 → 0
<div class="wrapper wrapper-notification wrapper-notification-<%= type %>
<% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
<% if(_.contains(['help', 'saving'], type)) { %>wrapper-notification-status<% } %>"
id="notification-<%= type %>"
aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
aria-labelledby="notification-<%= type %>-title"
<% if (obj.message) { %>aria-describedby="notification-<%= type %>-description" <% } %>
<% if (obj.actions) { %>role="dialog"<% } %>
>
<div class="notification <%= type %> <% if(obj.actions) { %>has-actions<% } %>">
<% var iconText = {"warning": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;", "saving": "&#x2699;"} %>
<i class="ss-icon ss-symbolicons-block icon icon-<%= type %>"><%= iconText[type] %></i>
<div class="copy">
<h2 class="title title-3" id="notification-<%= type %>-title"><%= title %></h2>
<% if(obj.message) { %><p class="message" id="notification-<%= type %>-description"><%= message %></p><% } %>
</div>
<% if(obj.actions) { %>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<% if(actions.primary) { %>
<li class="nav-item">
<a href="#" class="button action-primary <%= actions.primary.class %>"><%= actions.primary.text %></a>
</li>
<% } %>
<% if(actions.secondary) {
_.each(actions.secondary, function(secondary) { %>
<li class="nav-item">
<a href="#" class="button action-secondary <%= secondary.class %>"><%= secondary.text %></a>
</li>
<% });
} %>
</ul>
</nav>
<% } %>
<% if(obj.closeIcon) { %>
<a href="#" rel="view" class="action action-close action-notification-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close notification</span>
</a>
<% } %>
</div>
</div>
cms/templates/js/prompt.underscore deleted 100644 → 0
<div class="wrapper wrapper-prompt wrapper-prompt-<%= type %>
<% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
id="prompt-<%= type %>"
aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
aria-labelledby="prompt-<%= type %>-title"
<% if (obj.message) { %>aria-describedby="prompt-<%= type %>-description" <% } %>
<% if (obj.actions) { %>role="dialog"<% } %>
>
<div class="prompt <%= type %> <% if(obj.actions) { %>has-actions<% } %>">
<div class="copy">
<h2 class="title title-3" id="prompt-<%= type %>-title"><%= title %></h2>
<% if(obj.message) { %><p class="message" id="prompt-<%= type %>-description"><%= message %></p><% } %>
</div>
<% if(obj.actions) { %>
<nav class="nav-actions">
<h3 class="sr">Prompt Actions</h3>
<ul>
<% if(actions.primary) { %>
<li class="nav-item">
<a href="#" class="button action-primary <%= actions.primary.class %>"><%= actions.primary.text %></a>
</li>
<% } %>
<% if(actions.secondary) {
_.each(actions.secondary, function(secondary) { %>
<li class="nav-item">
<a href="#" class="button action-secondary <%= secondary.class %>"><%= secondary.text %></a>
</li>
<% });
} %>
</ul>
</nav>
<% } %>
</div>
</div>
cms/templates/js/alert.underscore → cms/templates/js/system-feedback.underscore
<div class="wrapper wrapper-alert wrapper-alert-<%= type %>
<div class="wrapper wrapper-<%= type %> wrapper-<%= type %>-<%= intent %>
<% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
id="alert-<%= type %>"
<% if(_.contains(['help', 'saving'], intent)) { %>wrapper-<%= type %>-status<% } %>"
id="<%= type %>-<%= intent %>"
aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
aria-labelledby="alert-<%= type %>-title"
<% if (obj.message) { %>aria-describedby="alert-<%= type %>-description" <% } %>
aria-labelledby="<%= type %>-<%= intent %>-title"
<% if (obj.message) { %>aria-describedby="<%= type %>-<%= intent %>-description" <% } %>
<% if (obj.actions) { %>role="dialog"<% } %>
>
<div class="alert <%= type %> <% if(obj.actions) { %>has-actions<% } %>">
<% var iconText = {"warning": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;", "saving": "&#x2699;"} %>
<i class="ss-icon ss-symbolicons-block icon icon-<%= type %>"><%= iconText[type] %></i>
<div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
<% if(obj.icon) { %>
<% var iconText = {"warning": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;", "saving": "&#x2699;"} %>
<i class="ss-icon ss-symbolicons-block icon icon-<%= intent %>"><%= iconText[intent] %></i>
<% } %>
<div class="copy">
<h2 class="title title-3" id="alert-<%= type %>-title"><%= title %></h2>
<% if(obj.message) { %><p class="message" id="alert-<%= type %>-description"><%= message %></p><% } %>
<h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%= title %></h2>
<% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%= message %></p><% } %>
</div>
<% if(obj.actions) { %>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<h3 class="sr"><%= type %> Actions</h3>
<ul>
<% if(actions.primary) { %>
<li class="nav-item">
......@@ -36,9 +39,9 @@
<% } %>
<% if(obj.closeIcon) { %>
<a href="#" rel="view" class="action action-close action-alert-close">
<a href="#" rel="view" class="action action-close action-<%= type %>-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close alert</span>
<span class="label">close <%= type %></span>
</a>
<% } %>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment