frontend.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. (function($) {
  2. FLBuilderTabs = function( settings ) {
  3. this.settings = settings;
  4. this.nodeClass = '.fl-node-' + settings.id;
  5. this._init();
  6. };
  7. FLBuilderTabs.prototype = {
  8. settings : {},
  9. nodeClass : '',
  10. _init: function() {
  11. var win = $( window );
  12. document.querySelector( this.nodeClass + ' .fl-tabs-labels' ).addEventListener( 'click', this._labelClick.bind( this ) );
  13. if ( $( this.nodeClass + ' .fl-tabs-vertical' ).length > 0 ) {
  14. this._resize();
  15. win.off( 'resize' + this.nodeClass );
  16. win.on( 'resize' + this.nodeClass, this._resize.bind( this ) );
  17. }
  18. FLBuilderLayout.preloadAudio( this.nodeClass + ' .fl-tabs-panel-content' );
  19. },
  20. _labelClick: function( e ) {
  21. var label = $( e.target ).closest( '.fl-tabs-label' );
  22. if ( ! label ) {
  23. return;
  24. }
  25. var index = label.data( 'index' ),
  26. wrap = label.closest( '.fl-tabs' ),
  27. allIcons = wrap.find( '.fl-tabs-panels .fl-tabs-label .fa' ),
  28. icon = wrap.find( '.fl-tabs-panels .fl-tabs-label[data-index="' + index + '"] .fa' );
  29. // Toggle the responsive icons.
  30. allIcons.addClass( 'fa-plus' );
  31. icon.removeClass( 'fa-plus' );
  32. // Toggle the tabs.
  33. wrap.find( '.fl-tabs-labels:first > .fl-tab-active' ).removeClass( 'fl-tab-active' );
  34. wrap.find( '.fl-tabs-panels:first > .fl-tabs-panel > .fl-tab-active' ).removeClass( 'fl-tab-active' );
  35. wrap.find( '.fl-tabs-labels:first > .fl-tabs-label[data-index="' + index + '"]' ).addClass( 'fl-tab-active' );
  36. wrap.find( '.fl-tabs-panels:first > .fl-tabs-panel > .fl-tabs-panel-content[data-index="' + index + '"]' ).addClass( 'fl-tab-active' );
  37. // Gallery module support.
  38. FLBuilderLayout.refreshGalleries( wrap.find( '.fl-tabs-panel-content[data-index="' + index + '"]' ) );
  39. // Grid layout support (uses Masonry)
  40. FLBuilderLayout.refreshGridLayout( wrap.find( '.fl-tabs-panel-content[data-index="' + index + '"]' ) );
  41. // Post Carousel support (uses BxSlider)
  42. FLBuilderLayout.reloadSlider( wrap.find( '.fl-tabs-panel-content[data-index="' + index + '"]' ) );
  43. // WP audio shortcode support
  44. FLBuilderLayout.resizeAudio( wrap.find( '.fl-tabs-panel-content[data-index="' + index + '"]' ) );
  45. },
  46. _resize: function() {
  47. $( this.nodeClass + ' .fl-tabs-vertical' ).each( this._resizeVertical.bind( this ) );
  48. },
  49. _resizeVertical: function( e ) {
  50. var wrap = $( this.nodeClass + ' .fl-tabs-vertical' ),
  51. labels = wrap.find( '.fl-tabs-labels' ),
  52. panels = wrap.find( '.fl-tabs-panels' );
  53. panels.css( 'min-height', labels.height() + 'px' );
  54. }
  55. };
  56. })(jQuery);