Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Valera Rozuvan
2012-12-24 16:24:25 +02:00
committed by Alexander Kryklia
parent 8d69049746
commit f659247739
6 changed files with 105 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/lib/capa/capa/inputtypes.py
View File

@@ -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']

4
common/lib/capa/capa/templates/drag_and_drop_input.html
View File

@@ -1,9 +1,9 @@
<section id="inputtype_${id}" class="capa_inputtype" >
<div class="drag_and_drop_problem" id="drag_and_drop_div_${id}"
<div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
data-plain-id="${id}" data-course-folder="${course_folder}">
</div>
<div class="drag_and_drop_problem" id="drag_and_drop_json_${id}"
<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>

61
common/static/js/capa/drag_and_drop/config_parser.js
View File

@@ -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;
}
}
});

19
common/static/js/capa/drag_and_drop/container.js Normal file
View File

@@ -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)

13
common/static/js/capa/drag_and_drop/logme.js
View File

@@ -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;
}
}
});

25
common/static/js/capa/drag_and_drop/main.js
View File

@@ -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);