Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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';
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.