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
......@@ -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