Skip to content

E
edx-platform
Commit ee1158f8 by David Baumgold
Options

Set up PDF textbooks list view in Backbone

parent 574c8ad4
Showing with 153 additions and 54 deletions
cms/templates/js/chapter.underscore
<li class="chapter chapter<%= order %> field-group">
<div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
<label for="chapter<%= order %>-name"><%= gettext("Chapter Name") %></label>
<input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
<span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
</div>
<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
<label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
<input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
<span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>
<button class="action action-upload"><%= gettext("Upload Asset") %></button>
</div>
<a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
</li>
<div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
<label for="chapter<%= order %>-name"><%= gettext("Chapter Name") %></label>
<input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="chapter-name short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
<span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
</div>
<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
<label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
<input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
<span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>
<button class="action action-upload"><%= gettext("Upload Asset") %></button>
</div>
<a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
cms/templates/js/no-textbooks.underscore 0 → 100644
<div class="no-textbook-content">
<p>You haven't added any textbooks to this course yet.</p>
<p><a href="#" class="button upload-button new-button">Add your first textbook</a></p>
</div>
cms/templates/js/textbook.underscore → cms/templates/js/textbook-edit.underscore
<form id="edit_textbook_form" class="edit-textbook">
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div>
<% if (errors) { %>
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error">
<%= errors %>
</div>
<% } %>
<ol class="list-input">
<li class="add-textbook-name field text required">
<fieldset class="textbook">
<fieldset class="textbook add-textbook-name field text required">
<legend class="sr"><%= gettext("Textbook information") %></legend>
<div class="input-wrap">
<label for="textbook-name-input"><%= gettext("Textbook Name") %>:</label>
<input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
<span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
</div>
</fieldset>
</li>
<li>
<fieldset class="chapters">
<div class="input-wrap">
<label for="textbook-name-input"><%= gettext("Textbook Name") %>:</label>
<input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
<span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
</div>
</fieldset>
<fieldset class="chapters">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<ol class="chapters list-input enum"></ol>
</fieldset>
<ol class="chapters list-input enum"></ol>
</fieldset>
</li>
</ol>
<div class="actions">
<button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button>
<button class="action action-primary" type="submit"><%= gettext("Save") %></button>
<button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
</div>
</form>
<div class="actions">
<button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button>
<button class="action action-primary" type="submit"><%= gettext("Save") %></button>
<button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
</div>
cms/templates/js/textbook-show.underscore 0 → 100644
<li class="textbook">
<span class="name"><%= name %></span>
<% if(chapters.length > 1) {%>
<%= chapters.length %> PDF Chapters
<% } else if(chapters.length === 1) { %>
<%= chapters.at(0).asset_path %>
<% } %>
<a href="#" class="view"><%= gettext("view in course") %></a>
<button class="edit"><%= gettext("Edit") %></button>
<button class="delete"><%= gettext("Delete") %></button>
</li>
cms/templates/textbooks.html
......@@ -6,11 +6,17 @@
<%block name="header_extras">
<script type="text/template" id="new-textbook-tpl">
<%static:include path="js/textbook.underscore" />
<%static:include path="js/textbook-edit.underscore" />
</script>
<script type="text/template" id="show-textbook-tpl">
<%static:include path="js/textbook-show.underscore" />
</script>
<script type="text/template" id="new-chapter-tpl">
<%static:include path="js/chapter.underscore" />
</script>
<script type="text/template" id="no-textbooks-tpl">
<%static:include path="js/no-textbooks.underscore" />
</script>
<script type="text/template" id="upload-dialog-tpl">
<%static:include path="js/upload-dialog.underscore" />
</script>
......@@ -22,13 +28,77 @@ window.UPLOAD_ASSET_CALLBACK_URL = "${upload_asset_callback_url}"
CMS.Models.Textbook = Backbone.Model.extend({
defaults: {
name: ""
name: "",
},
initialize: function() {
this.chapters = new CMS.Collections.ChapterSet;
this.chapters.add([{}]);
}
})
CMS.Views.TextbookShow = Backbone.View.extend({
initialize: function() {
this.template = _.template($("#show-textbook-tpl").text());
this.listenTo(this.model, "change", this.render);
},
events: {
"click .edit": "editTextbook",
},
render: function() {
var attrs = $.extend({}, this.model.attributes);
attrs.chapters = this.model.chapters;
this.$el.html(this.template(attrs));
return this;
},
editTextbook: function(e) {
if(e && e.preventDefault) { e.preventDefault(); }
this.model.collection.trigger("editOne", this.model);
}
})
CMS.Collections.TextbookSet = Backbone.Collection.extend({
model: CMS.Models.Textbook,
initialize: function() {
this.listenTo(this, "editOne", this.editOne);
},
editOne: function(textbook) {
// the old TextbookEdit view is listening for the editOne event, and
// will remove itself when the event is fired, so this method doesnt
// need to worry about it.
$(".inner-wrapper").append(
new CMS.Views.TextbookEdit({model: textbook}).render().el
);
}
})
CMS.Views.ListTextbooks = Backbone.View.extend({
initialize: function() {
this.emptyTemplate = _.template($("#no-textbooks-tpl").text());
this.listenTo(this.collection, 'all', this.render);
},
tagName: "ul",
className: "textbooks",
render: function() {
if(this.collection.length === 0) {
this.$el.html(this.emptyTemplate());
} else {
var $el = this.$el;
$el.empty();
this.collection.each(function(textbook) {
$el.append(
new CMS.Views.TextbookShow({model: textbook}).render().el
);
})
}
return this;
},
events: {
"click .new-button": "addOne"
},
addOne: function(e) {
if(e && e.preventDefault) { e.preventDefault(); }
var m = new this.collection.model;
this.collection.add(m);
this.collection.trigger("editOne", m);
}
})
CMS.Models.Chapter = Backbone.Model.extend({
defaults: function() {
return {
......@@ -52,17 +122,22 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
this.listenTo(this.model.chapters, "add", this.addOne);
this.listenTo(this.model.chapters, "reset", this.addAll);
this.listenTo(this.model.chapters, "all", this.render);
this.listenTo(this.model.collection, "editOne", this.remove);
},
tagName: "form",
className: "edit-textbook",
id: "edit_textbook_form",
render: function() {
this.$el.html(this.template({
name: this.model.escape('name'),
errors: null
}));
this.addAll();
return this;
},
events: {
"submit": "save",
"click .action-cancel": "remove",
"click .action-cancel": "cancel",
"click .action-add-chapter": "createChapter"
},
addOne: function(chapter) {
......@@ -79,14 +154,34 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
},
save: function(e) {
if(e && e.preventDefault) { e.preventDefault(); }
alert("save is currently unimplemented")
var name = this.$("#textbook-name-input").val();
var textbook = this.model;
textbook.set("name", name);
_.each(this.$("li"), function(li, i) {
var chapter = textbook.chapters.at(i);
chapter.set({
"name": $(".chapter-name", li).val(),
"asset_path": $(".chapter-asset-path", li).val()
})
});
this.remove();
return this;
},
cancel: function(e) {
if(e && e.preventDefault) { e.preventDefault(); }
this.remove();
return this;
}
})
CMS.Views.ChapterEdit = Backbone.View.extend({
initialize: function() {
this.template = _.template($("#new-chapter-tpl").text());
this.listenTo(this.model, "change", this.render)
this.listenTo(this.model, "change", this.render);
},
tagName: "li",
className: function() {
return "field-group chapter chapter" + this.model.get('order');
},
render: function() {
this.$el.html(this.template({
......@@ -228,11 +323,13 @@ var section = new CMS.Models.Section({
id: "${course.id}",
name: "${course.display_name_with_default | h}"
});
var textbooks = new CMS.Collections.TextbookSet();
var tbView = new CMS.Views.ListTextbooks({collection: textbooks});
$(function() {
$(".new-button").click(function() {
var textbook = new CMS.Models.Textbook();
var view = new CMS.Views.TextbookEdit({model: textbook})
$(".inner-wrapper").append(view.render().el);
$(".inner-wrapper").append(tbView.render().el);
$(".nav-actions .new-button").click(function(e) {
tbView.addOne(e);
})
})
</script>
......@@ -275,11 +372,6 @@ $(function() {
</nav>
</div>
<div class="no-textbook-content">
<p>You haven't added any textbooks to this course yet.</p>
<p><a href="#" class="button upload-button new-button">Add your first textbook</a></p>
</div>
</div>
</section>
</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