BB-1025 Add visited hotspots styling (#56)

image_explorer/image_explorer.py

@@ -373,6 +373,8 @@ def _get_hotspots(self, xmltree, absolute_urls=False):
             if not hotspot.y.endswith('%'):
                 hotspot.y += 'px'  # px is deprecated as it is not responsive
 
+            hotspot.visited = hotspot.item_id in self.opened_hotspots
+
             hotspots.append(hotspot)
 
         return hotspots

image_explorer/public/css/image_explorer.css

@@ -64,7 +64,8 @@ div.image-explorer-hotspot a{
     text-decoration: underline;
 }
 
-.image-explorer-wrapper div.image-explorer-hotspot:hover {
+.image-explorer-wrapper div.image-explorer-hotspot:hover,
+.image-explorer-wrapper div.image-explorer-hotspot.visited {
     background-position: 0 -43px
 }
 

image_explorer/templates/html/image_explorer.html

@@ -9,7 +9,9 @@ <h2>{{title}}</h2>
     <div class="image-explorer-wrapper">
         <img src="{{background.src}}" class="image-explorer-background" />
         {% for hotspot in hotspots %}
-        <div class="image-explorer-hotspot {% if hotspot_coordinates_centered %}centered{% endif %}" style="position: absolute; top: {{hotspot.y}}; left: {{hotspot.x}};" data-item-id="{{hotspot.item_id}}">
+        <div class="image-explorer-hotspot {% if hotspot_coordinates_centered %}centered{% endif %}{% if hotspot.visited %} visited {% endif %}"
+             style="position: absolute; top: {{hotspot.y}}; left: {{hotspot.x}};"
+             data-item-id="{{hotspot.item_id}}">
                 <div class="image-explorer-hotspot-reveal" {{hotspot.reveal_style}} data-side="{{ hotspot.feedback.side }}">
                     <div class="image-explorer-close-reveal">&#xf057;</div>
                     <div class="image-explorer-hotspot-content-wrapper">

setup.py

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

tests/integration/test_image_explorer.py

@@ -47,6 +47,7 @@ def assert_only_hotspotA_revealed(self, block):
         self.assertIn("Below are some of the highlights:", block.hotspotA.content.text)
         self.assertIn("Once there was a police car up here", block.hotspotA.content.text)
         self.assertIn("Also there was a Fire Truck put up there", block.hotspotA.content.text)
+        self.assertIn('visited', block.hotspotA.get_attribute("class"))
 
     def assert_only_hotspotB_revealed(self, block):
         hs = self.hotspots(block)
@@ -57,6 +58,7 @@ def assert_only_hotspotB_revealed(self, block):
 
         self.assertIn("Watch the Red Line subway go around the dome", block.hotspotB.content.text)
         self.assertTrue(block.hotspotB.find_element_by_css_selector(".image-explorer-hotspot-reveal-youtube"))
+        self.assertIn('visited', block.hotspotB.get_attribute("class"))
 
     def test_simple_scenario(self):
         self.set_scenario_xml('<image-explorer/>')
@@ -65,6 +67,8 @@ def test_simple_scenario(self):
 
         self.assert_in_default_state(block)
 
+        self.assertNotIn('visited', block.hotspotA.get_attribute("class"))
+        self.assertNotIn('visited', block.hotspotB.get_attribute("class"))
         block.hotspotA.click()
         self.assert_only_hotspotA_revealed(block)
 

tests/unit/test_image_explorer.py

@@ -1,4 +1,5 @@
 import unittest
+from mock import patch
 from lxml import etree
 
 from parsel import Selector
@@ -129,3 +130,22 @@ def test_hotspot_coordinates_property(self):
 
         # for schema version 2 hotspot coordinates are centered
         self.assertTrue(image_explorer_block_schema2.hotspot_coordinates_centered)
+
+    @patch('image_explorer.image_explorer.ImageExplorerBlock._inner_content')
+    def test__get_hotspots(self, mock__inner_content):
+        """
+        Test _get_hotspots return all hotspots.
+        """
+        image_explorer_data = {'data': self.image_explorer_xml_version2}
+        image_explorer_block_schema2 = ImageExplorerBlock(
+            self.runtime,
+            DictFieldData(image_explorer_data),
+            None
+        )
+        hotspots = image_explorer_block_schema2._get_hotspots(xmltree=etree.fromstring(self.image_explorer_xml))
+        self.assertEqual(len(hotspots), 1)
+        self.assertFalse(hotspots[0].visited)
+        image_explorer_block_schema2.opened_hotspots.append('hotspotA')
+        hotspots = image_explorer_block_schema2._get_hotspots(xmltree=etree.fromstring(self.image_explorer_xml))
+        self.assertEqual(len(hotspots), 1)
+        self.assertTrue(hotspots[0].visited)