Updated to all new v4

Author: techlab

.npmignore

@@ -3,6 +3,7 @@
 .DS_Store
 .git
 .github
+.gitignore
 .hg
 .lock-wscript
 .svn
@@ -24,6 +25,7 @@ work
 build
 src
 test
+examples
 spec
 pids
 logs
@@ -58,7 +60,14 @@ Thumbs.db
 .Spotlight-V100
 .Trashes
 
-/ref.txt
 /node_modules/
 /bower_components/
 /vendor/
+
+/ref.txt
+/CODE_OF_CONDUCT.md
+/CONTRIBUTING.md
+/composer.json
+/gulpfile.js
+/karma.conf.js
+/.travis.yml

CHANGELOG.md

@@ -0,0 +1,42 @@
+CHANGELOG
+=========
+
+v4.0.1
+-----
+- **Added:** Support for jQuery Slim version
+- **Added:** Public function `fixHeight`. See http://techlaboratory.net/jquery-smarttab#func-fixheight
+- **Added:** Public function `getInfo` to get tab index and tota tabs. See http://techlaboratory.net/jquery-smarttab#func-getinfo
+- **Added:** `goToTab` function with force parameter. See http://techlaboratory.net/jquery-smarttab#func-gototab
+- **Added:** New themes
+- **Added:** Colors are changable dynamically using CSS variables.
+- **Added:** Bootstrap 5 support
+- **Added:** `initialized` event . See http://techlaboratory.net/jquery-smarttab#event-initialized
+- **Added:** Move CSS class names to options
+- **Added:** Transition animations can be extended
+- **Added:** CSS Animations support on transition animations. Supports [Animate.css](https://animate.style/)
+- **Changed:** JavaScript and CSS code is rewritten  
+- **Changed:** Imporoved all CSS themes
+- **Changed:** Made most of the options can changed with `setOptions` function
+- **Changed:** Rewritten option names and properties with minimal and meaningful names
+- **Changed:** Improved transition animations
+- **Removed:** Dark mode is removed. Added CSS variable support to change any colors. See example for dark colors.
+- **Removed:** Removed orientation option, instead add `st-vertical` CSS class to the main element
+
+
+v3.1.1
+-----
+- **Changed:** Updated themes and demos, and a few optimizations
+
+v3.0.1
+-----
+- **Added:** Init method optimised
+
+v3.0.0
+-----
+- **Changed:** Completely rewritten the code from scratch
+- **Added:** More speed and optimised performance
+- **Added:** Stand alone CSS
+- **Added:** Sass is used for CSS generation
+- **Added:** Improved themes with vertical and horizontal layouts
+- **Added:** Responsive themes
+- **Added:** External ajax call support

CONTRIBUTING.md

@@ -7,7 +7,8 @@
 - Add new test cases.
 - Add documentation.
 - Add a demo page.
-- [Donate](https://www.paypal.me/dipuraj) money for the project on [![Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
+- [GitHub Sponsor](https://github.com/sponsors/techlab) - Sponsor on GitHub.
+- [Donate on Paypal](https://www.paypal.me/dipuraj)
 
 ## How to contribute code?
 Here are the basic steps to get started contributing code:

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Dipu Raj
+Copyright (c) 2022 Dipu Raj
 http://techlaboratory.net
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

README.md

@@ -1,10 +1,11 @@
-# jQuery Smart Tab v3
+# jQuery Smart Tab v4
 #### The flexible jQuery tab control plugin
 
 [![Build Status](https://travis-ci.org/techlab/jquery-smarttab.svg?branch=master)](https://travis-ci.org/techlab/jquery-smarttab)
 [![npm version](https://badge.fury.io/js/jquery-smarttab.svg)](https://badge.fury.io/js/jquery-smarttab)
 [![Latest Stable Version](https://poser.pugx.org/techlab/jquery-smarttab/v/stable)](https://packagist.org/packages/techlab/jquery-smarttab)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smarttab/master/LICENSE)
+[![GitHub Sponsor](https://img.shields.io/badge/Sponsor-techlab-blue.svg?logo=github)](https://github.com/sponsors/techlab)
 [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj)
 
 Smart Tab is a flexible and heavily customizable **jQuery Tab control plugin**.
@@ -19,23 +20,25 @@ Smart Tab is a flexible and heavily customizable **jQuery Tab control plugin**.
 
 Demos
 -----
-  + [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v3)
-  + [Ajax Contents](http://techlaboratory.net/projects/demo/jquery-smart-tab/v3/ajax)
-  + [Multiple Tabs](http://techlaboratory.net/projects/demo/jquery-smart-tab/v3/multiple)
+  + [Basic Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4)
+  + [Ajax Contents](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/ajax)
+  + [Multiple Tabs](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/multiple)
+  + [Vertical Tab Layout](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/vertical)
+  + [Bootstrap Modal Example](http://techlaboratory.net/projects/demo/jquery-smart-tab/v4/bootstrap-modal)
 
 Screenshots
 -----
-![jQuery Smart Tab default](http://techlaboratory.net/assets/media/jquery-smart-tab/smarttab-v3-default.png)   
+![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v4-basic.gif)   
 
-![jQuery Smart Tab dark](http://techlaboratory.net/assets/media/jquery-smart-tab/smarttab-v3-dark.png)   
+![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v6-brick.png) 
 
-![jQuery Smart Tab tabs](http://techlaboratory.net/assets/media/jquery-smart-tab/smarttab-v3-tabs.png)   
+![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v6-basic.png)
 
-![jQuery Smart Tab brick](http://techlaboratory.net/assets/media/jquery-smart-tab/smarttab-v3-brick.png)
+![jQuery Smart Tab](https://techlaboratory.net/assets/media/jquery-smart-tab/v4/st-v6-pills.png)   
 
 Requirements
 -----
-  + [jQuery](http://jquery.com/) (supports from jQuery-1.11.1+ to the latest jQuery-3.5.0)
+  + [jQuery](http://jquery.com/) (supports jQuery 1.11.1+ to jQuery 3.6+ and jQuery Slim versions)
 
 Installation
 -----
@@ -46,49 +49,79 @@ Installation
 ### [Yarn](https://yarn.pm/jquery-smarttab)
     yarn add jquery-smarttab
 
-### [Composer](https://packagist.org/packages/techlab/jquery-smarttab)
-    composer require techlab/jquery-smarttab
-
 ### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/jquery-smarttab)
 ```html
 <!-- CSS -->
-<link href="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.1.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/jquery-smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
 
 <!-- JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.1.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/npm/jquery-smarttab@4/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
 ```
 
 ### [CDN - UNPKG](https://unpkg.com/browse/jquery-smarttab/)
 ```html
 <!-- CSS -->
-<link href="https://unpkg.com/jquery-smarttab@3.1.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
+<link href="https://unpkg.com/jquery-smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
 
 <!-- JavaScript -->
-<script src="https://unpkg.com/jquery-smarttab@3.1.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
+<script src="https://unpkg.com/jquery-smarttab@4/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
+```
+
+### Common JS/Webpack
+```js
+var $ = require("jquery");
+require( "jquery-smarttab/dist/css/smart_tab_all.css");
+const smartTab = require("jquery-smarttab");
+
+$(function() {
+    $('#smarttab').smartTab();
+});
+```
+### ES6/Babel
+```js
+import $ from "jquery";
+import "jquery-smarttab/dist/css/smart_tab_all.css";
+import smartTab from 'jquery-smarttab';
+
+$(function() {
+    $('#smarttab').smartTab();
+});
+```
+
+#### Note: you may have to install the required dependencies 
+```bash
+npm i jquery
+npm i jquery-smarttab
+
+// If you are using Webpack, install
+npm i webpack webpack-cli style-loader css-loader --save-dev
 ```
 
 ### Download
 #### [Download from GitHub](https://github.com/techlab/jquery-smarttab/archive/master.zip)    
 
 Features
 -----
-
-+ Responsive design
-+ Standalone CSS
-+ Bootstrap compatible
-+ Various themes included
-+ Customizable CSS
-+ Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
-+ URL navigation and tab selection
-+ Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
-+ Auto content height adjustment
-+ Auto Progress (automatic navigation of tabs)
-+ Ajax content loading support
-+ Keyboard navigation
-+ External anchor support
-+ Custom events
-+ Supports all modern browsers
-+ Easy to implement and minimal HTML required
+- Easy to implement and minimal HTML required
+- Supports all modern browsers
+- Responsive CSS design
+- Bootstrap compatible
+- Cool themes included and can be easly customize
+- Easy color cusomization using CSS variables
+- Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css)
+- Transition animations can be added easly by extending
+- CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/))
+- Accessible controls
+- External controls support
+- Easy ajax content integration
+- Keyboard navigation
+- Auto content height adjustment
+- Buit-in loader
+- Buit-in events
+- UMD (Universal Module Definition) support
+- Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim)
+- URL navigation and tab selection
+- Auto Progress (automatic navigation of tabs)
 
 Usage
 -----
@@ -150,15 +183,11 @@ Include jQuery SmartTab JavaScript
 <script type="text/javascript" src="../dist/js/jquery.smartTab.min.js"></script>
 ```
 Initialize the jQuery SmartTab
-```html
-<script type="text/javascript">
-  $(document).ready(function(){
-
-      // SmartTab initialize
-      $('#smarttab').smartTab();
-
-  });
-</script>
+```js
+$(function() {
+    // SmartTab initialize
+    $('#smarttab').smartTab();
+});
 ```
 That's it!   
 
@@ -169,27 +198,46 @@ Please see the [documentation](http://techlaboratory.net/jquery-smarttab#documen
 // SmartTab initialize
 $('#smarttab').smartTab({
     selected: 0, // Initial selected tab, 0 = first tab
-    theme: 'default', // theme for the tab, related css need to include for other than default theme
-    orientation: 'horizontal', // Nav menu orientation. horizontal/vertical
+    theme: 'basic', // theme, related css need to include for other than default theme
     justified: true, // Nav menu justification. true/false
     autoAdjustHeight: true, // Automatically adjust content height
     backButtonSupport: true, // Enable the back button support
-    enableURLhash: true, // Enable selection of the tab based on url hash
+    enableUrlHash: true, // Enable selection of the step based on url hash
     transition: {
-        animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
-        speed: '400', // Transion animation speed
-        easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
+        animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
+        speed: '400', // Animation speed. Not used if animation is 'css'
+        easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
+        prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
+        fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
+        fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
+        bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
+        bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
     },
     autoProgress: { // Auto navigate tabs on interval
         enabled: false, // Enable/Disable Auto navigation
         interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled)
         stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
     },
-    keyboardSettings: {
+    keyboard: {
         keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
-        keyLeft: [37], // Left key code
-        keyRight: [39] // Right key code
-    }
+        keyLeft: [37, 38], // Left key code
+        keyRight: [39, 40], // Right key code
+        keyHome: [36], // Home key code
+        keyEnd: [35] // End key code
+    },
+    style: { // CSS Class settings
+        mainCss: 'st',
+        navCss: 'nav',
+        navLinkCss: 'nav-link',
+        contentCss: 'tab-content',
+        contentPanelCss: 'tab-pane',
+        themePrefixCss: 'st-theme-',
+        justifiedCss: 'st-justified',
+        anchorDefaultCss: 'default',
+        anchorActiveCss: 'active',
+        loaderCss: 'st-loading'
+    },
+    getContent: null
 });
 ```
 
@@ -201,6 +249,8 @@ Contribute
 ----
 If you like the project please support with your contribution.
 
+[GitHub Sponsor](https://github.com/sponsors/techlab)  
 [Donate on Paypal](https://www.paypal.me/dipuraj)
 
-Thank you and Happy Coding!
+Happy Coding :heart:
+