test/megapicker.html from dfcreative/color-tool

test/megapicker.html
Summary

Maintainability

Test Coverage

Issues
<!doctype html>

<style type="text/css">
    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body{
        font-family: sans-serif;
        line-height: 1.3;
        font-size: 16px;
    }
    h1, h2, h3, h4, h5, h6{
        margin: 0;
        padding: 0;
    }
    dl{
        margin: 0;
    }
    .item{
        max-width: 100%;
        color: white;
        text-align: left;
        border-radius: 4px;
        box-shadow: 0 1px 10px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.4);
        min-height: 120px;
        margin:0 0 10px 0;
        padding: 15px 20px 20px;
        font-weight: bold;
        font-size: 20px;
        line-height: 40px;
        background: #737679;
        /*-webkit-transition: .5s ease-in-out;*/
    }
    .item h2{
        font-size: 24px;
    }
    .container{
        width: 90%;
        margin: 0 auto;
        outline: 2px dashed #f3f3f3;
        padding: 10px;
    }
</style>
<!-- <script src="../src/lib/modernizr.js"></script> -->

<body data-picker style="background-color: {{ color.rgba }};">

<div class="container" data-waterfall col-width="120">
    <div class="item" span="2">
        <h2>Sources</h2>
        <dl>
            <dt>input</dt>
            <dd>
                <input placeholder="rgba input" picker format="rgba"/>
            </dd>
            <dt>textarea</dt>
            <dd>
                <textarea picker format="rgba"></textarea>
            </dd>
            <dt>input color</dt>
            <dd>
                <input type="color" placeholder="hsl input format" picker format="hsl"></input>
            </dd>
            <dt>input range</dt>
            <dd>
                <input type="range" min="0" max="1" value="1" step="0.01" picker color-component="alpha" />
            </dd>
            <dt>input number</dt>
            <dd>
                <input type="number" min="0" max="1" step="0.01" value="1" picker color-component="alpha" />
            </dd>
        </dl>
    </div>

    <div class="item" picker="hue" span="2"><h2>Hue: <span data-picky>{{ hue }}</span></h2></div>

    <div class="item" picker="saturation"><h2>Saturation: <span>{{ saturation }}</span></h2></div>

    <div class="item" picker="lightness"><h2>Lightness: <span>{{ lightness }}</span></h2></div>

    <div class="item" picker="red"><h2>Red: <span>{{ red }}</span></h2></div>

    <div class="item" picker="green"><h2>Green: <span>{{ green }}</span></h2></div>

    <div class="item" picker="blue"><h2>Blue: <span>{{ blue }}</span></h2></div>

    <div class="item" picker="alpha"><h2>Alpha: <span>{{ alpha }}</span></h2></div>

    <div class="item" picker="hl"><h2>Hue/Lightness: <span>{{ hue }}, {{ lightness }}</span></h2></div>

    <div class="item"><h2>Hue/Saturation: <span>{{ hue }}, {{ saturation }}</span></h2></div>

    <div class="item"><h2>Hue/Alpha: <span>{{ hue }}, {{ alpha }}</span></h2></div>

    <div class="item"><h2>Saturation/Lightness: <span>{{ saturation }}, {{ lightness }}</span></h2></div>

    <div class="item"><h2>Saturation/Hue: <span>{{ saturation }}, {{ hue }}</span></h2></div>

    <div class="item"><h2>Saturation/Lightness: <span>{{ saturation }}, {{ lightness }}</span></h2></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"><h2>Palette: <span>Not set</span></h2></div>

    <div class="item" shape="circle"><h2>Circular hue: <span target="text" format="hue">Not set</span></h2></div>

    <div class="item"></div>

    <div class="item" target="background" format="hsla"></div>

    <div class="item" target="border-color" format="hex"></div>

    <div class="item" target="box-shadow" format="rgba"></div>

    <div class="item" target="text-shadow" format="rgb">TODO</div>

    <div class="item" target="text-shadow" format="color">TODO: closest color</div>

    <div class="item" target="text-shadow" format="color">TODO: last used colors</div>

    <div class="item" target="text-shadow" format="color">TODO: last used colors</div>

    <div class="item results">
        <h2>Results</h2>
        <dl>
            <dt>hsla</dt>
            <dd target="text" format="hsla">Not set</dd>
            <dt>rgba</dt>
            <dd target="text" format="rgba">Not set</dd>
            <dt>hex</dt>
            <dd target="text" format="hex">Not set</dd>
            <dt>rgb</dt>
            <dd target="text" format="rgb">Not set</dd>
            <dt>hsl</dt>
            <dd target="text" format="hsl">Not set</dd>
        </dl>
    </div>
</div>


<script src="../src/lib/jquery.js"></script>
<script src="../src/lib/jquery.waterfall.js"></script>
<script src="../src/lib/jquery.color.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/Manager.js"></script>
<script src="../src/Picker.js"></script>
<script src="../src/pickers/InputPicker.js"></script>
<script src="../src/pickers/StylePicker.js"></script>
<script src="../src/pickers/AreaPicker.js"></script>
<script src="../src/pickers/HuePicker.js"></script>
<script src="../src/pickers/SaturationPicker.js"></script>
<script src="../src/pickers/LightnessPicker.js"></script>