test/photoshop.html from dfcreative/color-tool

test/photoshop.html
Summary

Maintainability

Test Coverage

Issues
<!doctype html>

<style>
    body{
        padding: 0;
        margin: 0;
    }

    section{
        margin-top: 20px;
        margin-left: 20px;
        display: inline-block;
        width: 40vw;
        height: 40vh;
        position: relative;
        vertical-align: top;
    }

    .area{
        display: inline-block;
        outline: 1px dashed gray;
        height: 40vh;
        position: relative;
    }
    .big-area{
        width: 75%;
    }
    .small-area{
        width: 20%;
    }

    .input-group{
        width: 50%;
        margin-bottom: 10px;
        outline: 1px dotted red;
    }

    .input-group input{
        max-width: 90px;
    }

    .input-group label{
        width: 40px;
        display: inline-block;
    }

    .preview{
        width: 40px;
        height: 40px;
        box-shadow: 0 0 0 2px black;
        margin-bottom: 10px;
    }

    .draggable{
        box-shadow: 0 1px 1px black, inset 0 1px 1px white;
        position: absolute;
        width: 20px;
        height: 20px;
    }


</style>

<div picky name="color">
    <section class="areas">
        <div class="area big-area" class="picker" mode="sl"></div>
        <div class="area small-area" class="picker" mode="hue" vertical></div>
    </section>

    <section class="inputs">
        <div class="preview" bind-style="background-color: {{ color }};"></div>

        <div class="input-group">
            <label for="hue"><input id="hue" type="radio" name="mode" checked />H:</label><input class="picker" component="hue"/>°<br/>

            <label for="saturation"><input id="saturation" type="radio" name="mode" />S:</label><input class="picker" component="saturation" />%<br/>

            <label for="lightness"><input id="lightness" type="radio" name="mode" />L:
            </label><input class="picker" component="lightness"/>%
        </div>

        <!--<div class="input-group">
            <label for="red"><input id="red" type="radio" name="mode" />R:</label><input picker="input" /><br/>

            <label for="green"><input id="green" type="radio" name="mode" />G:</label><input picker="input" /><br/>

            <label for="blue"><input id="blue" type="radio" name="mode" />B:</label><input picker="input" /><br/>
        </div>

        <div class="input-group" title="TODO: make that enhanced-picker">
            <label for="hex">#</label><input id="hex" picker="input" />
        </div>

        <div class="input-group">
            <label for="L"><input id="L" type="radio" name="mode" />L:</label><input picker="input" /><br/>

            <label for="a"><input id="a" type="radio" name="mode" />a:</label><input picker="input" /><br/>

            <label for="b"><input id="b" type="radio" name="mode" />b:</label><input picker="input" /><br/>
        </div>

        <div class="input-group">
            <label for="C"><input id="C" type="radio" name="mode" />C:</label><input picker="input" /><br/>

            <label for="M"><input id="M" type="radio" name="mode" />M:</label><input picker="input" /><br/>

            <label for="Y"><input id="Y" type="radio" name="mode" />Y:</label><input picker="input" /><br/>

            <label for="K"><input id="K" type="radio" name="mode" />K:</label><input picker="input" /><br/>
        </div> -->
    </section>
</div>

<script src="../src/mod.js"></script>
<script src="../src/no.js"></script>
<script src="../src/Draggable.js"></script>
<script src="../src/Slidy.js"></script>
<script src="../src/pickers/Picker.js"></script>
<!--<script src="../src/pickers/HuePicker.js"></script>
<script src="../src/pickers/SaturationPicker.js"></script>
<script src="../src/pickers/LightnessPicker.js"></script>
<script src="../src/pickers/SLPicker.js"></script>-->
<script src="../src/Picky.js"></script>

<script>
    //Customize modes switching
</script>