Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

tabOverride.style

Style extension for Tab Override 4.0+

This extension adds tabOverrideEnabled and tabOverrideActive CSS classes to textarea elements when Tab Override is enabled and active.

Usage

When using delegated events with the jQuery plugin, the class is applied to the container element. Therefore, to account for both behaviors, CSS selectors should be written similar to the following:

textarea.tabOverrideActive,
.tabOverrideActive textarea {
    /* declarations */
}

Note: The focus psuedo class is used in the example, but is not supported by IE 6 or 7.

Enable/Disable

The extension is enabled by default.

// get the current setting
var styleEnabled = tabOverride.style();
// enable the extension
tabOverride.style(true); // default
// disable the extension
tabOverride.style(false);

Get/Set Enabled Class

var enabledClass = tabOverride.style.enabledClass();
tabOverride.style.enabledClass('tabOverrideEnabled'); // default

Get/Set Active Class

var activeClass = tabOverride.style.activeClass();
tabOverride.style.activeClass('tabOverrideActive'); // default

Get/Set Hard Tab Size

Hard tabs are enabled by setting the (soft) tab size to 0:

// use hard tabs
tabOverride.tabSize(0)
var hardTabSize = tabOverride.style.hardTabSize();
tabOverride.style.hardTabSize(4); // default

Note: Adjusting the hard tab size is not supported by all browsers. See this compatibility table for more details.

Hooks

setStyle - Called when the style extension is enabled or disabled

Parameters:

  • enable - whether the style extension was enabled or disabled

Example:

tabOverride.addExtension('setStyle', function (enable) {
    if (enable) {
        // the style extension was enabled
    } else {
        // the style extension was disabled
    }
});

Utility Properties

hardTabSizeSupported

This boolean property indicates whether changing the display size of hard tabs is supported in the current browser. It can be accessed under the utils namespace:

tabOverride.style.utils.hardTabSizeSupported

Utility Methods

// this textarea variable is used in the following examples
var textarea = document.getElementById('txt');

addEnabledClass / addActiveClass

tabOverride.style.utils.addEnabledClass(textarea);
tabOverride.style.utils.addActiveClass(textarea);

removeEnabledClass / removeActiveClass

tabOverride.style.utils.removeEnabledClass(textarea);
tabOverride.style.utils.removeActiveClass(textarea);

updateEnabledClass / updateActiveClass

// update/replace the class for all textareas
tabOverride.style.utils.updateEnabledClass('newEnabledClass');
tabOverride.style.utils.updateActiveClass('newActiveClass');
// remove the class for all textareas
tabOverride.style.utils.updateEnabledClass();
tabOverride.style.utils.updateActiveClass();

addTabSizeCSSSelector

// add an extra CSS selector for the hard tab size rule
// ".(enabledClass)" and ".(activeClass)" will be replaced with the current
// enabled or active class
tabOverride.style.utils.addTabSizeCSSSelector('.(enabledClass) textarea');

removeTabSizeCSSSelector

// remove an extra CSS selector for the hard tab size rule
tabOverride.style.utils.removeTabSizeCSSSelector('.(enabledClass) textarea');

Note: These methods will not add the same class to an element more than once.

About

Style extension for Tab Override

Resources

License

You can’t perform that action at this time.