From ee1158f89e39aa5d714f30e038de4dcf05f8a199 Mon Sep 17 00:00:00 2001 From: David Baumgold Date: Mon, 10 Jun 2013 12:06:01 -0400 Subject: [PATCH] Set up PDF textbooks list view in Backbone --- cms/templates/js/chapter.underscore | 26 +++-- cms/templates/js/no-textbooks.underscore | 4 + cms/templates/js/textbook-edit.underscore | 24 +++++ cms/templates/js/textbook-show.underscore | 11 ++ cms/templates/js/textbook.underscore | 30 ------ cms/templates/textbooks.html | 120 +++++++++++++++++++--- 6 files changed, 157 insertions(+), 58 deletions(-) create mode 100644 cms/templates/js/no-textbooks.underscore create mode 100644 cms/templates/js/textbook-edit.underscore create mode 100644 cms/templates/js/textbook-show.underscore delete mode 100644 cms/templates/js/textbook.underscore diff --git a/cms/templates/js/chapter.underscore b/cms/templates/js/chapter.underscore index 3562e790ff..09f1b30f8f 100644 --- a/cms/templates/js/chapter.underscore +++ b/cms/templates/js/chapter.underscore @@ -1,14 +1,12 @@ -
  • -
    - - " value="<%= name %>" type="text"> - <%= gettext("the title/name of the chapter that will be used in navigating") %> -
    -
    - - " value="<%= asset_path %>" type="text"> - <%= gettext("provide the path to a file added to this course or upload a new one") %> - -
    - <%= gettext("delete chapter") %> -
    • +
    + + " value="<%= name %>" type="text"> + <%= gettext("the title/name of the chapter that will be used in navigating") %> +
    +
    + + " value="<%= asset_path %>" type="text"> + <%= gettext("provide the path to a file added to this course or upload a new one") %> + +
    + <%= gettext("delete chapter") %> diff --git a/cms/templates/js/no-textbooks.underscore b/cms/templates/js/no-textbooks.underscore new file mode 100644 index 0000000000..80b21372b3 --- /dev/null +++ b/cms/templates/js/no-textbooks.underscore @@ -0,0 +1,4 @@ +
    +

    You haven't added any textbooks to this course yet.

    +

    Add your first textbook

    +
    diff --git a/cms/templates/js/textbook-edit.underscore b/cms/templates/js/textbook-edit.underscore new file mode 100644 index 0000000000..2dd511c042 --- /dev/null +++ b/cms/templates/js/textbook-edit.underscore @@ -0,0 +1,24 @@ +<% if (errors) { %> +
    + <%= errors %> +
    +<% } %> + +
    + <%= gettext("Textbook information") %> +
    + + " value="<%= name %>"> + <%= gettext("the title/name of the text book as you would like your students to see it.") %> +
    +
    +
    + <%= gettext("Chapter(s) information") %> +
      +
      + +
      + + + +
      diff --git a/cms/templates/js/textbook-show.underscore b/cms/templates/js/textbook-show.underscore new file mode 100644 index 0000000000..cc4cdeba81 --- /dev/null +++ b/cms/templates/js/textbook-show.underscore @@ -0,0 +1,11 @@ +
    1. + <%= name %> + <% if(chapters.length > 1) {%> + <%= chapters.length %> PDF Chapters + <% } else if(chapters.length === 1) { %> + <%= chapters.at(0).asset_path %> + <% } %> + <%= gettext("view in course") %> + + +
      2. diff --git a/cms/templates/js/textbook.underscore b/cms/templates/js/textbook.underscore deleted file mode 100644 index 06459e58ff..0000000000 --- a/cms/templates/js/textbook.underscore +++ /dev/null @@ -1,30 +0,0 @@ -
      -
      - -
        -
      1. -
        - <%= gettext("Textbook information") %> -
        - - " value="<%= name %>"> - <%= gettext("the title/name of the text book as you would like your students to see it.") %> -
        -
        -
        2. -
      2. -
        - <%= gettext("Chapter(s) information") %> - -
          - -
          -
          1. -
        - -
        - - - -
        -
        diff --git a/cms/templates/textbooks.html b/cms/templates/textbooks.html index a25795c6b9..ced577df41 100644 --- a/cms/templates/textbooks.html +++ b/cms/templates/textbooks.html @@ -6,11 +6,17 @@ <%block name="header_extras"> + + @@ -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); }) }) @@ -275,11 +372,6 @@ $(function() { -
        -

        You haven't added any textbooks to this course yet.

        -

        Add your first textbook

        -
        -