frontend.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. (function($) {
  2. FLBuilderAccordion = function( settings )
  3. {
  4. this.settings = settings;
  5. this.nodeClass = '.fl-node-' + settings.id;
  6. this.wasToggled = false;
  7. this.expandOnTab = settings.expandOnTab;
  8. this._init();
  9. };
  10. FLBuilderAccordion.prototype = {
  11. settings : {},
  12. nodeClass : '',
  13. wasToggled : false,
  14. expandOnTab : false,
  15. _init: function()
  16. {
  17. $( this.nodeClass + ' .fl-accordion-button' ).on('click', $.proxy( this._buttonClick, this ) );
  18. $( this.nodeClass + ' .fl-accordion-button' ).on('keypress', $.proxy( this._buttonClick, this ) );
  19. $( this.nodeClass + ' .fl-accordion-button-label' ).on('focusin', $.proxy( this._labelFocusIn, this ) );
  20. $( this.nodeClass + ' .fl-accordion-button' ).on('focusout', $.proxy( this._focusOut, this ) );
  21. FLBuilderLayout.preloadAudio( this.nodeClass + ' .fl-accordion-content' );
  22. this._openActiveAccordion();
  23. },
  24. _openActiveAccordion: function (e) {
  25. var activeAccordion = $( this.nodeClass + ' .fl-accordion-item.fl-accordion-item-active' );
  26. if ( activeAccordion.length > 0 ) {
  27. activeAccordion.find('.fl-accordion-content:first').show();
  28. }
  29. },
  30. _labelFocusIn: function(e) {
  31. var button = $( e.target ).closest('.fl-accordion-button')
  32. if ( ! e.relatedTarget ) {
  33. return;
  34. }
  35. if ( ! this.expandOnTab ) {
  36. return;
  37. }
  38. button.attr('aria-selected', 'true');
  39. this._toggleAccordion( button );
  40. e.preventDefault();
  41. e.stopImmediatePropagation();
  42. this.wasToggled = true;
  43. },
  44. _buttonClick: function( e )
  45. {
  46. var button = $( e.target ).closest('.fl-accordion-button'),
  47. targetModule = $( e.target ).closest('.fl-module-accordion'),
  48. targetNodeClass = 'fl-node-' + targetModule.data('node'),
  49. nodeClassName = this.nodeClass.replace('.', '');
  50. // Click or keyboard (enter or spacebar) input?
  51. if(!this._validClick(e)) {
  52. return;
  53. }
  54. // Prevent event handler being called twice when Accordion is nested.
  55. if ( nodeClassName !== targetNodeClass ) {
  56. return;
  57. }
  58. if ( this.expandOnTab && this.wasToggled ) {
  59. this.wasToggled = false;
  60. return;
  61. }
  62. // Prevent scrolling when the spacebar is pressed
  63. e.preventDefault();
  64. e.stopPropagation();
  65. this._toggleAccordion( button );
  66. },
  67. _toggleAccordion: function( button ) {
  68. var accordion = button.closest('.fl-accordion'),
  69. item = button.closest('.fl-accordion-item'),
  70. allContent = accordion.find('.fl-accordion-content'),
  71. allIcons = accordion.find('.fl-accordion-button i.fl-accordion-button-icon'),
  72. content = button.siblings('.fl-accordion-content'),
  73. icon = button.find('i.fl-accordion-button-icon');
  74. if(accordion.hasClass('fl-accordion-collapse')) {
  75. accordion.find( '> .fl-accordion-item-active' ).removeClass( 'fl-accordion-item-active' );
  76. accordion.find( '> .fl-accordion-button' ).attr('aria-expanded', 'false');
  77. accordion.find( '> .fl-accordion-content' ).attr('aria-hidden', 'true');
  78. allContent.slideUp('normal');
  79. if( allIcons.find('svg').length > 0 ) {
  80. allIcons.find('svg').attr("data-icon",'plus');
  81. } else {
  82. allIcons.removeClass( this.settings.activeIcon );
  83. allIcons.addClass( this.settings.labelIcon );
  84. }
  85. }
  86. if(content.is(':hidden')) {
  87. button.attr('aria-expanded', 'true');
  88. item.addClass( 'fl-accordion-item-active' );
  89. item.find( '.fl-accordion-content' ).attr('aria-hidden', 'false');
  90. content.slideDown('normal', this._slideDownComplete);
  91. if( icon.find('svg').length > 0 ) {
  92. icon.find('svg').attr("data-icon",'minus');
  93. } else {
  94. icon.removeClass( this.settings.labelIcon );
  95. icon.addClass( this.settings.activeIcon );
  96. }
  97. icon.find('span').text( 'Collapse' );
  98. }
  99. else {
  100. button.attr('aria-expanded', 'false');
  101. item.removeClass( 'fl-accordion-item-active' );
  102. item.find( '.fl-accordion-content' ).attr('aria-hidden', 'true');
  103. content.slideUp('normal', this._slideUpComplete);
  104. if( icon.find('svg').length > 0 ) {
  105. icon.find('svg').attr("data-icon",'plus');
  106. } else {
  107. icon.removeClass( this.settings.activeIcon );
  108. icon.addClass( this.settings.labelIcon );
  109. }
  110. icon.find('span').text( 'Expand' );
  111. }
  112. },
  113. _focusOut: function( e )
  114. {
  115. var button = $( e.target ).closest('.fl-accordion-button');
  116. button.attr('aria-selected', 'false');
  117. },
  118. _slideUpComplete: function()
  119. {
  120. var content = $( this ),
  121. accordion = content.closest( '.fl-accordion' );
  122. accordion.trigger( 'fl-builder.fl-accordion-toggle-complete' );
  123. },
  124. _slideDownComplete: function()
  125. {
  126. var content = $( this ),
  127. accordion = content.closest( '.fl-accordion' ),
  128. item = content.parent(),
  129. win = $( window );
  130. FLBuilderLayout.refreshGalleries( content );
  131. // Grid layout support (uses Masonry)
  132. FLBuilderLayout.refreshGridLayout( content );
  133. // Post Carousel support (uses BxSlider)
  134. FLBuilderLayout.reloadSlider( content );
  135. // WP audio shortcode support
  136. FLBuilderLayout.resizeAudio( content );
  137. // Reload Google Map embed.
  138. FLBuilderLayout.reloadGoogleMap( content );
  139. // Slideshow module support.
  140. FLBuilderLayout.resizeSlideshow();
  141. if ( item.offset().top < win.scrollTop() + 100 ) {
  142. $( 'html, body' ).animate({
  143. scrollTop: item.offset().top - 100
  144. }, 500, 'swing');
  145. }
  146. accordion.trigger( 'fl-builder.fl-accordion-toggle-complete' );
  147. },
  148. _validClick: function(e)
  149. {
  150. return (e.which == 1 || e.which == 13 || e.which == 32 || e.which == undefined) ? true : false;
  151. }
  152. };
  153. })(jQuery);