From f65924773954c0bb905a5715262a2e196c8567bf Mon Sep 17 00:00:00 2001 From: Valera Rozuvan Date: Mon, 24 Dec 2012 16:24:25 +0200 Subject: [PATCH] Client-side Drag and Drop: work in progress. Part 2. --- common/lib/capa/capa/inputtypes.py | 2 +- .../capa/templates/drag_and_drop_input.html | 4 +- .../js/capa/drag_and_drop/config_parser.js | 61 ++++++++++++++++++- .../static/js/capa/drag_and_drop/container.js | 19 ++++++ common/static/js/capa/drag_and_drop/logme.js | 13 ++-- common/static/js/capa/drag_and_drop/main.js | 25 +++++--- 6 files changed, 105 insertions(+), 19 deletions(-) create mode 100644 common/static/js/capa/drag_and_drop/container.js diff --git a/common/lib/capa/capa/inputtypes.py b/common/lib/capa/capa/inputtypes.py index 46c23fb3a0..654a212b60 100644 --- a/common/lib/capa/capa/inputtypes.py +++ b/common/lib/capa/capa/inputtypes.py @@ -822,7 +822,7 @@ class DragAndDropInput(InputTypeBase): try: dic[attr_name] = Attribute(attr_name).parse_from_xml(x) except ValueError: - dic[attr_name] = None + dic[attr_name] = "" dic['name'] = dic['name'] or slugify(dic['label']) dic['label'] = dic['label'] or dic['name'] diff --git a/common/lib/capa/capa/templates/drag_and_drop_input.html b/common/lib/capa/capa/templates/drag_and_drop_input.html index f939dd58eb..161ecd1af1 100644 --- a/common/lib/capa/capa/templates/drag_and_drop_input.html +++ b/common/lib/capa/capa/templates/drag_and_drop_input.html @@ -1,9 +1,9 @@
-
-
diff --git a/common/static/js/capa/drag_and_drop/config_parser.js b/common/static/js/capa/drag_and_drop/config_parser.js index ce120674f7..7c5e5ded73 100644 --- a/common/static/js/capa/drag_and_drop/config_parser.js +++ b/common/static/js/capa/drag_and_drop/config_parser.js @@ -4,11 +4,66 @@ // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system (function (requirejs, require, define) { -define([], function () { +define(['logme'], function (logme) { return configParser; - function configParser(config, state) { - state.config = 1; + function configParser(config, imageDir, state) { + var returnStatus; + + returnStatus = true; + + state.config = { + 'imageDir': '/static/' + imageDir + '/images/', + 'draggable': [], + 'target': '' + }; + + if ($.isArray(config.draggable) === true) { + (function (i) { + while (i < config.draggable.length) { + if (processDraggable(config.draggable[i]) !== true) { + returnStatus = false; + } + i += 1; + } + }(0)); + } else if ($.isPlainObject(config.draggable) === true) { + if (processDraggable(config.draggable) !== true) { + returnStatus = false; + } + } else { + logme('ERROR: The type of config.draggable is no supported.'); + returnStatus = false; + } + + if (typeof config.target === 'string') { + state.config.target = config.target; + } else { + logme('ERROR: Property config.target is not of type "string".'); + returnStatus = false; + } + + return true; + + function processDraggable(obj) { + if (typeof obj.icon !== 'string') { + logme('ERROR: Attribute "obj.icon" is not a string.'); + + return false; + } else if (typeof obj.label !== 'string') { + logme('ERROR: Attribute "obj.label" is not a string.'); + + return false; + } else if (typeof obj.name !== 'string') { + logme('ERROR: Attribute "obj.name" is not a string.'); + + return false; + } + + state.config.draggable.push(obj); + + true; + } } }); diff --git a/common/static/js/capa/drag_and_drop/container.js b/common/static/js/capa/drag_and_drop/container.js new file mode 100644 index 0000000000..d9e7f51fc8 --- /dev/null +++ b/common/static/js/capa/drag_and_drop/container.js @@ -0,0 +1,19 @@ +// 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(['logme'], function (logme) { + return Container; + + function Container(state) { + + } +}); + +// 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) diff --git a/common/static/js/capa/drag_and_drop/logme.js b/common/static/js/capa/drag_and_drop/logme.js index 1ab2eebac6..21f73bf2a5 100644 --- a/common/static/js/capa/drag_and_drop/logme.js +++ b/common/static/js/capa/drag_and_drop/logme.js @@ -12,6 +12,8 @@ define([], function () { return logme; function logme() { + var i; + if ( (debugMode !== true) || (typeof window.console === 'undefined') @@ -19,12 +21,11 @@ define([], function () { return; } - (function (i) { - while (i < arguments.length) { - window.console.log(arguments[i]); - i += 1; - } - }(0); + i = 0; + while (i < arguments.length) { + window.console.log(arguments[i]); + i += 1; + } } }); diff --git a/common/static/js/capa/drag_and_drop/main.js b/common/static/js/capa/drag_and_drop/main.js index 142e1041ce..2745374950 100644 --- a/common/static/js/capa/drag_and_drop/main.js +++ b/common/static/js/capa/drag_and_drop/main.js @@ -6,26 +6,33 @@ define( ['logme', 'state', 'config_parser', 'target', 'draggables'], - function (logme, State, configParser, Target, raggables) { + function (logme, State, configParser, Target, Draggables) { return Main; function Main() { - $('.drag_and_drop_problem').each(processProblem); + $('.drag_and_drop_problem_div').each(processProblem); } // $(value) - get the element of the entire problem function processProblem(index, value) { - var problemId, config, state; + var problemId, imageDir, config, state; problemId = $(value).attr('data-plain-id'); if (typeof problemId !== 'string') { - logme('ERROR: Could not find a problem DOM element ID.'); + logme('ERROR: Could not find the ID of the problem DOM element.'); + + return; + } + + imageDir = $(value).attr('data-plain-id'); + if (typeof imageDir !== 'string') { + logme('ERROR: Could not find the name of the image directory.'); return; } try { - config = JSON.parse($(value).html()); + config = JSON.parse($('#drag_and_drop_json_' + problemId).html()); } catch (err) { logme('ERROR: Could not parse the JSON configuration options.'); logme('Error message: "' + err.message + '".'); @@ -35,9 +42,13 @@ define( state = State(problemId); - configParser(config, state); + if (configParser(config, imageDir, state) !== true) { + logme('ERROR: Could not make sense of the JSON configuration options.'); - // Container(state); + return; + } + + Container(state); Target(state); // Scroller(state); Draggables(state);