Merge pull request #1273 from edx/db/fix-drag-and-drop-requirejs

make drag_and_drop component work with requirejs and changed static url

common/lib/capa/capa/templates/drag_and_drop_input.html

@@ -6,7 +6,7 @@
     <div class="drag_and_drop_problem_json" id="drag_and_drop_json_${id}"
         style="display:none;">${drag_and_drop_json}</div>
 
-    <div class="script_placeholder" data-src="/static/js/capa/drag_and_drop.js"></div>
+    <div class="script_placeholder" data-src="${STATIC_URL}js/capa/drag_and_drop.js"></div>
 
     % if status == 'unsubmitted':
         <div class="unanswered" id="status_${id}">

common/lib/capa/capa/tests/test_inputtypes.py

@@ -951,7 +951,7 @@ class DragAndDropTest(unittest.TestCase):
     '''
 
     def test_rendering(self):
-        path_to_images = '/static/images/'
+        path_to_images = '/dummy-static/images/'
 
         xml_str = """
         <drag_and_drop_input id="prob_1_2" img="{path}about_1.png" target_outline="false">
@@ -978,15 +978,15 @@ class DragAndDropTest(unittest.TestCase):
 
         user_input = {  # order matters, for string comparison
                         "target_outline": "false",
-                        "base_image": "/static/images/about_1.png",
+                        "base_image": "/dummy-static/images/about_1.png",
                         "draggables": [
 {"can_reuse": "", "label": "Label 1", "id": "1", "icon": "", "target_fields": []},
-{"can_reuse": "", "label": "cc", "id": "name_with_icon", "icon": "/static/images/cc.jpg", "target_fields": []},
-{"can_reuse": "", "label": "arrow-left", "id": "with_icon", "icon": "/static/images/arrow-left.png", "can_reuse": "", "target_fields": []},
+{"can_reuse": "", "label": "cc", "id": "name_with_icon", "icon": "/dummy-static/images/cc.jpg", "target_fields": []},
+{"can_reuse": "", "label": "arrow-left", "id": "with_icon", "icon": "/dummy-static/images/arrow-left.png", "can_reuse": "", "target_fields": []},
 {"can_reuse": "", "label": "Label2", "id": "5", "icon": "", "can_reuse": "", "target_fields": []},
-{"can_reuse": "", "label": "Mute", "id": "2", "icon": "/static/images/mute.png", "can_reuse": "", "target_fields": []},
-{"can_reuse": "", "label": "spinner", "id": "name_label_icon3", "icon": "/static/images/spinner.gif", "can_reuse": "", "target_fields": []},
-{"can_reuse": "", "label": "Star", "id": "name4", "icon": "/static/images/volume.png", "can_reuse": "", "target_fields": []},
+{"can_reuse": "", "label": "Mute", "id": "2", "icon": "/dummy-static/images/mute.png", "can_reuse": "", "target_fields": []},
+{"can_reuse": "", "label": "spinner", "id": "name_label_icon3", "icon": "/dummy-static/images/spinner.gif", "can_reuse": "", "target_fields": []},
+{"can_reuse": "", "label": "Star", "id": "name4", "icon": "/dummy-static/images/volume.png", "can_reuse": "", "target_fields": []},
 {"can_reuse": "", "label": "Label3", "id": "7", "icon": "", "can_reuse": "", "target_fields": []}],
                         "one_per_target": "True",
                         "targets": [

common/static/js/capa/drag_and_drop.js

@@ -4,9 +4,10 @@
 // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
 (function (requirejs, require, define) {
 
-requirejs.config({
-    'baseUrl': '/static/js/capa/drag_and_drop/'
-});
+// HACK: this should be removed when it is safe to do so
+if(window.baseUrl) {
+    requirejs.config({baseUrl: baseUrl});
+}
 
 // The current JS file will be loaded and run each time. It will require a
 // single dependency which will be loaded and stored by RequireJS. On
@@ -14,7 +15,7 @@ requirejs.config({
 // than loading it again from the server. For that reason, it is a good idea to
 // keep the current JS file as small as possible, and move everything else into
 // RequireJS module dependencies.
-requirejs(['main'], function (Main) {
+require(['js/capa/drag_and_drop/main'], function (Main) {
     Main();
 });
 

common/static/js/capa/drag_and_drop/base_image.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
     return BaseImage;
 
     function BaseImage(state) {

common/static/js/capa/drag_and_drop/config_parser.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
     return configParser;
 
     function configParser(state, config) {

common/static/js/capa/drag_and_drop/container.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
     return Container;
 
     function Container(state) {

common/static/js/capa/drag_and_drop/draggable_events.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
 return {
     'attachMouseEventsTo': function (element) {
         var self;

common/static/js/capa/drag_and_drop/draggable_logic.js

 (function (requirejs, require, define) {
-define(['logme', 'update_input', 'targets'], function (logme, updateInput, Targets) {
+define(['js/capa/drag_and_drop/logme', 'js/capa/drag_and_drop/update_input', 'js/capa/drag_and_drop/targets'], function (logme, updateInput, Targets) {
 return {
     'moveDraggableTo': function (moveType, target, funcCallback) {
         var self, offset;

common/static/js/capa/drag_and_drop/draggables.js

 (function (requirejs, require, define) {
-define(['logme', 'draggable_events', 'draggable_logic'], function (logme, draggableEvents, draggableLogic) {
+define(['js/capa/drag_and_drop/logme', 'js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggable_logic'], function (logme, draggableEvents, draggableLogic) {
     return {
         'init': init
     };

common/static/js/capa/drag_and_drop/main.js

 (function (requirejs, require, define) {
 define(
-    ['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller', 'draggables', 'targets', 'update_input'],
+    ['js/capa/drag_and_drop/logme', 'js/capa/drag_and_drop/state',
+     'js/capa/drag_and_drop/config_parser', 'js/capa/drag_and_drop/container',
+     'js/capa/drag_and_drop/base_image', 'js/capa/drag_and_drop/scroller',
+     'js/capa/drag_and_drop/draggables', 'js/capa/drag_and_drop/targets',
+     'js/capa/drag_and_drop/update_input'],
     function (logme, State, configParser, Container, BaseImage, Scroller, Draggables, Targets, updateInput) {
     return Main;
 

common/static/js/capa/drag_and_drop/scroller.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
     return Scroller;
 
     function Scroller(state) {
@@ -40,7 +40,7 @@ define(['logme'], function (logme) {
                         '-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
                         'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
 
-                        'background-image: url(\'/static/images/arrow-left.png\'); ' +
+                        "background-image: url('"+baseUrl+"images/arrow-left.png'); " +
                         'background-position: center center; ' +
                         'background-repeat: no-repeat; ' +
                     '" ' +
@@ -136,7 +136,7 @@ define(['logme'], function (logme) {
                         '-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
                         'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
 
-                        'background-image: url(\'/static/images/arrow-right.png\'); ' +
+                        "background-image: url('"+baseUrl+"images/arrow-right.png'); " +
                         'background-position: center center; ' +
                         'background-repeat: no-repeat; ' +
                     '" ' +

common/static/js/capa/drag_and_drop/targets.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
     return {
         'initializeBaseTargets': initializeBaseTargets,
         'initializeTargetField': initializeTargetField,

common/static/js/capa/drag_and_drop/update_input.js

 (function (requirejs, require, define) {
-define(['logme'], function (logme) {
+define(['js/capa/drag_and_drop/logme'], function (logme) {
     return {
         'check': check,
         'update': update

lms/templates/main.html

@@ -36,7 +36,6 @@
           if (window.location !== window.top.location) {
             window.top.location = window.location;
           }
-          window.baseUrl = "${settings.STATIC_URL}";
         })(this);
       </script>
     % endif
@@ -96,6 +95,7 @@
   <%include file="footer.html" />
 % endif
 
+  <script>window.baseUrl = "${settings.STATIC_URL}";</script>
   <%static:js group='application'/>
   <%static:js group='module-js'/>