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