Textarea.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. MWF.xDesktop.requireApp("process.Xform", "$Input", null, false);
  2. MWF.xApplication.process.Xform.Textarea = MWF.APPTextarea = new Class({
  3. Implements: [Events],
  4. Extends: MWF.APP$Input,
  5. _loadUserInterface: function(){
  6. this._loadNode();
  7. if (this.json.compute == "show"){
  8. this._setValue(this._computeValue());
  9. }else{
  10. this._loadValue();
  11. }
  12. },
  13. _loadNode: function(){
  14. if (this.readonly){
  15. this._loadNodeRead();
  16. }else{
  17. this._loadNodeEdit();
  18. }
  19. },
  20. _loadNodeRead: function(){
  21. this.node.empty();
  22. },
  23. _setValue: function(value){
  24. this._setBusinessData(value);
  25. if (this.node.getFirst()) this.node.getFirst().set("value", value || "");
  26. if (this.readonly || this.json.isReadonly){
  27. this.node.set("text", value);
  28. }
  29. },
  30. _loadNodeEdit: function(){
  31. var input = new Element("textarea", {"styles": {
  32. "background": "transparent",
  33. "width": "100%",
  34. "border": "0px"
  35. }});
  36. input.set(this.json.properties);
  37. var node = new Element("div", {"styles": {
  38. "ovwrflow": "hidden",
  39. "position": "relative",
  40. "padding-right": "2px"
  41. }}).inject(this.node, "after");
  42. input.inject(node);
  43. this.node.destroy();
  44. this.node = node;
  45. //this.node = input;
  46. this.node.set({
  47. "id": this.json.id,
  48. "MWFType": this.json.type
  49. });
  50. this.node.addEvent("change", function(){
  51. this._setBusinessData(this.getInputData());
  52. }.bind(this));
  53. this.node.getFirst().addEvent("blur", function(){
  54. this.validation();
  55. }.bind(this));
  56. this.node.getFirst().addEvent("keyup", function(){
  57. this.validationMode();
  58. }.bind(this));
  59. },
  60. _afterLoaded: function(){
  61. if (!this.readonly){
  62. this.loadDescription();
  63. }
  64. },
  65. loadDescription: function(){
  66. var v = this._getBusinessData();
  67. if (!v){
  68. if (this.json.description){
  69. var size = this.node.getFirst().getSize();
  70. var w = size.x-23;
  71. this.descriptionNode = new Element("div", {"styles": this.form.css.descriptionNode, "text": this.json.description}).inject(this.node);
  72. this.descriptionNode.setStyles({
  73. "width": ""+w+"px",
  74. "height": ""+size.y+"px",
  75. "line-height": ""+size.y+"px"
  76. });
  77. this.setDescriptionEvent();
  78. }
  79. }
  80. },
  81. setDescriptionEvent: function(){
  82. if (this.descriptionNode){
  83. if (COMMON.Browser.Platform.name==="ios"){
  84. this.descriptionNode.addEvents({
  85. "click": function(){
  86. this.descriptionNode.setStyle("display", "none");
  87. this.node.getFirst().focus();
  88. }.bind(this)
  89. });
  90. }else if (COMMON.Browser.Platform.name==="android"){
  91. this.descriptionNode.addEvents({
  92. "click": function(){
  93. this.descriptionNode.setStyle("display", "none");
  94. this.node.getFirst().focus();
  95. }.bind(this)
  96. });
  97. }else{
  98. this.descriptionNode.addEvents({
  99. "click": function(){
  100. this.descriptionNode.setStyle("display", "none");
  101. this.node.getFirst().focus();
  102. }.bind(this)
  103. });
  104. }
  105. this.node.getFirst().addEvents({
  106. "focus": function(){
  107. this.descriptionNode.setStyle("display", "none");
  108. }.bind(this),
  109. "blur": function(){
  110. if (!this.node.getFirst().get("value")) this.descriptionNode.setStyle("display", "block");
  111. }.bind(this)
  112. });
  113. }
  114. }
  115. });