INS-3083: Use smallbox highlighting (#52)

* INS-3083: Use smallbox highlighting

Instead of using custom callbacks and styles for highlighting issues, use the smallbox defaults.

* Reverted formatting

* Added missing required parameters to highlighting

siteimprove/admin/css/siteimprove-preview.css

@@ -8,51 +8,3 @@
 #wpadminbar .quicklinks>ul>li.siteimprove-trigger-contentcheck>a {
   padding-left: 30px;
 }
-@keyframes highlight-blink {
-  50% {
-    background-color: rgba(0, 0, 0, 0);
-    border-color: rgba(0, 0, 0, 0);
-  }
-}
-
-.si-highlight {
-	background-color: rgba(221, 10, 27, 0.2);
-	border: 2px solid #DD0A1B;
-	animation-name: highlight-blink;
-	animation-duration: 0.4s;
-	animation-iteration-count: 4;
-	animation-timing-function: ease;
-}
-
-body.si-full-highlight {
-  position: relative;
-}
-
-/* For highlighting of the body, we don't want to wrap an element around the body itself, 
-as that will cause a re-render of the page of our CMS Plugin, body has to be the first element as well
-So instead we add a class to body, and in it we got a pseudo element that is ontop of the body's children */
-body.si-full-highlight:before {
-  content: "";
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  z-index: 9999;
-  background-color: rgba(221, 10, 27, 0.2);
-  border: 2px solid #DD0A1B;
-  animation-name: highlight-blink;
-  animation-duration: 0.4s;
-  animation-iteration-count: 4;
-  animation-timing-function: ease;
-}
-
-.si-overlay {
-  position:absolute;
-  top:0;
-  left:0;
-  right:0;
-  bottom:0;
-  background-color:rgba(0, 0, 0, 0.55);
-  background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
-  z-index:100000;
-  color:white;
-}

siteimprove/admin/js/siteimprove.js

@@ -102,63 +102,7 @@
       }
 
       _si.push(['onHighlight', function(highlightInfo) {
-          // Function to wrap a specific text node within an element with a new element
-          function wrapTextNode(element, from, length, wrapTag) {
-              $(element).contents().each(function() {
-                  // 3 = text node
-                  if (this.nodeType === 3 && this.nodeValue) {
-                      if (from < this.nodeValue.length) {
-                          var before = this.nodeValue.substr(0, from);
-                          var middle = this.nodeValue.substr(from, length);
-                          var after = this.nodeValue.substr(from + length);
-                          $(this).before(before).before(wrapTag.clone().text(middle)).before(after).remove();
-                          // Break out of the each loop
-                          return false;
-                      } else {
-                          from -= this.nodeValue.length;
-                      }
-                  }
-              });
-          }
-
-          function resetHighlights() {
-            $(".si-highlight").each(function() {
-              // This takes the element of the .si-highlight inner HTML and replaces the element with it
-              $(this).replaceWith($(this).html());
-            });
-            // We handle body tag highlight specificially, so we also need to remove it specificially from HTML element
-            if($("body").hasClass("si-full-highlight")) {
-              $("body").removeClass("si-full-highlight");
-            }
-          }
-
-          function applyHighlights() {
-            var wrapTag = $("<span class='si-highlight'></span>");
-            // Apply new highlights based on the information received
-            $.each(highlightInfo.highlights, function(index, highlight) {
-                var $element = $(highlight.selector);
-                if (highlight.offset) {
-                    wrapTextNode($element[0], highlight.offset.start, highlight.offset.length, wrapTag);
-                } else {
-                    if ($element.is('body')) {
-                      // Add the class to the HTML tag instead, so we can have full height of the highlight
-                      $element.addClass("si-full-highlight");
-                    }
-                    else if ($element.is('img') || $element.children().is("img")) {
-                      $element.wrap("<div class='si-highlight' style='padding: 5px;'></div>");
-                    } else {
-                      $element.wrapInner("<span class='si-highlight'></span>");
-                    }
-                }
-            });
-          }
-
-          resetHighlights();
-          applyHighlights();
-          // Scroll to the target element
-          $([document.documentElement, document.body]).stop().animate({
-              scrollTop: $(".si-highlight").offset().top - $("#wpadminbar").height()
-          }, 1500);
+        _si.push(["applyDefaultHighlighting", highlightInfo, document, window]);
       }]);