Load preview modules when a cms edit page is opened

cms/static/coffee/src/models/module.coffee

@@ -6,8 +6,14 @@ class CMS.Models.Module extends Backbone.Model
   loadModule: (element) ->
     try
       @module = new window[@get('type')](element)
-    catch TypeError
-      console.error "Unable to load #{@get('type')}." if console
+    catch error
+      console.error "Unable to load #{@get('type')}: #{error.message}" if console
+
+  loadPreview: (element) ->
+    try
+      @previewModule = new window[@get('previewType')](element)
+    catch error
+      console.error "Unable to load #{@get('previewType')}: #{error.message}" if console
 
   editUrl: ->
     "/edit_item?#{$.param(id: @get('id'))}"

cms/static/coffee/src/views/module.coffee

@@ -4,4 +4,8 @@ class CMS.Views.Module extends Backbone.View
 
   edit: (event) =>
     event.preventDefault()
-    CMS.replaceView(new CMS.Views.ModuleEdit(model: new CMS.Models.Module(id: @$el.data('id'), type: @$el.data('type'))))
+    CMS.replaceView new CMS.Views.ModuleEdit
+        model: new CMS.Models.Module
+            id: @$el.data('id')
+            type: @$el.data('type')
+            previewType: @$el.data('preview-type')

cms/static/coffee/src/views/module_edit.coffee

@@ -10,6 +10,8 @@ class CMS.Views.ModuleEdit extends Backbone.View
   initialize: ->
     @$el.load @model.editUrl(), =>
       @model.loadModule(@el)
+      @$el.find('.preview').each (idx, previewEl) =>
+          @model.loadPreview(previewEl)
 
   save: (event) ->
     event.preventDefault()

cms/templates/unit.html

-<section id="unit-wrapper" class="${js_module}">
+<section id="unit-wrapper">
   <header>
     <section>
       <h1 class="editable">${name}</h1>

cms/templates/widgets/navigation.html

@@ -55,7 +55,11 @@
 
       <ul class="modules">
         % for module in week.get_children():
-        <li class="module" data-id="${module.location.url()}" data-type="${module.js_module_name}">
+        <li class="module"
+            data-id="${module.location.url()}"
+            data-type="${module.js_module_name}"
+            data-preview-type="${module.module_class.js_module_name}">
+
             <a href="#" class="module-edit">${module.name}</a>
             <a href="#" class="draggable">handle</a>
         </li>

cms/templates/widgets/sequence-edit.html

@@ -36,7 +36,10 @@
           <ol>
             % for child in module.get_children():
             <li class="${module.category}">
-              <a href="#" class="module-edit" data-id="${child.location.url()}" data-type="${child.js_module_name}">${child.name}</a>
+              <a href="#" class="module-edit"
+                 data-id="${child.location.url()}"
+                 data-type="${child.js_module_name}"
+                 data-preview-type="${child.module_class.js_module_name}">${child.name}</a>
               <a href="#" class="draggable">handle</a>
             </li>
             %endfor