Issue 1868 - Handle <area> element properly when selected with "Block element"

include.postload.js

Index: include.postload.js
===================================================================
--- a/include.postload.js
+++ b/include.postload.js
@@ -334,10 +334,8 @@
   if (clickHide_activated || clickHideFiltersDialog)
     clickHide_deactivate();
 
-  // Add overlays for blockable elements that don't emit mouse events that they
-  // can still be selected. While images generally emit mouse events we have
-  // also to add overlays for them, in case <area> elments are used (#1868).
-  var elts = document.querySelectorAll('object,embed,iframe,frame,img');
+  // Add overlays for blockable elements that don't emit mouse events that they can still be selected

[kzar, 2015/02/09 17:24:41]

Nitpick: Should read "...so that they can still be selected"

[Sebastian Noack, 2015/02/10 10:19:27]

Done.

+  var elts = document.querySelectorAll('object,embed,iframe,frame');
   for(var i=0; i<elts.length; i++)
   {
     var element = elts[i];
@@ -408,17 +406,49 @@
   clickHide_mouseClick(ev);
 }
 
+function getBlockableElementOrAncestor(element)
+{
+  while (element && element != document.documentElement
+                 && element != document.body)
+  {
+    if (element instanceof HTMLElement && element.localName != "area")
+    {
+      // Handle <area> and their <map> elements specially,
+      // blocking the image they are associated with
+      if (element.localName == "map")
+      {
+        var images = document.querySelectorAll("img[usemap]");
+        for (var i = 0; i < images.length; i++)
+        {
+          var image = images[i];
+          var usemap = image.getAttribute("usemap");

[kzar, 2015/02/09 17:24:41]

Don't we need to check that usemap isn't null before we try to use its indexOf
and substr methods?

[Sebastian Noack, 2015/02/10 10:19:27]

Mind the CSS selector above, excluding elements without "usemap" attribute.

[kzar, 2015/02/10 11:03:01]

Ah OK

+          var index = usemap.indexOf("#");
+
+          if (index != -1 && usemap.substr(index + 1) == element.name)
+            return getBlockableElementOrAncestor(image);
+        }
+
+        return null;
+      }
+
+      if (isBlockable(element))
+        return element;
+    }
+
+    element = element.parentElement;
+  }
+
+  return null;
+}
+
+
 // Hovering over an element so highlight it
 function clickHide_mouseOver(e)
 {
   if (clickHide_activated == false)
     return;
 
-  var target = e.target;
-  while (target.parentNode && !(target instanceof HTMLElement && isBlockable(target)))
-    target = target.parentNode;
-  if (target == document.documentElement || target == document.body)
-    target = null;
+  var target = getBlockableElementOrAncestor(e.target);
 
   if (target)
   {
@@ -683,7 +713,7 @@
         if(lastRightClickEvent)
         {
           clickHide_activated = true;
-          currentElement = lastRightClickEvent.target;
+          currentElement = getBlockableElementOrAncestor(lastRightClickEvent.target);
           clickHide_mouseClick(lastRightClickEvent);
         }
         break;