Skip to content

E
edx-platform
Commit 0c368011 by David Baumgold
Options

Move underscore templates into separate files, included in Mako templates

parent 5275e41e
Showing with 202 additions and 199 deletions
cms/static/js/models/section.js 0 → 100644
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/static/js/views/section.js 0 → 100644
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});
}
});
cms/templates/base.html
...@@ -30,6 +30,13 @@ ...@@ -30,6 +30,13 @@
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="courseware_vendor_js.html"/> <%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="/jsi18n/"></script>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></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> <script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
...@@ -51,62 +58,6 @@ ...@@ -51,62 +58,6 @@
<script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
<script type="text/javascript" src="//www.youtube.com/player_api"></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": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;", "saving": "&#x2699;"} %>
<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">&#x2421;</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/models/feedback.js')}"></script>
<script src="${static.url('js/views/feedback.js')}"></script> <script src="${static.url('js/views/feedback.js')}"></script>
<script type="text/javascript"> <script type="text/javascript">
......
cms/templates/js/section-name-edit.underscore 0 → 100644
<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>
cms/templates/js/system-feedback.underscore 0 → 100644
<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": "&#x26A0;", "confirmation": "&#x2713;", "error": "&#x26A0;", "announcement": "&#x1F4E2;", "step-required": "&#xE0D1", "help": "&#x2753;", "saving": "&#x2699;"} %>
<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">&#x2421;</i>
<span class="label">close <%= viewType %></span>
</a>
<% } %>
</div>
</div>
cms/templates/overview.html
...@@ -20,6 +20,12 @@ ...@@ -20,6 +20,12 @@
<script type="text/javascript" src="${static.url('js/views/overview.js')}"></script> <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/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"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
// TODO figure out whether these should be in window or someplace else or whether they're only needed as local vars // 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 @@ ...@@ -37,6 +43,14 @@
graders : window.graderTypes 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> </script>
...@@ -128,149 +142,6 @@ ...@@ -128,149 +142,6 @@
</header> </header>
</div> </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&hellip;",
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="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<article class="courseware-overview" data-course-id="${context_course.location.url()}"> <article class="courseware-overview" data-course-id="${context_course.location.url()}">
......
common/djangoapps/pipeline_mako/templates/static_content.html
...@@ -28,3 +28,8 @@ except: ...@@ -28,3 +28,8 @@ except:
% endfor % endfor
%endif %endif
</%def> </%def>
<%def name="include(path)"><%
from django.template.loaders.filesystem import _loader
source, template_path = _loader.load_template_source(path)
%>${source}</%def>
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