Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var slidePanel = require('./slide-panel');
- require('velocity-animate');
- /**
- * slide-navigation.js
- * ===================
- * JS for the `.slide-panel__navigation` element, an accordian style navigation component.
- */
- var slideNavigation = {
- $nav: $('.slide-panel__navigation'),
- init: function() {
- this.el = {
- $nestedUL: $('ul ul', this.$nav),
- $navLink: $('a', this.$nav)
- };
- this.conf = {
- toggleClass: 'toggle',
- openClass: 'open'
- };
- this.animateConf = {
- duration: 200
- };
- this.navInit();
- },
- /**
- * Initialise the component:
- *
- * 1. Get all the <li /> items in the element which has a child <ul />
- *
- * 2. Add a CSS class to the first <a /> inside the list item which
- * we'll use to apply styles and to toggle the show/hide of the nested elements.
- */
- navInit: function() {
- var self = this,
- $parents = $('li', this.$nav).has('ul'); // [1]
- $parents.each(function() {
- var $this = $(this),
- $a = $('a', $this).first();
- $a.addClass(self.conf.toggleClass); // [2]
- });
- this.bindEvents();
- },
- /**
- * Bind our events for the component.
- */
- bindEvents: function() {
- this.$nav.on('click.slideNavigation', '.' + this.conf.toggleClass, $.proxy(this.toggle, this));
- },
- /**
- * Decide if we're showing or hiding the child <ul /> element.
- * @param {object} e [the jQuery event object]
- */
- toggle: function( e ) {
- e.preventDefault();
- var $a = $(e.currentTarget),
- $ul = $a.next('ul');
- if($ul.hasClass(this.conf.openClass)) {
- this.__close( $a );
- } else {
- this.__open( $a );
- }
- },
- /**
- * Open a child <ul /> element (sub nav)
- * @param {object} $a [clicked <a /> element jQuery object]
- */
- __open: function( $a ) {
- if(!$a) {
- return;
- }
- var self = this,
- $ul = $a.next('ul'),
- height = $ul.height();
- this.closeAll( $a );
- $a.addClass(self.conf.openClass);
- $ul.css({ display: 'block', height: 0 })
- .velocity({ height: height },
- {
- duration: self.animateConf.duration,
- complete: function() {
- $ul.addClass(self.conf.openClass);
- slidePanel.resizePanel();
- }
- });
- },
- /**
- * Close a child <ul /> element (sub nav)
- * @param {object} $a [clicked <a /> element jQuery object]
- */
- __close: function( $a ) {
- if(!$a) {
- return;
- }
- var self = this,
- $ul = $a.next('ul');
- $a.removeClass(self.conf.openClass);
- $ul.velocity({ height: 0 },
- {
- duration: self.animateConf.duration,
- complete: function() {
- self.resetList( $ul );
- slidePanel.resizePanel();
- }
- });
- },
- closeAll: function( $a ) {
- var self = this,
- $parents = $('.' + this.conf.toggleClass).not($a);
- $parents.each(function() {
- var $this = $(this),
- $ul = $this.next('ul');
- $this.removeClass(self.conf.openClass);
- self.resetList( $ul );
- });
- },
- resetList: function( $ul ) {
- $ul.removeClass(this.conf.openClass).removeAttr('style');
- },
- destroy: function() {
- this.closeAll();
- this.$nav.off('click.slideNavigation');
- }
- };
- module.exports = slideNavigation;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement