Табы (продолжение)

src/blocks-demo.html

@@ -1868,16 +1868,16 @@
       <div class="tabs">
         <ul class="tabs__links" role="tablist">
           <li class="tabs__link-wrap  tabs__link-wrap--active" role="presentation">
-            <a href="#demo-tab-01" class="tabs__link" role="tab">Вкладка 01</a>
+            <a href="#demo-tab-01" class="tabs__link" data-toggle="tab" role="tab">Вкладка 01</a>
           </li>
           <li class="tabs__link-wrap" role="presentation">
-            <a href="#demo-tab-02" class="tabs__link" role="tab">Вкладка 02</a>
+            <span data-target="#demo-tab-02" class="tabs__link" data-toggle="tab" role="tab">Вкладка 02</span>
           </li>
           <li class="tabs__link-wrap" role="presentation">
-            <a href="#demo-tab-03" class="tabs__link" role="tab">Вкладка 03</a>
+            <a href="#demo-tab-03" class="tabs__link" data-toggle="tab" role="tab">Вкладка 03</a>
           </li>
           <li class="tabs__link-wrap" role="presentation">
-            <a href="#demo-tab-04" class="tabs__link" role="tab">Вкладка 04</a>
+            <a href="#demo-tab-04" class="tabs__link" data-toggle="tab" role="tab">Вкладка 04</a>
           </li>
         </ul>
         <div class="tabs__content-wrapper">

src/blocks/off-canvas/off-canvas.js

@@ -5,11 +5,12 @@ document.addEventListener('DOMContentLoaded', function(){
       event.preventDefault();
       offCanvasToggle();
     }
-    if(event.target.dataset.toggleNative === 'off-canvas') {
-      offCanvasToggle();
-    }
+    // if(event.target.dataset.toggleNative === 'off-canvas') {
+    //   offCanvasToggle();
+    // }
   });
 
+  // реакция на свайп
   document.addEventListener('touchstart', handleTouchStart, false);
   document.addEventListener('touchmove', handleTouchMove, false);
   var xDown = null;
@@ -28,7 +29,7 @@ document.addEventListener('DOMContentLoaded', function(){
 
     var xDiff = xDown - xUp;
     var yDiff = yDown - yUp;
-    if(Math.abs( xDiff )+Math.abs( yDiff )>150){ //to deal with to short swipes
+    if(Math.abs( xDiff )+Math.abs( yDiff )>100){ //to deal with to short swipes
 
       if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
         if ( xDiff > 0 ) {/* left swipe */

src/blocks/tabs/tabs.js

-(function() {
+document.addEventListener('DOMContentLoaded', function(){
 
-  'use strict';
+  // в процессе разработки
 
-  // Источник: https://github.com/callmenick/responsive-tabs/blob/master/js/src/tabs.js
-
-  /**
-   * tabs
-   *
-   * @description The Tabs component.
-   * @param {Object} options The options hash
-   */
-  var tabs = function(options) {
-
-    var el = document.querySelector(options.el);
-    var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
-    var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
-    var activeIndex = 0;
-    var initCalled = false;
-
-    /**
-     * init
-     *
-     * @description Initializes the component by removing the no-js class from
-     *   the component, and attaching event listeners to each of the nav items.
-     *   Returns nothing.
-     */
-    var init = function() {
-      if (!initCalled) {
-        initCalled = true;
-        el.classList.remove('no-js');
-
-        for (var i = 0; i < tabNavigationLinks.length; i++) {
-          var link = tabNavigationLinks[i];
-          handleClick(link, i);
+  document.addEventListener('click', function(event) {
+    if(event.target.dataset.toggle === 'tab') {
+      event.preventDefault();
+      var target = event.target.hash === undefined ? event.target.dataset.target : event.target.hash;
+      console.log( target );
+      if ( target !== undefined ) {
+        console.log( document.querySelector(target) );
       }
     }
-    };
-
-    /**
-     * handleClick
-     *
-     * @description Handles click event listeners on each of the links in the
-     *   tab navigation. Returns nothing.
-     * @param {HTMLElement} link The link to listen for events on
-     * @param {Number} index The index of that link
-     */
-    var handleClick = function(link, index) {
-      link.addEventListener('click', function(e) {
-        e.preventDefault();
-        goToTab(index);
   });
-    };
-
-    /**
-     * goToTab
-     *
-     * @description Goes to a specific tab based on index. Returns nothing.
-     * @param {Number} index The index of the tab to go to
-     */
-    var goToTab = function(index) {
-      if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
-        tabNavigationLinks[activeIndex].classList.remove('is-active');
-        tabNavigationLinks[index].classList.add('is-active');
-        tabContentContainers[activeIndex].classList.remove('is-active');
-        tabContentContainers[index].classList.add('is-active');
-        activeIndex = index;
-      }
-    };
-
-    /**
-     * Returns init and goToTab
-     */
-    return {
-      init: init,
-      goToTab: goToTab
-    };
-
-  };
-
-  /**
-   * Attach to global namespace
-   */
-  window.tabs = tabs;
 
-})();
+});

src/blocks/tabs/tabs.scss

@@ -25,6 +25,7 @@ $field-padding-horizontal:    0.7em !default;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
+    cursor: pointer;
 
     .no-js & {
       display: none;