Commit 0f313c41 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Improve textarea rendering

Display textarea as 'pre' in read only.
In editable mode, increase textarea size as soon as it get the focus.
parent 2a6bcfab
No related merge requests found
......@@ -119,9 +119,7 @@
<script src="gadget_erp5_field_textarea.js" type="text/javascript"></script>\n
\n
</head>\n
<body>\n
<textarea></textarea>\n
</body>\n
<body></body>\n
</html>
]]></string> </value>
......@@ -245,7 +243,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>sven</string> </value>
<value> <string>zope</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -259,7 +257,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.51416.42743.7714</string> </value>
<value> <string>948.41883.489.3805</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -277,8 +275,8 @@
</tuple>
<state>
<tuple>
<float>1411576663.75</float>
<string>GMT</string>
<float>1453477484.04</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
......@@ -99,43 +99,89 @@
</item>
<item>
<key> <string>text_content</string> </key>
<value> <string>/*global window, rJS */\n
<value> <string>/*global window, rJS, document, RSVP, loopEventListener, jQuery */\n
/*jslint indent: 2, maxerr: 3 */\n
(function (window, rJS) {\n
(function (window, rJS, document, RSVP, loopEventListener, $) {\n
"use strict";\n
\n
rJS(window)\n
.ready(function (gadget) {\n
gadget.property_dict = {\n
textarea_deferred: RSVP.defer()\n
};\n
return gadget.getElement()\n
.push(function (element) {\n
gadget.element = element;\n
gadget.property_dict.element = element;\n
});\n
})\n
.declareMethod(\'render\', function (options) {\n
var textarea = this.element.querySelector(\'textarea\'),\n
field_json = options.field_json || {};\n
var new_element,\n
field_json = options.field_json || {},\n
value = field_json.value || field_json.default || "";\n
\n
textarea.value = field_json.value || field_json.default || "";\n
textarea.setAttribute(\'name\', field_json.key);\n
textarea.setAttribute(\'title\', field_json.title);\n
if (field_json.required === 1) {\n
textarea.setAttribute(\'required\', \'required\');\n
}\n
if (field_json.editable !== 1) {\n
textarea.setAttribute(\'readonly\', \'readonly\');\n
textarea.className += "ui-state-readonly";\n
// textarea.setAttribute(\'disabled\', \'disabled\');\n
this.property_dict.editable = (field_json.editable === 1);\n
this.property_dict.name = field_json.key;\n
if (this.property_dict.editable) {\n
new_element = document.createElement(\'textarea\');\n
\n
new_element.value = value;\n
new_element.setAttribute(\'name\', this.property_dict.name);\n
new_element.setAttribute(\'title\', field_json.title);\n
if (field_json.required === 1) {\n
new_element.setAttribute(\'required\', \'required\');\n
}\n
/*\n
if (field_json.editable !== 1) {\n
textarea.setAttribute(\'readonly\', \'readonly\');\n
textarea.className += "ui-state-readonly";\n
// textarea.setAttribute(\'disabled\', \'disabled\');\n
}\n
*/\n
this.property_dict.textarea_deferred.resolve(new_element);\n
} else {\n
new_element = document.createElement(\'pre\');\n
new_element.textContent = value;\n
}\n
this.property_dict.element.appendChild(new_element);\n
})\n
\n
.declareMethod(\'getContent\', function () {\n
var field = this.element.querySelector(\'textarea\'),\n
var field,\n
value,\n
result = {};\n
result[field.getAttribute("name")] = field.value;\n
if (this.property_dict.editable) {\n
field = this.property_dict.element.querySelector(\'textarea\');\n
value = field.value;\n
} else {\n
field = this.property_dict.element.querySelector(\'pre\');\n
value = field.textContent;\n
}\n
result[this.property_dict.name] = value;\n
console.log(result);\n
console.log(field);\n
console.log(this.property_dict.element);\n
return result;\n
})\n
\n
.declareService(function () {\n
var gadget = this;\n
return new RSVP.Queue()\n
.push(function () {\n
return gadget.property_dict.textarea_deferred.promise;\n
})\n
.push(function (textarea) {\n
return loopEventListener(\n
textarea,\n
\'focus\',\n
false,\n
function () {\n
$(textarea).keyup();\n
}\n
);\n
});\n
});\n
\n
}(window, rJS));</string> </value>
}(window, rJS, document, RSVP, loopEventListener, jQuery));</string> </value>
</item>
<item>
<key> <string>title</string> </key>
......@@ -256,7 +302,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>romain</string> </value>
<value> <string>zope</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -270,7 +316,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.59950.21418.24371</string> </value>
<value> <string>948.41930.30032.34201</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -288,8 +334,8 @@
</tuple>
<state>
<tuple>
<float>1412257665.71</float>
<string>GMT</string>
<float>1453477730.87</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment