Set up basic infrastructure for theming.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -25,7 +25,8 @@ loader = ResourceLoader(__name__)
 
 # Classes ###########################################################
 
-class DragAndDropBlock(XBlock):
+@XBlock.wants('settings')
+class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
     """
     XBlock providing a Drag and Drop question
     """
@@ -103,6 +104,7 @@ class DragAndDropBlock(XBlock):
         default=False,
     )
 
+    block_settings_key = 'drag-and-drop-v2'
     has_score = True
 
     def _(self, text):
@@ -132,6 +134,8 @@ class DragAndDropBlock(XBlock):
         for js_url in js_urls:
             fragment.add_javascript_url(self.runtime.local_resource_url(self, js_url))
 
+        self.include_theme_files(fragment)
+
         fragment.initialize_js('DragAndDropBlock', self.get_configuration())
 
         return fragment

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -39,10 +39,6 @@
     background: #ebf0f2;
 }
 
-/*.xblock--drag-and-drop .clear {
-    clear: both;
-}*/
-
 /** Draggable Items **/
 .xblock--drag-and-drop .item-bank {
     display: -ms-flexbox;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -303,7 +303,7 @@ function DragAndDropBlock(runtime, element, configuration) {
 
         // Make zone accept items that are dropped using the mouse
         $root.find('.zone').droppable({
-            accept: '.xblock--drag-and-drop .item-bank .option',
+            accept: '.item-bank .option',
             tolerance: 'pointer',
             drop: function(evt, ui) {
                 var $zone = $(this);
@@ -331,9 +331,9 @@ function DragAndDropBlock(runtime, element, configuration) {
             // Make item draggable using the mouse
             try {
                 $item.draggable({
-                    containment: $root.find('.xblock--drag-and-drop .drag-container'),
+                    containment: $root.find('.drag-container'),
                     cursor: 'move',
-                    stack: $root.find('.xblock--drag-and-drop .item-bank .option'),
+                    stack: $root.find('.item-bank .option'),
                     revert: 'invalid',
                     revertDuration: 150,
                     start: function(evt, ui) {

drag_and_drop_v2/public/js/view.js

@@ -199,7 +199,7 @@
         var items_placed = $.grep(ctx.items, is_item_placed);
         var items_in_bank = $.grep(ctx.items, is_item_placed, true);
         return (
-            h('section.xblock--drag-and-drop', [
+            h('section.themed-xblock.xblock--drag-and-drop', [
                 problemHeader,
                 h('section.problem', {role: 'application'}, [
                     questionHeader,

drag_and_drop_v2/templates/html/drag_and_drop.html

 {% load i18n %}
-<section class="xblock--drag-and-drop">
+<section class="themed-xblock xblock--drag-and-drop">
     <i class="fa fa-spin fa-spinner initial-load-spinner"></i>{% trans "Loading drag and drop exercise." %}
 </section>

tests/integration/test_base.py

@@ -18,7 +18,7 @@ loader = ResourceLoader(__name__)
 
 
 class BaseIntegrationTest(SeleniumBaseTest):
-    default_css_selector = 'section.xblock--drag-and-drop'
+    default_css_selector = 'section.themed-xblock.xblock--drag-and-drop'
     module_name = __name__
 
     _additional_escapes = {

tests/unit/test_basics.py

@@ -17,7 +17,7 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
     def test_template_contents(self):
         context = {}
         student_fragment = self.block.runtime.render(self.block, 'student_view', context)
-        self.assertIn('<section class="xblock--drag-and-drop">', student_fragment.content)
+        self.assertIn('<section class="themed-xblock xblock--drag-and-drop">', student_fragment.content)
         self.assertIn('Loading drag and drop exercise.', student_fragment.content)
 
     def test_get_configuration(self):