260 lines
8.8 KiB
HTML
260 lines
8.8 KiB
HTML
<%inherit file="base.html" />
|
|
<%namespace name='static' file='static_content.html'/>
|
|
|
|
<%block name="title">Textbooks</%block>
|
|
<%block name="bodyclass">is-signedin course textbooks</%block>
|
|
|
|
<%block name="header_extras">
|
|
<script type="text/template" id="new-textbook-tpl">
|
|
<%static:include path="js/textbook.underscore" />
|
|
</script>
|
|
<script type="text/template" id="new-chapter-tpl">
|
|
<%static:include path="js/chapter.underscore" />
|
|
</script>
|
|
<script type="text/template" id="upload-dialog-tpl">
|
|
<%static:include path="js/upload-dialog.underscore" />
|
|
</script>
|
|
</%block>
|
|
|
|
<%block name="jsextra">
|
|
<script type="text/javascript">
|
|
window.UPLOAD_ASSET_CALLBACK_URL = "${upload_asset_callback_url}"
|
|
|
|
CMS.Models.Textbook = Backbone.Model.extend({
|
|
defaults: {
|
|
name: ""
|
|
},
|
|
initialize: function() {
|
|
this.chapters = new CMS.Collections.ChapterSet;
|
|
this.chapters.add([{}]);
|
|
}
|
|
})
|
|
CMS.Models.Chapter = Backbone.Model.extend({
|
|
defaults: function() {
|
|
return {
|
|
name: "",
|
|
asset_path: "",
|
|
order: this.collection ? this.collection.nextOrder() : 1
|
|
}
|
|
}
|
|
})
|
|
CMS.Collections.ChapterSet = Backbone.Collection.extend({
|
|
model: CMS.Models.Chapter,
|
|
comparator: "order",
|
|
nextOrder: function() {
|
|
if(!this.length) return 1;
|
|
return this.last().get('order') + 1;
|
|
}
|
|
})
|
|
CMS.Views.TextbookEdit = Backbone.View.extend({
|
|
initialize: function() {
|
|
this.template = _.template($("#new-textbook-tpl").text());
|
|
this.listenTo(this.model.chapters, "add", this.addOne);
|
|
this.listenTo(this.model.chapters, "reset", this.addAll);
|
|
this.listenTo(this.model.chapters, "all", this.render);
|
|
},
|
|
render: function() {
|
|
this.$el.html(this.template({
|
|
name: this.model.escape('name'),
|
|
}));
|
|
this.addAll();
|
|
return this;
|
|
},
|
|
events: {
|
|
"submit": "save",
|
|
"click .action-cancel": "remove",
|
|
"click .action-add-chapter": "createChapter"
|
|
},
|
|
addOne: function(chapter) {
|
|
var view = new CMS.Views.ChapterEdit({model: chapter});
|
|
this.$("ol.chapters").append(view.render().el)
|
|
return this;
|
|
},
|
|
addAll: function() {
|
|
this.model.chapters.each(this.addOne, this);
|
|
},
|
|
createChapter: function(e) {
|
|
if(e && e.preventDefault) { e.preventDefault(); }
|
|
this.model.chapters.add([{}])
|
|
},
|
|
save: function(e) {
|
|
if(e && e.preventDefault) { e.preventDefault(); }
|
|
alert("save is currently unimplemented")
|
|
}
|
|
|
|
})
|
|
CMS.Views.ChapterEdit = Backbone.View.extend({
|
|
initialize: function() {
|
|
this.template = _.template($("#new-chapter-tpl").text());
|
|
this.listenTo(this.model, "change", this.render)
|
|
},
|
|
render: function() {
|
|
this.$el.html(this.template({
|
|
name: this.model.escape('name'),
|
|
asset_path: this.model.escape('asset_path'),
|
|
order: this.model.get('order')
|
|
}));
|
|
return this;
|
|
},
|
|
events: {
|
|
"click .action-close": "removeChapter",
|
|
"click .action-uploadasset": "openUploadDialog",
|
|
"submit": "uploadAsset"
|
|
},
|
|
removeChapter: function(e) {
|
|
if(e && e.preventDefault) { e.preventDefault(); }
|
|
this.model.collection.remove(this.model);
|
|
return this.remove();
|
|
},
|
|
openUploadDialog: function(e) {
|
|
if(e && e.preventDefault) { e.preventDefault(); }
|
|
var msg = new CMS.Models.FileUpload({
|
|
title: _.str.sprintf(gettext("Upload a new asset to %s"),
|
|
section.escape('name')),
|
|
message: "[asset upload requirements]"
|
|
})
|
|
var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model})
|
|
$(".wrapper-view").append(view.render().el)
|
|
}
|
|
})
|
|
CMS.Models.FileUpload = Backbone.Model.extend({
|
|
defaults: {
|
|
"title": "",
|
|
"message": "",
|
|
"selectFile": null,
|
|
"uploading": false,
|
|
"uploadedBytes": 0,
|
|
"totalBytes": 0,
|
|
}
|
|
});
|
|
CMS.Views.UploadDialog = Backbone.View.extend({
|
|
initialize: function() {
|
|
this.template = _.template($("#upload-dialog-tpl").text());
|
|
this.listenTo(this.model, "change", this.render);
|
|
},
|
|
render: function() {
|
|
// some browsers (like Chrome) allow you to assign to the .files attribute
|
|
// of an <input type="file"> DOM element -- for those browsers, we can
|
|
// create a new DOM element and assign the old content to it. Other browsers
|
|
// (like Firefox) make this attribute read-only, and we have to save the
|
|
// old DOM element in order to save it's content. For compatibility purposes,
|
|
// we'll just save the old element every time.
|
|
var oldInput = this.$("input[type=file]").get(0), selectedFile;
|
|
if (oldInput && oldInput.files.length) {
|
|
selectedFile = oldInput.files[0];
|
|
}
|
|
this.$el.html(this.template({
|
|
url: UPLOAD_ASSET_CALLBACK_URL,
|
|
title: this.model.escape('title'),
|
|
message: this.model.escape('message'),
|
|
selectedFile: selectedFile,
|
|
uploading: this.model.get('uploading'),
|
|
uploadedBytes: this.model.get('uploadedBytes'),
|
|
totalBytes: this.model.get('totalBytes'),
|
|
}))
|
|
if (oldInput) {
|
|
this.$('input[type=file]').replaceWith(oldInput);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
events: {
|
|
"change input[type=file]": "selectFile",
|
|
"click .action-cancel": "removeSelf",
|
|
"click .action-upload": "upload"
|
|
},
|
|
selectFile: function(e) {
|
|
this.model.set('fileList', e.target.files)
|
|
},
|
|
removeSelf: function(e) {
|
|
if(e && e.preventDefault) { e.preventDefault(); }
|
|
this.remove();
|
|
},
|
|
upload: function(e) {
|
|
this.model.set('uploading', true);
|
|
this.$("form").ajaxSubmit({
|
|
success: _.bind(this.success, this),
|
|
error: _.bind(this.error, this),
|
|
uploadProgress: _.bind(this.progress, this),
|
|
data: {
|
|
notifyOnError: false
|
|
}
|
|
});
|
|
},
|
|
progress: function(event, position, total, percentComplete) {
|
|
this.model.set({
|
|
"uploadedBytes": position,
|
|
"totalBytes": total,
|
|
})
|
|
},
|
|
success: function(response, statusText, xhr, form) {
|
|
this.model.set('uploading', false);
|
|
var chapter = this.options.chapter;
|
|
if(chapter) {
|
|
var options = {}
|
|
if(!chapter.get("name")) {
|
|
options.name = response.displayname;
|
|
}
|
|
options.asset_path = response.url;
|
|
chapter.set(options);
|
|
}
|
|
this.remove();
|
|
},
|
|
error: function() {
|
|
this.model.set({
|
|
"uploading": false,
|
|
"uploadedBytes": 0,
|
|
"title": gettext("We're sorry, there was an error"),
|
|
});
|
|
}
|
|
})
|
|
var section = new CMS.Models.Section({
|
|
id: "${course.id}",
|
|
name: "${course.display_name_with_default | h}"
|
|
});
|
|
$(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);
|
|
})
|
|
})
|
|
</script>
|
|
</%block>
|
|
|
|
<%block name="content">
|
|
<div class="wrapper-mast wrapper">
|
|
<header class="mast has-actions has-subtitle">
|
|
<h1 class="page-header">
|
|
<small class="subtitle">Course Content</small>
|
|
<span class="sr">> </span>Textbooks
|
|
</h1>
|
|
|
|
<nav class="nav-actions">
|
|
<h3 class="sr">Page Actions</h3>
|
|
<ul>
|
|
<li class="nav-item">
|
|
<a href="#" class="button upload-button new-button"><i class="icon-cloud-upload "></i> New Textbook</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="wrapper-content wrapper">
|
|
<section class="content">
|
|
<div class="inner-wrapper">
|
|
<div class="introduction has-links">
|
|
<p class="copy">Textbooks are happy. Textbooks are cool. This is the filler text explaining why you should use a feature as happy and as cool as textbooks. If you use textbooks, you will make friends and influence people. You will lose weight and people will compliment you on your appearance. Children around the world will sing praises to your name, and celebrities will recongize you as a totally hip and groovy person. If you don't use textbooks, your life will be forever incomplete, and you will die alone and unloved. Make the right choice. Upload your first textbook now.</p>
|
|
|
|
<nav class="nav-introduction-supplementary">
|
|
<ul>
|
|
<li class="nav-item"><a href="#" rel="modal" title="This link will open in a modal window"><i class="icon-question-sign"></i> Need help adding a textbook?</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</%block>
|