API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 17th, 2022
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.87 KB | None | 0 0
raw download clone embed print report
  1. (function($)
  2. {
  3. "use strict";
  4.  
  5. // -------------------------------------------------------------------------------------------
  6. // Tab Section
  7. // -------------------------------------------------------------------------------------------
  8.  
  9. $.fn.avia_sc_tab_section = function()
  10. {
  11. var win = $(window),
  12. browserPrefix = $.avia_utilities.supports('transition'),
  13. cssActive = this.browserPrefix !== false ? true : false,
  14. isMobile = $.avia_utilities.isMobile,
  15. transform3d = document.documentElement.className.indexOf('avia_transform3d') !== -1 ? true : false,
  16. transition = {};
  17.  
  18. return this.each(function()
  19. {
  20. var container = $(this),
  21. tabs = container.find('.av-section-tab-title'),
  22. tab_outer = container.find('.av-tab-section-outer-container'),
  23. tab_wrap = container.find('.av-tab-section-tab-title-container'),
  24. tab_nav = container.find('.av_tab_navigation'),
  25. arrows_wrap = container.find('.av-tabsection-arrow'),
  26. arrows = arrows_wrap.find('.av-tab-section-slide'),
  27. content_wrap = container.find('.av-tab-section-inner-container'),
  28. single_tabs = container.find('.av-animation-delay-container'), //for elements inside the tab that receive waypoint animation
  29. inner_content = container.find('.av-layout-tab-inner'),
  30. sliding_active = container.is('.av-tab-slide-transition'),
  31. flexible = container.is('.av-tab-content-auto'),
  32. current_content = container.find('.__av_init_open'),
  33. min_width = 0,
  34. change_tab = function(e, prevent_hash)
  35. {
  36. e.preventDefault();
  37.  
  38. var current_tab = $(e.currentTarget),
  39. current_arrow = current_tab.find('.av-tab-arrow-container span'),
  40. tab_nr = current_tab.data('av-tab-section-title');
  41.  
  42. // reset global scope !!
  43. current_content = container.find('[data-av-tab-section-content="'+tab_nr+'"]');
  44.  
  45. var new_bg = current_content.data('av-tab-bg-color'),
  46. new_font = current_content.data('av-tab-color'),
  47. prev_container = container.find('.av-active-tab-content').not('[data-av-tab-section-content="'+tab_nr+'"]');
  48.  
  49. tabs.attr('style','').removeClass('av-active-tab-title');
  50. current_tab.removeClass('no-scroll');
  51. current_tab.addClass('av-active-tab-title');
  52. current_content.addClass("av-active-tab-content");
  53.  
  54. if( new_bg !== "" )
  55. {
  56. current_arrow.css('background-color', new_bg);
  57. }
  58.  
  59. if( new_font !== "" )
  60. {
  61. current_tab.css('color', new_font);
  62. }
  63.  
  64. var new_pos = ( ( parseInt( tab_nr, 10 ) - 1 ) * -100 );
  65.  
  66. if( $('body').hasClass('rtl') )
  67. {
  68. new_pos = ( ( parseInt( tab_nr,10 ) - 1 ) * 100 );
  69. }
  70.  
  71. if( cssActive )
  72. {
  73. //move the slides
  74. new_pos = new_pos / tabs.length;
  75. transition['transform'] = transform3d ? "translate3d(" + new_pos + "%, 0, 0)" : "translate(" + new_pos + "%,0)"; //3d or 2d transform?
  76. transition['left'] = "0%";
  77. content_wrap.css(transition);
  78. }
  79. else
  80. {
  81. content_wrap.css('left', new_pos + "%");
  82. }
  83.  
  84. set_tab_title_pos();
  85. set_slide_height();
  86.  
  87. if( ! prevent_hash )
  88. {
  89. location.hash = current_tab.attr('href');
  90. }
  91.  
  92. setTimeout( function()
  93. {
  94. current_content.trigger('avia_start_animation_if_current_slide_is_active');
  95.  
  96. // fixes bug that animations do not work due to fn.avia_waypoints()
  97. if( ! isMobile )
  98. {
  99. single_tabs.not(current_content).trigger('avia_remove_animation');
  100. }
  101.  
  102. }, 600);
  103.  
  104. },
  105. set_min_width = function()
  106. {
  107. min_width = 0;
  108. tabs.each( function()
  109. {
  110. min_width += $(this).outerWidth();
  111. });
  112.  
  113. tab_wrap.css( 'min-width', min_width );
  114. },
  115.  
  116. set_slide_height = function()
  117. {
  118. if(current_content.length && flexible)
  119. {
  120. var old_height = inner_content.height();
  121. inner_content.height('auto');
  122.  
  123. var height = current_content.find('.av-layout-tab-inner').height(),
  124. add_height = tab_wrap.height();
  125.  
  126. tab_outer.css('max-height', height + add_height + 100);
  127. inner_content.height(old_height);
  128. inner_content.height(height);
  129.  
  130. inner_content.css( 'overflow', 'hidden' );
  131.  
  132. setTimeout(function() { win.trigger('av-height-change'); }, 600);
  133. }
  134. },
  135.  
  136. set_tab_title_pos = function()
  137. {
  138. // scroll the tabs if there is not enough room to display them all - rtl allign right to left !!
  139. var current_tab = container.find('.av-active-tab-title'),
  140. viewport = container.width(),
  141. left_pos = ( current_tab.position().left * - 1 ) - ( current_tab.outerWidth() / 2 ) + ( viewport / 2 );
  142.  
  143. if( ! $('body').hasClass('rtl') )
  144. {
  145. if( viewport >= min_width )
  146. {
  147. left_pos = 0;
  148. }
  149.  
  150. if( left_pos + min_width < viewport )
  151. {
  152. left_pos = ( min_width - viewport ) * -1;
  153. }
  154.  
  155. if( left_pos > 0 )
  156. {
  157. left_pos = 0;
  158. }
  159.  
  160. tab_wrap.css( 'left', left_pos );
  161.  
  162. var show_prev = left_pos !== 0;
  163. var show_next = left_pos + min_width > viewport;
  164.  
  165. set_arrows_visibility( show_prev, show_next );
  166. }
  167. else
  168. {
  169. var right_pos = 0;
  170.  
  171. if( viewport < min_width )
  172. {
  173. if( left_pos + min_width > viewport )
  174. {
  175. if( left_pos > 0 )
  176. {
  177. left_pos = 0;
  178. }
  179.  
  180. right_pos = ( left_pos + min_width - viewport ) * -1;
  181. }
  182. }
  183.  
  184. tab_wrap.css( 'left', 'auto' );
  185. tab_wrap.css( 'right', right_pos );
  186.  
  187. var show_prev = right_pos + min_width > viewport;
  188. var show_next = right_pos !== 0;
  189.  
  190. set_arrows_visibility( show_prev, show_next );
  191. }
  192. },
  193.  
  194. set_arrows_visibility = function( show_prev, show_next )
  195. {
  196. if( show_prev )
  197. {
  198. arrows_wrap.addClass( 'av-visible-prev' );
  199. }
  200. else
  201. {
  202. arrows_wrap.removeClass( 'av-visible-prev' );
  203. }
  204.  
  205. if( show_next )
  206. {
  207. arrows_wrap.addClass( 'av-visible-next' );
  208. }
  209. else
  210. {
  211. arrows_wrap.removeClass( 'av-visible-next' );
  212. }
  213. },
  214. /*
  215. swipe_to_next_prev = function(e)
  216. {
  217. if( ! isMobile )
  218. {
  219. return;
  220. }
  221.  
  222. switch_to_next_prev( e );
  223. },
  224.  
  225. switch_to_next_prev = function( e )
  226. {
  227. e.preventDefault();
  228.  
  229. var clicked = $( e.currentTarget ),
  230. current_tab = container.find('.av-active-tab-title');
  231.  
  232. if( clicked.is('.av_prev_tab_section') )
  233. {
  234. if( ! $('body').hasClass('rtl') )
  235. {
  236. current_tab.prev('.av-section-tab-title').trigger('click');
  237. }
  238. else
  239. {
  240. current_tab.next('.av-section-tab-title').trigger('click');
  241. }
  242. }
  243. else
  244. {
  245. if( ! $('body').hasClass('rtl') )
  246. {
  247. current_tab.next('.av-section-tab-title').trigger('click');
  248. }
  249. else
  250. {
  251. current_tab.prev('.av-section-tab-title').trigger('click');
  252. }
  253. }
  254. },
  255. */
  256. get_init_open = function()
  257. {
  258. if( ! hash && window.location.hash ) var hash = window.location.hash;
  259.  
  260. var open = tabs.filter('[href="'+hash+'"]');
  261.  
  262. if(open.length)
  263. {
  264. if(!open.is('.active_tab')) open.trigger('click');
  265. }
  266. else
  267. {
  268. //set correct color
  269. container.find('.av-active-tab-title').trigger('click', true);
  270. }
  271. };
  272.  
  273. $.avia_utilities.preload({
  274.  
  275. container: current_content,
  276. single_callback: function()
  277. {
  278. tabs.on( 'click', change_tab );
  279. tab_nav.on( 'click', swipe_to_next_prev );
  280. arrows.on( 'click', switch_to_next_prev );
  281. win.on( 'debouncedresize', set_tab_title_pos );
  282.  
  283. /**
  284. * We had to remove av-height-change because this event is recursivly triggered in set_slide_height and lead to performance problems
  285. * AND broken layout - content was not displayed completly
  286. *
  287. * Content elements that can can change their height and trigger av-height-change should trigger this additional event after to
  288. * allow layout elements like tab section to react on this and then call av-height-change by themself
  289. *
  290. * @since 4.2.3
  291. */
  292. win.on('debouncedresize av-content-el-height-changed', set_slide_height);
  293.  
  294. set_min_width();
  295. set_slide_height();
  296. get_init_open();
  297. }
  298.  
  299. });
  300.  
  301. content_wrap.avia_swipe_trigger( {prev:'.av_prev_tab_section', next:'.av_next_tab_section'} );
  302.  
  303. });
  304. };
  305.  
  306.  
  307. }(jQuery));
  308. (function($)
  309. {
  310. "use strict";
  311.  
  312. // -------------------------------------------------------------------------------------------
  313. // Tab Section
  314. // -------------------------------------------------------------------------------------------
  315.  
  316. $.fn.avia_sc_tab_section = function()
  317. {
  318. var win = $(window),
  319. browserPrefix = $.avia_utilities.supports('transition'),
  320. cssActive = this.browserPrefix !== false ? true : false,
  321. isMobile = $.avia_utilities.isMobile,
  322. transform3d = document.documentElement.className.indexOf('avia_transform3d') !== -1 ? true : false,
  323. transition = {};
  324.  
  325. return this.each(function()
  326. {
  327. var container = $(this),
  328. tabs = container.find('.av-section-tab-title'),
  329. tab_outer = container.find('.av-tab-section-outer-container'),
  330. tab_wrap = container.find('.av-tab-section-tab-title-container'),
  331. tab_nav = container.find('.av_tab_navigation'),
  332. arrows_wrap = container.find('.av-tabsection-arrow'),
  333. arrows = arrows_wrap.find('.av-tab-section-slide'),
  334. content_wrap = container.find('.av-tab-section-inner-container'),
  335. single_tabs = container.find('.av-animation-delay-container'), //for elements inside the tab that receive waypoint animation
  336. inner_content = container.find('.av-layout-tab-inner'),
  337. sliding_active = container.is('.av-tab-slide-transition'),
  338. flexible = container.is('.av-tab-content-auto'),
  339. current_content = container.find('.__av_init_open'),
  340. min_width = 0,
  341. change_tab = function(e, prevent_hash)
  342. {
  343. e.preventDefault();
  344.  
  345. var current_tab = $(e.currentTarget),
  346. current_arrow = current_tab.find('.av-tab-arrow-container span'),
  347. tab_nr = current_tab.data('av-tab-section-title');
  348.  
  349. // reset global scope !!
  350. current_content = container.find('[data-av-tab-section-content="'+tab_nr+'"]');
  351.  
  352. var new_bg = current_content.data('av-tab-bg-color'),
  353. new_font = current_content.data('av-tab-color'),
  354. prev_container = container.find('.av-active-tab-content').not('[data-av-tab-section-content="'+tab_nr+'"]');
  355.  
  356. tabs.attr('style','').removeClass('av-active-tab-title');
  357. current_tab.removeClass('no-scroll');
  358. current_tab.addClass('av-active-tab-title');
  359. current_content.addClass("av-active-tab-content");
  360.  
  361. if( new_bg !== "" )
  362. {
  363. current_arrow.css('background-color', new_bg);
  364. }
  365.  
  366. if( new_font !== "" )
  367. {
  368. current_tab.css('color', new_font);
  369. }
  370.  
  371. var new_pos = ( ( parseInt( tab_nr, 10 ) - 1 ) * -100 );
  372.  
  373. if( $('body').hasClass('rtl') )
  374. {
  375. new_pos = ( ( parseInt( tab_nr,10 ) - 1 ) * 100 );
  376. }
  377.  
  378. if( cssActive )
  379. {
  380. //move the slides
  381. new_pos = new_pos / tabs.length;
  382. transition['transform'] = transform3d ? "translate3d(" + new_pos + "%, 0, 0)" : "translate(" + new_pos + "%,0)"; //3d or 2d transform?
  383. transition['left'] = "0%";
  384. content_wrap.css(transition);
  385. }
  386. else
  387. {
  388. content_wrap.css('left', new_pos + "%");
  389. }
  390.  
  391. set_tab_title_pos();
  392. set_slide_height();
  393.  
  394. if( ! prevent_hash )
  395. {
  396. location.hash = current_tab.attr('href');
  397. }
  398.  
  399. setTimeout( function()
  400. {
  401. current_content.trigger('avia_start_animation_if_current_slide_is_active');
  402.  
  403. // fixes bug that animations do not work due to fn.avia_waypoints()
  404. if( ! isMobile )
  405. {
  406. single_tabs.not(current_content).trigger('avia_remove_animation');
  407. }
  408.  
  409. }, 600);
  410.  
  411. },
  412. set_min_width = function()
  413. {
  414. min_width = 0;
  415. tabs.each( function()
  416. {
  417. min_width += $(this).outerWidth();
  418. });
  419.  
  420. tab_wrap.css( 'min-width', min_width );
  421. },
  422.  
  423. set_slide_height = function()
  424. {
  425. if(current_content.length && flexible)
  426. {
  427. var old_height = inner_content.height();
  428. inner_content.height('auto');
  429.  
  430. var height = current_content.find('.av-layout-tab-inner').height(),
  431. add_height = tab_wrap.height();
  432.  
  433. tab_outer.css('max-height', height + add_height + 100);
  434. inner_content.height(old_height);
  435. inner_content.height(height);
  436.  
  437. inner_content.css( 'overflow', 'hidden' );
  438.  
  439. setTimeout(function() { win.trigger('av-height-change'); }, 600);
  440. }
  441. },
  442.  
  443. set_tab_title_pos = function()
  444. {
  445. // scroll the tabs if there is not enough room to display them all - rtl allign right to left !!
  446. var current_tab = container.find('.av-active-tab-title'),
  447. viewport = container.width(),
  448. left_pos = ( current_tab.position().left * - 1 ) - ( current_tab.outerWidth() / 2 ) + ( viewport / 2 );
  449.  
  450. if( ! $('body').hasClass('rtl') )
  451. {
  452. if( viewport >= min_width )
  453. {
  454. left_pos = 0;
  455. }
  456.  
  457. if( left_pos + min_width < viewport )
  458. {
  459. left_pos = ( min_width - viewport ) * -1;
  460. }
  461.  
  462. if( left_pos > 0 )
  463. {
  464. left_pos = 0;
  465. }
  466.  
  467. tab_wrap.css( 'left', left_pos );
  468.  
  469. var show_prev = left_pos !== 0;
  470. var show_next = left_pos + min_width > viewport;
  471.  
  472. set_arrows_visibility( show_prev, show_next );
  473. }
  474. else
  475. {
  476. var right_pos = 0;
  477.  
  478. if( viewport < min_width )
  479. {
  480. if( left_pos + min_width > viewport )
  481. {
  482. if( left_pos > 0 )
  483. {
  484. left_pos = 0;
  485. }
  486.  
  487. right_pos = ( left_pos + min_width - viewport ) * -1;
  488. }
  489. }
  490.  
  491. tab_wrap.css( 'left', 'auto' );
  492. tab_wrap.css( 'right', right_pos );
  493.  
  494. var show_prev = right_pos + min_width > viewport;
  495. var show_next = right_pos !== 0;
  496.  
  497. set_arrows_visibility( show_prev, show_next );
  498. }
  499. },
  500.  
  501. set_arrows_visibility = function( show_prev, show_next )
  502. {
  503. if( show_prev )
  504. {
  505. arrows_wrap.addClass( 'av-visible-prev' );
  506. }
  507. else
  508. {
  509. arrows_wrap.removeClass( 'av-visible-prev' );
  510. }
  511.  
  512. if( show_next )
  513. {
  514. arrows_wrap.addClass( 'av-visible-next' );
  515. }
  516. else
  517. {
  518. arrows_wrap.removeClass( 'av-visible-next' );
  519. }
  520. },
  521.  
  522. swipe_to_next_prev = function(e)
  523. {
  524. if( ! isMobile )
  525. {
  526. return;
  527. }
  528.  
  529. switch_to_next_prev( e );
  530. },
  531.  
  532. switch_to_next_prev = function( e )
  533. {
  534. e.preventDefault();
  535.  
  536. var clicked = $( e.currentTarget ),
  537. current_tab = container.find('.av-active-tab-title');
  538.  
  539. if( clicked.is('.av_prev_tab_section') )
  540. {
  541. if( ! $('body').hasClass('rtl') )
  542. {
  543. current_tab.prev('.av-section-tab-title').trigger('click');
  544. }
  545. else
  546. {
  547. current_tab.next('.av-section-tab-title').trigger('click');
  548. }
  549. }
  550. else
  551. {
  552. if( ! $('body').hasClass('rtl') )
  553. {
  554. current_tab.next('.av-section-tab-title').trigger('click');
  555. }
  556. else
  557. {
  558. current_tab.prev('.av-section-tab-title').trigger('click');
  559. }
  560. }
  561. },
  562.  
  563. get_init_open = function()
  564. {
  565. if( ! hash && window.location.hash ) var hash = window.location.hash;
  566.  
  567. var open = tabs.filter('[href="'+hash+'"]');
  568.  
  569. if(open.length)
  570. {
  571. if(!open.is('.active_tab')) open.trigger('click');
  572. }
  573. else
  574. {
  575. //set correct color
  576. container.find('.av-active-tab-title').trigger('click', true);
  577. }
  578. };
  579.  
  580. $.avia_utilities.preload({
  581.  
  582. container: current_content,
  583. single_callback: function()
  584. {
  585. tabs.on( 'click', change_tab );
  586. tab_nav.on( 'click', swipe_to_next_prev );
  587. arrows.on( 'click', switch_to_next_prev );
  588. win.on( 'debouncedresize', set_tab_title_pos );
  589.  
  590. /**
  591. * We had to remove av-height-change because this event is recursivly triggered in set_slide_height and lead to performance problems
  592. * AND broken layout - content was not displayed completly
  593. *
  594. * Content elements that can can change their height and trigger av-height-change should trigger this additional event after to
  595. * allow layout elements like tab section to react on this and then call av-height-change by themself
  596. *
  597. * @since 4.2.3
  598. */
  599. win.on('debouncedresize av-content-el-height-changed', set_slide_height);
  600.  
  601. set_min_width();
  602. set_slide_height();
  603. get_init_open();
  604. }
  605.  
  606. });
  607.  
  608. content_wrap.avia_swipe_trigger( {prev:'.av_prev_tab_section', next:'.av_next_tab_section'} );
  609.  
  610. });
  611. };
  612.  
  613.  
  614. }(jQuery));
  615.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!