BUG: highlight() should not highlight outside container

src/highlight.js

@@ -11,7 +11,7 @@ var container_options = {
 export function highlight(options) {
   this.each(function() {
     var settings = $.extend({}, container_options, options, this.dataset)
-
+    var container = this
     // Loop through all triggers in the container. This may include the container itself
     findall($(this), settings.selector).each(function () {
       var opts = $.extend({}, settings, this.dataset)
@@ -19,7 +19,7 @@ export function highlight(options) {
       var event = opts.mode == 'click' ? 'click.g1.highlight' : 'mouseenter.g1.highlight mouseleave.g1.highlight'
       $this.on(event, function () {
         // When the trigger is triggered, toggle the target classes and fire a highlight event
-        var target = $(opts.target).toggleClass(opts.classes)
+        var target = $(opts.target, container).toggleClass(opts.classes)
         $this.trigger({ type: 'highlight', target: target })
       })
     })

test/test-highlight.html

@@ -16,22 +16,28 @@
   </script>
 
   <div class="container1">
-    <div data-toggle="highlight" class="trigger1" data-target=".target1">trigger</div>
-    <em class="target1">target</em>
-    <div data-toggle="highlight" class="trigger2" data-target=".target2" data-mode="click">trigger</div>
-    <em class="target2">target</em>
-    <div data-toggle="highlight" class="trigger3" data-target=".target3" data-classes="blue">trigger</div>
-    <em class="target3">target</em>
+    <div data-toggle="highlight" class="trigger1" data-target=".target1">trigger1</div>
+    <em class="target1">target1</em>
+    <div data-toggle="highlight" class="trigger2" data-target=".target2" data-mode="click">trigger2</div>
+    <em class="target2">target2</em>
+    <div data-toggle="highlight" class="trigger3" data-target=".target3" data-classes="blue">trigger3</div>
+    <em class="target3">target3</em>
   </div>
   <div class="container2" data-selector=".trigger4" data-mode="click" data-classes="blue" data-target=".target4">
-    <div class="trigger4">trigger</div>
-    <em class="target4">target</em>
+    <div class="trigger4">trigger4</div>
+    <em class="target4">target4</em>
   </div>
   <div class="container3">
-    <div class="trigger5">trigger</div>
-    <em class="target5">target</em>
+    <div class="trigger5">trigger5</div>
+    <em class="target5">target5</em>
+  </div>
+  <div class="container4">
+    <div data-toggle="highlight" class="trigger6" data-target=".target6">trigger6</div>
+    <em class="target6">target6</em>
   </div>
   <script>
+    // In the container, trigger the event on the trigger selector.
+    // Ensure that the target has classes
     function check(container, trigger, event, classes) {
       return function(t) {
         container.one('highlight', function(e) {
@@ -50,7 +56,7 @@
     tape('$().highlight() class enter', check($container1, '.trigger3', 'mouseenter', '.target3.blue'))
     tape('$().highlight() class leave', check($container1, '.trigger3', 'mouseleave', '.target3'))
 
-    // Test container attributes
+    // // Test container attributes
     var $container2 = $('.container2').highlight()
     tape('$().highlight() container click', check($container2, '.trigger4', 'click', '.target4.blue'))
     tape('$().highlight() container click', check($container2, '.trigger4', 'click', '.target4'))
@@ -62,8 +68,22 @@
       classes: 'blue',
       target: '.target5'
     })
+
+    // Test highlight options
+    var $container3 = $('.container3').highlight({
+      selector: '.trigger4',
+      mode: 'click',
+      classes: 'blue',
+      target: '.target4'
+    })
+
     tape('$().highlight() container click', check($container3, '.trigger5', 'click', '.target5.blue'))
     tape('$().highlight() container click', check($container3, '.trigger5', 'click', '.target5'))
-</script>
+
+    // Test running highlight on parent of data-highlight="container"
+    var $body = $('body').highlight()
+    tape('$().highlight() enter', check($('.container4'), '.trigger6', 'mouseenter', '.target6.active'))
+    tape('$().highlight() leave', check($('.container4'), '.trigger6', 'mouseleave', '.target6'))
+  </script>
 </body>
 </html>