docs/module-selectors-Selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: Selector</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: Selector</h1>

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>
            <span class="ancestors"><a href="module-selectors.html">selectors</a>~</span>Selector<span class="signature">(applicator, formElementId, pointer, selectorIndex, callback, disabled<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h2>
        
            <div class="class-description"><p>Class representing a selector component, which represents an
<a href="module-inPlaceApplicators-InPlaceApplicator.html">module:inPlaceApplicators~InPlaceApplicator</a> in the
<a href="module-inPlaceApplicators-IPASchema.html">module:inPlaceApplicators~IPASchema</a> tree.</p>
<p>The selector consists of a dropdown button with a list of choices each
representing a subschema in the associated in-place applicator.</p></div>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h2>Constructor</h2>
    

    <h4 class="name" id="Selector"><span class="type-signature"></span>new Selector<span class="signature">(applicator, formElementId, pointer, selectorIndex, callback, disabled<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Class constructor.</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th>Default</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>applicator</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="module-inPlaceApplicators-InPlaceApplicator.html">module:inPlaceApplicators~InPlaceApplicator</a></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The
in-place applicator to be represented.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>formElementId</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The <code>id</code> of the form element.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>pointer</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The JSON Pointer to the in-place applicator
represented by the first selector of the toolbar containing the newly
created selector.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>selectorIndex</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The index in the toolbar of the newly created
selector.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The callback function for the <code>click</code> DOM event
generated by any of the choices listed in the dropdown.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>disabled</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>Flag indicating whether the button should
be disabled at initialization.</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-Component.html">module:components~Component</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_selectors.js.html">form/selectors.js</a>, <a href="form_selectors.js.html#line212">line 212</a>
    </li></ul></dd>
    

</dl>


    </div>

    
        <h3 class="subsection-title">Members</h3>

        
<h4 class="name" id="applicator"><span class="type-signature"></span>applicator<span class="type-signature"> :<a href="module-inPlaceApplicators-InPlaceApplicator.html">module:inPlaceApplicators~InPlaceApplicator</a></span></h4>


<div class="description">
    <p>The represented in-place applicator.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="module-inPlaceApplicators-InPlaceApplicator.html">module:inPlaceApplicators~InPlaceApplicator</a></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_selectors.js.html">form/selectors.js</a>, <a href="form_selectors.js.html#line225">line 225</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="button"><span class="type-signature"></span>button<span class="type-signature"> :Array.&lt;<a href="module-selectors-Selector.html">module:selectors~Selector</a>></span></h4>


<div class="description">
    <p>The array of selector components contained in the toolbar.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Array.&lt;<a href="module-selectors-Selector.html">module:selectors~Selector</a>></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_selectors.js.html">form/selectors.js</a>, <a href="form_selectors.js.html#line235">line 235</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="domElement"><span class="type-signature"></span>domElement<span class="type-signature"> :HTMLDivElement</span></h4>


<div class="description">
    <p>Reference to the DOM object that contains the HTML structure of the
component.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">HTMLDivElement</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-Component.html#domElement">module:components~Component#domElement</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line14">line 14</a>
    </li></ul></dd>
    

</dl>


        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="disable"><span class="type-signature"></span>disable<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Disables the component.</p>
</div>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-Component.html#disable">module:components~Component#disable</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line29">line 29</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="enable"><span class="type-signature"></span>enable<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Enables the component.</p>
</div>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-Component.html#enable">module:components~Component#enable</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line21">line 21</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="remove"><span class="type-signature"></span>remove<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Removes the DOM elements associated to the selector.</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_selectors.js.html">form/selectors.js</a>, <a href="form_selectors.js.html#line297">line 297</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Updates the selector display.</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_selectors.js.html">form/selectors.js</a>, <a href="form_selectors.js.html#line314">line 314</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="updateSelection"><span class="type-signature"></span>updateSelection<span class="signature">(selected)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Updates the underlying <a href="module-inPlaceApplicators-InPlaceApplicator.html">module:inPlaceApplicators~InPlaceApplicator</a>
and the selector display.</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>selected</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Index of the selected in-place applicator
subschema.</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_selectors.js.html">form/selectors.js</a>, <a href="form_selectors.js.html#line308">line 308</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-childApplicators.html">childApplicators</a></li><li><a href="module-components.html">components</a></li><li><a href="module-formElement.html">formElement</a></li><li><a href="module-formElementDefinitions.html">formElementDefinitions</a></li><li><a href="module-inPlaceApplicators.html">inPlaceApplicators</a></li><li><a href="module-JsonSchemaForms.html">JsonSchemaForms</a></li><li><a href="module-JsonSchemaKeywords.html">JsonSchemaKeywords</a></li><li><a href="module-JsonSchemaType.html">JsonSchemaType</a></li><li><a href="module-layouts.html">layouts</a></li><li><a href="module-selectors.html">selectors</a></li></ul><h3>Classes</h3><ul><li><a href="module-childApplicators-AdditionalItems.html">AdditionalItems</a></li><li><a href="module-childApplicators-AdditionalProperties.html">AdditionalProperties</a></li><li><a href="module-childApplicators-ArrayHandler.html">ArrayHandler</a></li><li><a href="module-childApplicators-ChildrenHandler.html">ChildrenHandler</a></li><li><a href="module-childApplicators-Items.html">Items</a></li><li><a href="module-childApplicators-ObjectHandler.html">ObjectHandler</a></li><li><a href="module-childApplicators-Properties.html">Properties</a></li><li><a href="module-components-AddButton.html">AddButton</a></li><li><a href="module-components-BooleanInput.html">BooleanInput</a></li><li><a href="module-components-GeneratorIcon.html">GeneratorIcon</a></li><li><a href="module-components-InputTitle.html">InputTitle</a></li><li><a href="module-components-InstanceViewPanel.html">InstanceViewPanel</a></li><li><a href="module-components-LabelTitle.html">LabelTitle</a></li><li><a href="module-components-NumericInput.html">NumericInput</a></li><li><a href="module-components-PillsInstancePanel.html">PillsInstancePanel</a></li><li><a href="module-components-RemoveButton.html">RemoveButton</a></li><li><a href="module-components-RequiredIcon.html">RequiredIcon</a></li><li><a href="module-components-RootIcon.html">RootIcon</a></li><li><a href="module-components-Select.html">Select</a></li><li><a href="module-components-SelectInstancePanel.html">SelectInstancePanel</a></li><li><a href="module-components-TextInput.html">TextInput</a></li><li><a href="module-components-Toggler.html">Toggler</a></li><li><a href="module-formElementDefinitions-State.html">State</a></li><li><a href="module-formElement-FormElement.html">FormElement</a></li><li><a href="module-inPlaceApplicators-Aggregation.html">Aggregation</a></li><li><a href="module-inPlaceApplicators-InPlaceApplicator.html">InPlaceApplicator</a></li><li><a href="module-inPlaceApplicators-IPASchema.html">IPASchema</a></li><li><a href="module-layouts-Layout.html">Layout</a></li><li><a href="module-selectors-Selector.html">Selector</a></li><li><a href="module-selectors-SelectorsContainer.html">SelectorsContainer</a></li><li><a href="module-selectors-SelectorsToolbar.html">SelectorsToolbar</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-childApplicators-ChildApplicator.html">ChildApplicator</a></li><li><a href="module-components-Component.html">Component</a></li><li><a href="module-components-InputComponent.html">InputComponent</a></li></ul><h3>Global</h3><ul><li><a href="global.html#defaultFormOptions">defaultFormOptions</a></li><li><a href="global.html#formElementByDiv">formElementByDiv</a></li><li><a href="global.html#lcm">lcm</a></li><li><a href="global.html#pointerToId">pointerToId</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a>
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>