bongzilla

Untitled

Mar 24th, 2021
710
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. $( document ).ready(function() {
  3.     // индекс текущего таба
  4.     var currentTabIndex = 1;
  5.  
  6.     // анимации для скрытия и показа элементов - вынес чтобы не засорять код стилями
  7.     const hideAnimationCSS = {"opacity": 0, "transition": "opacity 300ms ease 0s, opacity 300ms ease 0s"};
  8.     const showAnimationCSS = {"opacity": 1, "transition": "opacity 300ms ease 0s, opacity 300ms ease 0s"};
  9.  
  10.     // отрабатываем клик на таб
  11.     $(".b-tabs__link").on("click", function() {
  12.         // ищем индекс таба на который кликнули
  13.         currentTabIndex = $(this).data("w-tab").slice(-1);
  14.         // меняем таб на текущий индекс
  15.         changeSelectedTab(currentTabIndex);
  16.     });
  17.  
  18.     // привязываем функцию смены таба/панели на клик по левой кнопке
  19.     $(".b-sider__arrow-left").on("click", function(e) {
  20.         // ищет родительский div со всеми табами
  21.         const tabsDiv = findTabsDiv($(this));
  22.         // ищет индекс текущего таба
  23.         const tabIndex = findTabIndex($(this));
  24.         // определяет кол-во табов (всего)
  25.         const tabsLength = findTabsLength($(this));
  26.  
  27.         // индекс предыдущего таба (на который переключаемся) равен индекс текущего минус 1
  28.         let prevTabIndex = tabIndex - 1;
  29.  
  30.         // если индекс таба, на который переключаемся меньше 1,
  31.         // значит нужно переключиться на последний (индекс которого будет равен длине tabsLength)
  32.         if(prevTabIndex < 1) prevTabIndex = tabsLength;
  33.  
  34.         // переключаем панель "налево"
  35.         changePaneUniversal($(this), prevTabIndex, tabsLength, "left");
  36.     })
  37.  
  38.     // привязываем функцию смены таба/панели на клик по правой кнопке
  39.     $(".b-arrow-coral").on("click", function(e) {
  40.         // ищет родительский div со всеми табами
  41.         const tabsDiv = findTabsDiv($(this));
  42.         // ищет индекс текущего таба
  43.         const tabIndex = findTabIndex($(this));
  44.         // определяет кол-во табов (всего)
  45.         const tabsLength = findTabsLength($(this));
  46.  
  47.         // индекс следующего таба (на который переключаемся) равен индекс текущего плюс 1
  48.         let nextTabIndex = tabIndex + 1;
  49.  
  50.         // если индекс таба, на который переключаемся больше, чем кол-во табов (tabsLength),
  51.         // значит нужно переключиться на первый (индекс которого будет равен 1)
  52.         if(nextTabIndex > tabsLength) nextTabIndex = 1;
  53.  
  54.         // переключаем панель "направо"
  55.         changePaneUniversal($(this), nextTabIndex, tabsLength, "right");
  56.     })
  57.  
  58.     // функция для поиска дива с табами
  59.     function findTabsDiv(ctx) {
  60.         return ctx.parents().siblings(".b-tabs__menu")
  61.     }
  62.  
  63.     // функция для поиска индекса (номера) текущего таба
  64.     function findTabIndex(ctx) {
  65.         return Number(ctx.closest(".b-tabs__pane").data("w-tab").slice(-1))
  66.     }
  67.  
  68.     // функция для поиска общего количества табов/панелей
  69.     function findTabsLength(ctx) {
  70.         return ctx.closest(".b-tabs__content").find(".b-tabs__pane").length
  71.     }
  72.  
  73.     /*  Функция смены панели в зависимости от направления
  74.         @ ctx - контекст, сюда передаётся $(this)
  75.         @ currentTabIndex - индекс текущего таба
  76.         @ tabsLength - кол-во табов (всего)
  77.         @ direction - направление право/лево (следующий/предыдущий)
  78.     */
  79.     function changePaneUniversal(ctx, currentTabIndex, tabsLength, direction) {
  80.         // сразу переключаем таб
  81.         changeSelectedTab(currentTabIndex);
  82.  
  83.         // ищет родительский div со всеми табами
  84.         const tabsDiv = findTabsDiv(ctx);
  85.         // ищет текущую панель
  86.         const currentTabPane = ctx.parents(".b-tabs__pane");
  87.  
  88.         // если направление right / следующий
  89.         if(direction === "right") {
  90.             // ищем первую панель (на случай когда нужно переключиться с последней на первую)
  91.             const firstPane = ctx.parents().find(".b-tabs__pane").eq(0);
  92.             // ищем следующую панель
  93.             const nextPane = ctx.parents(".b-tabs__pane").next();
  94.  
  95.             // переключаемся на следующую или первую панель, в зависимости от ситуации
  96.             const nextTabPane = currentTabIndex !== 1
  97.                 ? changeToAnother(currentTabPane, nextPane)
  98.                 : changeToFirst(currentTabPane, firstPane)
  99.         }
  100.  
  101.         // если направление left / предыдущий
  102.         if(direction === "left") {
  103.             // ищем последнюю панель (на случай когда нужно переключиться с первой на последнюю)
  104.             const lastPane = ctx.parents().find(".b-tabs__pane").eq(tabsLength - 1);
  105.             // ищем предудущую панель
  106.             const prevPane = ctx.parents(".b-tabs__pane").prev();
  107.  
  108.             // переключаемся на предыдущую или последнюю панель, в зависимости от ситуации
  109.             const nextTabPane = currentTabIndex !== tabsLength
  110.                 ? changeToAnother(currentTabPane, prevPane)
  111.                 : changeToLast(currentTabPane, lastPane)
  112.         }
  113.  
  114.         // функция для смены на первую панель
  115.         function changeToFirst(currPane, firstPane) {
  116.             // проигрываем анимацию скрытия текущей панели
  117.             currentTabPane.css(hideAnimationCSS);
  118.             // таймаут нужен для синхронизации анимации
  119.             setTimeout(() => {
  120.                 // удаляем класс с текущей панели (скрываем совсем)
  121.                 currentTabPane.removeClass("w--tab-active");
  122.                 // показываем первую панель с анимацией
  123.                 firstPane.css(showAnimationCSS).addClass("w--tab-active");
  124.             }, 300)
  125.         }
  126.  
  127.         // функция для смены на "следующую" панель (любая, отличная от первой и последней)
  128.         function changeToAnother(currPane, nextPane) {
  129.             // проигрываем анимацию скрытия текущей панели
  130.             currPane.css(hideAnimationCSS);
  131.             // таймаут нужен для синхронизации анимации
  132.             setTimeout(() => {
  133.                 // удаляем класс с текущей панели (скрываем совсем)
  134.                 currPane.removeClass("w--tab-active");
  135.                 // проигрываем анимацию показа новой панели
  136.                 nextPane.css(showAnimationCSS);
  137.                 // добавляем класс на новую панель (показываем совсем)
  138.                 nextPane.addClass("w--tab-active");
  139.             }, 300)
  140.         }
  141.  
  142.         // функция для смены на последнюю панель
  143.         function changeToLast(currPane, lastPane) {
  144.             // проигрываем анимацию скрытия текущей панели
  145.             currentTabPane.css(hideAnimationCSS);
  146.             // таймаут нужен для синхронизации анимации
  147.             setTimeout(() => {
  148.                 // удаляем класс с текущей панели (скрываем совсем)
  149.                 currentTabPane.removeClass("w--tab-active");
  150.                 // добавляем класс на новую панель (показываем совсем)
  151.                 lastPane.css(showAnimationCSS).addClass("w--tab-active");
  152.             }, 300)
  153.         }
  154.     }
  155.  
  156.     // функция для смены выделенного таба
  157.     function changeSelectedTab(idx) {
  158.         // удаляем (скрываем) класс w--current с текущего выделенного таба
  159.         $(".b-tabs__menu .w--current").removeClass("w--current");
  160.         // также удаляем класс (скрываем) текущий таб
  161.         $(".b-tabs__content .w--tab-active").removeClass("w--tab-active");
  162.  
  163.         // ставим класс на новый таб по переданному индексу idx (делаем активным) с анимацией
  164.         const tab = $(".b-tabs__menu").find(".b-tabs__link").eq(idx - 1).addClass("w--current").css(showAnimationCSS);
  165.         // ставим класс на панель по переданному индексу idx с анимацией
  166.         const pane = $(".b-tabs__content").find(".b-tabs__pane").eq(idx - 1).addClass("w--tab-active").css(showAnimationCSS);
  167.     }
  168. })
  169.  
  170. </script>
RAW Paste Data