Merge pull request #35 from mikejacobson/fix-mult-refresh

Fix window resize when multiple instances on page

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-bootstrap-scrolling-tabs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": [
     "./dist/jquery.scrolling-tabs.js",
     "./dist/jquery.scrolling-tabs.css"

dist/jquery.scrolling-tabs.css

@@ -1,6 +1,6 @@
 /**
  * jquery-bootstrap-scrolling-tabs
- * @version v2.0.0
+ * @version v2.0.1
  * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
  * @author Mike Jacobson <[email protected]>
  * @license MIT License, http://www.opensource.org/licenses/MIT

dist/jquery.scrolling-tabs.js

@@ -1,6 +1,6 @@
 /**
  * jquery-bootstrap-scrolling-tabs
- * @version v2.0.0
+ * @version v2.0.1
  * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
  * @author Mike Jacobson <[email protected]>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -224,6 +224,7 @@
 
 ;(function ($, window) {
   'use strict';
+  /* jshint unused:false */
 
   /* exported CONSTANTS */
   var CONSTANTS = {
@@ -283,9 +284,12 @@
         timeout = setTimeout(delayed, threshold || 100);
       };
     };
-    $.fn[sr] = function (fn) { return fn ? this.bind(CONSTANTS.EVENTS.WINDOW_RESIZE, debounce(fn)) : this.trigger(sr); };
+    $.fn[sr] = function (fn, customEventName) {
+      var eventName = customEventName || CONSTANTS.EVENTS.WINDOW_RESIZE;
+      return fn ? this.bind(eventName, debounce(fn)) : this.trigger(sr);
+    };
 
-  })('smartresize');
+  })('smartresizeScrtabs');
 
   /* ***********************************************************************************
    * ElementsHandler - Class that each instance of ScrollingTabsControl will instantiate
@@ -444,7 +448,8 @@
         var ehd = this,
             stc = ehd.stc,
             evh = stc.eventHandlers,
-            ev = CONSTANTS.EVENTS;
+            ev = CONSTANTS.EVENTS,
+            resizeEventName = ev.WINDOW_RESIZE + stc.instanceId;
 
         if (settings.enableSwiping) {
           ehd.listenForTouchEvents();
@@ -469,7 +474,9 @@
             .on(ev.CLICK, stc.tabClickHandler);
         }
 
-        stc.$win.off('.scrtabs').smartresize(function (e) { evh.handleWindowResize.call(evh, e); });
+        stc.$win
+          .off(resizeEventName)
+          .smartresizeScrtabs(function (e) { evh.handleWindowResize.call(evh, e); }, resizeEventName);
 
         $('body').on(CONSTANTS.EVENTS.FORCE_REFRESH, stc.elementsHandler.refreshAllElementSizes.bind(stc.elementsHandler));
       };
@@ -921,6 +928,7 @@
     var stc = this;
 
     stc.$tabsContainer = $tabsContainer;
+    stc.instanceId = $.fn.scrollingTabs.nextInstanceId++;
 
     stc.movableContainerLeftPos = 0;
     stc.scrollArrowsVisible = false;
@@ -1520,6 +1528,7 @@
       });
 
       function handleClickOnDropdownMenuItem() {
+        /* jshint validthis: true */
         var $selectedMenuItemAnc = $(this),
             $selectedMenuItemLi = $selectedMenuItemAnc.parent('li'),
             $selectedMenuItemDropdownMenu = $selectedMenuItemLi.parent('.dropdown-menu'),
@@ -1603,6 +1612,7 @@
   }
 
   function scrollToActiveTab() {
+    /* jshint validthis: true */
     var $targetElInstance = $(this),
         scrtabsData = $targetElInstance.data('scrtabs');
 
@@ -1669,6 +1679,7 @@
   };
 
   function destroyPlugin() {
+    /* jshint validthis: true */
     var $targetElInstance = $(this),
         scrtabsData = $targetElInstance.data('scrtabs'),
         $tabsContainer;
@@ -1727,7 +1738,10 @@
 
     $targetElInstance.removeData('scrtabs');
 
-    $(window).off(CONSTANTS.EVENTS.WINDOW_RESIZE);
+    while(--$.fn.scrollingTabs.nextInstanceId >= 0) {
+      $(window).off(CONSTANTS.EVENTS.WINDOW_RESIZE + $.fn.scrollingTabs.nextInstanceId);
+    }
+
     $('body').off(CONSTANTS.EVENTS.FORCE_REFRESH);
   }
 
@@ -1743,6 +1757,8 @@
     }
   };
 
+  $.fn.scrollingTabs.nextInstanceId = 0;
+
   $.fn.scrollingTabs.defaults = {
     tabs: null,
     propPaneId: 'paneId',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-bootstrap-scrolling-tabs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "jQuery plugin for scrollable Bootstrap Tabs",
   "homepage": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs",
   "bugs": "https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs/issues",

run/data-driven-mult.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/jquery.scrolling-tabs.css">
+
+    <style>
+      .left-side {
+        width: 50%;
+      }
+
+      .right-side {
+        width: 50%;
+      }
+
+      .st-demo-header {
+        background-color: #666666;
+        color: white;
+        font-size: 24px;
+        padding: 8px 24px;
+      }
+
+      .st-demo-header button {
+        color: black;
+        font-size: 12px;
+      }
+
+      .st-demo-subheader {
+        background-color: #f0f0f0;
+        color: #333;
+        font-size: 16px;
+        height: 65px;
+        margin-top: 50px;
+        padding: 8px 24px;
+      }
+
+      .st-demo-subheader:first-child {
+        margin-top: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+
+    <div class="st-demo-header">
+      <div>jquery-bootstrap-scrolling-tabs Demo - Data Driven</div>
+      <div>Using Tabs Array</div>
+      <div>
+        <button type="button" class="btn-add-tab">Add Tab</button>
+        <button type="button" class="btn-remove-tab">Remove Tab</button>
+        <button type="button" class="btn-update-tab">Update Tab</button>
+        <button type="button" class="btn-move-tab">Move Tabs</button>
+        <button type="button" class="btn-destroy">Destroy</button>
+      </div>
+
+    </div>
+
+    <!-- build .nav-tabs and .tab-content in here -->
+    <div id="tabs1" class=tabs-inside-here></div>
+    <br /><br />
+    <div id="tabs2" class="tabs-inside-here"></div>
+
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+
+    <script src="../dist/jquery.scrolling-tabs.js"></script>
+
+    <script>
+    ;(function() {
+      'use strict';
+
+
+      var tabs = [
+        { paneId: 'tab00', title: 'Tab Index 0', content: 'Tab Index 0 Content', active: true, disabled: false },
+        { paneId: 'tab01', title: 'Tab Index 1', content: 'Tab Index 1 Content', active: false, disabled: false },
+        { paneId: 'tab02', title: 'Tab Index 2', content: 'Tab Index 2 Content', active: false, disabled: false },
+        { paneId: 'tab03', title: 'Tab Index 3', content: 'Tab Index 3 Content', active: false, disabled: false },
+        { paneId: 'tab04', title: 'Tab Index 4', content: 'Tab Index 4 Content', active: false, disabled: true },
+        { paneId: 'tab05', title: 'Tab Index 5', content: 'Tab Index 5 Content', active: false, disabled: false },
+        { paneId: 'tab06', title: 'Tab Index 6', content: 'Tab Index 6 Content', active: false, disabled: false },
+        { paneId: 'tab07', title: 'Tab Index 7', content: 'Tab Index 7 Content', active: false, disabled: false },
+        { paneId: 'tab08', title: 'Tab Index 8', content: 'Tab Index 8 Content', active: false, disabled: false },
+        { paneId: 'tab09', title: 'Tab Index 9', content: 'Tab Index 9 Content', active: false, disabled: false },
+        { paneId: 'tab10', title: 'Tab Index 10', content: 'Tab Index 10 Content', active: false, disabled: false },
+        { paneId: 'tab11', title: 'Tab Index 11', content: 'Tab Index 11 Content', active: false, disabled: false }
+      ];
+
+      var tabs2 = [
+        { paneId: 'tab2_00', title: 'Tab2 Index 0', content: 'Tab2 Index 0 Content', active: true, disabled: false },
+        { paneId: 'tab2_01', title: 'Tab2 Index 1', content: 'Tab2 Index 1 Content', active: false, disabled: false },
+        { paneId: 'tab2_02', title: 'Tab2 Index 2', content: 'Tab2 Index 2 Content', active: false, disabled: false },
+        { paneId: 'tab2_03', title: 'Tab2 Index 3', content: 'Tab2 Index 3 Content', active: false, disabled: false },
+        { paneId: 'tab2_04', title: 'Tab2 Index 4', content: 'Tab2 Index 4 Content', active: false, disabled: true },
+        { paneId: 'tab2_05', title: 'Tab2 Index 5', content: 'Tab2 Index 5 Content', active: false, disabled: false },
+        { paneId: 'tab2_06', title: 'Tab2 Index 6', content: 'Tab2 Index 6 Content', active: false, disabled: false },
+        { paneId: 'tab2_07', title: 'Tab2 Index 7', content: 'Tab2 Index 7 Content', active: false, disabled: false },
+        { paneId: 'tab2_08', title: 'Tab2 Index 8', content: 'Tab2 Index 8 Content', active: false, disabled: false },
+        { paneId: 'tab2_09', title: 'Tab2 Index 9', content: 'Tab2 Index 9 Content', active: false, disabled: false },
+        { paneId: 'tab2_10', title: 'Tab2 Index 10', content: 'Tab2 Index 10 Content', active: false, disabled: false },
+        { paneId: 'tab2_11', title: 'Tab2 Index 11', content: 'Tab2 Index 11 Content', active: false, disabled: false }
+      ],
+      lastTabId = 11;
+
+
+
+      $(activate);
+
+
+      function activate() {
+
+        $('#tabs1').scrollingTabs({
+          tabs: tabs, // required,
+          propPaneId: 'paneId', // optional - pass in default value for demo purposes
+          propTitle: 'title', // optional - pass in default value for demo purposes
+          propActive: 'active', // optional - pass in default value for demo purposes
+          propDisabled: 'disabled', // optional - pass in default value for demo purposes
+          propContent: 'content', // optional - pass in default value for demo purposes
+          scrollToTabEdge: false, // optional - pass in default value for demo purposes
+          disableScrollArrowsOnFullyScrolled: true,
+          enableSwiping: true,
+          //widthMultiplier: 0.7,
+          tabClickHandler: function () {
+            console.log("click!! ", Date.now());
+          }
+        });
+
+        $('#tabs2').scrollingTabs({
+          tabs: tabs2, // required,
+          propPaneId: 'paneId', // optional - pass in default value for demo purposes
+          propTitle: 'title', // optional - pass in default value for demo purposes
+          propActive: 'active', // optional - pass in default value for demo purposes
+          propDisabled: 'disabled', // optional - pass in default value for demo purposes
+          propContent: 'content', // optional - pass in default value for demo purposes
+          scrollToTabEdge: false, // optional - pass in default value for demo purposes
+          disableScrollArrowsOnFullyScrolled: true,
+          enableSwiping: true,
+          //widthMultiplier: 0.7,
+          tabClickHandler: function () {
+            console.log("click!! ", Date.now());
+          }
+        });
+
+        $('.btn-add-tab').click(addTab);
+        $('.btn-remove-tab').click(removeTab);
+        $('.btn-update-tab').click(updateTab);
+        $('.btn-move-tab').click(moveTab);
+        $('.btn-destroy').click(destroy);
+      }
+
+      function destroy() {
+        $('.tabs-inside-here').scrollingTabs('destroy');
+      }
+
+      function updateTab() {
+        console.log("update " + tabs[1].title);
+
+        tabs[1].title = 'UPDATED ' + tabs[1].title;
+        tabs[1].content = 'UPDATED ' + tabs[1].content;
+
+        $('.tabs-inside-here').scrollingTabs('refresh');
+      }
+
+      function moveTab() {
+        console.log("move " + tabs[1].title + " to after " + tabs[4].title +
+                    ", move " + tabs[9].title + " to before " + tabs[6].title);
+
+        tabs.splice(4, 0, tabs.splice(1, 1)[0]); // move 1 to right after 4
+        tabs.splice(6, 0, tabs.splice(9, 1)[0]); // move 9 to right before 6
+
+        $('.tabs-inside-here').scrollingTabs('refresh');
+      }
+
+      function addTab() {
+        var newTab = {
+          paneId: 'tab' + (++lastTabId),
+          title: 'Tab Index ' + lastTabId,
+          content: 'Tab Index ' + lastTabId + ' Content',
+          active: true,
+          disabled: false
+        };
+
+        console.log("append new tab ", newTab.title);
+
+        // deactivate currently active tab
+        tabs.some(function (tab) {
+          if (tab.active) {
+            tab.active = false;
+            return true; // exit loop
+          }
+        });
+
+        tabs.push(newTab);
+
+        $('#tabs1').scrollingTabs('refresh', {
+          forceActiveTab: true // make our new tab active
+        });
+      }
+
+      function removeTab() {
+        console.log("remove tab ", tabs[2].title);
+
+        tabs.splice(2, 1);
+
+        $('.tabs-inside-here').scrollingTabs('refresh');
+      }
+
+    }());
+
+    </script>
+  </body>
+
+</html>