Rework the layout of Round editors

Make use of Bootstrap Collapse to form an accordion view of the Round editors

assets/js/author.coffee

@@ -267,11 +267,11 @@ QuizRoundsEditorView = View.extend
   initialize: ->
     @$el.html readTemplate "QuizRoundsEditorView"
 
-    @collection = new RoundCollection @model.get "rounds"
+    @accordion = @$(".accordion")
 
-    @container = @$(".x-round-container")
+    @collection = new RoundCollection @model.get "rounds"
 
-    @collection.each (round, i) ->
+    headers = @collection.map (round, i) ->
       round.set "index", i + 1
       @createRoundView round
 
@@ -283,7 +283,16 @@ QuizRoundsEditorView = View.extend
 
   createRoundView: (round) ->
     ctor = roundTypeToView[round.get("type")]
-    new ctor { model:round, @collection, @container }
+    view = new ctor model:round
+
+    header = new RoundHeaderView {
+      @collection, @accordion,
+      model: round,
+      editor: view.$el }
+
+    @accordion.append header.$el
+
+    return header
 
   addNewRound: (event) ->
     event.preventDefault()
@@ -292,7 +301,9 @@ QuizRoundsEditorView = View.extend
       type: type
       index: @collection.length + 1
     @collection.add round
-    @createRoundView round
+
+    @$(".x-round[data-toggle='collapse']").collapse "hide"
+    (@createRoundView round).show()
 
   renumberRounds: ->
     index = 1
@@ -307,13 +318,32 @@ RoundHeaderView = FormView.extend
     @$el.html fromMustacheTemplate "RoundHeaderView",
       type: @model.get("type")
 
+    # Since we're not using "data-" attributes, we have to wire
+    # up a click event handler ourselves, rather than rely on the
+    # global listener buliding into bootstrap-collapse.js
+    @body = @$(".x-round.accordion-body").collapse
+      toggle: false
+      parent: @options.accordion
+
+    toggle = @$(".x-round[data-toggle='collapse']").tooltip()
+    toggle.on "click", (event) =>
+      event.preventDefault()
+      @body.collapse "toggle"
+
     @linkElement "index"
     # Can't use defaults since there's two .x-title elements
     @linkElement "title", ".x-round-header .x-title", "No Title"
     @linkField "title", ".control-group.x-title"
 
     @$(".x-editor").html @options.editor
 
+  hide: ->
+    @body.collapse "hide"
+
+  show: ->
+    @body.collapse "show"
+
+
   events:
     "click .x-round-header .x-delete": "doDelete"
 
@@ -332,14 +362,9 @@ RoundHeaderView = FormView.extend
 
 NormalRoundEditView = FormView.extend
   initialize: ->
-    @$el.html fromMustacheTemplate "NormalRoundEditView",
-      index: @model.get "index"
-
-    header = new RoundHeaderView { @model, @collection, editor: @$el}
-
-    @options.container.append header.$el
+    @$el.html readTemplate "NormalRoundEditView"
 
-roundTypeToView =
+ roundTypeToView =
   normal: NormalRoundEditView
   challenge: undefined
   wager: undefined

views/author.jade

@@ -53,8 +53,7 @@ block append templates
     .x-alert-container
     form.well(action="#")
       .x-quiz-fields
-      .row
-        .x-rounds.offset1
+      .x-rounds
       button.btn.btn-primary.x-save(data-loading-text="Saving ...") Save Quiz
        
       button.btn.btn-mini.x-cancel(
@@ -74,7 +73,7 @@ block append templates
       span.help-inline Location where Quiz will take place
 
   script#QuizRoundsEditorView(type="text/template")
-    .x-round-container
+    .x-round-container.accordion
     .x-add-new-round
       | Add a new
       select.span2
@@ -86,25 +85,27 @@ block append templates
         | Add
 
   script#RoundHeaderView(type="text/template")
-    .row.well
-      .x-round-header
-          .span4
-            | Round #
-            span.x-index 999
-            |  ({{type}})
-            em: span.x-title Round Title
-          .span1.offset7
-            button.btn.btn-danger.btn-mini.x-delete Delete
-    .row
-      .control-group.x-title
-        label Round Title
-        input.span4(type="text", required, rows=10, cols=100)
-        span.help-inline Title or theme for this round
-      .x-editor
+    .accordion-group
+      .accordion-heading.x-round-header
+        a.accordian-toggle.x-round(
+          rel="tooltip"
+          data-placement="top"
+          title="Expand/Collapse this round")
+          | Round #
+          span.x-index 999
+          |  ({{type}})
+          em: span.x-title Round Title
+        button.btn.btn-danger.btn-mini.x-delete.pull-right Delete
+      .accordion-body.x-round.collapse
+        .control-group.x-title.accordion-inner
+          label Round Title
+          input.span4(type="text", required, rows=10, cols=100)
+          span.help-inline Title or theme for this round
+        .x-editor
 
   script#NormalRoundEditView(type="text/template")
     .control-group.x-placeholder
-      textarea.span8(rows=10, cols=100)
+      textarea(rows=10, cols=100)
 
    script#standard-error-alert(type="text/template")
      div.alert.alert-error.fade.in