WordPress.org
Get WordPress

Plugin Directory

Changeset 2306814


Ignore:
Timestamp:
05/18/2020 12:19:01 AM (6 years ago)
Author:
rm2773
Message:

Update to version 1.0.6.

Location:
wp-studio-tabs
Files:
20 added
5 edited

Legend:

Unmodified
Added
Removed

  • wp-studio-tabs/trunk/css/styles.css

    r2297342 r2306814  
    3838}
    3939
    40 [role="tablist"] {
     40.tabs-container .tabs-content,
     41.tabs-container .tabs-content li {
     42  list-style: none;
     43  margin-left: 0;
     44  padding-left: 0;
     45}
     46
     47.tabs-container .tabs-content li a {
     48  display: none;
     49  padding-left: 1rem;
     50}
     51
     52[role="tablist"],
     53[role="tablist-vertical"] {
    4154  display: flex;
    4255  justify-content: center;
    … …  
    4760}
    4861
    49 [role="tablist"] * {
     62[role="tablist"] *,
     63[role="tablist-vertical"] * {
    5064  -webkit-box-sizing: border-box;
    51           box-sizing: border-box;
     65  box-sizing: border-box;
     66}
     67
     68[role="presentation-vertical"] {
     69  margin-left: 0;
     70}
     71
     72[role="tabpanel-vertical"] {
     73  padding-left: 0;
    5274}
    5375
    … …  
    5880  [role="tablist"] li {
    5981    display: inline-block;
     82    margin-bottom: 0;
     83  }
     84
     85  [role="tablist-vertical"] li {
     86    display: block;
    6087  }
    6188}
    … …  
    6592 */
    6693
    67 [role="tab"] {
     94[role="tab"],
     95[role="tab-vertical"] {
    6896  border: 1px solid transparent;
    6997  border-top-color: lightgray;
    … …  
    7199  padding: 0.5em 1em;
    72100  text-decoration: none;
    73   /**
    74      * Active tab styling
    75      */
    76   /**
    77      * Tabs on hover
    78      */
     101}
     102
     103[role="tab-vertical"] {
     104  border: 0;
    79105}
    80106
    … …  
    100126
    101127[role="tabpanel"] {
    102   padding: 3rem;
     128  padding: 2rem;
     129  -moz-transition: all 0.4s ease-in-out;
     130  -o-transition: all 0.4s ease-in-out;
     131  -webkit-transition: all 0.4s ease-in-out;
     132  transition: all 0.4s ease-in-out;
    103133}
    104134
    … …  
    121151}
    122152
    123 /**
    124  * [hidden] fallback for IE10 and lower
    125  */
    126 [hidden] {
     153[hidden]{
    127154  display: none;
    128155}
    129156
    130 /* Global styles that override Tabby */
    131 
    132 @media (max-width: 640px) {
     157[role="tablist-vertical"] {
     158  display: none;
     159}
     160
     161/* Begin Responsive Styles */
     162
     163/* Small only */
     164@media screen and (max-width: 39.9375em) {
     165
     166  .tabs-container .tabs-menu {
     167    display: none;
     168  }
     169
     170  .tabs-container .tabs-content li a {
     171    display: block;
     172  }
     173
     174  [role="tablist"] {
     175    flex-direction: column;
     176  }
     177
     178  [role="tablist-vertical"] {
     179    display: block;
     180    padding-left: 0;
     181  }
     182
     183  [role="presentation"] {
     184    margin-left: 0;
     185  }
     186
     187  [role="presentation-vertical"] {
     188    background: #ccc;
     189    color: #fff;
     190  }
     191
    133192  [role="tab"] {
    134     font-size: 12px
    135   }
    136 }
     193    display: block;
     194    position: relative;
     195    font-size: 12px;
     196  }
     197
     198  [role="tab"][aria-selected="true"] {
     199    border: 1px solid transparent;
     200  }
     201
     202  [role="tab"]:hover:not([aria-selected="true"]) {
     203    border: 1px solid transparent;
     204    background: transparent;
     205  }
     206
     207  [role="tab"]:after {
     208    content: '';
     209    display: block;
     210    position: absolute;
     211    width: 0;
     212    height: 0;
     213    top: 50%;
     214    right: 2rem;
     215    transform: translateY(-50%);
     216    border-left: 6px solid transparent;
     217    border-right: 6px solid transparent;
     218    border-bottom: 6px solid #fff;
     219    border-top: 0;
     220  }
     221
     222  [role="tab-vertical"] {
     223    background-color: #fff;
     224    border: 1px solid #ccc;
     225  }
     226
     227  [role="tabpanel"] {
     228    background-color: #fff;
     229    padding: 2rem 1rem;
     230    border: 1px solid #ccc;
     231    border-top: 0;
     232  }
     233
     234  [data-tabby-default] {
     235    background-color: #ccc;
     236  }
     237}
     238
     239/* Medium and up */
     240@media screen and (min-width: 40em) {
     241
     242
     243}
     244
     245/* Medium only */
     246@media screen and (min-width: 40em) and (max-width: 63.9375em) {
     247
     248  .tabs-container .tabs-menu {
     249    display: none;
     250  }
     251
     252  .tabs-container .tabs-content li a {
     253    display: block;
     254  }
     255
     256  [role="tablist"] {
     257    flex-direction: column;
     258  }
     259
     260  [role="tablist-vertical"] {
     261    display: block;
     262  }
     263
     264  [role="presentation"] {
     265    margin-left: 0;
     266  }
     267
     268  [role="presentation-vertical"] {
     269    background: #ccc;
     270    color: #fff;
     271  }
     272
     273  [role="tab"] {
     274    display: block;
     275    position: relative;
     276  }
     277
     278  [role="tab"][aria-selected="true"] {
     279    border: 1px solid transparent;
     280  }
     281
     282  [role="tab"]:hover:not([aria-selected="true"]) {
     283    border: 1px solid transparent;
     284    background: transparent;
     285  }
     286
     287  [role="tab"]:after {
     288    content: '';
     289    display: block;
     290    position: absolute;
     291    width: 0;
     292    height: 0;
     293    top: 50%;
     294    right: 2rem;
     295    transform: translateY(-50%);
     296    border-left: 6px solid transparent;
     297    border-right: 6px solid transparent;
     298    border-bottom: 6px solid #fff;
     299    border-top: 0;
     300  }
     301
     302  [role="tab-vertical"] {
     303    background-color: #fff;
     304    border: 1px solid #ccc;
     305  }
     306
     307  [role="tabpanel"] {
     308    background-color: #fff
     309    padding: 2rem 1rem;
     310    border: 1px solid #ccc;
     311    border-top: 0;
     312  }
     313
     314  [data-tabby-default] {
     315    background-color: #ccc;
     316  }
     317}
     318
     319/* Large and up */
     320@media screen and (min-width: 64em) {
     321
     322
     323}
     324
     325/* Large only */
     326@media screen and (min-width: 64em) and (max-width: 74.9375em) {
     327
     328
     329}

  • wp-studio-tabs/trunk/js/scripts-tabby.js

    r2297342 r2306814  
    1 /*! Tabby v12.0.0 | (c) 2019 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/tabby */
    2 Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest=function(e){var t=this;if(!document.documentElement.contains(this))return null;do{if(t.matches(e))return t;t=t.parentElement}while(null!==t);return null}),(function(e,t){"function"==typeof define&&define.amd?define([],(function(){return t(e)})):"object"==typeof exports?module.exports=t(e):e.Tabby=t(e)})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(e){"use strict";var t={idPrefix:"tabby-toggle_",default:"[data-tabby-default]"},r=function(e){if(e&&"true"!=e.getAttribute("aria-selected")){var t=document.querySelector(e.hash);t&&(function(e){var t=e.closest('[role="tablist"]');if(t){var r=t.querySelector('[role="tab"][aria-selected="true"]');if(r){var o=document.querySelector(r.hash);r.setAttribute("aria-selected","false"),r.setAttribute("tabindex","-1"),o&&o.setAttribute("hidden","hidden")}}}(e),(function(e,t){e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0"),t.removeAttribute("hidden"),e.focus()})(e,t),(function(e,t){var r=new CustomEvent("tabby",{bubbles:!0,cancelable:!0,detail:{tab:e,content:t}});e.dispatchEvent(r)})(e,t))}},o=function(e,t){var o=(function(e){var t=e.closest('[role="tablist"]'),r=t?t.querySelectorAll('[role="tab"]'):null;if(r)return{tabs:r,index:Array.prototype.indexOf.call(r,e)}})(e);if(o){var n,i=o.tabs.length-1;["ArrowUp","ArrowLeft","Up","Left"].indexOf(t)>-1?n=o.index<1?i:o.index-1:["ArrowDown","ArrowRight","Down","Right"].indexOf(t)>-1?n=o.index===i?0:o.index+1:"Home"===t?n=0:"End"===t&&(n=i),r(o.tabs[n])}};return function(n,i){var l,a,u={};u.destroy=function(){var e=a.querySelectorAll("a");Array.prototype.forEach.call(e,(function(e){var t=document.querySelector(e.hash);t&&(function(e,t,r){e.id.slice(0,r.idPrefix.length)===r.idPrefix&&(e.id=""),e.removeAttribute("role"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-selected"),e.removeAttribute("tabindex"),e.closest("li").removeAttribute("role"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("hidden")})(e,t,l)})),a.removeAttribute("role"),document.documentElement.removeEventListener("click",c,!0),a.removeEventListener("keydown",s,!0),l=null,a=null},u.setup=function(){if(a=document.querySelector(n)){var e=a.querySelectorAll("a");a.setAttribute("role","tablist"),Array.prototype.forEach.call(e,(function(e){var t=document.querySelector(e.hash);t&&(function(e,t,r){e.id||(e.id=r.idPrefix+t.id),e.setAttribute("role","tab"),e.setAttribute("aria-controls",t.id),e.closest("li").setAttribute("role","presentation"),t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby",e.id),e.matches(r.default)?e.setAttribute("aria-selected","true"):(e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),t.setAttribute("hidden","hidden"))})(e,t,l)}))}},u.toggle=function(e){var t=e;"string"==typeof e&&(t=document.querySelector(n+' [role="tab"][href*="'+e+'"]')),r(t)};var c=function(e){var t=e.target.closest(n+' [role="tab"]');t&&(e.preventDefault(),r(t))},s=function(e){var t=document.activeElement;t.matches(n+' [role="tab"]')&&(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Up","Down","Left","Right","Home","End"].indexOf(e.key)<0||o(t,e.key))};return l=(function(){var e={};return Array.prototype.forEach.call(arguments,(function(t){for(var r in t){if(!t.hasOwnProperty(r))return;e[r]=t[r]}})),e})(t,i||{}),u.setup(),(function(t){if(!(e.location.hash.length<1)){var o=document.querySelector(t+' [role="tab"][href*="'+e.location.hash+'"]');r(o)}})(n),document.documentElement.addEventListener("click",c,!0),a.addEventListener("keydown",s,!0),u}}));
     1/*!
     2 * tabbyjs v12.0.3
     3 * Lightweight, accessible vanilla JS toggle tabs.
     4 * (c) 2019 Chris Ferdinandi
     5 * MIT License
     6 * http://github.com/cferdinandi/tabby
     7 */
     8
     9/**
     10 * Element.matches() polyfill (simple version)
     11 * https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
     12 */
     13if (!Element.prototype.matches) {
     14    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
     15}
     16(function (root, factory) {
     17    if ( typeof define === 'function' && define.amd ) {
     18        define([], (function () {
     19            return factory(root);
     20        }));
     21    } else if ( typeof exports === 'object' ) {
     22        module.exports = factory(root);
     23    } else {
     24        root.Tabby = factory(root);
     25    }
     26})(typeof global !== 'undefined' ? global : typeof window !== 'undefined' ? window : this, (function (window) {
     27
     28    'use strict';
     29
     30    //
     31    // Variables
     32    //
     33
     34    var defaults = {
     35        idPrefix: 'tabby-toggle_',
     36        default: '[data-tabby-default]'
     37    };
     38
     39
     40    //
     41    // Methods
     42    //
     43
     44    /**
     45     * Merge two or more objects together.
     46     * @param   {Object}   objects  The objects to merge together
     47     * @returns {Object}            Merged values of defaults and options
     48     */
     49    var extend = function () {
     50        var merged = {};
     51        Array.prototype.forEach.call(arguments, (function (obj) {
     52            for (var key in obj) {
     53                if (!obj.hasOwnProperty(key)) return;
     54                merged[key] = obj[key];
     55            }
     56        }));
     57        return merged;
     58    };
     59
     60    /**
     61     * Emit a custom event
     62     * @param  {String} type    The event type
     63     * @param  {Node}   tab     The tab to attach the event to
     64     * @param  {Node}   details Details about the event
     65     */
     66    var emitEvent = function (tab, details) {
     67
     68        // Create a new event
     69        var event;
     70        if (typeof window.CustomEvent === 'function') {
     71            event = new CustomEvent('tabby', {
     72                bubbles: true,
     73                cancelable: true,
     74                detail: details
     75            });
     76        } else {
     77            event = document.createEvent('CustomEvent');
     78            event.initCustomEvent('tabby', true, true, details);
     79        }
     80
     81        // Dispatch the event
     82        tab.dispatchEvent(event);
     83
     84    };
     85
     86    /**
     87     * Remove roles and attributes from a tab and its content
     88     * @param  {Node}   tab      The tab
     89     * @param  {Node}   content  The tab content
     90     * @param  {Object} settings User settings and options
     91     */
     92    var destroyTab = function (tab, content, settings) {
     93
     94        // Remove the generated ID
     95        if (tab.id.slice(0, settings.idPrefix.length) === settings.idPrefix) {
     96            tab.id = '';
     97        }
     98
     99        // Remove roles
     100        tab.removeAttribute('role');
     101        tab.removeAttribute('aria-controls');
     102        tab.removeAttribute('aria-selected');
     103        tab.removeAttribute('tabindex');
     104        tab.closest('li').removeAttribute('role');
     105        content.removeAttribute('role');
     106        content.removeAttribute('aria-labelledby');
     107        content.removeAttribute('hidden');
     108
     109    };
     110
     111    /**
     112     * Add the required roles and attributes to a tab and its content
     113     * @param  {Node}   tab      The tab
     114     * @param  {Node}   content  The tab content
     115     * @param  {Object} settings User settings and options
     116     */
     117    var setupTab = function (tab, content, settings) {
     118
     119        // Give tab an ID if it doesn't already have one
     120        if (!tab.id) {
     121            tab.id = settings.idPrefix + content.id;
     122        }
     123
     124        // Add roles
     125        tab.setAttribute('role', 'tab');
     126        tab.setAttribute('aria-controls', content.id);
     127        tab.closest('li').setAttribute('role', 'presentation');
     128        content.setAttribute('role', 'tabpanel');
     129        content.setAttribute('aria-labelledby', tab.id);
     130
     131        // Add selected state
     132        if (tab.matches(settings.default)) {
     133            tab.setAttribute('aria-selected', 'true');
     134        } else {
     135            tab.setAttribute('aria-selected', 'false');
     136            tab.setAttribute('tabindex', '-1');
     137            content.setAttribute('hidden', 'hidden');
     138        }
     139
     140    };
     141
     142    /**
     143     * Hide a tab and its content
     144     * @param  {Node} newTab The new tab that's replacing it
     145     */
     146    var hide = function (newTab) {
     147
     148        // Variables
     149        var tabGroup = newTab.closest('[role="tablist"]');
     150        if (!tabGroup) return {};
     151        var tab = tabGroup.querySelector('[role="tab"][aria-selected="true"]');
     152        if (!tab) return {};
     153        var content = document.querySelector(tab.hash);
     154
     155        // Hide the tab
     156        tab.setAttribute('aria-selected', 'false');
     157        tab.setAttribute('tabindex', '-1');
     158
     159        // Hide the content
     160        if (!content) return {previousTab: tab};
     161        content.setAttribute('hidden', 'hidden');
     162
     163        // Return the hidden tab and content
     164        return {
     165            previousTab: tab,
     166            previousContent: content
     167        };
     168
     169    };
     170
     171    /**
     172     * Show a tab and its content
     173     * @param  {Node} tab      The tab
     174     * @param  {Node} content  The tab content
     175     */
     176    var show = function (tab, content) {
     177        tab.setAttribute('aria-selected', 'true');
     178        tab.setAttribute('tabindex', '0');
     179        content.removeAttribute('hidden');
     180        tab.focus();
     181    };
     182
     183    /**
     184     * Toggle a new tab
     185     * @param  {Node} tab The tab to show
     186     */
     187    var toggle = function (tab) {
     188
     189        // Make sure there's a tab to toggle and it's not already active
     190        if (!tab || tab.getAttribute('aria-selected') == 'true') return;
     191
     192        // Variables
     193        var content = document.querySelector(tab.hash);
     194        if (!content) return;
     195
     196        // Hide active tab and content
     197        var details = hide(tab);
     198
     199        // Show new tab and content
     200        show(tab, content);
     201
     202        // Add event details
     203        details.tab = tab;
     204        details.content = content;
     205
     206        // Emit a custom event
     207        emitEvent(tab, details);
     208
     209    };
     210
     211    /**
     212     * Get all of the tabs in a tablist
     213     * @param  {Node}   tab  A tab from the list
     214     * @return {Object}      The tabs and the index of the currently active one
     215     */
     216    var getTabsMap = function (tab) {
     217        var tabGroup = tab.closest('[role="tablist"]');
     218        var tabs = tabGroup ? tabGroup.querySelectorAll('[role="tab"]') : null;
     219        if (!tabs) return;
     220        return {
     221            tabs: tabs,
     222            index: Array.prototype.indexOf.call(tabs, tab)
     223        };
     224    };
     225
     226    /**
     227     * Switch the active tab based on keyboard activity
     228     * @param  {Node} tab The currently active tab
     229     * @param  {Key}  key The key that was pressed
     230     */
     231    var switchTabs = function (tab, key) {
     232
     233        // Get a map of tabs
     234        var map = getTabsMap(tab);
     235        if (!map) return;
     236        var length = map.tabs.length - 1;
     237        var index;
     238
     239        // Go to previous tab
     240        if (['ArrowUp', 'ArrowLeft', 'Up', 'Left'].indexOf(key) > -1) {
     241            index = map.index < 1 ? length : map.index - 1;
     242        }
     243
     244        // Go to next tab
     245        else if (['ArrowDown', 'ArrowRight', 'Down', 'Right'].indexOf(key) > -1) {
     246            index = map.index === length ? 0 : map.index + 1;
     247        }
     248
     249        // Go to home
     250        else if (key === 'Home') {
     251            index = 0;
     252
     253        }
     254
     255        // Go to end
     256        else if (key === 'End') {
     257            index = length;
     258        }
     259
     260        // Toggle the tab
     261        toggle(map.tabs[index]);
     262
     263    };
     264
     265    /**
     266     * Activate a tab based on the URL
     267     * @param  {String} selector The selector for this instantiation
     268     */
     269    var loadFromURL = function (selector) {
     270        if (window.location.hash.length < 1) return;
     271        var tab = document.querySelector(selector + ' [role="tab"][href*="' + window.location.hash + '"]');
     272        toggle(tab);
     273    };
     274
     275    /**
     276     * Create the Constructor object
     277     */
     278    var Constructor = function (selector, options) {
     279
     280        //
     281        // Variables
     282        //
     283
     284        var publicAPIs = {};
     285        var settings, tabWrapper;
     286
     287
     288        //
     289        // Methods
     290        //
     291
     292        publicAPIs.destroy = function () {
     293
     294            // Get all tabs
     295            var tabs = tabWrapper.querySelectorAll('a');
     296
     297            // Add roles to tabs
     298            Array.prototype.forEach.call(tabs, (function (tab) {
     299
     300                // Get the tab content
     301                var content = document.querySelector(tab.hash);
     302                if (!content) return;
     303
     304                // Setup the tab
     305                destroyTab(tab, content, settings);
     306
     307            }));
     308
     309            // Remove role from wrapper
     310            tabWrapper.removeAttribute('role');
     311
     312            // Remove event listeners
     313            document.documentElement.removeEventListener('click', clickHandler, true);
     314            tabWrapper.removeEventListener('keydown', keyHandler, true);
     315
     316            // Reset variables
     317            settings = null;
     318            tabWrapper = null;
     319
     320        };
     321
     322        /**
     323         * Setup the DOM with the proper attributes
     324         */
     325        publicAPIs.setup = function () {
     326
     327            // Variables
     328            tabWrapper = document.querySelector(selector);
     329            if (!tabWrapper) return;
     330            var tabs = tabWrapper.querySelectorAll('a');
     331
     332            // Add role to wrapper
     333            tabWrapper.setAttribute('role', 'tablist');
     334
     335            // Add roles to tabs
     336            Array.prototype.forEach.call(tabs, (function (tab) {
     337
     338                // Get the tab content
     339                var content = document.querySelector(tab.hash);
     340                if (!content) return;
     341
     342                // Setup the tab
     343                setupTab(tab, content, settings);
     344
     345            }));
     346
     347        };
     348
     349        /**
     350         * Toggle a tab based on an ID
     351         * @param  {String|Node} id The tab to toggle
     352         */
     353        publicAPIs.toggle = function (id) {
     354
     355            // Get the tab
     356            var tab = id;
     357            if (typeof id === 'string') {
     358                tab = document.querySelector(selector + ' [role="tab"][href*="' + id + '"]');
     359            }
     360
     361            // Toggle the tab
     362            toggle(tab);
     363
     364        };
     365
     366        /**
     367         * Handle click events
     368         */
     369        var clickHandler = function (event) {
     370
     371            // Only run on toggles
     372            var tab = event.target.closest(selector + ' [role="tab"]');
     373            if (!tab) return;
     374
     375            // Prevent link behavior
     376            event.preventDefault();
     377
     378            // Toggle the tab
     379            toggle(tab);
     380
     381        };
     382
     383        /**
     384         * Handle keydown events
     385         */
     386        var keyHandler = function (event) {
     387
     388            // Only run if a tab is in focus
     389            var tab = document.activeElement;
     390            if (!tab.matches(selector + ' [role="tab"]')) return;
     391
     392            // Only run for specific keys
     393            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Up', 'Down', 'Left', 'Right', 'Home', 'End'].indexOf(event.key) < 0) return;
     394
     395            // Switch tabs
     396            switchTabs(tab, event.key);
     397
     398        };
     399
     400        /**
     401         * Initialize the instance
     402         */
     403        var init = function () {
     404
     405            // Merge user options with defaults
     406            settings = extend(defaults, options || {});
     407
     408            // Setup the DOM
     409            publicAPIs.setup();
     410
     411            // Load a tab from the URL
     412            loadFromURL(selector);
     413
     414            // Add event listeners
     415            document.documentElement.addEventListener('click', clickHandler, true);
     416            tabWrapper.addEventListener('keydown', keyHandler, true);
     417
     418        };
     419
     420
     421        //
     422        // Initialize and return the Public APIs
     423        //
     424
     425        init();
     426        return publicAPIs;
     427
     428    };
     429
     430
     431    //
     432    // Return the Constructor
     433    //
     434
     435    return Constructor;
     436
     437}));

  • wp-studio-tabs/trunk/js/scripts.js

    r2297342 r2306814  
    11jQuery(window).on('load', function() {
    2   jQuery('[data-tabs]').each(function(index) {
     2
     3  jQuery('.tabs-menu').each(function(index) {
    34    // Setup tabs
    45    var id = index + 1;
    … …  
    78    var tabs = new Tabby('[data-tabs-' + id + ']');
    89
    9     // Setup dropdown (mobile)
    10     // var dropdown = $(this).closest('.section').find('[data-dropdown]');
    11     // var dropdownSelect = dropdown.find('select');
    12    
    13     // dropdown.attr('data-dropdown-' + id, '');
     10  });
    1411
    15     // dropdownSelect.selectric({
    16     //   maxHeight: 480,
    17     // });
     12  jQuery('[role="tab-vertical"]').on('click', function(e) {
     13    e.preventDefault();
     14     
     15      var $this = jQuery(this);
     16      var $all_siblings = $this.parent().siblings();
     17      console.log($all_siblings);
     18      var $this_link = $this.attr('href');
     19      var $this_content = jQuery($this_link);
    1820
    19     // // Update tabs on dropdown change
    20     // dropdownSelect.on('blur change', function() {
    21     //   var value = $(this).val();
    22     //   tabs.toggle('#' + value);
    23     // });
     21      $all_siblings.find('div').attr('hidden','hidden');
     22      $this_content.removeAttr('hidden');
    2423  });
     24
     25
     26
    2527});

  • wp-studio-tabs/trunk/readme.txt

    r2297342 r2306814  
    66Requires at least: 2.9
    77Tested up to: 5.4
    8 Stable tag: 1.0.5
     8Stable tag: 1.0.6
    99
    1010WP Studio Tabs allows you to create/manage simple animated tabs for your Wordpress website.
    … …  
    2828
    2929== Changelog ==
     30
     31= 1.0.6 =
     32
     33* Added accordion-style tabs for small screens up to 768px.
    3034
    3135= 1.0.5 =

  • wp-studio-tabs/trunk/wpstudio-tabs.php

    r2297342 r2306814  
    55 * Plugin URI:        http://wp-studio.net
    66 * Description:       WP Studio Tabs allows you to create/manage simple animated tabs for your Wordpress website.
    7  * Version:           1.0.5
     7 * Version:           1.0.6
    88 * Requires at least: 2.9
    99 * Author:            WP Studio
    … …  
    1818
    1919include('includes/metabox.php');
     20//include('includes/mobile-detect.php');
    2021
    2122class WPStudio__Tabs {
    … …  
    3738    add_action( 'manage_posts_custom_column' , array(&$this, 'wpstudio__tabs_posts_display_shortcode'), 10, 2 );
    3839    add_action( 'add_meta_boxes', array(&$this, 'wpstudio__tabs_settings_metabox'));
    39     add_filter('widget_text','do_shortcode');
     40    add_filter( 'widget_text','do_shortcode');
    4041   
    4142    if (!is_admin()):
    … …  
    141142      if ($post_status !== 'trash'): ?>
    142143
    143       <section id="wpst-tabset-<?= $post_id; ?>"  class="tabs-container" <?= !empty($tabs_section_bg) ? 'style="background-color:'.$tabs_section_bg.'"' : ''; ?>>
    144         <div id="tabs-<?= $post_id; ?>" class="tabs">
    145           <ul data-tabs>
     144      <section id="wpst-tabset-<?= $post_id; ?>"  class="tabs-container">
     145        <div class="tabs">
     146          <ul class="tabs-menu">
    146147          <?php
    147148         
    … …  
    152153
    153154            foreach ($tabs_order_array as $ordered_tab):
    154              
    155               //echo '<pre>'.$tab_active .'<br/>wpst_tab_active_'.$ordered_tab.'</pre>';
    156155              $active_idx = ($tab_active == 'wpst_tab_active_'.$ordered_tab ? $tabs_idx : 'undefined');
    157               //echo $active_idx;
    158156              $id = !empty($ordered_tab) ? $ordered_tab : 'tab-1';
    159157              $wpst_tab_label = get_post_meta($post_id, 'wpst_tab_label_'.$id, true);
    160158              $wpst_tab_content = get_post_meta($post_id, 'wpst_tab_content_'.$id, true);
    161159              $html  = '';
    162               $html .= '<li><a href="#'.$id.'"'.($active_idx !== 'undefined' ? ' data-tabby-default' : '').'><span>'.$wpst_tab_label.'</span></a></li>';
    163              
     160              $html .= '<li><a href="#'.$id.'"'.($active_idx !== 'undefined' ? ' data-tabby-default' : '').'>'.$wpst_tab_label.'</a></li>';
    164161              $tabs_idx++;
    165162              echo $html;
    … …  
    167164          </ul>
    168165
    169          
     166
    170167          <?php
    171 
    172             $content_idx = 1;
    173             foreach ($tabs_order_array as $ordered_tab):
     168     
     169          $content_idx = 1;
     170
     171          foreach ($tabs_order_array as $ordered_tab):
     172            $id = !empty($ordered_tab) ? $ordered_tab : 'tab-1';
     173            $wpst_tab_label = get_post_meta($post_id, 'wpst_tab_label_'.$id, true);
     174            $wpst_tab_content = get_post_meta($post_id, 'wpst_tab_content_'.$id, true);
     175
     176            $tml  = '';
     177            $tml .= '<div id="'.$id.'">';
     178            $tml .= '<p>'.esc_attr($wpst_tab_content).'</p>';
     179           
     180            $content_idx++;
     181           
     182            $tml .= '</div><!-- .content -->';
     183
     184            //echo $tml;
     185          endforeach; ?>
     186
     187          <ul class="tabs-content">
     188
     189          <?php
     190
     191            $tabs_order = get_post_meta($post_id, 'wpst_tabs_order', true);
     192            $tabs_order_array = explode(',', $tabs_order);
     193            $tabs_idx = 0;
     194            $active_idx = array();
     195
     196            foreach ($tabs_order_array as $ordered_tab):
     197              $active_idx = ($tab_active == 'wpst_tab_active_'.$ordered_tab ? $tabs_idx : 'undefined');
    174198              $id = !empty($ordered_tab) ? $ordered_tab : 'tab-1';
    175199              $wpst_tab_label = get_post_meta($post_id, 'wpst_tab_label_'.$id, true);
    176200              $wpst_tab_content = get_post_meta($post_id, 'wpst_tab_content_'.$id, true);
    177 
    178               $tml  = '';
    179               $tml .= '<div id="'.$id.'">';
    180     //$tml .= '<section id="section-'.$id.'" class="'.(($tab_active == 'wpst_tab_active_'.$ordered_tab) ? 'admin-content-current' : '').'">';
    181              
    182               $tml .= '<p>'.esc_attr($wpst_tab_content).'</p>';
    183              
    184              
    185               $content_idx++;
    186              
    187               $tml .= '</div><!-- .content -->';
    188 
    189               echo $tml;
     201              $html  = '';
     202              $html .= '<li>';
     203              $html .= '<a role="tab-vertical" href="#'.$id.'"'.($active_idx !== 'undefined' ? ' data-tabby-default' : '').'>'.$wpst_tab_label.'</a>';
     204              $html .= '<div id="'.$id.'">';
     205              $html .= '<p>'.esc_attr($wpst_tab_content).'</p>';
     206              $html .= '</div>';
     207              $html .= '</li>';
     208              $tabs_idx++;
     209              echo $html;
    190210            endforeach; ?>
     211
     212          </ul> <!-- data-tabs -->
    191213         
    192214        </div><!-- #tabs -->
Note: See TracChangeset for help on using the changeset viewer.