path: root/library/bootstrap-colorpicker/src/docs.html

<!--(bake header.html)-->
<!--(bake examples.html)-->
<article class="col-md-6">
    <h2>Documentation</h2>
    <p>Call the colopicker via javascript:</p>
    <pre class="well">$('.sample-selector').colorpicker({ /*options...*/ });</pre>
    <h3>Options</h3>
    <p>
        You can set colorpicker options either as a plugin parameter or data-* attributes
    </p>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th style="width: 100px;">Name</th>
                <th style="width: 50px;">Type</th>
                <th style="width: 100px;">Default</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>format</td>
                <td>string</td>
                <td>false</td>
                <td>If not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.</td>
            </tr>
            <tr>
                <td>color</td>
                <td>string</td>
                <td>false</td>
                <td>If not false, sets the color to this value.</td>
            </tr>
            <tr>
                <td>container</td>
                <td>string or jQuery Element</td>
                <td>false</td>
                <td>If not false, the picker will be contained inside this element, otherwise it will be appended to the document body.</td>
            </tr>
            <tr>
                <td>component</td>
                <td>string or jQuery Element</td>
                <td>'.add-on, .input-group-addon'</td>
                <td>Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner &lt;i&gt; element).</td>
            </tr>
            <tr>
                <td>input</td>
                <td>string or jQuery Element</td>
                <td>'input'</td>
                <td>Children selector for the input that will store the picker selected value.</td>
            </tr>
            <tr>
                <td>horizontal</td>
                <td>boolean</td>
                <td>false</td>
                <td>If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.</td>
            </tr>
            <tr>
                <td>template</td>
                <td>string</td>
                <td><abbr title='please, read the source code for this value'>[...]</abbr></td>
                <td>Customizes the default colorpicker HTML template.</td>
            </tr>
        </tbody>
    </table>
    
    <p class='alert alert-warning'>
        (behind this line, docs need to be updated)
    </p>
    
    <h3>Methods</h3>
    <h4>.colorpicker(options)</h4>
    <p>Initializes an colorpicker.</p>
    <h4>.colorpicker('show')</h4>
    <p>Show the color picker</p>
    <h4>.colorpicker('update')</h4>
    <p>Refreshes the widget colors (this is done automatically)</p>
    <h4>.colorpicker('hide')</h4>
    <p>Hide the color picker</p>
    <h4>.colorpicker('disable')</h4>
    <p>Disable the color picker.</p>
    <h4>.colorpicker('enable')</h4>
    <p>Enable the color picker.</p>
    <h4>.colorpicker('place')</h4>
    <p>Updates the color picker's position relative to the element</p>
    <h4>.colorpicker('destroy')</h4>
    <p>Destroys the colorpicker widget and unbind all .colorpicker events from the element and component</p>
    <h4>.colorpicker('setValue', value)</h4>
    <p>Set a new value for the color picker (also for the input or component value). Triggers 'changeColor' event.</p>
    <h3>Color object methods</h3>
    <p>Each triggered events have a color object used internally by the picker. This object has several useful methods.</p>
    <h4>.setColor(value)</h4>
    <p>Set a new color. The value is parsed and tries to do a quess on the format.</p>
    <h4>.setHue(value)</h4>
    <p>Set the HUE with a value between 0 and 1.</p>
    <h4>.setSaturation(value)</h4>
    <p>Set the saturation with a value between 0 and 1.</p>
    <h4>.setLightness(value)</h4>
    <p>Set the lightness with a value between 0 and 1.</p>
    <h4>.setAlpha(value)</h4>
    <p>Set the transparency with a value between 0 and 1.</p>
    <h4>.toRGB()</h4>
    <p>Returns a hash with red, green, blue and alpha.</p>
    <h4>.toHex()</h4>
    <p>Returns a string with HEX format for the current color.</p>
    <h4>.toHSL()</h4>
    <p>Returns a hash with HSLA values.</p>
    <h3>Events</h3>
    <p>The colorpicker plugin exposes some events (with optional .colorpicker namespace)</p>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th style="width: 150px;">Event</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>create</td>
                <td>This event fires immediately when the color picker is created.</td>
            </tr>
            <tr>
                <td>showPicker</td>
                <td>This event fires immediately when the color picker is displayed.</td>
            </tr>
            <tr>
                <td>hidePicker</td>
                <td>This event is fired immediately when the color picker is hidden.</td>
            </tr>
            <tr>
                <td>disable</td>
                <td>This event is fired immediately when the color picker is disabled, except if it was initialized as disabled.</td>
            </tr>
            <tr>
                <td>enable</td>
                <td>This event is fired immediately when the color picker is enabled, except upon initialization.</td>
            </tr>
            <tr>
                <td>changeColor</td>
                <td>This event is fired when the color is changed.</td>
            </tr>
            <tr>
                <td>destroy</td>
                <td>This event fires immediately when the color picker is destroyed.</td>
            </tr>
        </tbody>
    </table>
    <pre class="well">
$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
  bodyStyle.backgroundColor = ev.color.toHex();
});
    </pre>
</article>
<!--(bake footer.html)-->