Image Annotation Tool: Add linkback functionality to image thumbnails

Changes requested in PR

AUTHORS

@@ -147,3 +147,4 @@ David Bodor <david.gabor.bodor@gmail.com>
 Sébastien Hinderer <Sebastien.Hinderer@inria.fr>
 Kristin Stephens <ksteph@cs.berkeley.edu>
 Ben Patterson <bpatterson@edx.org>
+Luis Duarte <lduarte1991@gmail.com>

CHANGELOG.rst

@@ -754,3 +754,5 @@ LMS: Option to email students when enroll/un-enroll them.
 
 Blades: Added WAI-ARIA markup to the video player controls. These are now fully
 accessible by screen readers.
+
+Common: Added advanced_module for annotating images to go with the ones for text and videos.

common/lib/xmodule/xmodule/annotator_mixin.py

@@ -50,6 +50,6 @@ class MLStripper(HTMLParser):
 
 def html_to_text(html):
     "strips the html tags off of the text to return plaintext"
-    htmlStripper = MLStripper()
-    htmlStripper.feed(html)
-    return htmlStripper.get_data()
+    htmlstripper = MLStripper()
+    htmlstripper.feed(html)
+    return htmlstripper.get_data()

common/lib/xmodule/xmodule/annotator_token.py

@@ -23,8 +23,8 @@ def retrieve_token(userid, secret):
     dtnow = datetime.datetime.now()
     dtutcnow = datetime.datetime.utcnow()
     delta = dtnow - dtutcnow
-    newhour, newmin = divmod((delta.days * 24 * 60 * 60 + delta.seconds + 30) // 60, 60)  # pylint: disable=E1103
-    newtime = "%s%+02d:%02d" % (dtnow.isoformat(), newhour, newmin)  # pylint: disable=E1103
+    newhour, newmin = divmod((delta.days * 24 * 60 * 60 + delta.seconds + 30) // 60, 60)
+    newtime = "%s%+02d:%02d" % (dtnow.isoformat(), newhour, newmin)
     # uses the issued time (UTC plus timezone), the consumer key and the user's email to maintain a
     # federated system in the annotation backend server
     custom_data = {"issuedAt": newtime, "consumerKey": secret, "userId": userid, "ttl": 86400}

common/lib/xmodule/xmodule/imageannotation_module.py

-# pylint: disable=W0223
 """
 Module for Image annotations using annotator.
 """
@@ -48,8 +47,18 @@ class AnnotatableFields(object):
         scope=Scope.settings,
         default='professor:green,teachingAssistant:blue',
     )
-    annotation_storage_url = String(help="Location of Annotation backend", scope=Scope.settings, default="http://your_annotation_storage.com", display_name="Url for Annotation Storage")
-    annotation_token_secret = String(help="Secret string for annotation storage", scope=Scope.settings, default="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", display_name="Secret Token String for Annotation")
+    annotation_storage_url = String(
+        help="Location of Annotation backend",
+        scope=Scope.settings,
+        default="http://your_annotation_storage.com",
+        display_name="Url for Annotation Storage"
+    )
+    annotation_token_secret = String(
+        help="Secret string for annotation storage",
+        scope=Scope.settings,
+        default="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+        display_name="Secret Token String for Annotation"
+    )
 
 
 class ImageAnnotationModule(AnnotatableFields, XModule):
@@ -96,7 +105,7 @@ class ImageAnnotationModule(AnnotatableFields, XModule):
         return self.system.render_template('imageannotation.html', context)
 
 
-class ImageAnnotationDescriptor(AnnotatableFields, RawDescriptor):
+class ImageAnnotationDescriptor(AnnotatableFields, RawDescriptor):  # pylint: disable=abstract-method
     ''' Image annotation descriptor '''
     module_class = ImageAnnotationModule
     mako_template = "widgets/raw-edit.html"

common/lib/xmodule/xmodule/tests/test_annotator_mixin.py

@@ -23,17 +23,18 @@ class HelperFunctionTest(unittest.TestCase):
 
     def test_get_instructions(self):
         """
-        Function takes in an input of a specific xml string with surrounding instructions tags and returns a valid html string.
+        Function takes in an input of a specific xml string with surrounding instructions
+        tags and returns a valid html string.
         """
         xmltree = etree.fromstring(self.sample_xml)
 
         expected_xml = u"<div><p>Helper Test Instructions.</p></div>"
-        actual_xml = get_instructions(xmltree)  # pylint: disable=W0212
+        actual_xml = get_instructions(xmltree)
         self.assertIsNotNone(actual_xml)
         self.assertEqual(expected_xml.strip(), actual_xml.strip())
 
         xmltree = etree.fromstring('<annotatable>foo</annotatable>')
-        actual = get_instructions(xmltree)  # pylint: disable=W0212
+        actual = get_instructions(xmltree)
         self.assertIsNone(actual)
 
     def test_get_extension(self):
@@ -42,8 +43,8 @@ class HelperFunctionTest(unittest.TestCase):
         """
         expectedyoutube = 'video/youtube'
         expectednotyoutube = 'video/mp4'
-        result1 = get_extension(self.sample_sourceurl)  # pylint: disable=W0212
-        result2 = get_extension(self.sample_youtubeurl)  # pylint: disable=W0212
+        result1 = get_extension(self.sample_sourceurl)
+        result2 = get_extension(self.sample_youtubeurl)
         self.assertEqual(expectedyoutube, result2)
         self.assertEqual(expectednotyoutube, result1)
 

common/lib/xmodule/xmodule/tests/test_annotator_token.py

@@ -12,9 +12,12 @@ class TokenRetriever(unittest.TestCase):
     """
     def test_token(self):
         """
-        Test for the token generator. Give an a random username and secret token, it should create the properly encoded string of text.
+        Test for the token generator. Give an a random username and secret token,
+        it should create the properly encoded string of text.
         """
         expected = "eyJhbGciOiAiSFMyNTYiLCAidHlwIjogIkpXVCJ9.eyJpc3N1ZWRBdCI6ICIyMDE0LTAyLTI3VDE3OjAwOjQyLjQwNjQ0MSswOjAwIiwgImNvbnN1bWVyS2V5IjogImZha2Vfc2VjcmV0IiwgInVzZXJJZCI6ICJ1c2VybmFtZSIsICJ0dGwiOiA4NjQwMH0.Dx1PoF-7mqBOOSGDMZ9R_s3oaaLRPnn6CJgGGF2A5CQ"
         response = retrieve_token("username", "fake_secret")
+
+        # because the middle hashes are dependent on time, conly the header and footer are checked for secret key
         self.assertEqual(expected.split('.')[0], response.split('.')[0])
         self.assertNotEqual(expected.split('.')[2], response.split('.')[2])

common/lib/xmodule/xmodule/tests/test_imageannotation.py

 # -*- coding: utf-8 -*-
-"Test for Image Annotation Xmodule functional logic."
+"""Test for Image Annotation Xmodule functional logic."""
 
 import unittest
 from mock import Mock
@@ -61,12 +61,12 @@ class ImageAnnotationModuleTestCase(unittest.TestCase):
         xmltree = etree.fromstring(self.sample_xml)
 
         expected_xml = u"<div><p>Image Test Instructions.</p></div>"
-        actual_xml = self.mod._extract_instructions(xmltree)  # pylint: disable=W0212
+        actual_xml = self.mod._extract_instructions(xmltree)  # pylint: disable=protected-access
         self.assertIsNotNone(actual_xml)
         self.assertEqual(expected_xml.strip(), actual_xml.strip())
 
         xmltree = etree.fromstring('<annotatable>foo</annotatable>')
-        actual = self.mod._extract_instructions(xmltree)  # pylint: disable=W0212
+        actual = self.mod._extract_instructions(xmltree)  # pylint: disable=protected-access
         self.assertIsNone(actual)
 
     def test_get_html(self):

common/lib/xmodule/xmodule/tests/test_videoannotation.py

@@ -66,6 +66,6 @@ class VideoAnnotationModuleTestCase(unittest.TestCase):
         """
         Tests to make sure variables passed in truly exist within the html once it is all rendered.
         """
-        context = self.mod.get_html()  # pylint: disable=W0212
+        context = self.mod.get_html()
         for key in ['display_name', 'instructions_html', 'sourceUrl', 'typeSource', 'poster', 'annotation_storage']:
             self.assertIn(key, context)

common/lib/xmodule/xmodule/videoannotation_module.py

@@ -68,9 +68,9 @@ class VideoAnnotationModule(AnnotatableFields, XModule):
         """ Removes <instructions> from the xmltree and returns them as a string, otherwise None. """
         return get_instructions(xmltree)
 
-    def _get_extension(self, srcurl):
+    def _get_extension(self, src_url):
         ''' get the extension of a given url '''
-        return get_extension(srcurl)
+        return get_extension(src_url)
 
     def get_html(self):
         """ Renders parameters to template. """

common/static/css/vendor/ova/richText-annotator.css

@@ -16,10 +16,6 @@
 	font-style: italic;
 }
 
-.annotator-wrapper .mce-container {
-	z-index: 3000000000!important; /*To fix full-screen problems*/
-}
-
 .mce-container-body {
 	min-width: 400px;
 }
@@ -29,6 +25,10 @@
 	min-width: 400px;
 }
 
+.mce-floatpanel {
+	z-index: 700000000!important;
+}
+
 div.mce-tinymce.mce-container.mce-panel {
 	min-width:400px;
 }

common/static/js/vendor/ova/catch/css/main.css

@@ -225,7 +225,14 @@
    margin-top: 15px;
 }
 
-#mainCatch .playMediaButton {
+#mainCatch .zoomToImageBounds {
+   width: 20em;
+   text-align:center;
+   margin-top: 15px;
+   margin-bottom: 5px;
+}
+
+#mainCatch .playMediaButton, #mainCatch .zoomToImageBounds {
    border-top: 2px solid #d3bd89;
    border-bottom: 2px solid #b3ad69;
    border-right: 2px solid #b3ad69;
@@ -242,7 +249,7 @@
    border-radius: 24px;
    color: #000000;
    }
-#mainCatch .playMediaButton:hover {
+#mainCatch .playMediaButton:hover, #mainCatch .zoomToImageBounds:hover  {
    border-top: 2px solid #d3bd89;
    border-bottom: 2px solid #b3ad69;
    border-right: 2px solid #b3ad69;
@@ -250,7 +257,7 @@
    background: #f5c105;
    color: #080708;
    }
-#mainCatch .playMediaButton:active {
+#mainCatch .playMediaButton:active, #mainCatch .zoomToImageBounds:active  {
    border-top: 2px solid #d3bd89;
    border-bottom: 2px solid #b3ad69;
    border-right: 2px solid #b3ad69;

common/static/js/vendor/ova/catch/js/catch.js

@@ -222,7 +222,11 @@ annotationDetail:
         '</div>'+
     '{{/if}}'+
     '{{#if mediatypeforgrid.image}}'+
-        '<img src="http://www.paraemigrantes.com/wp-content/themes/daily/images/default-thumb.gif">'+
+        '<div class="zoomToImageBounds">'+
+            '<img src="{{{ thumbnailLink }}}">'+
+            '<span class="idAnnotation" style="display:none">{{{ id }}}</span>'+
+            '<span class="uri" style="display:none">{{{uri}}}</span>'+
+        '</div>'+
     '{{/if}}'+
         '<div class="body">'+
             '{{{ text }}}'+
@@ -254,10 +258,6 @@ annotationDetail:
     '{{/if}}'+
 
         '<div class="controlPanel">'+
-            //'<img class="privacy_button" src="'+root+'privacy_icon.png" width="36" height="36" alt="Privacy Settings" title="Privacy Settings">'+
-//            '<img class="groups_button" src="'+root+'groups_icon.png" width="36" height="36" alt="Groups Access" title="Groups Access">'+
-//            '<img class="reply_button" src="'+root+'groups_icon.png" width="36" height="36" alt="Reply" title="Reply" idAnnotation="{{{ id }}}">'+
-            //'<img class="share_button" src="'+root+'share_icon.png" width="36" height="36" alt="Share Annotation" title="Share Annotation"/>'+
         '</div>'+
     '</div>',
 };
@@ -412,18 +412,19 @@ CatchAnnotation.prototype = {
         el.off();
         
         //Bind functions
-        var openAnnotationItem = this.__bind(this._openAnnotationItem,this),
-        closeAnnotationItem = this.__bind(this._closeAnnotationItem,this),
-            onGeolocationClick = this.__bind(this._onGeolocationClick,this),
-            onPlaySelectionClick = this.__bind(this._onPlaySelectionClick,this),
-            onShareControlsClick = this.__bind(this._onShareControlsClick,this),
-            onSelectionButtonClick = this.__bind(this._onSelectionButtonClick,this),
-            onPublicPrivateButtonClick = this.__bind(this._onPublicPrivateButtonClick,this),
-            onQuoteMediaButton = this.__bind(this._onQuoteMediaButton,this),
-            onControlRepliesClick = this.__bind(this._onControlRepliesClick,this),
-            onMoreButtonClick = this.__bind(this._onMoreButtonClick,this),
+        var openAnnotationItem = this.__bind(this._openAnnotationItem, this),
+        closeAnnotationItem = this.__bind(this._closeAnnotationItem, this),
+            onGeolocationClick = this.__bind(this._onGeolocationClick, this),
+            onPlaySelectionClick = this.__bind(this._onPlaySelectionClick, this),
+            onShareControlsClick = this.__bind(this._onShareControlsClick, this),
+            onSelectionButtonClick = this.__bind(this._onSelectionButtonClick, this),
+            onPublicPrivateButtonClick = this.__bind(this._onPublicPrivateButtonClick, this),
+            onQuoteMediaButton = this.__bind(this._onQuoteMediaButton, this),
+            onControlRepliesClick = this.__bind(this._onControlRepliesClick, this),
+            onMoreButtonClick = this.__bind(this._onMoreButtonClick, this),
             onSearchButtonClick = this.__bind(this._onSearchButtonClick, this),
-            onDeleteReplyButtonClick = this.__bind(this._onDeleteReplyButtonClick,this);
+            onDeleteReplyButtonClick = this.__bind(this._onDeleteReplyButtonClick, this),
+            onZoomToImageBoundsButtonClick = this.__bind(this._onZoomToImageBoundsButtonClick, this);
     
         //Open Button
         el.on("click", ".annotationItem .annotationRow", openAnnotationItem);
@@ -444,6 +445,12 @@ CatchAnnotation.prototype = {
             el.on("click",".annotationItem .annotationDetail .quote", onQuoteMediaButton);
         }
 
+        //IMAGE
+        if (this.options.media=='image') {
+            //PlaySelection button
+            el.on("click",".annotationItem .annotationDetail .zoomToImageBounds", onZoomToImageBoundsButtonClick);
+        }
+        
         //controlReplies
         el.on("click",".annotationItem .controlReplies", onControlRepliesClick);
         
@@ -651,6 +658,10 @@ CatchAnnotation.prototype = {
         item.mediatypeforgrid = {};
         item.mediatypeforgrid[item.media] = true;
 
+        if (item.mediatypeforgrid.image) {
+            item.thumbnailLink = item.target.thumb;
+        };
+
         //Flags
         if(!this.options.flags && typeof item.tags != 'undefined' && item.tags.length > 0){
             for(var len=item.tags.length, index = len-1; index >= 0; --index){
@@ -751,6 +762,26 @@ CatchAnnotation.prototype = {
             }
         }
     },
+    _onZoomToImageBoundsButtonClick: function(evt){
+        var zoomToBounds = $(evt.target).hasClass('zoomToImageBounds')?$(evt.target):$(evt.target).parents('.zoomToImageBounds:first'),
+            osdaId = zoomToBounds.find('.idAnnotation').html(),
+            uri = zoomToBounds.find('.uri').html();
+
+        var allannotations = this.annotator.plugins['Store'].annotations,
+            osda = this.annotator.osda;
+
+        for(var item in allannotations){
+            var an = allannotations[item];
+            if (typeof an.id!='undefined' && an.id == osdaId){//this is the annotation
+                var bounds = new OpenSeadragon.Rect(an.bounds.x, an.bounds.y, an.bounds.width, an.bounds.height);
+                osda.viewer.viewport.fitBounds(bounds, false);
+
+                console.log(an.target.container);
+                $('html,body').animate({scrollTop: $("#"+an.target.container).offset().top},
+                                        'slow');
+            }
+        }
+    },
     _onQuoteMediaButton: function(evt){
         var quote = $(evt.target).hasClass('quote')?$(evt.target):$(evt.target).parents('.quote:first'),
             id = quote.find('.idAnnotation').html(),

common/static/js/vendor/ova/richText-annotator.js

@@ -78,7 +78,6 @@ Annotator.Plugin.RichText = (function(_super) {
 		
 		annotator.subscribe("annotationEditorShown", function(){
 			$(annotator.editor.element).find('.mce-tinymce')[0].style.display='block';
-			$(annotator.editor.element).find('.mce-container').css('z-index',3000000000);
 			annotator.editor.checkOrientation();
 		});
 		annotator.subscribe("annotationEditorHidden", function(){
@@ -91,9 +90,6 @@ Annotator.Plugin.RichText = (function(_super) {
 				//set the modification in the textarea of annotator
 				$(editor.element).find('textarea')[0].value = tinymce.activeEditor.getContent();
 			});
-			ed.on('Init', function(ed){
-				$('.mce-container').css('z-index','3090000000000000000');
-			});
 			//New button to add Rubrics of the url https://gteavirtual.org/rubric
 		    ed.addButton('rubric', {
 		        icon: 'rubric',

lms/templates/imageannotation.html

@@ -35,6 +35,7 @@
                 <script type="text/javascript" src="${static.url('js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js', raw=True)}" />
             </div> 
 			<div id="catchDIV">
+                ## Translators: Notes below refer to annotations. They wil later be put under a "Notes" section.
 				<div class="annotationListContainer">${_('You do not have any notes.')}</div>
 			</div>
 		</div>