Playcanvas input

var Input = pc.createScript('input');

Input.attributes.add('id', { type : 'string' });
Input.attributes.add('autofocus', { type : 'boolean' });
Input.attributes.add('fontSize', { type : 'number' });
Input.attributes.add('padding', { type : 'number' });
Input.attributes.add('margin', { type : 'string' });
Input.attributes.add('type', { type : 'string', 
    enum: [
        { 'Text Input' : 'text' },
        { 'Select' : 'select' },
        { 'Slider' : 'range' }
    ] 
});
Input.attributes.add('placeholder', { type : 'string' });
Input.attributes.add('options', { type : 'string', array : true });
Input.attributes.add('maxLength', { type : 'number' });
Input.attributes.add('align', { type : 'string' });
Input.attributes.add('step', { type : 'number' });
Input.attributes.add('min', { type : 'number' });
Input.attributes.add('max', { type : 'number' });
Input.attributes.add('display', { type : 'entity' });
Input.attributes.add('actionButton', { type : 'entity' });
Input.attributes.add('connected', { type : 'entity' });
Input.attributes.add('initValue', { type : 'string' });
Input.attributes.add('onChange', { type : 'string' });
Input.attributes.add('readonly', { type : 'boolean' });

Input.prototype.initialize = function() {
    var elementType = this.type == 'select' ? this.type : 'input';
    var attributeType = 'text';
    
    this.submit = false;
    
    if(this.type == 'range'){
        attributeType = 'range';
    }
    
    this.element = document.createElement(elementType);
    this.element.id = this.id;
    this.element.type = attributeType;
    this.element.style.background = 'transparent';
    this.element.style.fontFamily = 'Arial, sans-serif';
    this.element.style.textAlign = this.align;
    this.element.style.outline = 'none';
    this.element.style.fontSize = this.fontSize + 'vh';
    this.element.style.padding = '0px ' + this.padding + 'px';
    this.element.style.margin = this.margin;
    this.element.style.border = 'none';
    this.element.style.zIndex = 1;
    this.element.min = this.min;
    this.element.max = this.max;
    this.element.style.position = 'absolute';
    this.element.autocomplete = "off";
    this.element.maxLength = this.maxLength;
    this.element.placeholder = this.placeholder;
    
    if(this.readonly === true){
        this.element.disabled = true;
    }
    
    var connected = this.connected;
    var onChangeString = this.onChange;
    
    if(typeof this.app.variables == 'undefined' && Utils.readCookie('variables')){
        this.app.variables = JSON.parse(Utils.readCookie('variables'));
    }

    var self = this;
    this.element.onchange = function(){
        if(!self.app.variables){
            self.app.variables = {};
        }
        
        if(onChangeString){
            eval(onChangeString + ';');   
        }
        
        self.app.variables[self.element.id] = this.value;
        
        //save input changes
        Utils.createCookie('variables', JSON.stringify(self.app.variables));
        console.log('Changes saved!');
    };
    
    this.element.onkeypress = function(event){
        if(event.keyCode == 13){
            self.runAction();
        }
    };
    
    if(this.options){
        if(!this.app.inputOptions){
            this.app.inputOptions = {};
        }
        
        this.app.inputOptions[this.element.id] = this.options;
        
        for(var optionIndex in this.options){
            var optionElement = document.createElement('option');
            var option = this.options[optionIndex];
            var splitValue = option.split('::');
            
            if(splitValue.length > 1){
                optionElement.value = splitValue[0];
                optionElement.innerText = splitValue[1];   
            }else{
                optionElement.value = option;
                optionElement.innerText = option;
            }
            
            this.element.appendChild(optionElement);
        }
    }
    
    if(this.autofocus){
        this.element.focus();
    }
    
    document.body.appendChild(this.element);
    
    if(typeof this.app.variables != 'undefined' && this.app.variables[this.element.id]){
        this.element.value = this.app.variables[this.element.id];
        this.element.onchange();
    }else if(this.initValue){
        eval('var value = ' + this.initValue);
        this.element.value = this.initValue;
    }
    
    this.on('state', function(self){
        if(this.entity.enabled){
            this.element.style.display = 'block'; 
        }else{
            this.element.style.display = 'none'; 
        }
    }, this);
    
    this.on('destroy', function(self){
        this.element.parentNode.removeChild(this.element);
    }, this);
    
    this.element.onchange();
};

Input.prototype.runAction = function(){
    if(this.actionButton && !this.submit){
        this.actionButton.script.button.click();
        this.submit = true;
    }  
};

Input.prototype.update = function(dt) {
    if(this.entity.enabled){
        this.element.style.display = 'block'; 
    }else{
        this.element.style.display = 'none'; 
        return false;
    }
    
    if(this.type == 'range'){
        if(this.display){
            this.display.element.text = this.options[parseInt(this.element.value)];
        }
    }
    
    var position = this.entity.element.canvasCorners[0];
    var size0    = this.entity.element.canvasCorners[1];
    var size1    = this.entity.element.canvasCorners[2];
    
    this.element.style.left = position.x + 'px';
    this.element.style.top  = (position.y - (position.y - size1.y)) + 'px';
    
    var width  = (size0.x - position.x);
    var height = (position.y - size1.y);
    
    var minWidth  = this.entity.element.width;
    var minHeight = this.entity.element.height;
    
    if(this.scalable){
        this.element.style.width  = minWidth + 'px';
        this.element.style.height = minHeight + 'px';
        
        this.element.style.transform = 'scale(' + (width / minWidth) + ', ' + (height / minHeight) + ')';
        this.element.style.transformOrigin = '0px 0px';
    }else{
        this.element.style.width  = width + 'px';
        this.element.style.height = height + 'px';
    }
};