input popup - ctrl + space

by Marc Malignan

HTML

<div class="inputPopup">
    
    <div class="inputPopup-left">
        <textarea rows="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
    </div>
    <div class="inputPopup-right">
        <select size="5">
            <option value="TEST1">TEST1</option>
            <option value="TEST2">TEST2</option>
            <option value="TEST3">TEST3</option>
            <option value="TEST4">TEST4</option>
            <option value="TEST5">TEST5</option>
            <option value="TEST6">TEST6</option>
            <option value="TEST7">TEST7</option>
            <option value="TEST8">TEST8</option>
            <option value="TEST9">TEST9</option>
            <option value="TEST10">TEST10</option>
        </select>
    </div>
    
</div>

CSS

.inputPopup {
    position: relative;
    width: 100%;
    height: 160px;
    margin-top: 30px;
}
.inputPopup .inputPopup-left {
    position: absolute;
    top:0; left:0; bottom:0; right:0;
    transition: right .2s;
}
.inputPopup .inputPopup-right {
    position: absolute;
    top:0; right:0; bottom:0;
    width: 0;
    transition: width .2s;
}
.inputPopup textarea {
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: monospace;
    resize: none;
}
.inputPopup select {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

JavaScript

/* ----- INPUT POPUP CLASS ----- */
function inputPopup(el) {
    
    this.init = function() {
        this.container = $(el);
        this.input = this.container.find('textarea').first();
        this.popup = this.container.find('select').first();
        this.keys = [];
        this.display = false;
    };
    
    this.bindEvents = function() {
        var obj = this;
        
        this.container.on('contextmenu', function (e) {
            e.preventDefault();
        });
        
        this.input.keydown(function (e) {
            obj.keys[e.which] = true;
            
            if(obj.keys[17] && obj.keys[32]) {
                e.preventDefault();
                obj.showPopup();
            }
        });
        
        this.container.keyup(function (e) {
            obj.keys[e.which] = false;
        });
        
        this.popup.keyup(function (e) {
            if(obj.display && e.which==13) {
                obj.updateInput();
            }
        });
        
        this.popup.find('option').dblclick(function (e) {
            if(obj.display) {
                obj.updateInput();
            }
        });
        
        this.popup.keyup(function(e) {    
            if(e.which==27) obj.hidePopup();
        });
        
        this.popup.blur(function(e) {    
            obj.hidePopup();
        });
    };
    
    this.showPopup = function() {
        //this.container.find('.inputPopup-left').css('right', '205px');
        this.container.find('.inputPopup-right').css('width', '200px');
        this.popup
            .fadeIn(200)
            .focus()
                .children('option:first-child')
                .attr('selected', 'selected');
        this.display = true;
    };
    
    this.hidePopup = function() {
        //this.container.find('.inputPopup-left').css('right', '0');
        this.container.find('.inputPopup-right').css('width', '0');
        this.popup.fadeOut(200);
        this.input.focus();
        this.display =...