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

[erp5_web_renderjs_ui] Use onStateChange method

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