input popup - rightclick

by Marc Malignan

HTML

<div class="inputPopup">
    
    <textarea rows="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
    
    <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>

CSS

.inputPopup {
    position: relative;
    margin-top: 30px;
}
.inputPopup textarea {
    width: 100%;
    max-width: 100%;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: monospace;
}
.inputPopup select {
    display: none;
    position: absolute;
    top:0; left:0;
    width: 200px;
    border-radius: 3px;
    box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}
.inputPopup select:focus {
    outline: 0;
}

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.display = false;
    };
    
    this.bindEvents = function() {
        var obj = this;
        
        this.container.on('contextmenu', function (e) {
            e.preventDefault();
        });
        
        this.input.mouseup(function (e) {
            if(e.button==2) { 
                e.preventDefault();
                obj.showPopup(e.offsetX, e.offsetY);
            }
        });
        
        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(x, y) {
        var inputW = this.input.width();
        var inputH = this.input.height();
        var popupW = this.popup.width();
        var popupH = this.popup.height();
        
        if(popupW + x > inputW) x = inputW - popupW;
        if(popupH + y > inputH) y = inputH - popupH;
        
        this.popup.css('left', x).css('top', y)
            .fadeIn(100)
            .focus()
                .children('option:first-child')
                .attr('selected', 'selected');
        this.display = true;
    };
    
    this.hidePopup = function() {
        this.popup.fadeOut(100);
        this.input.focus();
        this.display = false;
    };
    
    this.updateInput = function() {
        var text = this.input.val();
        var index =...