New feature: added ability to define custom label background color. Upated demo…

New feature: added ability to define custom label background color. Upated demo to use this feature. Needs to be turned on Python side.

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

@@ -89,6 +89,14 @@ define(['logme'], function (logme) {
             returnStatus = false;
         }
 
+        state.config.labelBgColor = 'yellow';
+        if (typeof config.label_bg_color === 'string') {
+            state.config.labelBgColor = config.label_bg_color;
+        } else if (typeof config.label_bg_color !== 'undefined') {
+            logme('ERROR: Property config.label_bg_color is not of a supported type.');
+            returnStatus = false;
+        }
+
         if (state.config.targets.length === 0) {
             state.individualTargets = false;
         } else {

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

@@ -178,7 +178,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                 // icon. All the existing code will work, and the user will
                 // see a label instead of an icon.
                 if (obj.label.length > 0) {
-                    draggableObj.iconElBGColor = 'yellow';
+                    draggableObj.iconElBGColor = state.config.labelBgColor;
                     draggableObj.iconElPadding = 8;
                     draggableObj.iconElBorder = '1px solid black';
                     draggableObj.iconElLeftOffset = 9;
@@ -301,7 +301,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                         if (draggableObj.labelEl !== null) {
                             draggableObj.labelEl.detach();
                             draggableObj.labelEl.css(
-                                'background-color', 'yellow'
+                                'background-color', state.config.labelBgColor
                             );
                             draggableObj.labelEl.css(
                                 'padding-left', 8

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

@@ -168,7 +168,7 @@ define(['logme'], function (logme) {
                                 if (draggable.labelEl !== null) {
                                     draggable.labelEl.detach();
                                     draggable.labelEl.css(
-                                        'background-color', 'yellow'
+                                        'background-color', state.config.labelBgColor
                                     );
                                     draggable.labelEl.css(
                                         'padding-left', 8
@@ -282,7 +282,7 @@ define(['logme'], function (logme) {
                                 if (draggable.labelEl !== null) {
                                     draggable.labelEl.detach();
                                     draggable.labelEl.css(
-                                        'background-color', 'yellow'
+                                        'background-color', state.config.labelBgColor
                                     );
                                     draggable.labelEl.css(
                                         'padding-left', 8