Integrated the delta view into the save view for levels.

app/lib/deltas.coffee

@@ -7,27 +7,6 @@ module.exports.interpretDelta = (delta, path, left, schema) ->
 
   betterDelta = { action:'???', delta: delta }
 
-  betterPath = []
-  parentLeft = left
-  parentSchema = schema
-  for key in path
-    # TODO: A smarter way of getting child schemas
-    childSchema = parentSchema?.items or parentSchema?.properties?[key] or {}
-    childLeft = parentLeft?[key]
-    betterKey = null
-    betterKey ?= childLeft.name or childLeft.id if childLeft
-    betterKey ?= "#{childSchema.title} ##{key+1}" if childSchema.title and _.isNumber(key)
-    betterKey ?= "#{childSchema.title}" if childSchema.title
-    betterKey ?= _.string.titleize key
-    betterPath.push betterKey
-    parentLeft = childLeft
-    parentSchema = childSchema
-    
-  betterDelta.path = betterPath.join(' :: ')
-  betterDelta.schema = childSchema
-  betterDelta.left = childLeft
-  betterDelta.right = jsondiffpatch.patch childLeft, delta
-  
   if _.isArray(delta) and delta.length is 1
     betterDelta.action = 'added'
     betterDelta.newValue = delta[0]
@@ -54,27 +33,34 @@ module.exports.interpretDelta = (delta, path, left, schema) ->
   if _.isArray(delta) and delta.length is 3 and delta[1] is 0 and delta[2] is 2
     betterDelta.action = 'text-diff'
     betterDelta.unidiff = delta[0]
-    left = betterDelta.left.trim().split('\n')
-    right = betterDelta.right.trim().split('\n')
-    shifted = popped = false
-    while left.length > 5 and right.length > 5 and left[0] is right[0] and left[1] is right[1]
-      left.shift()
-      right.shift()
-      shifted = true
-    while left.length > 5 and right.length > 5 and left[left.length-1] is right[right.length-1] and left[left.length-2] is right[right.length-2]
-      left.pop()
-      right.pop()
-      popped = true
-    left.push('...') and right.push('...') if popped
-    left.unshift('...') and right.unshift('...') if shifted
-    betterDelta.trimmedLeft = left.join('\n')
-    betterDelta.trimmedRight = right.join('\n')
-
 
+  betterPath = []
+  parentLeft = left
+  parentSchema = schema
+  for key, i in path
+    # TODO: A smarter way of getting child schemas
+    childSchema = parentSchema?.items or parentSchema?.properties?[key] or {}
+    childLeft = parentLeft?[key]
+    betterKey = null
+    childData = if i is path.length-1 and betterDelta.action is 'added' then delta[0] else childLeft
+    betterKey ?= childData.name or childData.id if childData
+    betterKey ?= "#{childSchema.title} ##{key+1}" if childSchema.title and _.isNumber(key)
+    betterKey ?= "#{childSchema.title}" if childSchema.title
+    betterKey ?= _.string.titleize key
+    betterPath.push betterKey
+    parentLeft = childLeft
+    parentSchema = childSchema
+    
+  betterDelta.path = betterPath.join(' :: ')
+  betterDelta.schema = childSchema
+  betterDelta.left = childLeft
+  betterDelta.right = jsondiffpatch.patch childLeft, delta
+  
   betterDelta
   
 module.exports.flattenDelta = flattenDelta = (delta, path=null) ->
   # takes a single delta and returns an array of deltas
+  return [] unless delta
   
   path ?= []
   

app/models/CocoModel.coffee

@@ -1,4 +1,5 @@
 storage = require 'lib/storage'
+deltasLib = require 'lib/deltas'
 
 class CocoSchema extends Backbone.Model
   constructor: (path, args...) ->
@@ -221,5 +222,10 @@ class CocoModel extends Backbone.Model
       objectHash: (obj) -> obj.name || obj.id || obj._id || JSON.stringify(_.keys(obj))
     })
     jsd.diff @_revertAttributes, @attributes
+    
+  getExpandedDelta: ->
+    delta = @getDelta()
+    deltas = deltasLib.flattenDelta(delta)
+    (deltasLib.interpretDelta(d.delta, d.path, @_revertAttributes, @schema().attributes) for d in deltas)
 
 module.exports = CocoModel

app/styles/editor/delta.sass

@@ -1,5 +1,4 @@
-#delta-list-view
-  width: 600px
+.delta-list-view
   .panel-heading
     font-size: 13px
     padding: 4px

app/styles/modal/save_version.sass

@@ -1,4 +1,7 @@
 #save-version-modal
+  .modal-body
+    padding: 0px 50px 30px 20px
+  
   #cla-link
     cursor: pointer
     text-decoration: underline
@@ -25,3 +28,23 @@
     font-size: 0.9em
     font-style: italic
 
+  .delta-list-view
+    overflow-y: auto
+    padding: 10px
+    border: 1px solid black
+    background: lighten(#add8e6, 17%)
+    margin-bottom: 10px
+    ul
+      padding-left: 20px
+
+  form
+    width: 100%
+    
+  .commit-message
+    display: block
+    width: 100%
+  
+  .checkbox
+    margin: 10px 10px 0
+    input
+      margin-right: 5px

app/templates/editor/delta.jade

@@ -1,5 +1,5 @@
 - var i = 0
-.panel-group#accordion
+.panel-group(id='delta-accordion-'+(counter))
   for delta in deltas
     .delta.panel.panel-default(class='delta-'+delta.action)
       .panel-heading
@@ -14,10 +14,10 @@
         if delta.action === 'text-diff'
           strong(data-i18n="delta.text_diff") Text Diff
         span  
-        a(data-toggle="collapse" data-parent="#accordion" href="#collapse-"+i)
+        a(data-toggle="collapse" data-parent="#delta-accordion"+(counter) href="#collapse-"+(i+counter))
           span= delta.path
           
-      .panel-collapse.collapse(id="collapse-"+i)
+      .panel-collapse.collapse(id="collapse-"+(i+counter))
         .panel-body.row
           if delta.action === 'added'
             .new-value.col-md-12= delta.right
@@ -29,7 +29,7 @@
               div.old-value= delta.left
           if delta.action === 'text-diff'
             .col-md-6
-              pre= delta.trimmedLeft
+              pre= delta.left
             .col-md-6
-              pre= delta.trimmedRight
+              pre= delta.right
     - i += 1

app/templates/editor/level/save.jade

@@ -3,19 +3,20 @@ extends /templates/modal/save_version
 block modal-body-content
   h3= "Level: " + level.get('name') + " - " + (levelNeedsSave ? "Modified" : "Not Modified")
   if levelNeedsSave
-    form#save-level-form.form
-      .form-group
-        label.control-label(for="level-commit-message") Commit Message
-        textarea.form-control#level-commit-message(name="commit-message", type="text")
+    .changes-stub
+    form#save-level-form.form-inline
+      .form-group.commit-message
+        input.form-control#level-commit-message(name="commit-message", type="text", placeholder="Commit Message")
       if level.isPublished()
-        .form-group.checkbox
-          label.control-label(for="level-version-is-major") Major Changes?
-          input#level-version-is-major(name="version-is-major", type="checkbox")
-          span.help-block (Could this update break old solutions of the level?)
+        .checkbox
+          label
+            input#level-version-is-major(name="version-is-major", type="checkbox")
+            | Major Changes
       if !level.isPublished()
-        .form-group.checkbox
-          label.control-label(for="level-publish") Publish This Level (irreversible)?
-          input#level-publish(name="publish", type="checkbox")
+        .checkbox
+          label
+            input#level-publish(name="publish", type="checkbox")
+            | Publish
 
   if modifiedComponents.length
     hr
@@ -23,17 +24,17 @@ block modal-body-content
   each component in modifiedComponents
     - var id = component.get('_id')
     h4= "Component: " + component.get('system') + '.' + component.get('name')
-    form.component-form(id="save-component-" + id + "-form")
+    .changes-stub
+    form.form-inline.component-form(id="save-component-" + id + "-form")
       input(name="component-original", type="hidden", value=component.get('original'))
       input(name="component-parent-major-version", type="hidden", value=component.get('version').major)
-      .form-group
-        label.control-label(for=id + "-commit-message") Commit Message
-        textarea.form-control(id=id + "-commit-message", name="commit-message", type="text")
+      .form-group.commit-message
+        input.form-control(id=id + "-commit-message", name="commit-message", type="text", placeholder="Commit Message")
       if component.isPublished()
-        .form-group.checkbox
-          label.control-label(for=id + "-version-is-major") Major Changes?
-          input(id=id + "-version-is-major", name="version-is-major", type="checkbox")
-          span.help-block (Could this update break anything depending on this Component?)
+        .checkbox
+          label
+            input(id=id + "-version-is-major", name="version-is-major", type="checkbox")
+            | Major Changes
 
   if modifiedSystems.length
     hr
@@ -41,14 +42,14 @@ block modal-body-content
   each system in modifiedSystems
     - var id = system.get('_id')
     h4= "System: " + system.get('name')
-    form.system-form(id="save-system-" + id + "-form")
+    .changes-stub
+    form.form-inline.system-form(id="save-system-" + id + "-form")
       input(name="system-original", type="hidden", value=system.get('original'))
       input(name="system-parent-major-version", type="hidden", value=system.get('version').major)
-      .form-group
-        label.control-label(for=id + "-commit-message") Commit Message
-        textarea.form-control(id=id + "-commit-message", name="commit-message", type="text")
+      .form-group.commit-message
+        input.form-control(id=id + "-commit-message", name="commit-message", type="text", placeholder="Commit Message")
       if system.isPublished()
-        .form-group.checkbox
-          label.control-label(for=id + "-version-is-major") Major Changes?
-          input(id=id + "-version-is-major", name="version-is-major", type="checkbox")
-          span.help-block (Could this update break anything depending on this System?)
+        .checkbox
+          label
+            input(id=id + "-version-is-major", name="version-is-major", type="checkbox")
+            | Major changes

app/views/editor/delta.coffee

@@ -3,21 +3,19 @@ template = require 'templates/editor/delta'
 deltaLib = require 'lib/deltas'
 
 module.exports = class DeltaListView extends CocoView
-  id: "delta-list-view"
+  @deltaCounter: 0
+  className: "delta-list-view"
   template: template
 
   constructor: (options) ->
     super(options)
-    @delta = options.delta
-    @schema = options.schema or {}
-    @left = options.left
+    @model = options.model
 
   getRenderData: ->
     c = super()
-    deltas = deltaLib.flattenDelta @delta
-    deltas = (deltaLib.interpretDelta(d.delta, d.path, @left, @schema) for d in deltas)
-    c.deltas = deltas
-    @processedDeltas = deltas
+    c.deltas = @processedDeltas = @model.getExpandedDelta()
+    c.counter = DeltaListView.deltaCounter
+    DeltaListView.deltaCounter += c.deltas.length
     c
     
   afterRender: ->
@@ -34,7 +32,7 @@ module.exports = class DeltaListView extends CocoView
         treema = TreemaNode.make(leftEl, options)
         treema.build()
 
-      if _.isObject(deltaData.right) and rightEl = deltaEl.find('.old-value')
+      if _.isObject(deltaData.right) and rightEl = deltaEl.find('.new-value')
         options =
           data: deltaData.right
           schema: deltaData.schema

app/views/editor/level/save_view.coffee

@@ -3,6 +3,7 @@ template = require 'templates/editor/level/save'
 forms = require 'lib/forms'
 LevelComponent = require 'models/LevelComponent'
 LevelSystem = require 'models/LevelSystem'
+DeltaView = require 'views/editor/delta'
 
 module.exports = class LevelSaveView extends SaveVersionModal
   template: template
@@ -24,7 +25,19 @@ module.exports = class LevelSaveView extends SaveVersionModal
     context.modifiedComponents = _.filter @supermodel.getModels(LevelComponent), @shouldSaveEntity
     context.modifiedSystems = _.filter @supermodel.getModels(LevelSystem), @shouldSaveEntity
     context.noSaveButton = not (context.levelNeedsSave or context.modifiedComponents.length or context.modifiedSystems.length)
+    @lastContext = context
     context
+    
+  afterRender: ->
+    super()
+    changeEls = @$el.find('.changes-stub')
+    models = if @lastContext.levelNeedsSave then [@level] else []
+    models = models.concat @lastContext.modifiedComponents
+    models = models.concat @lastContext.modifiedSystems
+    for changeEl, i in changeEls
+      model = models[i]
+      deltaView = new DeltaView({model:model})
+      @insertSubView(deltaView, $(changeEl))
 
   shouldSaveEntity: (m) ->
     return true if m.hasLocalChanges()

app/views/kinds/CocoView.coffee

@@ -299,9 +299,10 @@ module.exports = class CocoView extends Backbone.View
 
   # Subviews
 
-  insertSubView: (view) ->
+  insertSubView: (view, elToReplace=null) ->
     @subviews[view.id].destroy() if view.id of @subviews
-    @$el.find('#'+view.id).after(view.el).remove()
+    elToReplace ?= @$el.find('#'+view.id)
+    elToReplace.after(view.el).remove()
     view.parent = @
     view.render()
     view.afterInsert()