Skip to content

erp5
erp5
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 @@
<!-- custom script -->
<script src="gadget_erp5_sort_editor.js"></script>
<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>
<div class="sort_item ui-controlgroup-controls" >
<select data-iconpos="left">
{{#each option}}
{{#equal value selected_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>
<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" >
<select data-iconpos="left">
{{#each option}}
{{#equal value selected_option}}
<option selected="selected" data-i18n="{{text}}" value="{{value}}">{{text}}</option>
{{else}}
<option data-i18n="ascending" value="ascending">ascending</option>
<option selected="selected" data-i18n="descending" value="descending">descending</option>
<option value="{{value}}" data-i18n="{{text}}">{{text}}</option>
{{/equal}}
</select>
</div>
{{/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}}
<option data-i18n="ascending" value="ascending">ascending</option>
<option selected="selected" data-i18n="descending" value="descending">descending</option>
{{/equal}}
</select>
</div>
</script>
<script id="sort-template" type="text/x-handlebars-template">
<div class="ui-panel-inner">
<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-controls">
<form class="delete">
<div class="ui-controlgroup-controls">
<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>
<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>
<section class="ui-body-c ui-content-section">
<div class="sort_item_container ui-controlgroup ui-corner_all">
</div>
<form class="plus">
<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>
</section>
</div>
<section class="ui-body-c ui-content-section">
<div class="sort_item_container ui-controlgroup ui-corner_all"></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>
</section>
</div>
</script>
</head>
<body>
<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 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.34318.26924.28552</string> </value>
<value> <string>955.38127.32735.11195</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1468413387.26</float>
<float>1480342874.92</float>
<string>UTC</string>
</tuple>
</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 */
/*global window, document, rJS, RSVP, Handlebars, loopEventListener*/
(function (window, document, rJS, RSVP, Handlebars, loopEventListener) {
/*global window, document, rJS, RSVP, Handlebars*/
(function (window, document, rJS, RSVP, Handlebars) {
"use strict";
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")
.innerHTML,
sort_item_template = Handlebars.compile(sort_item_source),
sort_source = gadget_klass.__template_element
.innerHTML),
sort_template = Handlebars.compile(template_element
.getElementById("sort-template")
.innerHTML,
sort_template = Handlebars.compile(sort_source);
.innerHTML);
Handlebars.registerHelper('equal', function (left_value, right_value, options) {
if (arguments.length < 3) {
......@@ -24,17 +24,16 @@
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 || [],
option_list = [],
i;
for (i = 0; i < sort_column_list.length; i += 1) {
option_list.push({
"text": sort_column_list[i][1],
"value": sort_column_list[i][0],
"selected_option": sort_value_list[0]
text: sort_column_list[i][1],
value: sort_column_list[i][0],
selected_option: sort_value_list[0]
});
}
......@@ -44,151 +43,109 @@
}));
}
rJS(window)
/////////////////////////////////////////////////////////////////
// ready
/////////////////////////////////////////////////////////////////
// Init local properties
.ready(function (g) {
g.props = {};
})
.ready(function (g) {
return g.getElement()
.push(function (element) {
g.props.element = element;
});
})
gadget_klass
//////////////////////////////////////////////
// acquired method
//////////////////////////////////////////////
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("trigger", "trigger")
//////////////////////////////////////////////
// initialize the gadget content
//////////////////////////////////////////////
.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 () {
.onStateChange(function () {
var gadget = this,
i,
list = [];
return new RSVP.Queue()
.push(function () {
for (i = 0; i < gadget.props.sort_list.length; i += 1) {
if (gadget.props.sort_list[i]) {
list.push(createSortItemTemplate(gadget, gadget.props.sort_list[i]));
div = document.createElement("div"),
container = gadget.element.querySelector(".container");
return gadget.translateHtml(sort_template())
.push(function (translated_html) {
var 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) {
var div,
container = gadget.props.element.querySelector(".sort_item_container");
for (i = 0; i < all_result.length; i += 1) {
div = document.createElement("div");
div.innerHTML = all_result[i];
container.appendChild(div);
.push(function (result_list) {
var i,
subdiv,
filter_item_container = div.querySelector('.sort_item_container');
for (i = 0; i < result_list.length; i += 1) {
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,
container = gadget.props.element.querySelector(".sort_item_container");
return loopEventListener(
gadget.props.element.querySelector(".sort_editor"),
"submit",
false,
function () {
var focused = document.activeElement;
container.removeChild(focused.parentElement);
}
);
.declareMethod('render', function (options) {
return this.changeState({
sort_column_list: options.sort_column_list || [],
key: options.key,
sort_list: options.sort_list
});
})
.declareService(function () {
.onEvent('click', function (evt) {
var gadget = this;
return loopEventListener(
gadget.props.element.querySelector(".submit"),
"submit",
false,
function () {
var sort_list = gadget.props.element.querySelectorAll(".sort_item"),
sort_query = [],
select_list,
sort_item,
options = {},
i;
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];
}
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('close')) {
evt.preventDefault();
return this.trigger();
}
if (evt.target.classList.contains('plus')) {
evt.preventDefault();
return createSortItemTemplate(gadget)
.push(function (template) {
var tmp = document.createElement("div"),
container = gadget.element.querySelector(".sort_item_container");
tmp.innerHTML = template;
container.appendChild(tmp);
});
}
);
})
.declareService(function () {
var gadget = this;
return loopEventListener(
gadget.props.element.querySelector(".plus"),
"submit",
false,
function () {
return new RSVP.Queue()
.push(function () {
return createSortItemTemplate(gadget);
})
.push(function (template) {
var tmp = document.createElement("div"),
container = gadget.props.element.querySelector(".sort_item_container");
tmp.innerHTML = template;
container.appendChild(tmp);
});
}
);
})
.declareService(function () {
var gadget = this;
return loopEventListener(
gadget.props.element.querySelector(".delete"),
"submit",
false,
function () {
return gadget.trigger();
}
);
}
if (evt.target.classList.contains('ui-icon-minus')) {
evt.preventDefault();
evt.target.parentElement.parentElement.removeChild(evt.target.parentElement);
}
}, false, false)
.onEvent('submit', function () {
var gadget = this,
sort_list = gadget.element.querySelectorAll(".sort_item"),
sort_query = [],
select_list,
sort_item,
options = {},
i;
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];
}
if (i === 0) {
options[gadget.state.key] = undefined;
} else {
options[gadget.state.key] = sort_query;
}
return gadget.redirect({
command: 'store_and_change',
options: options
});
});
}(window, document, rJS, RSVP, Handlebars, loopEventListener));
\ No newline at end of file
}(window, document, rJS, RSVP, Handlebars));
\ 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 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.21277.40593.7202</string> </value>
<value> <string>955.38160.33114.47854</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1468403615.53</float>
<float>1480344058.06</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7