docs/gen/Picker.html

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Documentation Class: Picker</title>

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

	<link type="text/css" rel="stylesheet" href="styles/site.simplex.css">

</head>

<body>

<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="index.html">Documentation</a>
		<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
        </button>
	</div>
	<div class="navbar-collapse collapse" id="topNavigation">
		<ul class="nav navbar-nav">
			
			<li class="dropdown">
				<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="Picker.html">Picker</a></li>
				</ul>
			</li>
			
		</ul>
        
            <div class="col-sm-3 col-md-3">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
                        <div class="input-group-btn">
                            <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        
	</div>

</div>
</div>


<div class="container" id="toc-content">
<div class="row">

	
	<div class="col-md-8">
	
		<div id="main">
			

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

<header>
    
        <h2>
        Picker
        </h2>
        
    
</header>


<article>
    <div class="container-overview">
    
        
<hr>
<dt>
    <h4 class="name" id="Picker"><span class="type-signature"></span>new Picker(options)</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Create a color picker.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <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">Object</span>


            </td>

            
            <td class="description last"><p>@see <a href="Picker.html#setOptions"><code>setOptions()</code></a></p></td>
        </tr>

    
    </tbody>
</table>

    
<dl class="details">
    

</dl>


        <h5>Examples</h5>
        
    <pre class="sunlight-highlight-javascript">var picker = new Picker(myParentElement);
picker.onDone = function(color) {
    myParentElement.style.backgroundColor = color.rgbaString;
};</pre>

    <pre class="sunlight-highlight-javascript">var picker = new Picker({
    parent: myParentElement,
    color: &#x27;gold&#x27;,
    onChange: function(color) {
                  myParentElement.style.backgroundColor = color.rgbaString;
              },
});</pre>


</dd>

    
    </div>

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

        <dl>
            
<hr>
<dt class="name" id="onChange">
    <h4 id="onChange"><span class="type-signature"></span>onChange<span class="type-signature"> :<a href="Picker.html#~colorCallback">Picker~colorCallback</a></span></h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>Callback whenever the color changes.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type"><a href="Picker.html#~colorCallback">Picker~colorCallback</a></span>


            </li>
        </ul>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt class="name" id="onDone">
    <h4 id="onDone"><span class="type-signature"></span>onDone<span class="type-signature"> :<a href="Picker.html#~colorCallback">Picker~colorCallback</a></span></h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>Callback when the user clicks &quot;Ok&quot;.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type"><a href="Picker.html#~colorCallback">Picker~colorCallback</a></span>


            </li>
        </ul>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt class="name" id="onOpen">
    <h4 id="onOpen"><span class="type-signature"></span>onOpen<span class="type-signature"> :<a href="Picker.html#~colorCallback">Picker~colorCallback</a></span></h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>Callback when the popup opens.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type"><a href="Picker.html#~colorCallback">Picker~colorCallback</a></span>


            </li>
        </ul>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt class="name" id="onClose">
    <h4 id="onClose"><span class="type-signature"></span>onClose<span class="type-signature"> :<a href="Picker.html#~colorCallback">Picker~colorCallback</a></span></h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>Callback when the popup closes.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type"><a href="Picker.html#~colorCallback">Picker~colorCallback</a></span>


            </li>
        </ul>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt class="name" id=".StyleElement">
    <h4 id=".StyleElement"><span class="type-signature">&lt;static> </span>StyleElement<span class="type-signature"></span></h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>The <code>&lt;style&gt;</code> element for picker CSS which is added to the document.</p>
    </div>
    

<dl class="details">
    

</dl>


</dd>

        </dl>
    

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

        <dl>
            
<hr>
<dt>
    <h4 class="name" id="setOptions"><span class="type-signature"></span>setOptions(options)</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Set the picker options.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <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">Object</span>


            </td>

            
            <td class="description last">
                <h6 class="method-params-label method-subparams-label">Properties</h6>
                

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

        <th>Type</th>

        
        <th>Argument</th>
        

        <th>Default</th>
        

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

    <tbody>
    

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

            <td class="description last"><p>Which element the picker should be attached to.</p></td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type">'top'</span>
|

<span class="param-type">'bottom'</span>
|

<span class="param-type">'left'</span>
|

<span class="param-type">'right'</span>
|

<span class="param-type">false</span>


            </td>

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

                </td>
            

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

            <td class="description last"><p>If the picker is used as a popup, where to place it relative to the parent. <code>false</code> to add the picker as a normal child element of the parent.</p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>Custom HTML string from which to build the picker. See /src/picker.pug for required elements and class names.</p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>Suffix of a custom &quot;layout_...&quot; CSS class to handle the overall arrangement of the picker elements.</p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>Whether to enable adjusting the alpha channel.</p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>Whether to show a text field for color value editing.</p></td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type">'hex'</span>
|

<span class="param-type">'hsl'</span>
|

<span class="param-type">'rgb'</span>


            </td>

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

                </td>
            

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

            <td class="description last"><p>How to display the selected color in the text field (the text field still supports <em>input</em> in any format).</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>cancelButton</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>Whether to have a &quot;Cancel&quot; button which closes the popup.</p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>Initial color for the picker.</p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>@see <a href="Picker.html#onChange"><code>onChange</code></a></p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>@see <a href="Picker.html#onDone"><code>onDone</code></a></p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>@see <a href="Picker.html#onOpen"><code>onOpen</code></a></p></td>
        </tr>

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

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


            </td>

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

                </td>
            

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

            <td class="description last"><p>@see <a href="Picker.html#onClose"><code>onClose</code></a></p></td>
        </tr>

    
    </tbody>
</table>

            </td>
        </tr>

    
    </tbody>
</table>

    
<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="openHandler"><span class="type-signature"></span>openHandler()</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Default behavior for opening the popup</p>
    </div>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="closeHandler"><span class="type-signature"></span>closeHandler()</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Default behavior for closing the popup</p>
    </div>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="movePopup"><span class="type-signature"></span>movePopup(options, open)</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Move the popup to a different parent, optionally opening it at the same time.</p>
    </div>
    

        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <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">Object</span>


            </td>

            
            <td class="description last"><p>@see <a href="Picker.html#setOptions"><code>setOptions()</code></a> (Usually a new <code>.parent</code> and <code>.color</code>).</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>Whether to open the popup immediately.</p></td>
        </tr>

    
    </tbody>
</table>

    
<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="setColor"><span class="type-signature"></span>setColor(color, silent)</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Set/initialize the picker's color.</p>
    </div>
    

        <h5>Parameters:</h5>
        

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

        <th>Type</th>

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

    <tbody>
    

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

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


            </td>

            
            <td class="description last"><p>Color name, RGBA/HSLA/HEX string, or RGBA array.</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>If true, won't trigger onChange.</p></td>
        </tr>

    
    </tbody>
</table>

    
<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="setColour"><span class="type-signature"></span>setColour()</h4>
    
    
</dt>
<dd>

    
<dl class="details">
    

	<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
	<dd class="tag-see">
		<ul>
			<li><a href="Picker.html#setColor"><code>setColor()</code></a></li>
			</ul>
	</dd>
	

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="show"><span class="type-signature"></span>show()</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Show/open the picker.</p>
    </div>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="hide"><span class="type-signature"></span>hide()</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Hide the picker.</p>
    </div>
    

<dl class="details">
    

</dl>


</dd>

        
<hr>
<dt>
    <h4 class="name" id="destroy"><span class="type-signature"></span>destroy()</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>Release all resources used by this picker instance.</p>
    </div>
    

<dl class="details">
    

</dl>


</dd>

        </dl>
    

        <h3 class="subsection-title">Type Definitions</h3>

        <dl>
                
<hr>
<dt>
    <h4 class="name" id="~colorCallback"><span class="type-signature"></span>colorCallback(color)</h4>
    
    
</dt>
<dd>

    
    <div class="description">
        <p>A callback that gets the picker's current color value.</p>
    </div>
    

        <h5>Parameters:</h5>
        

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

        <th>Type</th>

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

    <tbody>
    

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

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


            </td>

            
            <td class="description last">
                <h6 class="method-params-label method-subparams-label">Properties</h6>
                

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

        <th>Type</th>

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

    <tbody>
    

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

            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


            </td>

            
            <td class="description last"><p>RGBA color components.</p></td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type">Array.&lt;number></span>


            </td>

            
            <td class="description last"><p>HSLA color components (all values between 0 and 1, inclusive).</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>RGB CSS value (e.g. <code>rgb(255,215,0)</code>).</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>RGBA CSS value (e.g. <code>rgba(255,215,0, .5)</code>).</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>HSL CSS value (e.g. <code>hsl(50.6,100%,50%)</code>).</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>HSLA CSS value (e.g. <code>hsla(50.6,100%,50%, .5)</code>).</p></td>
        </tr>

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

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


            </td>

            
            <td class="description last"><p>8 digit #RRGGBBAA (not supported in all browsers).</p></td>
        </tr>

    
    </tbody>
</table>

            </td>
        </tr>

    
    </tbody>
</table>

    
<dl class="details">
    

</dl>


</dd>

            </dl>
    

</article>

</section>


		</div>
	</div>

	<div class="clearfix"></div>

	
		<div class="col-md-3">
			<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
		</div>
	

</div>
</div>


    <div class="modal fade" id="searchResults">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Search results</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>


<footer>


<span class="jsdoc-message">
	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a>
	
	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>

<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>

    <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>


<script>
$( function () {
	$( "[id*='$']" ).each( function () {
		var $this = $( this );

		$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
	} );

	$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
		var $this = $( this );

		var example = $this.find( "code" );
		exampleText = example.html();
		var lang = /{@lang (.*?)}/.exec( exampleText );
		if ( lang && lang[1] ) {
			exampleText = exampleText.replace( lang[0], "" );
			example.html( exampleText );
			lang = lang[1];
		} else {
			var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
			lang = langClassMatch ? langClassMatch[1] : "javascript";
		}

		if ( lang ) {

			$this
			.addClass( "sunlight-highlight-" + lang )
			.addClass( "linenums" )
			.html( example.html() );

		}
	} );

	Sunlight.highlightAll( {
		lineNumbers : false,
		showMenu : true,
		enableDoclinks : true
	} );

	$.catchAnchorLinks( {
        navbarOffset: 10
	} );
	$( "#toc" ).toc( {
		anchorName  : function ( i, heading, prefix ) {
			return $( heading ).attr( "id" ) || ( prefix + i );
		},
		selectors   : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
		showAndHide : false,
		smoothScrolling: true
	} );

	$( "#main span[id^='toc']" ).addClass( "toc-shim" );
	$( '.dropdown-toggle' ).dropdown();

    $( "table" ).each( function () {
      var $this = $( this );
      $this.addClass('table');
    } );

} );
</script>


<!--Navigation and Symbol Display-->


<!--Google Analytics-->


    <script type="text/javascript">
        $(document).ready(function() {
            SearcherDisplay.init();
        });
    </script>


</body>
</html>