Move underscore templates into separate files, included in Mako templates
This commit is contained in:
David Baumgold
42
cms/static/js/models/section.js
Normal file
42
cms/static/js/models/section.js
Normal file
@@ -0,0 +1,42 @@
|
||||
CMS.Models.Section = Backbone.Model.extend({
|
||||
defaults: {
|
||||
"name": ""
|
||||
},
|
||||
validate: function(attrs, options) {
|
||||
if (!attrs.name) {
|
||||
return "You must specify a name";
|
||||
}
|
||||
},
|
||||
url: "/save_item",
|
||||
toJSON: function() {
|
||||
return {
|
||||
id: this.get("id"),
|
||||
metadata: {
|
||||
display_name: this.get("name")
|
||||
}
|
||||
};
|
||||
},
|
||||
initialize: function() {
|
||||
this.listenTo(this, "request", this.showNotification);
|
||||
this.listenTo(this, "sync", this.hideNotification);
|
||||
this.listenTo(this, "error", this.hideNotification);
|
||||
},
|
||||
showNotification: function() {
|
||||
if(!this.msg) {
|
||||
this.msg = new CMS.Models.SystemFeedback({
|
||||
type: "saving",
|
||||
title: "Saving…",
|
||||
icon: true,
|
||||
status: true
|
||||
});
|
||||
}
|
||||
if(!this.msgView) {
|
||||
this.msgView = new CMS.Views.Notification({model: this.msg});
|
||||
}
|
||||
this.msg.show();
|
||||
},
|
||||
hideNotification: function() {
|
||||
if(!this.msg) { return; }
|
||||
this.msg.hide();
|
||||
}
|
||||
});
|
||||
78
cms/static/js/views/section.js
Normal file
78
cms/static/js/views/section.js
Normal file
@@ -0,0 +1,78 @@
|
||||
CMS.Views.SectionShow = Backbone.View.extend({
|
||||
template: _.template('<span data-tooltip="Edit this section\'s name" class="section-name-span"><%= name %></span>'),
|
||||
render: function() {
|
||||
this.$el.html(this.template(this.model.attributes));
|
||||
this.delegateEvents();
|
||||
return this;
|
||||
},
|
||||
events: {
|
||||
"click": "switchToEditView"
|
||||
},
|
||||
switchToEditView: function() {
|
||||
if(!this.editView) {
|
||||
this.editView = new CMS.Views.SectionEdit({
|
||||
model: this.model, el: this.el, showView: this});
|
||||
}
|
||||
this.undelegateEvents();
|
||||
this.editView.render();
|
||||
}
|
||||
});
|
||||
|
||||
CMS.Views.SectionEdit = Backbone.View.extend({
|
||||
template: _.template($("#section-name-edit-tpl").text()),
|
||||
render: function() {
|
||||
this.$el.html(this.template(this.model.attributes));
|
||||
this.delegateEvents();
|
||||
return this;
|
||||
},
|
||||
initialize: function() {
|
||||
this.listenTo(this.model, "invalid", this.showErrorMessage);
|
||||
this.render();
|
||||
},
|
||||
events: {
|
||||
"click .save-button": "saveName",
|
||||
"submit": "saveName",
|
||||
"click .cancel-button": "switchToShowView"
|
||||
},
|
||||
saveName: function(e) {
|
||||
if (e) { e.preventDefault(); }
|
||||
var name = this.$("input[type=text]").val();
|
||||
var that = this;
|
||||
this.model.save("name", name, {
|
||||
success: function() {
|
||||
analytics.track('Edited Section Name', {
|
||||
'course': course_location_analytics,
|
||||
'display_name': that.model.get('name'),
|
||||
'id': that.model.get('id')
|
||||
});
|
||||
that.switchToShowView();
|
||||
}
|
||||
});
|
||||
},
|
||||
switchToShowView: function() {
|
||||
if(!this.showView) {
|
||||
this.showView = new CMS.Views.SectionShow({
|
||||
model: this.model, el: this.el, editView: this});
|
||||
}
|
||||
this.undelegateEvents();
|
||||
this.stopListening();
|
||||
this.showView.render();
|
||||
},
|
||||
showErrorMessage: function(model, error, options) {
|
||||
var msg = new CMS.Models.ErrorMessage({
|
||||
title: "Validation Error",
|
||||
message: error,
|
||||
close: false,
|
||||
icon: false,
|
||||
actions: {
|
||||
primary: {
|
||||
text: "Dismiss",
|
||||
click: function() {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
new CMS.Views.Prompt({model: msg});
|
||||
}
|
||||
});
|
||||
@@ -30,6 +30,13 @@
|
||||
|
||||
<body class="<%block name='bodyclass'></%block> hide-wip">
|
||||
<%include file="courseware_vendor_js.html"/>
|
||||
|
||||
## js templates
|
||||
<script id="system-feedback-tpl" type="text/template">
|
||||
<%static:include path="js/system-feedback.underscore" />
|
||||
</script>
|
||||
|
||||
## javascript
|
||||
<script type="text/javascript" src="/jsi18n/"></script>
|
||||
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
|
||||
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
|
||||
@@ -51,62 +58,6 @@
|
||||
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
|
||||
<script type="text/javascript" src="//www.youtube.com/player_api"></script>
|
||||
|
||||
<!-- templates -->
|
||||
<%text>
|
||||
<script id="system-feedback-tpl" type="text/template">
|
||||
<div class="wrapper
|
||||
wrapper-<%= viewType %>
|
||||
wrapper-<%= viewType %>-<%= modelType %>
|
||||
<% if(obj.status) { %>wrapper-<%= viewType %>-status <% } %>
|
||||
<% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
|
||||
<% if(obj.fleeting) { %>is-fleeting<% } %>"
|
||||
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": "⚠", "confirmation": "✓", "error": "⚠", "announcement": "📢", "step-required": "", "help": "❓", "saving": "⚙"} %>
|
||||
<i class="ss-icon ss-symbolicons-block icon icon-<%= modelType %>"><%= iconText[modelType] %></i>
|
||||
<% } %>
|
||||
|
||||
<div class="copy">
|
||||
<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) { %>
|
||||
<nav class="nav-actions">
|
||||
<h3 class="sr"><%= viewType %> 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.close) { %>
|
||||
<a href="#" rel="view" class="action action-close action-<%= viewType %>-close">
|
||||
<i class="ss-icon ss-symbolicons-block icon icon-close">␡</i>
|
||||
<span class="label">close <%= viewType %></span>
|
||||
</a>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</%text>
|
||||
<script src="${static.url('js/models/feedback.js')}"></script>
|
||||
<script src="${static.url('js/views/feedback.js')}"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
5
cms/templates/js/section-name-edit.underscore
Normal file
5
cms/templates/js/section-name-edit.underscore
Normal file
@@ -0,0 +1,5 @@
|
||||
<form class="section-name-edit">
|
||||
<input type="text" value="<%= name %>" autocomplete="off"/>
|
||||
<input type="submit" class="save-button" value="Save" />
|
||||
<input type="button" class="cancel-button" value="Cancel" />
|
||||
</form>
|
||||
51
cms/templates/js/system-feedback.underscore
Normal file
51
cms/templates/js/system-feedback.underscore
Normal file
@@ -0,0 +1,51 @@
|
||||
<div class="wrapper
|
||||
wrapper-<%= viewType %>
|
||||
wrapper-<%= viewType %>-<%= modelType %>
|
||||
<% if(obj.status) { %>wrapper-<%= viewType %>-status <% } %>
|
||||
<% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
|
||||
<% if(obj.fleeting) { %>is-fleeting<% } %>"
|
||||
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": "⚠", "confirmation": "✓", "error": "⚠", "announcement": "📢", "step-required": "", "help": "❓", "saving": "⚙"} %>
|
||||
<i class="ss-icon ss-symbolicons-block icon icon-<%= modelType %>"><%= iconText[modelType] %></i>
|
||||
<% } %>
|
||||
|
||||
<div class="copy">
|
||||
<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) { %>
|
||||
<nav class="nav-actions">
|
||||
<h3 class="sr"><%= viewType %> 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.close) { %>
|
||||
<a href="#" rel="view" class="action action-close action-<%= viewType %>-close">
|
||||
<i class="ss-icon ss-symbolicons-block icon icon-close">␡</i>
|
||||
<span class="label">close <%= viewType %></span>
|
||||
</a>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,6 +20,12 @@
|
||||
<script type="text/javascript" src="${static.url('js/views/overview.js')}"></script>
|
||||
<script type="text/javascript" src="${static.url('js/models/settings/course_grading_policy.js')}"></script>
|
||||
|
||||
<script type="text/template" id="section-name-edit-tpl">
|
||||
<%static:include path="js/section-name-edit.underscore" />
|
||||
</script>
|
||||
<script type="text/javascript" src="${static.url('js/models/section.js')}"></script>
|
||||
<script type="text/javascript" src="${static.url('js/views/section.js')}"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
// TODO figure out whether these should be in window or someplace else or whether they're only needed as local vars
|
||||
@@ -37,6 +43,14 @@
|
||||
graders : window.graderTypes
|
||||
});
|
||||
});
|
||||
|
||||
$(".section-name").each(function() {
|
||||
var model = new CMS.Models.Section({
|
||||
id: $(this).parent(".item-details").data("id"),
|
||||
name: $(this).data("name")
|
||||
});
|
||||
new CMS.Views.SectionShow({model: model, el: this}).render();
|
||||
})
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -128,149 +142,6 @@
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<%text>
|
||||
<script type="text/template" id="section-name-edit-tpl">
|
||||
<form class="section-name-edit">
|
||||
<input type="text" value="<%= name %>" autocomplete="off"/>
|
||||
<input type="submit" class="save-button" value="Save" />
|
||||
<input type="button" class="cancel-button" value="Cancel" />
|
||||
</form>
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
CMS.Models.Section = Backbone.Model.extend({
|
||||
defaults: {
|
||||
"name": ""
|
||||
},
|
||||
validate: function(attrs, options) {
|
||||
if (!attrs.name) {
|
||||
return "You must specify a name"
|
||||
}
|
||||
},
|
||||
url: "/save_item",
|
||||
toJSON: function() {
|
||||
return {
|
||||
id: this.get("id"),
|
||||
metadata: {
|
||||
display_name: this.get("name")
|
||||
}
|
||||
}
|
||||
},
|
||||
initialize: function() {
|
||||
this.listenTo(this, "request", this.showNotification);
|
||||
this.listenTo(this, "sync", this.hideNotification);
|
||||
this.listenTo(this, "error", this.hideNotification);
|
||||
},
|
||||
showNotification: function() {
|
||||
if(!this.msg) {
|
||||
this.msg = new CMS.Models.SystemFeedback({
|
||||
type: "saving",
|
||||
title: "Saving…",
|
||||
icon: true,
|
||||
status: true
|
||||
})
|
||||
}
|
||||
if(!this.msgView) {
|
||||
this.msgView = new CMS.Views.Notification({model: this.msg});
|
||||
}
|
||||
this.msg.show();
|
||||
},
|
||||
hideNotification: function() {
|
||||
if(!this.msg) { return }
|
||||
this.msg.hide();
|
||||
}
|
||||
});
|
||||
|
||||
CMS.Views.SectionShow = Backbone.View.extend({
|
||||
template: _.template('<span data-tooltip="Edit this section\'s name" class="section-name-span"><%= name %></span>'),
|
||||
render: function() {
|
||||
this.$el.html(this.template(this.model.attributes));
|
||||
this.delegateEvents();
|
||||
return this;
|
||||
},
|
||||
events: {
|
||||
"click": "switchToEditView"
|
||||
},
|
||||
switchToEditView: function() {
|
||||
if(!this.editView) {
|
||||
this.editView = new CMS.Views.SectionEdit({
|
||||
model: this.model, el: this.el, showView: this});
|
||||
}
|
||||
this.undelegateEvents();
|
||||
this.editView.render();
|
||||
}
|
||||
})
|
||||
CMS.Views.SectionEdit = Backbone.View.extend({
|
||||
template: _.template($("#section-name-edit-tpl").text()),
|
||||
render: function() {
|
||||
this.$el.html(this.template(this.model.attributes));
|
||||
this.delegateEvents();
|
||||
return this;
|
||||
},
|
||||
initialize: function() {
|
||||
this.listenTo(this.model, "invalid", this.showErrorMessage);
|
||||
this.render();
|
||||
},
|
||||
events: {
|
||||
"click .save-button": "saveName",
|
||||
"submit": "saveName",
|
||||
"click .cancel-button": "switchToShowView"
|
||||
},
|
||||
saveName: function(e) {
|
||||
if (e) { e.preventDefault() }
|
||||
var name = this.$("input[type=text]").val();
|
||||
var that = this;
|
||||
this.model.save("name", name, {
|
||||
success: function() {
|
||||
analytics.track('Edited Section Name', {
|
||||
'course': course_location_analytics,
|
||||
'display_name': that.model.get('name'),
|
||||
'id': that.model.get('id')
|
||||
});
|
||||
that.switchToShowView();
|
||||
}
|
||||
})
|
||||
},
|
||||
switchToShowView: function() {
|
||||
if(!this.showView) {
|
||||
this.showView = new CMS.Views.SectionShow({
|
||||
model: this.model, el: this.el, editView: this});
|
||||
}
|
||||
this.undelegateEvents();
|
||||
this.stopListening();
|
||||
this.showView.render();
|
||||
},
|
||||
showErrorMessage: function(model, error, options) {
|
||||
var msg = new CMS.Models.ErrorMessage({
|
||||
title: "Validation Error",
|
||||
message: error,
|
||||
close: false,
|
||||
icon: false,
|
||||
actions: {
|
||||
primary: {
|
||||
text: "Dismiss",
|
||||
click: function() {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
new CMS.Views.Prompt({model: msg})
|
||||
}
|
||||
})
|
||||
|
||||
$(function() {
|
||||
$(".section-name").each(function() {
|
||||
var model = new CMS.Models.Section({
|
||||
id: $(this).parent(".item-details").data("id"),
|
||||
name: $(this).data("name")
|
||||
});
|
||||
new CMS.Views.SectionShow({model: model, el: this}).render();
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
</%text>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
|
||||
|
||||
@@ -28,3 +28,8 @@ except:
|
||||
% endfor
|
||||
%endif
|
||||
</%def>
|
||||
|
||||
<%def name="include(path)"><%
|
||||
from django.template.loaders.filesystem import _loader
|
||||
source, template_path = _loader.load_template_source(path)
|
||||
%>${source}</%def>
|
||||
|
||||
Reference in New Issue
Block a user