blessed-tab-container

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Global - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> <script src="scripts/nav.js" defer></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav > <input type="text" id="nav-search" placeholder="Search" /> <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#BlessedTabContainer">BlessedTabContainer</a></li></ul> </nav> <div id="main"> <h1 class="page-title">Global</h1> <section> <header> <h2> </h2> </header> <article> <div class="container-overview"> <dl class="details"> </dl> </div> <h3 class="subsection-title">Methods</h3> <h4 class="name" id="BlessedTabContainer"><span class="type-signature"></span>BlessedTabContainer<span class="signature">(options)</span><span class="type-signature"> → {<a href="global.html#BlessedTabContainer">BlessedTabContainer</a>}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="tab_container_index.js.html">tab_container/index.js</a>, <a href="tab_container_index.js.html#line34">line 34</a> </li></ul></dd> <dt class="tag-see">See:</dt> <dd class="tag-see"> <ul> <li><a href="global.html#BlessedTabContainerAPI">BlessedTabContainerAPI</a></li> <li><a href="global.html#BlessedTabContainerTabAPI">BlessedTabContainerTabAPI</a></li> </ul> </dd> </dl> <div class="description usertext"> <p>Merges multiple elements into the same position on the screen, while only enabling visiblity for one at a time depending on the active tab.</p> <p>Renders tabs in different styles depending on if they are visible, hidden, or hidden and modified (dirty).</p> <p>Dirty flags are automatically cleared when tabs are opened, and set when they are updated in the background, unless the <code>autoDirty</code> flag is explicity set to <code>false</code> for that individual tab.</p> <p>A basic API is exposed on both the individual tab elements themselves, and on the root tabbed container element.</p> </div> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type"><a href="global.html#BlessedTabContainerArgs">BlessedTabContainerArgs</a></span> </td> <td class="description last"><p>tab container options</p></td> </tr> </tbody> </table> <h5>Returns:</h5> <dl class="param-type"> <dt> Type </dt> <dd> <span class="param-type"><a href="global.html#BlessedTabContainer">BlessedTabContainer</a></span> </dd> </dl> <h3 class="subsection-title">Type Definitions</h3> <h4 class="name" id="BlessedTabContainer">BlessedTabContainer</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container.js.html">types/blessed_tab_container.js</a>, <a href="types_blessed_tab_container.js.html#line6">line 6</a> </li></ul></dd> </dl> <div class="description usertext"> <p>Blessed Tab Container Element</p> </div> <h5>Type:</h5> <ul> <li> <span class="param-type"><a href="global.html#BlessedTabContainerState">BlessedTabContainerState</a></span> | <span class="param-type"><a href="global.html#BlessedTabContainerAPI">BlessedTabContainerAPI</a></span> </li> </ul> <h4 class="name" id="BlessedTabContainerAPI">BlessedTabContainerAPI</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container_api.js.html">types/blessed_tab_container_api.js</a>, <a href="types_blessed_tab_container_api.js.html#line3">line 3</a> </li></ul></dd> </dl> <h5 class="subsection-title">Properties:</h5> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>setDirty</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>modify the dirty flag for a specified tab</p></td> </tr> <tr> <td class="name"><code>generateLabel</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>internal helper that is used to render the label shared by all tabs</p></td> </tr> <tr> <td class="name"><code>setVisibleTab</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>takes a label, hides all other tabs and re-renders the shared label</p></td> </tr> <tr> <td class="name"><code>tabs</code></td> <td class="type"> <span class="param-type">Array.<<a href="global.html#BlessedTabContainerTabState">BlessedTabContainerTabState</a>></span> </td> <td class="description last"><p>array of tab states</p></td> </tr> </tbody> </table> <div class="description usertext"> <p>Parent tab container element API</p> </div> <h4 class="name" id="BlessedTabContainerArgs">BlessedTabContainerArgs</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container_args.js.html">types/blessed_tab_container_args.js</a>, <a href="types_blessed_tab_container_args.js.html#line5">line 5</a> </li></ul></dd> </dl> <h5 class="subsection-title">Properties:</h5> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>screen</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="attributes"> </td> <td class="description last"><p>blessed screen instance</p></td> </tr> <tr> <td class="name"><code>defaultVisible</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>label visible by default, must exist as a tab label. Uniqueness not enforced.</p></td> </tr> <tr> <td class="name"><code>tabSeperator</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>seperater rendered between tab labels</p></td> </tr> <tr> <td class="name"><code>tabPadding</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>number of chars to pad with on either side of the seperator. Default 1</p></td> </tr> <tr> <td class="name"><code>tabPaddingChar</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>character used to pad labels, not colored. Defaults to a single space, and appears on either side of each seperator.</p></td> </tr> <tr> <td class="name"><code>autoDirtyUpdateFunctions</code></td> <td class="type"> <span class="param-type">Array.<string></span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>array of function names that should be wrapped to automatically set the dirty flag on a tab. i.e. ['pushLine', 'setContent', ...]</p></td> </tr> <tr> <td class="name"><code>inactiveColorFunc</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>color function for inactive tab</p></td> </tr> <tr> <td class="name"><code>activeColorFunc</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>color function for active tab</p></td> </tr> <tr> <td class="name"><code>dirtyColorFunc</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>color function for dirty tab, applied to active/inactive color function output</p></td> </tr> <tr> <td class="name"><code>cleanColorFunc</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>color function for clean tab, applied to active/inactive color function output</p></td> </tr> <tr> <td class="name"><code>tabs</code></td> <td class="type"> <span class="param-type">Array.<<a href="global.html#BlessedTabContainerTabState">BlessedTabContainerTabState</a>></span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>array of tab objects</p></td> </tr> <tr> <td class="name"><code>elementOptions</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>configuration object passed to tabFunc if needed; if provided, should be valid for the desired blessed element.</p></td> </tr> </tbody> </table> <div class="description usertext"> <p>Verifies arguments for BlesssedTabContainer</p> </div> <h4 class="name" id="BlessedTabContainerState">BlessedTabContainerState</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container_state.js.html">types/blessed_tab_container_state.js</a>, <a href="types_blessed_tab_container_state.js.html#line3">line 3</a> </li></ul></dd> </dl> <h5 class="subsection-title">Properties:</h5> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>tabs</code></td> <td class="type"> <span class="param-type">Array.<BlessedTabState></span> </td> <td class="attributes"> </td> <td class="description last"><p>array of tabs that belong to the container</p></td> </tr> <tr> <td class="name"><code>tabFunc</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>alertnative to the 'tab' key; executed with the provided element options to create a dynamic component.</p></td> </tr> <tr> <td class="name"><code>tabPadding</code></td> <td class="type"> <span class="param-type">number</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>number of characters to pad on either side of each tab seperator; default 1</p></td> </tr> <tr> <td class="name"><code>tabPaddingChar</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>tab padding character, default space</p></td> </tr> <tr> <td class="name"><code>autoDirty</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>default true, enables automatic updating of the dirty flag by tapping all content modification functions be default. For control over this, pass a custom <code>autoDirtyUpdateFunctions</code> array to the tabbed container constructor</p></td> </tr> </tbody> </table> <div class="description usertext"> <p>Blessed Tab Container State Object</p> </div> <h4 class="name" id="BlessedTabContainerTabAPI">BlessedTabContainerTabAPI</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container_tab_api.js.html">types/blessed_tab_container_tab_api.js</a>, <a href="types_blessed_tab_container_tab_api.js.html#line3">line 3</a> </li></ul></dd> </dl> <h5 class="subsection-title">Properties:</h5> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>setAutoDirty</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>helper to modify underlying elements' autoDirty flag. If set to 'false', automatic dirty flag updates are disabled</p></td> </tr> <tr> <td class="name"><code>setDirty</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>modify the tab's dirty flag directly, triggers a re-render</p></td> </tr> <tr> <td class="name"><code>isDirty</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="description last"><p>query the tab's dirty flag</p></td> </tr> </tbody> </table> <div class="description usertext"> <p>Single tab element API</p> </div> <h4 class="name" id="BlessedTabContainerTabConfig">BlessedTabContainerTabConfig</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container_tab_config.js.html">types/blessed_tab_container_tab_config.js</a>, <a href="types_blessed_tab_container_tab_config.js.html#line3">line 3</a> </li></ul></dd> </dl> <h5 class="subsection-title">Properties:</h5> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>label</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="attributes"> </td> <td class="description last"><p>tab label, used as clickable tab, highlighted based on active/inactive/dirty/clean status and configured color functions.</p></td> </tr> <tr> <td class="name"><code>tab</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="attributes"> </td> <td class="description last"><p>the tab element itself, should be a configured blessed component</p></td> </tr> <tr> <td class="name"><code>tabFunc</code></td> <td class="type"> <span class="param-type">function</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>alertnative to the 'tab' key; executed with the provided element options to create a dynamic component.</p></td> </tr> <tr> <td class="name"><code>autoDirty</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="attributes"> <optional><br> </td> <td class="description last"><p>default true, enables automatic updating of the dirty flag by tapping all content modification functions be default. For control over this, pass a custom <code>autoDirtyUpdateFunctions</code> array to the tabbed container constructor</p></td> </tr> </tbody> </table> <div class="description usertext"> <p>Blessed Tab Container Tab Configuration Object, passed to initTabs(). Note no underlying 'elm' element yet, as it must be constructed from tab or tabFunc</p> <p>Used to create BlessedTabContainerTabState, hence similar</p> </div> <h4 class="name" id="BlessedTabContainerTabState">BlessedTabContainerTabState</h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="types_blessed_tab_container_tab_state.js.html">types/blessed_tab_container_tab_state.js</a>, <a href="types_blessed_tab_container_tab_state.js.html#line3">line 3</a> </li></ul></dd> </dl> <h5 class="subsection-title">Properties:</h5> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>label</code></td> <td class="type"> <span class="param-type">string</span> </td> <td class="description last"><p>tab label, used as clickable tab, highlighted based on active/inactive/dirty/clean status and configured color functions.</p></td> </tr> <tr> <td class="name"><code>elm</code></td> <td class="type"> <span class="param-type">object</span> </td> <td class="description last"><p>the underlying blessed element</p> <h6>Properties</h6> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>autoDirty</code></td> <td class="type"> <span class="param-type">boolean</span> </td> <td class="description last"><p>live autoDirty flag state</p></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div class="description usertext"> <p>Blessed Tab Container Tab State Object, holds data for tab managemnet</p> </div> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Mar 31 2020 19:20:06 GMT+0700 (Indochina Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. </footer> <script>prettyPrint();</script> <script src="scripts/polyfill.js"></script> <script src="scripts/linenumber.js"></script> <script src="scripts/search.js" defer></script> </body> </html>