Commit 25dcc613 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Use onStateChange method

parent 9b55c66f
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
}); });
}) })
.declareMethod('updateDOM', function (modification_dict) { .onStateChange(function (modification_dict) {
var i, var i,
erp5_document = this.state.erp5_document, erp5_document = this.state.erp5_document,
form_definition = this.state.form_definition, form_definition = this.state.form_definition,
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.27320.12986.51029</string> </value> <value> <string>954.27330.54941.29149</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>1475762090.29</float> <float>1476193992.94</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function (modification_dict) { .onStateChange(function (modification_dict) {
var gadget = this; var gadget = this;
if (modification_dict.hasOwnProperty('label_text')) { if (modification_dict.hasOwnProperty('label_text')) {
this.state.label_text_element.textContent = this.state.label_text; this.state.label_text_element.textContent = this.state.label_text;
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.25940.33315.42837</string> </value> <value> <string>954.25941.22930.26914</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>1475678720.94</float> <float>1476194017.94</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -447,7 +447,7 @@ ...@@ -447,7 +447,7 @@
.allowPublicAcquisition("renderApplication", function (param_list) { .allowPublicAcquisition("renderApplication", function (param_list) {
return this.render.apply(this, param_list); return this.render.apply(this, param_list);
}) })
.declareMethod('updateDOM', function (modification_dict) { .onStateChange(function (modification_dict) {
var gadget = this, var gadget = this,
route_result = gadget.state; route_result = gadget.state;
if (modification_dict.hasOwnProperty('url')) { if (modification_dict.hasOwnProperty('url')) {
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.23080.60626.47479</string> </value> <value> <string>954.34539.19221.9523</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>1475573239.94</float> <float>1476198512.38</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var form_gadget = this, var form_gadget = this,
icon, icon,
selector = form_gadget.element.querySelector("h3"), selector = form_gadget.element.querySelector("h3"),
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.5593.38130.32665</string> </value> <value> <string>954.5594.14865.13670</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>1474544293.54</float> <float>1476194100.02</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
}); });
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var form_gadget = this; var form_gadget = this;
// render the erp5 form // render the erp5 form
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.5675.50023.58965</string> </value> <value> <string>954.34605.28227.45721</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>1474549231.17</float> <float>1476198578.1</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var form_gadget = this; var form_gadget = this;
// render the erp5 form // render the erp5 form
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.25820.35404.6229</string> </value> <value> <string>954.25821.46431.41233</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>1475671542.46</float> <float>1476194167.31</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var gadget = this; var gadget = this;
// render the erp5 form // render the erp5 form
......
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1474546509.43</float> <float>1476194151.17</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
}); });
}); });
}) })
.declareMethod('updateDOM', function (modification_dict) { .onStateChange(function (modification_dict) {
var queue, var queue,
gadget = this, gadget = this,
options = this.state.options, options = this.state.options,
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.15904.46164.40277</string> </value> <value> <string>954.23027.11225.50944</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>1475503870.23</float> <float>1476194208.6</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
form_gadget_url: form_gadget_url form_gadget_url: form_gadget_url
}); });
}) })
.declareMethod('updateDOM', function (modification_dict) { .onStateChange(function (modification_dict) {
var gadget = this, var gadget = this,
form_gadget, form_gadget,
section_container_element = document.createElement('div'), section_container_element = document.createElement('div'),
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.25917.62680.11605</string> </value> <value> <string>954.25919.63902.23893</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>1475677438.49</float> <float>1476194238.38</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var gadget = this; var gadget = this;
return gadget.getDeclaredGadget('input') return gadget.getDeclaredGadget('input')
.push(function (input_gadget) { .push(function (input_gadget) {
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.17331.42805.29064</string> </value> <value> <string>954.17336.1268.55074</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>1475248801.1</float> <float>1476194269.08</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*global window, rJS, RSVP, loopEventListener, document */ /*global window, rJS */
/*jslint indent: 2, maxerr: 3 */ /*jslint indent: 2, maxerr: 3 */
(function (window, rJS, RSVP, loopEventListener, document) { (function (window, rJS) {
"use strict"; "use strict";
rJS(window) rJS(window)
.ready(function (gadget) { .setState({
return gadget.getElement() tag: 'p'
.push(function (element) {
gadget.props = {};
gadget.element = element;
});
})
.declareAcquiredMethod("notifyValid", "notifyValid")
.declareAcquiredMethod("notifyInvalid", "notifyInvalid")
.declareAcquiredMethod("notifyChange", "notifyChange")
.declareMethod('getTextContent', function () {
return this.props.value;
}) })
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var element, var field_json = options.field_json || {},
field_json = options.field_json || {}, state_dict = {
created = false; value: field_json.value || field_json.default || "",
this.props.value = field_json.value || field_json.default || ""; editable: field_json.editable,
this.props.editable = field_json.editable; required: field_json.required,
if (field_json.editable) { name: field_json.key,
element = this.element.querySelector('input'); title: field_json.title
if (element === null) { };
element = document.createElement('input'); state_dict.text_content = state_dict.value;
element.setAttribute("type", "text"); return this.changeState(state_dict);
created = true; })
} .onStateChange(function (modification_dict) {
element.setAttribute('value', this.props.value); var element = this.element,
element.setAttribute('name', field_json.key); gadget = this,
element.setAttribute('title', field_json.title); url,
if (field_json.required === 1) { result;
element.setAttribute('required', 'required'); if (modification_dict.hasOwnProperty('editable')) {
if (gadget.state.editable) {
url = 'gadget_html5_input.html';
} else { } else {
element.removeAttribute('required'); url = 'gadget_html5_element.html';
} }
if (field_json.disabled) { result = this.declareGadget(url, {scope: 'sub'})
element.setAttribute("disabled", "disabled"); .push(function (input) {
} else { // Clear first to DOM, append after to reduce flickering/manip
element.removeAttribute('disabled'); while (element.firstChild) {
element.removeChild(element.firstChild);
} }
element.appendChild(input.element);
return input;
});
} else { } else {
element = this.element.querySelector('p'); result = this.getDeclaredGadget('sub');
if (element === null) {
element = document.createElement("p");
element.setAttribute("class", "ui-content-non-editable");
created = true;
}
element.textContent = this.props.value;
}
if (created) {
this.element.innerHTML = '';
this.element.appendChild(element);
} }
return result
.push(function (input) {
return input.render(gadget.state);
});
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
var input, if (this.state.editable) {
result = {}; return this.getDeclaredGadget('sub')
if (this.props.editable) { .push(function (gadget) {
input = this.element.querySelector('input'); return gadget.getContent();
result[input.getAttribute('name')] = input.value; });
} }
return result; return {};
}) })
.declareMethod('checkValidity', function () { .declareMethod('checkValidity', function () {
var result; if (this.state.editable) {
if (!this.props.editable) { return this.getDeclaredGadget('sub')
return true; .push(function (gadget) {
} return gadget.checkValidity();
result = this.element.querySelector('input').checkValidity();
if (result) {
return this.notifyValid()
.push(function () {
return result;
}); });
} }
return result; return true;
})
.declareService(function () {
////////////////////////////////////
// Check field validity when the value changes
////////////////////////////////////
var field_gadget = this;
if (!field_gadget.props.editable) {
return;
}
function notifyChange() {
return RSVP.all([
field_gadget.checkValidity(),
field_gadget.notifyChange()
]);
}
// Listen to input change
return loopEventListener(
field_gadget.element.querySelector('input'),
'change',
false,
notifyChange
);
})
.declareService(function () {
////////////////////////////////////
// Inform when the field input is invalid
////////////////////////////////////
var field_gadget = this;
if (!field_gadget.props.editable) {
return;
}
function notifyInvalid(evt) {
return field_gadget.notifyInvalid(evt.target.validationMessage);
}
// Listen to input change
return loopEventListener(
field_gadget.element.querySelector('input'),
'invalid',
false,
notifyInvalid
);
}); });
}(window, rJS, RSVP, loopEventListener, document)); }(window, rJS));
\ 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>953.643.50676.9335</string> </value> <value> <string>954.34570.5720.55227</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>1470315124.05</float> <float>1476197972.06</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function (modification_dict) { .onStateChange(function (modification_dict) {
var element = this.element, var element = this.element,
gadget = this, gadget = this,
url, url,
......
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.15897.25014.42086</string> </value> <value> <string>954.34595.10317.3037</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1475764759.74</float> <float>1476198249.72</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var element = this.element, var element = this.element,
new_element = document.createElement(this.state.tag); new_element = document.createElement(this.state.tag);
new_element.textContent = this.state.text_content; new_element.textContent = this.state.text_content;
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.22958.17507.4778</string> </value> <value> <string>954.22958.59420.56644</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>1475499774.36</float> <float>1476194334.9</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var textarea = this.element.querySelector('input'); var textarea = this.element.querySelector('input');
textarea.setAttribute('value', this.state.value); textarea.setAttribute('value', this.state.value);
textarea.value = this.state.value; textarea.value = this.state.value;
...@@ -99,6 +99,6 @@ ...@@ -99,6 +99,6 @@
.onEvent('invalid', function (evt) { .onEvent('invalid', function (evt) {
// invalid event does not bubble // invalid event does not bubble
return this.notifyInvalid(evt.target.validationMessage); return this.notifyInvalid(evt.target.validationMessage);
}, true, true); }, true, false);
}(window, rJS, RSVP)); }(window, rJS, RSVP));
\ 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>954.22957.21991.6673</string> </value> <value> <string>954.34535.18115.52548</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>1475511138.87</float> <float>1476198804.5</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
return this.changeState(state_dict); return this.changeState(state_dict);
}) })
.declareMethod('updateDOM', function () { .onStateChange(function () {
var textarea = this.element.querySelector('textarea'); var textarea = this.element.querySelector('textarea');
// textarea.setAttribute('value', this.state.value); // textarea.setAttribute('value', this.state.value);
textarea.value = this.state.value; textarea.value = this.state.value;
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.27370.32393.51592</string> </value> <value> <string>954.27455.2029.68</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>1475769541.61</float> <float>1476194310.55</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