List item textarea + hot keys

by bruth

HTML

<script src="https://raw.github.com/jackmoore/autosize/master/jquery.autosize.js"></script>
<script src="https://raw.github.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
<div id=lists>
<ul class=list>
    <li><textarea>item 1</textarea></li>
    <li><textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non est quam, quis blandit erat. Quisque dignissim, ante ac lobortis ultricies, nisl augue ultricies lorem, id porttitor odio metus ac nibh.</textarea>
        <ul class=list>
            <li><textarea>item 2</textarea>
                <ul class=list>
                    <li><textarea>item 3</textarea></li>
                    <li><textarea>item 3</textarea></li>
                </ul>
            </li>
            <li><textarea>item 2</textarea></li>
        </ul>
    </li>
</ul>
</div>

CSS

.list {
    margin: 0;
    padding: 0 0 0 20px;
}

.list .list {
    padding-left: 20px;
}

.list li {
    margin: 8px 0;
    color: #aaa;
    list-style: disc;
}

.list li > textarea {
    border: none;
    color: #333;
    font-size: 14px;
    width: 100%;
    background: transparent;
    height: 14px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    resize: none;
    outline: none;
    vertical-align: top;
}

CoffeeScript

$ ->

    DOWN = 40
    UP = 38

    $('.list li > textarea').autosize
        className: 'autosize'
    
    $('#lists').on 'keydown', 'textarea', (event) ->
        if event.which is DOWN
            textareas = $('#lists textarea')
            idx = textareas.index(this)
            $(textareas[idx+1]).focus()

    $('#lists').on 'keydown', 'textarea', (event) ->
        if event.which is UP
            event.preventDefault()
            textareas = $('#lists textarea')
            idx = textareas.index(this)
            $(textareas[idx-1]).focus()