bongzilla

Untitled

Mar 23rd, 2021
889
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. $( document ).ready(function() {
  3.     var currentTabIndex = 1;
  4.  
  5.     const hideAnimationCSS = {"opacity": 0, "transition": "opacity 300ms ease 0s, opacity 300ms ease 0s"};
  6.     const showAnimationCSS = {"opacity": 1, "transition": "opacity 300ms ease 0s, opacity 300ms ease 0s"};
  7.  
  8.     $(".b-tabs__link").on("click", function() {
  9.         currentTabIndex = $(this).data("w-tab").slice(-1);
  10.         changeSelectedTab(currentTabIndex);
  11.     });
  12.  
  13.     $(".b-sider__arrow-left").on("click", function(e) {
  14.         const tabsDiv = findTabsDiv($(this));
  15.         const tabIndex = findTabIndex($(this));
  16.         const tabsLength = findTabsLength($(this));
  17.  
  18.         let prevTabIndex = tabIndex - 1;
  19.  
  20.         if(prevTabIndex < 1) prevTabIndex = tabsLength;
  21.  
  22.         changePaneUniversal($(this), prevTabIndex, tabsLength, "left");
  23.     })
  24.  
  25.     $(".b-arrow-coral").on("click", function(e) {
  26.         const tabsDiv = findTabsDiv($(this));
  27.         const tabIndex = findTabIndex($(this));
  28.         const tabsLength = findTabsLength($(this));
  29.         let nextTabIndex = tabIndex + 1;
  30.  
  31.         if(nextTabIndex > tabsLength) nextTabIndex = 1
  32.  
  33.         changePaneUniversal($(this), nextTabIndex, tabsLength, "right");
  34.     })
  35.  
  36.     // функция для поиска дива с табами
  37.     function findTabsDiv(ctx) {
  38.         return ctx.parents().siblings(".b-tabs__menu")
  39.     }
  40.  
  41.     // функция для поиска индекса (номера) текущего таба
  42.     function findTabIndex(ctx) {
  43.         return Number(ctx.closest(".b-tabs__pane").data("w-tab").slice(-1))
  44.     }
  45.  
  46.     // функция для поиска кол-ва табов/панелей
  47.     function findTabsLength(ctx) {
  48.         return ctx.closest(".b-tabs__content").find(".b-tabs__pane").length
  49.     }
  50.  
  51.     function changePaneUniversal(ctx, currentTabIndex, tabsLength, direction) {
  52.         changeSelectedTab(currentTabIndex);
  53.  
  54.         const tabsDiv = findTabsDiv(ctx);
  55.         const currentTabPane = ctx.parents(".b-tabs__pane");
  56.  
  57.         if(direction === "right") {
  58.             const firstPane = ctx.parents().find(".b-tabs__pane").eq(0);
  59.             const nextPane = ctx.parents(".b-tabs__pane").next();
  60.  
  61.             const nextTabPane = currentTabIndex !== 1
  62.                 ? changeToAnother(currentTabPane, nextPane)
  63.                 : changeToFirst(currentTabPane, firstPane)
  64.         }
  65.  
  66.         if(direction === "left") {
  67.             const lastPane = ctx.parents().find(".b-tabs__pane").eq(tabsLength - 1);
  68.             const prevPane = ctx.parents(".b-tabs__pane").prev();
  69.  
  70.             const nextTabPane = currentTabIndex !== tabsLength
  71.                 ? changeToAnother(currentTabPane, prevPane)
  72.                 : changeToLast(currentTabPane, lastPane)
  73.         }
  74.  
  75.         function changeToFirst(currPane, firstPane) {
  76.             currentTabPane.css(hideAnimationCSS);
  77.             setTimeout(() => {
  78.                 currentTabPane.removeClass("w--tab-active");
  79.                 firstPane.css(showAnimationCSS).addClass("w--tab-active");
  80.             }, 300)
  81.         }
  82.  
  83.         function changeToAnother(currPane, nextPane) {
  84.             currPane.css(hideAnimationCSS);
  85.             setTimeout(() => {
  86.                 currPane.removeClass("w--tab-active");
  87.                 nextPane.css(showAnimationCSS)
  88.                 nextPane.addClass("w--tab-active")
  89.             }, 300)
  90.         }
  91.  
  92.         function changeToLast(currPane, lastPane) {
  93.             currentTabPane.css(hideAnimationCSS);
  94.             setTimeout(() => {
  95.                 currentTabPane.removeClass("w--tab-active");
  96.                 lastPane.css(showAnimationCSS).addClass("w--tab-active");
  97.             }, 300)
  98.         }
  99.     }
  100.  
  101.     // функция для смены выделенного таба
  102.     function changeSelectedTab(idx) {
  103.         // удаляем класс w--current с текущего выделенного таба
  104.         $(".b-tabs__menu .w--current").removeClass("w--current");
  105.         // ставим класс на таб по переданному индексу idx
  106.         $(".b-tabs__menu").find(".b-tabs__link").eq(idx - 1).addClass("w--current");
  107.     }
  108. })
  109.  
  110. </script>
RAW Paste Data