js-track-focus

js-track-focus

Check if the Child-Elements on any Parent have focus and aply CSS-Class on the Element

DEMO

##Usage

#####HTML

<nav class="js-track-focus" id="track">
    <a href="#">Menu</a>
    <a href="#">Menu</a>
    <a href="#">Menu</a>
    <div class="js-track-focus" data-focus="subnav-has-focus">
        <a href="#">Menu</a>
        <a href="#">Menu</a>
        <a href="#">Menu</a>
    </div>
</nav>

#####JS

$( function(){
    $(document).trigger("enhance");
});
// or
var elem = document.getElementById('#track');
var trackfcs = new window.componentNamespace.TrackFocus( elem, {
    focusClass: 'ui-state-hightlight'
});

// init
trackfcs.init();
// destroy
trackfcs.destroy();

##Events ####create Fired once the Plugin is initialized.

$( document ).on( "create.track-focus", function( e ){ 
	// your code
} );

####focus-in Fired when a child element has focus.

$( document ).on( "focus-in.track-focus", function( e ){ 
	// child element has focus
} );

####focus-out Fired when a child element loses focus.

$( document ).on( "focus-out.track-focus", function( e ){ 
	// child element loses focus
} );

####destroy Fired once the Plugin is destroyed.

$( document ).on( "destroy.track-focus", function( e ){ 
	// ...
} );

---

####Package managers

• Install with Bower: bower install js-track-focus --save
• Install with npm: npm install js-track-focus

####CDN

<script src="https://npmcdn.com/js-track-focus@1.0/track-focus.js"></script>

Release History

• v1.0.0: Initial release.

License

Licensed under the MIT license.