Commit fc52ac75 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Search: use an input gadget

parent 4c5fbfc9
......@@ -1030,6 +1030,9 @@ div[data-gadget-scope='header'] .ui-header ul a {
div[data-gadget-scope='erp5_searchfield'] .ui-input-text {
display: flex;
}
div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='input'] {
width: 100%;
}
div[data-gadget-scope='erp5_searchfield'] button {
margin-left: 0.5em;
padding: 0.5em;
......
......@@ -236,7 +236,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>954.17329.52209.1706</string> </value>
<value> <string>954.22971.45413.40994</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -254,7 +254,7 @@
</tuple>
<state>
<tuple>
<float>1475500541.53</float>
<float>1475501272.94</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -8,20 +8,17 @@
<!-- renderjs -->
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="handlebars.js"></script>
<!-- custom script -->
<script src="gadget_erp5_searchfield.js"></script>
<script id="panel-template" type="text/x-handlebars-template">
<div class="ui-input-text ui-body-{{theme}} ui-input-has-icon ui-corner-all ui-shadow-inset ui-input-has-clear">
<input type="search" data-enhanced="true" value="{{widget_value}}" name="search" {{widget_status_attribute}}>
<button class="search_button ui-shadow-inset ui-btn ui-btn-inline ui-corner-all ui-btn-{{theme}} ui-btn-icon-notext ui-icon-search ui-override-theme ui-input-btn" data-role="button" data-enhanced="true" type="submit" />
</div>
</script>
</head>
<body>
<div class="save_form document_form"></div>
<div class="ui-input-text ui-input-has-icon ui-corner-all ui-shadow-inset ui-input-has-clear">
<div data-gadget-url="gadget_html5_input.html"
data-gadget-scope="input"
data-gadget-sandbox="public"></div>
<button class="search_button ui-shadow-inset ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-search ui-override-theme ui-input-btn" data-role="button" data-enhanced="true" type="submit" />
</div>
</body>
</html>
\ No newline at end of file
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.1567.50811.55193</string> </value>
<value> <string>954.5699.4335.63061</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1467032063.71</float>
<float>1474550671.81</float>
<string>UTC</string>
</tuple>
</state>
......
/*global window, rJS, RSVP, Handlebars */
/*global window, rJS */
/*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, RSVP, Handlebars) {
(function (window, rJS) {
"use strict";
/////////////////////////////////////////////////////////////////
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
source = gadget_klass.__template_element
.getElementById("panel-template")
.innerHTML,
panel_template = Handlebars.compile(source);
gadget_klass
rJS(window)
/////////////////////////////////////////////////////////////////
// ready
// declared methods
/////////////////////////////////////////////////////////////////
// Init local properties
.ready(function (g) {
g.props = {};
.declareMethod('render', function (options) {
var state_dict = {
extended_search: options.extended_search || ""
};
return this.changeState(state_dict);
})
// Assign the element to a variable
.ready(function (g) {
return g.getElement()
.push(function (element) {
g.props.element = element;
.declareMethod('updateDOM', function () {
var gadget = this;
return gadget.getDeclaredGadget('input')
.push(function (input_gadget) {
var focus = false;
if (!gadget.state.extended_search) {
focus = true;
}
return input_gadget.render({
type: "search",
value: gadget.state.extended_search,
focus: focus,
name: "search",
editable: true
});
});
})
//////////////////////////////////////////////
// acquired method
//////////////////////////////////////////////
.declareAcquiredMethod("translateHtml", "translateHtml")
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod('render', function (option_dict) {
var append_class,
append_attribute,
placeholder = "",
is_disabled = option_dict.disabled,
search_gadget = this;
.allowPublicAcquisition("notifyValid", function () {return; })
if (is_disabled) {
append_class = " ui-disabled";
append_attribute = ' disabled="disabled';
}
search_gadget.props.extended_search = option_dict.extended_search;
return new RSVP.Queue()
.push(function () {
return search_gadget.translateHtml(panel_template({
widget_value: option_dict.extended_search || placeholder,
widget_theme: option_dict.theme || "c",
widget_status_attribute: append_attribute || placeholder,
widget_status_class: append_class || placeholder
}));
.declareMethod('getContent', function () {
return this.getDeclaredGadget('input')
.push(function (input_gadget) {
return input_gadget.getContent();
})
.push(function (my_translated_html) {
search_gadget.props.element.querySelector("div").innerHTML =
my_translated_html;
return search_gadget;
.push(function (result) {
if (result.search) {
// XXX trim from input gadget?
result.search = result.search.trim();
}
return result;
});
})
.declareMethod('getContent', function () {
var input = this.props.element.querySelector('input'),
value = input.value,
result = {};
if (value) {
value = value.trim();
}
result[input.getAttribute('name')] = value;
return result;
});
}(window, rJS, RSVP, Handlebars));
\ 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>952.57378.47936.47257</string> </value>
<value> <string>954.17331.42805.29064</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1469806120.58</float>
<float>1475248801.1</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -1203,6 +1203,9 @@ div[data-gadget-scope='header'] .ui-header {
div[data-gadget-scope='erp5_searchfield'] {
.ui-input-text {
display: flex;
div[data-gadget-scope='input'] {
width: 100%;
}
}
button {
margin-left: 0.5em;
......
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