Commit 14b7cbfa authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Search: use an input gadget

parent 17995f8e
...@@ -1030,6 +1030,9 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -1030,6 +1030,9 @@ div[data-gadget-scope='header'] .ui-header ul a {
div[data-gadget-scope='erp5_searchfield'] .ui-input-text { div[data-gadget-scope='erp5_searchfield'] .ui-input-text {
display: flex; 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 { div[data-gadget-scope='erp5_searchfield'] button {
margin-left: 0.5em; margin-left: 0.5em;
padding: 0.5em; padding: 0.5em;
......
...@@ -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.17329.52209.1706</string> </value> <value> <string>954.22971.45413.40994</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>1475500541.53</float> <float>1475501272.94</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -8,20 +8,17 @@ ...@@ -8,20 +8,17 @@
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js"></script> <script src="rsvp.js"></script>
<script src="renderjs.js"></script> <script src="renderjs.js"></script>
<script src="handlebars.js"></script>
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_searchfield.js"></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> </head>
<body> <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> </body>
</html> </html>
\ No newline at end of file
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>952.1567.50811.55193</string> </value> <value> <string>954.5699.4335.63061</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>1467032063.71</float> <float>1474550671.81</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*global window, rJS, RSVP, Handlebars */ /*global window, rJS */
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint nomen: true, indent: 2, maxerr: 3 */
(function (window, rJS, RSVP, Handlebars) { (function (window, rJS) {
"use strict"; "use strict";
///////////////////////////////////////////////////////////////// rJS(window)
// 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
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// ready // declared methods
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// Init local properties .declareMethod('render', function (options) {
.ready(function (g) { var state_dict = {
g.props = {}; extended_search: options.extended_search || ""
};
return this.changeState(state_dict);
}) })
// Assign the element to a variable .declareMethod('updateDOM', function () {
.ready(function (g) { var gadget = this;
return g.getElement() return gadget.getDeclaredGadget('input')
.push(function (element) { .push(function (input_gadget) {
g.props.element = element; 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
});
}); });
}) })
////////////////////////////////////////////// .allowPublicAcquisition("notifyValid", function () {return; })
// 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;
if (is_disabled) { .declareMethod('getContent', function () {
append_class = " ui-disabled"; return this.getDeclaredGadget('input')
append_attribute = ' disabled="disabled'; .push(function (input_gadget) {
} return input_gadget.getContent();
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
}));
}) })
.push(function (my_translated_html) { .push(function (result) {
search_gadget.props.element.querySelector("div").innerHTML = if (result.search) {
my_translated_html; // XXX trim from input gadget?
return search_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)); }(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>952.57378.47936.47257</string> </value> <value> <string>954.17331.42805.29064</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>1469806120.58</float> <float>1475248801.1</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -1203,6 +1203,9 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1203,6 +1203,9 @@ div[data-gadget-scope='header'] .ui-header {
div[data-gadget-scope='erp5_searchfield'] { div[data-gadget-scope='erp5_searchfield'] {
.ui-input-text { .ui-input-text {
display: flex; display: flex;
div[data-gadget-scope='input'] {
width: 100%;
}
} }
button { button {
margin-left: 0.5em; 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