From 3e075f4ff1a032fb07c42fb6cddd43c748825a5a Mon Sep 17 00:00:00 2001 From: Romain Courteaud <romain@nexedi.com> Date: Fri, 28 Oct 2016 12:40:36 +0000 Subject: [PATCH] [erp5_web_renderjs_ui] Reimplement multicheckbox field --- ...s_gadget_erp5_multicheckboxfield_html.html | 19 -- ...js_gadget_erp5_multicheckboxfield_html.xml | 6 +- .../rjs_gadget_erp5_multicheckboxfield_js.js | 214 ++++++++++++------ .../rjs_gadget_erp5_multicheckboxfield_js.xml | 6 +- 4 files changed, 147 insertions(+), 98 deletions(-) diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.html b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.html index f406f0b859..dee379f5c0 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.html +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.html @@ -8,29 +8,10 @@ <!-- renderjs --> <script src="rsvp.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script> - <script src="gadget_global.js" type="text/javascript"></script> - <script src="handlebars.js" type="text/javascript"></script> <!-- custom script --> <script src="gadget_erp5_field_multicheckbox.js" type="text/javascript"></script> - - <script id="unchecked-template" type="text/x-handlebars-template"> - <div class="ui-field-contain"> - <label for="{{text}}" data-i18n="{{text}}">{{text}}</label> - <input type="checkbox" value= "{{value}}" name="{{text}}" class ="ui-btn" data-i18n="{{text}}"> - </div> - </script> - <script id="checked-template" type="text/x-handlebars-template"> - <diV class="ui-field-contain"> - <label for="{{text}}" data-i18n="{{text}}">{{text}}</label> - <input type="checkbox" value= "{{value}}" checked=true data-i18n="{{text}}" class ="ui-btn" name="{{text}}"> - </div> - </script> </head> <body> - <fieldset class="ui-controlgroup ui-corner-all ui-controlgroup-vertical"> - <div class="checkbox_container"> - </div> - </fieldset> </body> </html> \ No newline at end of file diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.xml index 7c13fdde59..f44a88ee34 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_html.xml @@ -234,7 +234,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>944.6874.36886.54937</string> </value> + <value> <string>954.45675.44850.53452</string> </value> </item> <item> <key> <string>state</string> </key> @@ -252,8 +252,8 @@ </tuple> <state> <tuple> - <float>1435817983.35</float> - <string>GMT+2</string> + <float>1477656021.33</float> + <string>UTC</string> </tuple> </state> </object> diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.js index 600bd42e3b..95a6d84bee 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.js +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.js @@ -1,82 +1,150 @@ -/*global window, rJS, Handlebars, document, RSVP, loopEventListener*/ +/*global window, rJS, RSVP, document*/ /*jslint nomen: true, indent: 2, maxerr: 3 */ -(function (window, rJS, Handlebars, RSVP) { +(function (window, rJS, RSVP, document) { 'use strict'; - ///////////////////////////////////////////////////////////////// - // Handlebars - ///////////////////////////////////////////////////////////////// - // Precompile the templates while loading the first gadget instance - var gadget_klass = rJS(window), - unchecked_source = gadget_klass.__template_element - .getElementById("unchecked-template") - .innerHTML, - unchecked_template = Handlebars.compile(unchecked_source), - checked_source = gadget_klass.__template_element - .getElementById("checked-template") - .innerHTML, - checked_template = Handlebars.compile(checked_source); - gadget_klass - .ready(function (g) { - g.props = {}; - }) - // Assign the element to a variable - .ready(function (g) { - return g.getElement() - .push(function (element) { - g.props.element = element; - }); - }) - .declareAcquiredMethod("translateHtml", "translateHtml") + + function appendCheckboxField(gadget, item, checked) { + var input_gadget, + label_gadget; + + if (!gadget.state.editable) { + if (checked) { + return gadget.declareGadget('gadget_html5_element.html') + .push(function (result) { + label_gadget = result; + return result.render({ + tag: 'p', + text_content: item[0] + }); + }) + .push(function () { + gadget.element.appendChild(label_gadget.element); + }); + } + return; + } + + return gadget.declareGadget('gadget_html5_input.html', {scope: item[1]}) + .push(function (result) { + input_gadget = result; + var state_dict = { + type: 'checkbox', + name: gadget.state.name, + value: item[1], + checked: checked, + editable: true + }; + + return result.render(state_dict); + }) + .push(function () { + return gadget.declareGadget('gadget_html5_element.html'); + }) + .push(function (result) { + label_gadget = result; + var state_dict = { + tag: 'label', + text_content: item[0] + }; + return result.render(state_dict); + }) + .push(function () { + var div = document.createElement("div"); + div.setAttribute("class", "ui-field-contain"); + div.appendChild(label_gadget.element); + div.appendChild(input_gadget.element); + gadget.element.appendChild(div); + }); + } + + rJS(window) + .declareMethod('render', function (options) { - var gadget = this, - tmp, - template, - container, - field_json = options.field_json, - i; - gadget.props.field_json = field_json; - container = gadget.props.element.querySelector(".checkbox_container"); - tmp = ""; - for (i = 0; i < field_json.items.length; i += 1) { - if (field_json.default.indexOf(field_json.items[i][1]) > -1) { - template = checked_template; - } else { - template = unchecked_template; - } - tmp += template({ - value: field_json.items[i][1], - text: field_json.items[i][0] - }); + var field_json = options.field_json || {}, + state_dict = { + editable: field_json.editable, + name: field_json.key, + item_list: field_json.items, + value_list: field_json.value || field_json.default + }; + + return this.changeState(state_dict); + }) + + .onStateChange(function () { + var element = this.element, + gadget = this, + value_list = this.state.value_list, + value_dict = {}, + item_list = this.state.item_list, + i, + queue; + + // Clear first to DOM, append after to reduce flickering/manip + while (element.firstChild) { + element.removeChild(element.firstChild); } - container.innerHTML = tmp; - return new RSVP.Queue() - .push(function () { - return gadget.translateHtml(container.innerHTML); - }) - .push(function (translated_htmls) { - var checkbox_list; - container.innerHTML = translated_htmls; - if (field_json.editable !== 1) { - checkbox_list = container.querySelectorAll('input[type="checkbox"]'); - for (i = 0; i < checkbox_list.length; i += 1) { - checkbox_list[i].setAttribute("class", "ui-btn ui-shadow ui-state-readonly"); - } - } - }); + + for (i = 0; i < value_list.length; i += 1) { + value_dict[value_list[i]] = null; + } + + function enQueue() { + var argument_list = arguments; + queue + .push(function () { + return appendCheckboxField.apply(this, argument_list); + }); + } + + queue = new RSVP.Queue(); + + for (i = 0; i < item_list.length; i += 1) { + enQueue(gadget, item_list[i], value_dict.hasOwnProperty(item_list[i][1])); + } + + return queue; }) + .declareMethod('getContent', function () { - var gadget = this, - result = {}, - tmp = [], - checkbox_list = this.props.element.querySelectorAll('input[type="checkbox"]'), - i; - for (i = 0; i < checkbox_list.length; i += 1) { - if (checkbox_list[i].checked) { - tmp.push(checkbox_list[i].value); + var i, + queue = new RSVP.Queue(), + final_result = {}, + result_list = [], + gadget = this; + + function calculateSubContent(scope) { + queue + .push(function () { + return gadget.getDeclaredGadget(scope) + .push(function (result) { + return result.getContent(); + }) + .push(function (result) { + result_list.push(result); + }); + }); + } + + if (this.state.editable) { + for (i = 0; i < gadget.state.item_list.length; i += 1) { + calculateSubContent(gadget.state.item_list[i][1]); } + + return queue + .push(function () { + var j, + value_list = []; + for (j = 0; j < result_list.length; j += 1) { + if (result_list[j][gadget.state.name]) { + value_list.push(gadget.state.item_list[j][1]); + } + } + final_result[gadget.state.name] = value_list; + final_result["default_" + gadget.state.name + ":int"] = 0; + return final_result; + }); } - result[gadget.props.field_json.key] = tmp; - result["default_" + gadget.props.field_json.key + ":int"] = 0; - return result; + return final_result; }); -}(window, rJS, Handlebars, RSVP)); \ No newline at end of file +}(window, rJS, RSVP, document)); \ No newline at end of file diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.xml index c12eeabfe1..8eb59c6a1b 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_multicheckboxfield_js.xml @@ -230,7 +230,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>944.6786.16715.57156</string> </value> + <value> <string>954.58934.61981.16162</string> </value> </item> <item> <key> <string>state</string> </key> @@ -248,8 +248,8 @@ </tuple> <state> <tuple> - <float>1435813427.52</float> - <string>GMT+2</string> + <float>1477658355.17</float> + <string>UTC</string> </tuple> </state> </object> -- 2.30.9