Commit ddec8083 authored by S Anand's avatar S Anand
Browse files

BUG: highlight() should not highlight outside container

parent d60c4929
Pipeline #45249 failed with stage
in 0 seconds
......@@ -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 = $(
var target = $(, container).toggleClass(opts.classes)
$this.trigger({ type: 'highlight', target: target })
......@@ -16,22 +16,28 @@
<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 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 class="container3">
<div class="trigger5">trigger</div>
<em class="target5">target</em>
<div class="trigger5">trigger5</div>
<em class="target5">target5</em>
<div class="container4">
<div data-toggle="highlight" class="trigger6" data-target=".target6">trigger6</div>
<em class="target6">target6</em>
// 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) {'highlight', function(e) {
......@@ -50,7 +56,7 @@
tape('$().highlight() class enter', check($container1, '.trigger3', 'mouseenter', ''))
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', ''))
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', ''))
tape('$().highlight() container click', check($container3, '.trigger5', 'click', '.target5'))
// Test running highlight on parent of data-highlight="container"
var $body = $('body').highlight()
tape('$().highlight() enter', check($('.container4'), '.trigger6', 'mouseenter', ''))
tape('$().highlight() leave', check($('.container4'), '.trigger6', 'mouseleave', '.target6'))
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment