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 @@ ...@@ -119,9 +119,7 @@
<script src="gadget_erp5_field_textarea.js" type="text/javascript"></script>\n <script src="gadget_erp5_field_textarea.js" type="text/javascript"></script>\n
\n \n
</head>\n </head>\n
<body>\n <body></body>\n
<textarea></textarea>\n
</body>\n
</html> </html>
]]></string> </value> ]]></string> </value>
...@@ -245,7 +243,7 @@ ...@@ -245,7 +243,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>sven</string> </value> <value> <string>zope</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -259,7 +257,7 @@ ...@@ -259,7 +257,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>937.51416.42743.7714</string> </value> <value> <string>948.41883.489.3805</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -277,8 +275,8 @@ ...@@ -277,8 +275,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1411576663.75</float> <float>1453477484.04</float>
<string>GMT</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
...@@ -99,43 +99,89 @@ ...@@ -99,43 +99,89 @@
</item> </item>
<item> <item>
<key> <string>text_content</string> </key> <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 /*jslint indent: 2, maxerr: 3 */\n
(function (window, rJS) {\n (function (window, rJS, document, RSVP, loopEventListener, $) {\n
"use strict";\n "use strict";\n
\n \n
rJS(window)\n rJS(window)\n
.ready(function (gadget) {\n .ready(function (gadget) {\n
gadget.property_dict = {\n
textarea_deferred: RSVP.defer()\n
};\n
return gadget.getElement()\n return gadget.getElement()\n
.push(function (element) {\n .push(function (element) {\n
gadget.element = element;\n gadget.property_dict.element = element;\n
});\n });\n
})\n })\n
.declareMethod(\'render\', function (options) {\n .declareMethod(\'render\', function (options) {\n
var textarea = this.element.querySelector(\'textarea\'),\n var new_element,\n
field_json = options.field_json || {};\n field_json = options.field_json || {},\n
value = field_json.value || field_json.default || "";\n
\n \n
textarea.value = field_json.value || field_json.default || "";\n this.property_dict.editable = (field_json.editable === 1);\n
textarea.setAttribute(\'name\', field_json.key);\n this.property_dict.name = field_json.key;\n
textarea.setAttribute(\'title\', field_json.title);\n if (this.property_dict.editable) {\n
if (field_json.required === 1) {\n new_element = document.createElement(\'textarea\');\n
textarea.setAttribute(\'required\', \'required\');\n \n
}\n new_element.value = value;\n
if (field_json.editable !== 1) {\n new_element.setAttribute(\'name\', this.property_dict.name);\n
textarea.setAttribute(\'readonly\', \'readonly\');\n new_element.setAttribute(\'title\', field_json.title);\n
textarea.className += "ui-state-readonly";\n if (field_json.required === 1) {\n
// textarea.setAttribute(\'disabled\', \'disabled\');\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 }\n
this.property_dict.element.appendChild(new_element);\n
})\n })\n
\n \n
.declareMethod(\'getContent\', function () {\n .declareMethod(\'getContent\', function () {\n
var field = this.element.querySelector(\'textarea\'),\n var field,\n
value,\n
result = {};\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 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
\n \n
}(window, rJS));</string> </value> }(window, rJS, document, RSVP, loopEventListener, jQuery));</string> </value>
</item> </item>
<item> <item>
<key> <string>title</string> </key> <key> <string>title</string> </key>
...@@ -256,7 +302,7 @@ ...@@ -256,7 +302,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>romain</string> </value> <value> <string>zope</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -270,7 +316,7 @@ ...@@ -270,7 +316,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>937.59950.21418.24371</string> </value> <value> <string>948.41930.30032.34201</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -288,8 +334,8 @@ ...@@ -288,8 +334,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1412257665.71</float> <float>1453477730.87</float>
<string>GMT</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
</object> </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