Skip to content

erp5-Boxiang
erp5-Boxiang
Commit 97140203 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] SortEditor: reduce number of event listeners

parent f87a4346
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 195 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_html.html
View file @ 97140203
...@@ -13,67 +13,57 @@ ...@@ -13,67 +13,57 @@
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_sort_editor.js"></script> <script src="gadget_erp5_sort_editor.js"></script>
<script id="sort-item-template" type="text/x-handlebars-template"> <script id="sort-item-template" type="text/x-handlebars-template">
<button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button> <button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
<div class="sort_item ui-controlgroup-controls" > <div class="sort_item ui-controlgroup-controls" >
<select data-iconpos="left"> <select data-iconpos="left">
{{#each option}} {{#each option}}
{{#equal value selected_option}} {{#equal value selected_option}}
<option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option> <option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
{{else}}
<option value="{{value}}" data-i18n="{{text}}">{{text}}</option>
{{/equal}}
{{/each}}
</select>
<select data-wrapper-class="ui-input-has-clear" data-iconpos="left">
{{#equal operator "ascending"}}
<option selected="selected" data-i18n="ascending" value="ascending">ascending</option>
<option data-i18n="descending" value="descending">descending</option>
{{else}} {{else}}
<option data-i18n="ascending" value="ascending">ascending</option> <option value="{{value}}" data-i18n="{{text}}">{{text}}</option>
<option selected="selected" data-i18n="descending" value="descending">descending</option>
{{/equal}} {{/equal}}
</select> {{/each}}
</select>
</div>
<select data-wrapper-class="ui-input-has-clear" data-iconpos="left">
{{#equal operator "ascending"}}
<option selected="selected" data-i18n="ascending" value="ascending">ascending</option>
<option data-i18n="descending" value="descending">descending</option>
{{else}}
<option data-i18n="ascending" value="ascending">ascending</option>
<option selected="selected" data-i18n="descending" value="descending">descending</option>
{{/equal}}
</select>
</div>
</script> </script>
<script id="sort-template" type="text/x-handlebars-template"> <script id="sort-template" type="text/x-handlebars-template">
<div class="ui-panel-inner"> <div class="ui-panel-inner">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit"> <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
<div class="ui-controlgroup-controls">
<button data-rel="save" data-i18n="Submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
</div>
</div>
<h1 class="ui-title" role="heading" data-i18n="Sort Editor" aria-level="1">Sort Editor</h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left"> <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
<div class="ui-controlgroup-controls"> <div class="ui-controlgroup-controls">
<form class="delete">
<button data-i18n="Close" data-rel="close" type="submit" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button> <button data-i18n="Close" data-rel="close" type="submit" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button>
</form> </div>
</div> </div>
</div>
<h1 class="ui-title" role="heading" data-i18n="Sort Editor" aria-level="1">Sort Editor</h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
<div class="ui-controlgroup-controls">
<form class="submit">
<button data-rel="save" data-i18n="Submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
</form>
</div>
</div>
</div> </div>
<section class="ui-body-c ui-content-section"> <section class="ui-body-c ui-content-section">
<div class="sort_item_container ui-controlgroup ui-corner_all"> <div class="sort_item_container ui-controlgroup ui-corner_all"></div>
</div> <button type="submit" class="plus ui-btn-c ui-override-theme ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all">Add Criteria</button>
<form class="plus"> </section>
<button type="submit" class="plus ui-btn-c ui-override-theme ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all">Add Criteria</button> </div>
</form>
</section>
</div>
</script> </script>
</head> </head>
<body> <body>
<form class="sort_editor"> <form class="sort_editor">
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_html.xml
View file @ 97140203
...@@ -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.34318.26924.28552</string> </value> <value> <string>955.38127.32735.11195</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>1468413387.26</float> <float>1480342874.92</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_js.js
View file @ 97140203
/*jslint indent: 2, maxerr: 3, nomen: true */ /*jslint indent: 2, maxerr: 3, nomen: true */
/*global window, document, rJS, RSVP, Handlebars, loopEventListener*/ /*global window, document, rJS, RSVP, Handlebars*/
(function (window, document, rJS, RSVP, Handlebars, loopEventListener) { (function (window, document, rJS, RSVP, Handlebars) {
"use strict"; "use strict";
var gadget_klass = rJS(window), var gadget_klass = rJS(window),
sort_item_source = gadget_klass.__template_element template_element = gadget_klass.__template_element,
sort_item_template = Handlebars.compile(template_element
.getElementById("sort-item-template") .getElementById("sort-item-template")
.innerHTML, .innerHTML),
sort_item_template = Handlebars.compile(sort_item_source), sort_template = Handlebars.compile(template_element
sort_source = gadget_klass.__template_element
.getElementById("sort-template") .getElementById("sort-template")
.innerHTML, .innerHTML);
sort_template = Handlebars.compile(sort_source);
Handlebars.registerHelper('equal', function (left_value, right_value, options) { Handlebars.registerHelper('equal', function (left_value, right_value, options) {
if (arguments.length < 3) { if (arguments.length < 3) {
...@@ -24,17 +24,16 @@ ...@@ -24,17 +24,16 @@
function createSortItemTemplate(gadget, sort_value) { function createSortItemTemplate(gadget, sort_value) {
var sort_column_list = gadget.props.sort_column_list, var sort_column_list = gadget.state.sort_column_list,
sort_value_list = sort_value || [], sort_value_list = sort_value || [],
option_list = [], option_list = [],
i; i;
for (i = 0; i < sort_column_list.length; i += 1) { for (i = 0; i < sort_column_list.length; i += 1) {
option_list.push({ option_list.push({
"text": sort_column_list[i][1], text: sort_column_list[i][1],
"value": sort_column_list[i][0], value: sort_column_list[i][0],
"selected_option": sort_value_list[0] selected_option: sort_value_list[0]
}); });
} }
...@@ -44,151 +43,109 @@ ...@@ -44,151 +43,109 @@
})); }));
} }
gadget_klass
rJS(window)
/////////////////////////////////////////////////////////////////
// ready
/////////////////////////////////////////////////////////////////
// Init local properties
.ready(function (g) {
g.props = {};
})
.ready(function (g) {
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
////////////////////////////////////////////// //////////////////////////////////////////////
// acquired method // acquired method
////////////////////////////////////////////// //////////////////////////////////////////////
.declareAcquiredMethod("translateHtml", "translateHtml") .declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("redirect", "redirect") .declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("trigger", "trigger") .declareAcquiredMethod("trigger", "trigger")
//////////////////////////////////////////////
// initialize the gadget content .onStateChange(function () {
//////////////////////////////////////////////
.declareMethod('render', function (options) {
var gadget = this;
gadget.props.sort_column_list = options.sort_column_list || [];
gadget.props.key = options.key;
gadget.props.sort_list = options.sort_list;
return new RSVP.Queue()
.push(function () {
var tmp = sort_template();
return gadget.translateHtml(tmp);
})
.push(function (translated_html) {
var tmp = document.createElement("div");
tmp.innerHTML = translated_html;
gadget.props.element.querySelector(".container").appendChild(tmp);
});
})
//////////////////////////////////////////////
.declareService(function () {
var gadget = this, var gadget = this,
i, div = document.createElement("div"),
list = []; container = gadget.element.querySelector(".container");
return new RSVP.Queue()
.push(function () { return gadget.translateHtml(sort_template())
for (i = 0; i < gadget.props.sort_list.length; i += 1) { .push(function (translated_html) {
if (gadget.props.sort_list[i]) { var i,
list.push(createSortItemTemplate(gadget, gadget.props.sort_list[i])); promise_list = [];
div.innerHTML = translated_html;
for (i = 0; i < gadget.state.sort_list.length; i += 1) {
if (gadget.state.sort_list[i]) {
promise_list.push(createSortItemTemplate(gadget, gadget.state.sort_list[i]));
} }
} }
return RSVP.all(list); return RSVP.all(promise_list);
}) })
.push(function (all_result) { .push(function (result_list) {
var div, var i,
container = gadget.props.element.querySelector(".sort_item_container"); subdiv,
for (i = 0; i < all_result.length; i += 1) { filter_item_container = div.querySelector('.sort_item_container');
div = document.createElement("div");
div.innerHTML = all_result[i]; for (i = 0; i < result_list.length; i += 1) {
container.appendChild(div); subdiv = document.createElement("div");
subdiv.innerHTML = result_list[i];
filter_item_container.appendChild(subdiv);
} }
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(div);
}); });
}) })
.declareService(function () {
var gadget = this, .declareMethod('render', function (options) {
container = gadget.props.element.querySelector(".sort_item_container"); return this.changeState({
return loopEventListener( sort_column_list: options.sort_column_list || [],
gadget.props.element.querySelector(".sort_editor"), key: options.key,
"submit", sort_list: options.sort_list
false, });
function () {
var focused = document.activeElement;
container.removeChild(focused.parentElement);
}
);
}) })
.declareService(function () {
.onEvent('click', function (evt) {
var gadget = this; var gadget = this;
return loopEventListener(
gadget.props.element.querySelector(".submit"), if (evt.target.classList.contains('close')) {
"submit", evt.preventDefault();
false, return this.trigger();
function () { }
var sort_list = gadget.props.element.querySelectorAll(".sort_item"),
sort_query = [], if (evt.target.classList.contains('plus')) {
select_list, evt.preventDefault();
sort_item, return createSortItemTemplate(gadget)
options = {}, .push(function (template) {
i; var tmp = document.createElement("div"),
container = gadget.element.querySelector(".sort_item_container");
for (i = 0; i < sort_list.length; i += 1) { tmp.innerHTML = template;
sort_item = sort_list[i]; container.appendChild(tmp);
select_list = sort_item.querySelectorAll("select");
sort_query[i] = [select_list[0][select_list[0].selectedIndex].value,
select_list[1][select_list[1].selectedIndex].value];
}
if (i === 0) {
options[gadget.props.key] = undefined;
} else {
options[gadget.props.key] = sort_query;
}
return gadget.redirect({
command: 'store_and_change',
options: options
}); });
} }
);
}) if (evt.target.classList.contains('ui-icon-minus')) {
.declareService(function () { evt.preventDefault();
var gadget = this; evt.target.parentElement.parentElement.removeChild(evt.target.parentElement);
return loopEventListener( }
gadget.props.element.querySelector(".plus"),
"submit", }, false, false)
false,
function () { .onEvent('submit', function () {
return new RSVP.Queue() var gadget = this,
.push(function () { sort_list = gadget.element.querySelectorAll(".sort_item"),
return createSortItemTemplate(gadget); sort_query = [],
}) select_list,
.push(function (template) { sort_item,
var tmp = document.createElement("div"), options = {},
container = gadget.props.element.querySelector(".sort_item_container"); i;
tmp.innerHTML = template;
container.appendChild(tmp); for (i = 0; i < sort_list.length; i += 1) {
}); sort_item = sort_list[i];
} select_list = sort_item.querySelectorAll("select");
); sort_query[i] = [select_list[0][select_list[0].selectedIndex].value,
}) select_list[1][select_list[1].selectedIndex].value];
.declareService(function () { }
var gadget = this; if (i === 0) {
return loopEventListener( options[gadget.state.key] = undefined;
gadget.props.element.querySelector(".delete"), } else {
"submit", options[gadget.state.key] = sort_query;
false, }
function () { return gadget.redirect({
return gadget.trigger(); command: 'store_and_change',
} options: options
); });
}); });
}(window, document, rJS, RSVP, Handlebars, loopEventListener)); }(window, document, rJS, RSVP, Handlebars));
\ No newline at end of file \ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_sorteditor_js.xml
View file @ 97140203
...@@ -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.21277.40593.7202</string> </value> <value> <string>955.38160.33114.47854</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>1468403615.53</float> <float>1480344058.06</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7