Misc updates (mainly browser history API)

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 demo/
 .idea/
 _site/
+package-lock.json

AUTHOR.txt

@@ -1,2 +1,4 @@
 Author: Jelle Kralt <[email protected]>
-Date: 2013-07-27
+Date: 2013-07-27
+Author: Kim Steinhaug <[email protected]>
+Date: 2020-06-09

README.md

@@ -1,8 +1,29 @@
-jQuery Responsive Tabs
+jQuery Responsive Tabs+
 ==============
 
 This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.
-Check out a demo at http://jellekralt.github.io/Responsive-Tabs/
+Check out a demo at https://steinhaug.github.io/Responsive-Tabs/
+
+Version log
+=========
+__v1.6.7__ - updated 17.01.2022
+
+- Upgraded all node modules
+- Updated Gulp script from 3.x to 4.x syntax
+
+__v1.6.6__ - updated 09.06.2020
+
+- Overhaulted documentation and files.
+
+__v1.6.5__ - updated 05.06.2020
+
++ activate method, supports selector name
+
+__v1.6.4__ - updated 05.06.2020
+
++ Browser history buttons now working
+
+__v1.6.3__ Forked
 
 Features
 =========
@@ -20,14 +41,13 @@ Features
 + Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
 + Multiple device support (Web, Tablet, Mobile, etc)
 
-
 How to use
 ==========
 
 * Requires jQuery (minimaly jQuery 1.7.0)
-* Include jquery.responsiveTabs.js
+* Include jquery.responsiveTabs.min.js
 ```html
-<script src="js/jquery.responsiveTabs.js"></script>
+<script src="js/jquery.responsiveTabs.min.js"></script>
 ```
 * Include responsive-tabs.css for the basic Tabs to Accordion switching
 ```html
@@ -54,31 +74,45 @@ How to use
 </div>
 ```
 
-* Use this jQuery function to enable responsive tabs on the selected element:
+* Use this jQuery function to enable responsive tabs on the selected element that works correctly with the History API and when initiated as accordion for mobile:
 
 ```javascript
-$('#responsiveTabsDemo').responsiveTabs({
-    startCollapsed: 'accordion'
+var $selTab;
+$(document).ready(function () {
+    $tabs = $('#responsiveTabsDemo');
+    $tabs.responsiveTabs({
+        startCollapsed: 'accordion',
+        activate: function(event, elTab){
+            $selTab = elTab.selector;
+        }
+    });
+    if(typeof($selTab) === "undefined"){
+        var winHash = window.location.hash;
+        if(winHash.length)
+            $tabs.responsiveTabs('activate', winHash);
+    }
 });
 ```
 
-Get
-=======
+Get this version
+================
+
+### bower.json
+
+    "responsive-tabs": "steinhaug/Responsive-Tabs#^1.6.x"
 
 ### Bower
 
-    bower install responsive-tabs
+    bower install steinhaug/Responsive-Tabs#^1.6.x --save
 
-### NPM
+### Github clone
 
-    npm install responsive-tabs
-
-### CDN
+    git clone https://github.com/steinhaug/Responsive-Tabs.git
 
-Responsive Tabs is available on [jsDelivr](http://www.jsdelivr.com/)
+### Github release
+
+    https://github.com/steinhaug/Responsive-Tabs/releases/tag/v1.6.7
 
-    http://www.jsdelivr.com/#!jquery.responsive-tabs
-
 API
 ===
 
@@ -274,6 +308,12 @@ This method activates/opens a tab by using a zero based tab reference
 ```javascript
 $('#responsiveTabsDemo').responsiveTabs('activate', 1); // This would open the second tab
 ```
+or using the tab selector name reference
+
+```javascript
+$('#responsiveTabsDemo').responsiveTabs('activate', '#tab-1'); // This would open the tab with given selector
+```
+
 
 ### Deactivate
 This method deactivates/closes a tab by using a zero based tab reference
@@ -339,9 +379,9 @@ This event is triggered when the state of the plugin changes
 
 Credits
 =========
-The idea for this plugin is based on 'Easy Responsive Tabs to Accordion' by samsono (github.com/samsono)
-
-https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
++ The idea for this plugin is based on 'Easy Responsive Tabs to Accordion' by [samsono](https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion)
++ Patches and updates applied by [Kim Steinhaug](//github.com/steinhaug/)
++ Fork me on Github ribbons made by [Aral Balkan](https://ar.al/scribbles/fork-me-on-github-retina-ribbons/)
 
 Support
 =======

_config.yml

@@ -0,0 +1,5 @@
+remote_theme: pages-themes/[email protected]
+plugins:
+- jekyll-remote-theme
+google_analytics: G-8ZC36LC0HH
+show_downloads: true

assets/css/style.scss

@@ -0,0 +1,35 @@
+---
+---
+
+@import 'jekyll-theme-leap-day';
+
+body {
+    color:#2b2b2b;
+    background: url(../images/body-background.png) #e9eae6;
+}
+header {
+    background: url(../images/background.png) #faff0c;
+}
+header h1 {
+    color: #373835;
+    text-shadow: 0px 2px 0px #fdffac;
+}
+header p {
+    color: #3b3b3b;
+}
+#banner {
+    background: #9b9b9b;
+    border: 1px solid #747474;
+}
+#banner .downloads span {
+    color: #eae2c1;
+}
+#banner .button {
+    border: 1px solid #d5d40c;
+    background: linear-gradient(#fffc84, #d5d40c);
+    background-color: #fffc84;
+    border-radius: 10px;
+}
+#banner .fork {
+    background-color: #fffc84;
+}

css/style.css

@@ -1,3 +1,8 @@
+:root {
+  --main-tab-color: #5a9ef7;
+  --border-tab-color: #0956bb;
+}
+
 body {
 	font-family: Arial, Helvetica, Verdana, sans-serif;
 	font-size: 12px;
@@ -9,20 +14,20 @@ body {
 .r-tabs {
 	position: relative;
 
-	background-color: #00c5ad;
+	background-color: var(--main-tab-color);
 
-	border-top: 1px solid #00c5ad;
-	border-right: 1px solid #00c5ad;
-	border-left: 1px solid #00c5ad;
-	border-bottom: 4px solid #00c5ad;
+	border-top: 1px solid var(--main-tab-color);
+	border-right: 1px solid var(--main-tab-color);
+	border-left: 1px solid var(--main-tab-color);
+	border-bottom: 4px solid var(--main-tab-color);
 	border-radius: 4px;
 
 }
 
 /* Tab element */
 .r-tabs .r-tabs-nav .r-tabs-tab {
 	position: relative;
-	background-color: #00c5ad;
+	background-color: var(--main-tab-color);
 }
 
 /* Tab anchor */
@@ -44,7 +49,7 @@ body {
 
 /* Active state tab anchor */
 .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
-	color: #00c5ad;
+	color: var(--main-tab-color);
 	text-shadow: none;
 
 	background-color: white;
@@ -69,7 +74,7 @@ body {
 	display: block;
 	padding: 10px;
 
-	background-color: #00c5ad;
+	background-color: var(--main-tab-color);
 	color: #fff;
 	font-weight: bold;
 	text-decoration: none;
@@ -83,7 +88,7 @@ body {
 /* Active accordion anchor */
 .r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
 	background-color: #fff;
-	color: #00c5ad;
+	color: var(--main-tab-color);
 	text-shadow: none;
 }
 
@@ -111,8 +116,8 @@ button {
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
-	background-color: #00c5ad;
-	box-shadow: 0px 3px 0px 0px #00ab94;
+	background-color: var(--main-tab-color);
+	box-shadow: 0px 3px 0px 0px var(--border-tab-color);
 
 	cursor: pointer;
 }
@@ -128,8 +133,8 @@ button {
 
 	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 	font-size: 14px;
-	color: #00c5ad;
-	border: 2px solid #00ab94;
+	color: var(--main-tab-color);
+	border: 2px solid var(--border-tab-color);
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;

demo.html

@@ -9,7 +9,7 @@
     <link type="text/css" rel="stylesheet" href="css/style.css" />
 </head>
 <body>
-
+    <a href="https://github.com/steinhaug/Responsive-Tabs/"><img style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; z-index: 1" src="img/[email protected]" alt="Fork me on GitHub"></a>
 
     <!--Horizontal Tab-->
     <div id="horizontalTab">
@@ -22,16 +22,21 @@
         </ul>
 
         <div id="tab-1">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu scelerisque eros. Fusce ante orci, hendrerit sit amet metus sit amet, venenatis sodales felis. Morbi vel mi in leo dignissim convallis in a neque. Suspendisse sollicitudin nibh non dapibus condimentum. Etiam sit amet arcu ultricies, porttitor justo eget, scelerisque urna. Praesent non ligula nec ligula euismod condimentum eget sed augue. Ut feugiat, turpis id sollicitudin vestibulum, tellus massa adipiscing nisl, quis cursus nisl arcu vel ipsum.</p>
+            <h2>V1.6.6</h2>
+            <p>Tested in Chrome, Edge and Firefox with desktop and mobile display with history API.</p>
+            <p>Display screen smaller to enable accordion, and use theese links for testing:</p>
+            <p><a href="demo.html#tab-3">demo.html#tab-3</a></p>
         </div>
         <div id="tab-2">
             <p>Quisque sodales sodales lacus pharetra bibendum. Etiam commodo non velit ac rhoncus. Mauris euismod purus sem, ac adipiscing quam laoreet et. Praesent vulputate ornare sem vel scelerisque. Ut dictum augue non erat lacinia, sed lobortis elit gravida. Proin ante massa, ornare accumsan ultricies et, posuere sit amet magna. Praesent dignissim, enim sed malesuada luctus, arcu sapien sodales sapien, ut placerat eros nunc vel est. Donec tristique mi turpis, et sodales nibh gravida eu. Etiam odio risus, porttitor non lacus id, rhoncus tempus tortor. Curabitur tincidunt molestie turpis, ut luctus nibh sollicitudin vel. Sed vel luctus nisi, at mattis metus. Aenean ultricies dolor est, a congue ante dapibus varius. Nulla at auctor nunc. Curabitur accumsan feugiat felis ut pretium. Praesent semper semper nisi, eu cursus augue.</p>
         </div>
         <div id="tab-3">
-            <p>Mauris facilisis elit ut sem eleifend accumsan molestie sit amet dolor. Pellentesque dapibus arcu eu lorem laoreet, vitae cursus metus mattis. Nullam eget porta enim, eu rutrum magna. Duis quis tincidunt sem, sit amet faucibus magna. Integer commodo, turpis consequat fermentum egestas, leo odio posuere dui, elementum placerat eros erat id augue. Nullam at eros eget urna vestibulum malesuada vitae eu mauris. Aliquam interdum rhoncus velit, quis scelerisque leo viverra non. Suspendisse id feugiat dui. Nulla in aliquet leo. Proin vel magna sed est gravida rhoncus. Mauris lobortis condimentum nibh, vitae bibendum tortor vehicula ac. Curabitur posuere arcu eros.</p>
+            <p>Please use the browser back buttons to see that the plugin correctly remembers the history and places the tabs in correct order.</p>
+            <p>Suspendisse eu sapien aliquam, tempus ex molestie, laoreet ex. Aenean auctor aliquam hendrerit. Proin nec consequat turpis, at suscipit leo. Aliquam vulputate vitae nisl eget posuere. Sed egestas ut tortor eu egestas. Phasellus iaculis volutpat ipsum vitae pellentesque. Sed blandit mollis placerat.</p>
         </div>
         <div id="tab-4">
             <p>Donec egestas facilisis sapien sit amet euismod. Donec mollis lectus neque, in consectetur magna sodales et. Nam rutrum libero vitae magna sollicitudin aliquet. In tristique ultrices euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pretium congue sodales. Curabitur egestas, metus sed ultrices suscipit, metus nibh vehicula ligula, vel volutpat sapien nibh sed quam. Etiam elementum nisi eu risus congue, ut eleifend lectus ultricies. Vivamus in ligula fermentum, bibendum sapien eget, pretium est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ante non risus rutrum faucibus.</p>
+            <p>Nunc ut tortor a elit commodo posuere. Nullam cursus orci at venenatis congue. Curabitur facilisis cursus mauris, quis pharetra enim pharetra vitae. Etiam sed elit dolor. Maecenas blandit sapien ut elit feugiat imperdiet. Duis libero magna, tempor vel efficitur in, malesuada ac sapien. Aenean hendrerit ligula non placerat aliquam. Pellentesque ante libero, commodo id tempus eget, accumsan eget enim. Pellentesque nec sodales dui, eget mollis nisi. Duis tellus nisl, elementum vitae tempor ac, convallis et dolor. Fusce dapibus dolor neque, eget ornare ante dignissim ut.</p>
         </div>
         <div id="tab-5">
             <p>Proin dignissim faucibus odio sollicitudin sagittis. Phasellus aliquet, erat vitae mollis consectetur, enim lectus ornare libero, et porta mi dui eu tellus. Morbi lobortis, elit at euismod porta, magna lacus mattis massa, a lacinia ligula risus et lectus. Sed et aliquam ligula. Nunc venenatis orci magna, quis facilisis sem porta non. Nunc sodales arcu in consectetur malesuada. Maecenas varius justo lacus, scelerisque viverra tellus luctus eu. Nam imperdiet ultricies suscipit. Ut urna mauris, eleifend quis lacinia non, mollis id libero. Praesent pharetra viverra ipsum at posuere. Quisque commodo tortor nec hendrerit faucibus. Fusce convallis urna et vehicula tincidunt. Duis sed vehicula justo, eu placerat nisi. Donec facilisis augue non turpis semper, eget condimentum mauris malesuada. Nunc in dignissim mi, sed laoreet felis.</p>
@@ -54,24 +59,47 @@
 
     <!-- jQuery with fallback to the 1.* for old IE -->
     <!--[if lt IE 9]>
-        <script src="js/jquery-1.11.0.min.js"></script>
+        <script src="js/jquery-1.12.4.min.js"></script>
     <![endif]-->
     <!--[if gte IE 9]><!-->
-        <script src="js/jquery-2.1.0.min.js"></script>
+        <script src="js/jquery-2.2.4.min.js"></script>
     <!--<![endif]-->
 
     <!-- Responsive Tabs JS -->
-    <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
+    <script src="js/jquery.responsiveTabs.min.js" type="text/javascript"></script>
+    <script src="js/demo.js" type="text/javascript"></script>
 
     <script type="text/javascript">
+
+        var $selTab;
+
         $(document).ready(function () {
             var $tabs = $('#horizontalTab');
             $tabs.responsiveTabs({
-                rotate: false,
-                startCollapsed: 'accordion',
                 collapsible: 'accordion',
+                startCollapsed: 'accordion',
+                scrollToAccordion: true,
                 setHash: true,
                 disabled: [3,4],
+                rotate: false,
+                activate: function(event, elTab){
+                    $selTab = elTab.selector;
+                    console.log('Tab set: ' + $selTab);
+                },
+                click: function(e, tab) {
+                    $('.info').html('Tab <strong>' + tab.id + '</strong> clicked!');
+                }
+            });
+
+            if(typeof($selTab) === "undefined"){
+                var winHash = window.location.hash;
+                if(winHash.length){
+                    console.log('URL fragment present, we initiate tab if it exists: ' + winHash);
+                    $tabs.responsiveTabs('activate', winHash);
+                }
+            }
+
+/*
                 click: function(e, tab) {
                     $('.info').html('Tab <strong>' + tab.id + '</strong> clicked!');
                 },
@@ -82,7 +110,8 @@
                     //console.log(state);
                     $('.info').html('Switched from <strong>' + state.oldState + '</strong> state to <strong>' + state.newState + '</strong> state!');
                 }
-            });
+*/
+
 
             $('#start-rotation').on('click', function() {
                 $tabs.responsiveTabs('startRotation', 1000);
@@ -103,6 +132,14 @@
                 $tabs.responsiveTabs('activate', $(this).val());
             });
 
+            $('.info').html('Tabs v' + $tabs.responsiveTabs('getversion') + ' running!');
+
+/*
+            if( compareVer("1.6.5", $tabs.responsiveTabs('getversion')) < 0 ){
+                alert('You need to update bower!');
+            }
+*/
+
         });
     </script>
 </body>