Client-side Drag and Drop: work in progress. Part 1.

common/static/js/capa/drag_and_drop.js

@@ -6,16 +6,14 @@
 
 requirejs.config({
     'baseUrl': '/static/js/capa/drag_and_drop/',
-
-    'paths': {
-
-    },
-
-    'shim': {
-
-    }
 });
 
+// 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
+// subsequent runs, RequireJS will return the dependency from memory, rather
+// 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) {
     Main();
 });

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

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define([], function () {
+    return configParser;
+
+    function configParser(config, state) {
+        state.config = 1;
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

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

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define([], function () {
+    return Draggables;
+
+    function Draggables(state) {
+        state.draggables = 1;
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/static/js/capa/drag_and_drop/logme.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define([], function () {
+    var debugMode;
+
+    debugMode = true;
+
+    return logme;
+
+    function logme() {
+        if (
+            (debugMode !== true) ||
+            (typeof window.console === 'undefined')
+        ) {
+            return;
+        }
+
+        (function (i) {
+            while (i < arguments.length) {
+                window.console.log(arguments[i]);
+                i += 1;
+            }
+        }(0);
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

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

@@ -4,11 +4,45 @@
 // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
 (function (requirejs, require, define) {
 
-define([], function () {
+define(
+    ['logme', 'state', 'config_parser', 'target', 'draggables'],
+    function (logme, State, configParser, Target, raggables) {
     return Main;
 
     function Main() {
-        alert('This is a drag-and-drop demo.');
+        $('.drag_and_drop_problem').each(processProblem);
+    }
+
+    // $(value) - get the element of the entire problem
+    function processProblem(index, value) {
+        var problemId, config, state;
+
+        problemId = $(value).attr('data-plain-id');
+        if (typeof problemId !== 'string') {
+            logme('ERROR: Could not find a problem DOM element ID.');
+
+            return;
+        }
+
+        try {
+            config = JSON.parse($(value).html());
+        } catch (err) {
+            logme('ERROR: Could not parse the JSON configuration options.');
+            logme('Error message: "' + err.message + '".');
+
+            return;
+        }
+
+        state = State(problemId);
+
+        configParser(config, state);
+
+        // Container(state);
+        Target(state);
+        // Scroller(state);
+        Draggables(state);
+
+        logme(state);
     }
 });
 

common/static/js/capa/drag_and_drop/state.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define([], function () {
+    return State;
+
+    function State(problemId) {
+        return {
+            'problemId': problemId
+        };
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/static/js/capa/drag_and_drop/target.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+//
+// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system
+(function (requirejs, require, define) {
+
+define([], function () {
+    return Target;
+
+    function Target(state) {
+        state.target = 1;
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)