Merge pull request #18 from edx-solutions/hide-zone-labels

Hide zone labels

drag_and_drop_v2/drag_and_drop_v2.py

@@ -236,7 +236,7 @@ class DragAndDropBlock(XBlock):
             unique_id = self.location.name
         except AttributeError:
             # workaround for xblock workbench
-            unique_id = self.parent.replace('.',  '-')
+            unique_id = self.parent and self.parent.replace('.',  '-')
         return unique_id
 
     @staticmethod

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -83,7 +83,6 @@
     float: left;
     margin: 10px 0 15px 5px;
     background: #fff;
-    z-index: 1;
 }
 
 .xblock--drag-and-drop .target-img {
@@ -120,6 +119,7 @@
 }
 
 .xblock--drag-and-drop .zone p {
+    visibility: hidden;
     width: 100%;
     font-family: Arial;
     font-size: 16px;
@@ -153,7 +153,6 @@
     top: 5%;
     right: 5%;
     background: none repeat scroll 0 0 #66A5B5;
-    opacity: 0.9;
     width: 500px;
     max-width: 90%;
     min-height: 50px;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -73,6 +73,11 @@ function DragAndDropBlock(runtime, element) {
                 // Set the target image
                 if (_fn.data.targetImg)
                     _fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
+
+                // Display the zone names if required
+                if (_fn.data.displayLabels) {
+                    $('p', _fn.$zones).css('visibility', 'visible');
+                }
             },
 
             finish: function(final_feedback) {

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -61,6 +61,10 @@ function DragAndDropEditBlock(runtime, element) {
                             _fn.$target.css('background', 'url(' + _fn.data.targetImg + ') no-repeat');
                         }
 
+                        if (_fn.data.displayLabels) {
+                            _fn.data.displayLabels = $('.display-labels-form input', element).prop('checked', true);
+                        }
+
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
 
@@ -110,6 +114,9 @@ function DragAndDropEditBlock(runtime, element) {
 
                             // Placeholder shim for IE9
                             $.placeholder.shim();
+                        })
+                        .on('click', '.display-labels-form input', function(e) {
+                            _fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');
                         });
 
                     $itemTab

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -43,6 +43,10 @@
                     <input type="text">
                     <button class="btn">Change background</button>
                 </section>
+                <section class="tab-content display-labels-form">
+                    <label for="display-labels">Display label names on the image:</label>
+                    <input name="display-labels" id="display-labels" type="checkbox" />
+                </section>
                 <div class="items">
                     <form class="zones-form"></form>
                     <a href="#" class="add-zone add-element"><div class="icon add"></div>Add a zone</a>

tests/test_drag_and_drop_v2.py

 import logging
 import json
-import re
-import datetime
-import time
-import json
 from webob import Request
-from mock import Mock, patch
+from mock import Mock
 
 from workbench.runtime import WorkbenchRuntime
 from xblock.runtime import KvsFieldData, DictKeyValueStore
 
 from nose.tools import (
     assert_equals, assert_true, assert_false,
-    assert_in, assert_regexp_matches
+    assert_in
 )
 
 import drag_and_drop_v2
@@ -22,10 +18,11 @@ import drag_and_drop_v2
 logging.disable(logging.DEBUG)
 
 
-def make_request(body):
+def make_request(body, method='POST'):
     request = Request.blank('/')
     request.method = 'POST'
     request.body = body.encode('utf-8')
+    request.method = method
     return request