Skip to content
Snippets Groups Projects
Commit ee1158f8 authored by David Baumgold's avatar David Baumgold
Browse files

Set up PDF textbooks list view in Backbone

parent 574c8ad4
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cms/templates/js/chapter.underscore
+ 12
− 14
View file @ ee1158f8
<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
+ 4
− 0
View file @ ee1158f8
<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-edit.underscore 0 → 100644
+ 24
− 0
View file @ ee1158f8
<% if (errors) { %>
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error">
<%= errors %>
</div>
<% } %>
<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>
<fieldset class="chapters">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<ol class="chapters list-input enum"></ol>
</fieldset>
<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
+ 11
− 0
View file @ ee1158f8
<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/js/textbook.underscore deleted 100644 → 0
+ 0
− 30
View file @ 574c8ad4
<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>
<ol class="list-input">
<li class="add-textbook-name field text required">
<fieldset class="textbook">
<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">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<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>
cms/templates/textbooks.html
+ 106
− 14
View file @ ee1158f8
......@@ -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>
......
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