Advertisement
Guest User

Untitled

a guest
Aug 1st, 2015
177
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.64 KB | None | 0 0
  1. var slidePanel = require('./slide-panel');
  2.  
  3. require('velocity-animate');
  4.  
  5. /**
  6. * slide-navigation.js
  7. * ===================
  8. * JS for the `.slide-panel__navigation` element, an accordian style navigation component.
  9. */
  10. var slideNavigation = {
  11. $nav: $('.slide-panel__navigation'),
  12.  
  13. init: function() {
  14. this.el = {
  15. $nestedUL: $('ul ul', this.$nav),
  16. $navLink: $('a', this.$nav)
  17. };
  18.  
  19. this.conf = {
  20. toggleClass: 'toggle',
  21. openClass: 'open'
  22. };
  23.  
  24. this.animateConf = {
  25. duration: 200
  26. };
  27.  
  28. this.navInit();
  29. },
  30.  
  31. /**
  32. * Initialise the component:
  33. *
  34. * 1. Get all the <li /> items in the element which has a child <ul />
  35. *
  36. * 2. Add a CSS class to the first <a /> inside the list item which
  37. * we'll use to apply styles and to toggle the show/hide of the nested elements.
  38. */
  39. navInit: function() {
  40. var self = this,
  41. $parents = $('li', this.$nav).has('ul'); // [1]
  42.  
  43. $parents.each(function() {
  44. var $this = $(this),
  45. $a = $('a', $this).first();
  46.  
  47. $a.addClass(self.conf.toggleClass); // [2]
  48. });
  49.  
  50. this.bindEvents();
  51. },
  52.  
  53. /**
  54. * Bind our events for the component.
  55. */
  56. bindEvents: function() {
  57. this.$nav.on('click.slideNavigation', '.' + this.conf.toggleClass, $.proxy(this.toggle, this));
  58. },
  59.  
  60. /**
  61. * Decide if we're showing or hiding the child <ul /> element.
  62. * @param {object} e [the jQuery event object]
  63. */
  64. toggle: function( e ) {
  65. e.preventDefault();
  66.  
  67. var $a = $(e.currentTarget),
  68. $ul = $a.next('ul');
  69.  
  70. if($ul.hasClass(this.conf.openClass)) {
  71. this.__close( $a );
  72. } else {
  73. this.__open( $a );
  74. }
  75. },
  76.  
  77. /**
  78. * Open a child <ul /> element (sub nav)
  79. * @param {object} $a [clicked <a /> element jQuery object]
  80. */
  81. __open: function( $a ) {
  82. if(!$a) {
  83. return;
  84. }
  85.  
  86. var self = this,
  87. $ul = $a.next('ul'),
  88. height = $ul.height();
  89.  
  90. this.closeAll( $a );
  91.  
  92. $a.addClass(self.conf.openClass);
  93.  
  94. $ul.css({ display: 'block', height: 0 })
  95. .velocity({ height: height },
  96. {
  97. duration: self.animateConf.duration,
  98. complete: function() {
  99. $ul.addClass(self.conf.openClass);
  100.  
  101. slidePanel.resizePanel();
  102. }
  103. });
  104. },
  105.  
  106. /**
  107. * Close a child <ul /> element (sub nav)
  108. * @param {object} $a [clicked <a /> element jQuery object]
  109. */
  110. __close: function( $a ) {
  111. if(!$a) {
  112. return;
  113. }
  114.  
  115. var self = this,
  116. $ul = $a.next('ul');
  117.  
  118. $a.removeClass(self.conf.openClass);
  119.  
  120. $ul.velocity({ height: 0 },
  121. {
  122. duration: self.animateConf.duration,
  123. complete: function() {
  124. self.resetList( $ul );
  125.  
  126. slidePanel.resizePanel();
  127. }
  128. });
  129. },
  130.  
  131. closeAll: function( $a ) {
  132. var self = this,
  133. $parents = $('.' + this.conf.toggleClass).not($a);
  134.  
  135. $parents.each(function() {
  136. var $this = $(this),
  137. $ul = $this.next('ul');
  138.  
  139. $this.removeClass(self.conf.openClass);
  140.  
  141. self.resetList( $ul );
  142. });
  143. },
  144.  
  145. resetList: function( $ul ) {
  146. $ul.removeClass(this.conf.openClass).removeAttr('style');
  147. },
  148.  
  149. destroy: function() {
  150. this.closeAll();
  151.  
  152. this.$nav.off('click.slideNavigation');
  153. }
  154. };
  155.  
  156. module.exports = slideNavigation;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement