Merge pull request #83 from edx-solutions/shafqat/YONK-1735

YONK-1735 - Trigger popup overlap fix

image_explorer/image_explorer.py

@@ -28,6 +28,7 @@
 import uuid
 import logging
 import textwrap
+import pkg_resources
 from six.moves import urllib
 from six import StringIO
 from parsel import Selector
@@ -53,6 +54,7 @@ class ImageExplorerBlock(XBlock):  # pylint: disable=no-init
     """
 
     has_score = True
+    has_author_view = True
     completion_mode = XBlockCompletionMode.COMPLETABLE
 
     display_name = String(
@@ -132,8 +134,14 @@ def hotspot_coordinates_centered(self):
 
         return schema_version > 1
 
+    def author_view(self, context=None):
+        """
+        Renders the Studio preview view.
+        """
+        return self.student_view(context, authoring=True)
+
     @XBlock.supports("multi_device")  # Mark as mobile-friendly
-    def student_view(self, context):
+    def student_view(self, context, authoring=False):
         """
         Player view, displayed to the student
         """
@@ -178,7 +186,8 @@ def student_view(self, context):
                 i18n_service=self.runtime.service(self, 'i18n')
             )
         )
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/image_explorer.css'))
+        hotspot_image_url = self.runtime.local_resource_url(self, 'public/images/hotspot-sprite.png')
+        fragment.add_css(self.resource_string('public/css/image_explorer.css'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/image_explorer.js'))
         if has_youtube:
             fragment.add_javascript_url('https://www.youtube.com/iframe_api')
@@ -189,7 +198,8 @@ def student_view(self, context):
             )
             fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/ooyala_player.js'))
 
-        fragment.initialize_js('ImageExplorerBlock')
+        fragment.initialize_js('ImageExplorerBlock', {'hotspot_image': hotspot_image_url,
+                                                      'authoring_view': 'true' if authoring else 'false'})
 
         return fragment
 
@@ -453,3 +463,8 @@ def _collect_video_elements(hotspot, feedback):
     def workbench_scenarios():
         """A canned scenario for display in the workbench."""
         return [("Image explorer scenario", "<vertical_demo><image-explorer/></vertical_demo>")]
+
+    def resource_string(self, path):  # pylint: disable=no-self-use
+        """Handy helper for getting resources from our kit."""
+        data = pkg_resources.resource_string(__name__, path)
+        return data.decode("utf8")

image_explorer/public/css/image_explorer.css

@@ -42,7 +42,6 @@
 
 
 .image-explorer-wrapper button.image-explorer-hotspot {
-    background: url("../images/hotspot-sprite.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
     width: 41px;
     height: 41px;
     display: block;

image_explorer/public/js/image_explorer.js

@@ -1,5 +1,12 @@
-function ImageExplorerBlock(runtime, element) {
+function applyHotspotButtonStyle(element, data) {
+   $(".image-explorer-wrapper button.image-explorer-hotspot", element).css("background", "url("+data['hotspot_image']+") no-repeat scroll 0 0 rgba(0, 0, 0, 0)");
+}
+
+function ImageExplorerBlock(runtime, element, data) {
 
+    if (data['authoring_view'] === 'true') {
+        applyHotspotButtonStyle(element, data);
+    }
     var hotspot_opened_at = null;
     var active_feedback = null;
     // Holds a reference to YouTube API Player objects.

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, root_list):
 
 setup(
     name='xblock-image-explorer',
-    version='1.1.18',
+    version='1.2',
     description='XBlock - Image Explorer',
     packages=['image_explorer'],
     install_requires=[