Standardize how Problem and Video modules are loaded in the LMS and CMS preview pane

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

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

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

@@ -4,8 +4,10 @@ class CMS.Views.Module extends Backbone.View
 
   edit: (event) =>
     event.preventDefault()
+    previewType = @$el.data('preview-type')
+    moduleType = @$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')
+            type: if moduleType == 'None' then null else moduleType
+            previewType: if previewType == 'None' then null else previewType

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

@@ -27,4 +27,10 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   editSubmodule: (event) ->
     event.preventDefault()
-    CMS.pushView(new CMS.Views.ModuleEdit(model: new CMS.Models.Module(id: $(event.target).data('id'), type: $(event.target).data('type'))))
+    previewType = $(event.target).data('preview-type')
+    moduleType = $(event.target).data('type')
+    CMS.pushView new CMS.Views.ModuleEdit
+        model: new CMS.Models.Module
+            id: $(event.target).data('id')
+            type: if moduleType == 'None' then null else moduleType
+            previewType: if previewType == 'None' then null else previewType

cms/urls.py

@@ -14,7 +14,7 @@ urlpatterns = ('',
     url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/course/(?P<name>[^/]+)$',
         'contentstore.views.course_index', name='course_index'),
     url(r'^github_service_hook$', 'github_sync.views.github_post_receive'),
-    url(r'^preview/modx/(?P<id>.*?)/(?P<dispatch>[^/]*)$', 'contentstore.views.preview_dispatch', name='preview_dispatch')
+    url(r'^preview/modx/(?P<location>.*?)/(?P<dispatch>[^/]*)$', 'contentstore.views.preview_dispatch', name='preview_dispatch')
 )
 
 # User creation and updating views

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -1,6 +1,9 @@
 class @Problem
-  constructor: (@id, @element_id, url) ->
-    @el = $("##{@element_id}")
+  constructor: (element) ->
+    @el = $(element)
+    @id = @el.data('problem-id')
+    @element_id = @el.attr('id')
+    @url = @el.data('url')
     @render()
 
   $: (selector) ->
@@ -26,13 +29,13 @@ class @Problem
       @el.html(content)
       @bind()
     else
-      $.postWithPrefix "/modx/#{@id}/problem_get", (response) =>
+      $.postWithPrefix "#{@url}/problem_get", (response) =>
         @el.html(response.html)
         @bind()
 
   check: =>
     Logger.log 'problem_check', @answers
-    $.postWithPrefix "/modx/#{@id}/problem_check", @answers, (response) =>
+    $.postWithPrefix "#{@url}/problem_check", @answers, (response) =>
       switch response.success
         when 'incorrect', 'correct'
           @render(response.contents)
@@ -42,14 +45,14 @@ class @Problem
 
   reset: =>
     Logger.log 'problem_reset', @answers
-    $.postWithPrefix "/modx/#{@id}/problem_reset", id: @id, (response) =>
+    $.postWithPrefix "#{@url}/problem_reset", id: @id, (response) =>
         @render(response.html)
         @updateProgress response
 
   show: =>
     if !@el.hasClass 'showed'
       Logger.log 'problem_show', problem: @id
-      $.postWithPrefix "/modx/#{@id}/problem_show", (response) =>
+      $.postWithPrefix "#{@url}/problem_show", (response) =>
         answers = response.answers
         $.each answers, (key, value) =>
           if $.isArray(value)
@@ -69,7 +72,7 @@ class @Problem
 
   save: =>
     Logger.log 'problem_save', @answers
-    $.postWithPrefix "/modx/#{@id}/problem_save", @answers, (response) =>
+    $.postWithPrefix "#{@url}/problem_save", @answers, (response) =>
       if response.success
         alert 'Saved'
       @updateProgress response

common/lib/xmodule/xmodule/js/src/video/display.coffee

@@ -1,8 +1,10 @@
 class @Video
-  constructor: (@id, videos, @caption_url_base) ->
+  constructor: (@element) ->
+    @id = $(@element).attr('id').replace(/video_/, '')
+    @caption_url_base = $(@element).data('caption-url-base')
     window.player = null
     @el = $("#video_#{@id}")
-    @parseVideos videos
+    @parseVideos $(@element).data('streams')
     @fetchMetadata()
     @parseSpeed()
     $("#video_#{@id}").data('video', this)

lms/static/coffee/src/courseware.coffee

@@ -16,12 +16,8 @@ class @Courseware
       .bind 'contentChanged', @render
 
   render: ->
-    $('.course-content .video').each ->
-      id = $(this).attr('id').replace(/video_/, '')
-      new Video id, $(this).data('streams'), $(this).data('caption-url-base')
-    $('.course-content .problems-wrapper').each ->
-      id = $(this).data('problem-id')
-      new Problem id, $(this).attr('id'), $(this).data('url')
+    $('.course-content .video').each (idx, element) -> new Video element
+    $('.course-content .problems-wrapper').each (idx, element) -> new Problem element
     $('.course-content .histogram').each ->
       id = $(this).attr('id').replace(/histogram_/, '')
       new Histogram id, $(this).data('histogram')