Commit d08deb0e authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Remove handlebars from html5 select

parent ec959559
...@@ -10,20 +10,7 @@ ...@@ -10,20 +10,7 @@
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="gadget_erp5_global.js" type="text/javascript"></script> <script src="gadget_erp5_global.js" type="text/javascript"></script>
<!-- custom script -->
<script id="option-template" type="text/x-handlebars-template">
<option value="{{value}}" data-i18n="{{text}}">{{text}}</option>
</script>
<script id="selected-option-template" type="text/x-handlebars-template">
<option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
</script>
<script id="disabled-option-template" type="text/x-handlebars-template">
<option disabled="disabled" data-i18n="{{text}}">{{text}}</option>
</script>
<script src="gadget_html5_select.js" type="text/javascript"></script> <script src="gadget_html5_select.js" type="text/javascript"></script>
</head> </head>
......
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>969.41878.39711.11997</string> </value> <value> <string>971.18802.57121.64187</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1536678942.13</float> <float>1540889118.86</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*global window, rJS, RSVP, Handlebars, getFirstNonEmpty */ /*global document, window, rJS, RSVP, getFirstNonEmpty */
/*jslint indent: 2, maxerr: 3, maxlen: 80, nomen: true */ /*jslint indent: 2, maxerr: 3, maxlen: 80, nomen: true */
(function (window, rJS, RSVP, Handlebars, getFirstNonEmpty) { (function (document, window, rJS, RSVP, getFirstNonEmpty) {
"use strict"; "use strict";
// How to change html selected option using JavaScript? // How to change html selected option using JavaScript?
// http://stackoverflow.com/a/20662180 // http://stackoverflow.com/a/20662180
///////////////////////////////////////////////////////////////// rJS(window)
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
option_source = gadget_klass.__template_element
.getElementById("option-template")
.innerHTML,
option_template = Handlebars.compile(option_source),
selected_option_source = gadget_klass.__template_element
.getElementById("selected-option-template")
.innerHTML,
selected_option_template = Handlebars.compile(selected_option_source),
disabled_option_source = gadget_klass.__template_element
.getElementById("disabled-option-template")
.innerHTML,
disabled_option_template = Handlebars.compile(disabled_option_source);
gadget_klass
.setState({ .setState({
editable: false, editable: false,
value: undefined, value: undefined,
...@@ -51,10 +33,10 @@ ...@@ -51,10 +33,10 @@
.onStateChange(function onStateChange(modification_dict) { .onStateChange(function onStateChange(modification_dict) {
var i, var i,
found = false, found = false,
template,
select = this.element.querySelector('select'), select = this.element.querySelector('select'),
item_list = JSON.parse(this.state.item_list), item_list = JSON.parse(this.state.item_list),
tmp = ""; option,
fragment;
select.id = this.state.id || this.state.name; select.id = this.state.id || this.state.name;
select.setAttribute('name', this.state.name); select.setAttribute('name', this.state.name);
...@@ -83,28 +65,35 @@ ...@@ -83,28 +65,35 @@
if (modification_dict.hasOwnProperty('value') || if (modification_dict.hasOwnProperty('value') ||
modification_dict.hasOwnProperty('item_list')) { modification_dict.hasOwnProperty('item_list')) {
fragment = document.createDocumentFragment();
for (i = 0; i < item_list.length; i += 1) { for (i = 0; i < item_list.length; i += 1) {
option = document.createElement('option');
option.textContent = item_list[i][0];
if (item_list[i][1] === null) { if (item_list[i][1] === null) {
template = disabled_option_template; option.setAttribute('disabled', 'disabled');
} else if (item_list[i][1] === this.state.value) {
template = selected_option_template;
found = true;
} else { } else {
template = option_template; option.setAttribute('value', item_list[i][1]);
if (item_list[i][1] === this.state.value) {
option.setAttribute('selected', 'selected');
found = true;
} }
tmp += template({ }
value: item_list[i][1], fragment.appendChild(option);
text: item_list[i][0]
});
} }
if (!found) { if (!found) {
tmp += selected_option_template({ option = document.createElement('option');
value: this.state.value, option.textContent = '??? (' + this.state.value + ')';
text: '??? (' + this.state.value + ')' option.setAttribute('value', this.state.value);
}); option.setAttribute('selected', 'selected');
fragment.appendChild(option);
}
while (select.firstChild) {
select.removeChild(select.firstChild);
} }
select.innerHTML = tmp; select.appendChild(fragment);
} }
}) })
...@@ -155,4 +144,4 @@ ...@@ -155,4 +144,4 @@
return this.notifyInvalid(evt.target.validationMessage); return this.notifyInvalid(evt.target.validationMessage);
}, true, false); }, true, false);
}(window, rJS, RSVP, Handlebars, getFirstNonEmpty)); }(document, window, rJS, RSVP, getFirstNonEmpty));
\ No newline at end of file \ No newline at end of file
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>967.24634.17714.15001</string> </value> <value> <string>971.18829.58393.15957</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1526653125.57</float> <float>1540889178.86</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
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