Skip to content

erp5
erp5
Commit 1f812acb authored by Tomáš Peterka's avatar Tomáš Peterka
Browse files
Options

[renderjs_ui] Refactor Header gadget 

-  does not rely on undefined (because of possible change renderjs!10)
-  added comments
-  simplified logic and refactoring for obviousness
parent f76fb28f
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 106 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_header_js.js
View file @ 1f812acb
......@@ -67,9 +67,13 @@
modified: false,
submitted: true,
error: false,
title_text: '',
title_icon: undefined,
title_url: undefined
// links compose from "text", "icon", "url" and optionally "class"
// buttons compose from "title", "icon", "name"
main_link: {},
left_button: {},
// right button and right link are exclusive!
right_button: {},
right_link: {}
})
/////////////////////////////////////////////////////////////////
// ready
......@@ -130,73 +134,73 @@
modified: true
});
})
/*
.declareMethod('notifyUpdate', function () {
return this.render(this.stats.options);
})
*/
.declareMethod('render', function (options) {
var state = {
error: false,
title_text: '',
title_icon: undefined,
title_url: undefined,
left_button_title: undefined,
left_button_icon: undefined,
left_button_name: undefined,
right_link_title: undefined,
right_link_icon: undefined,
right_link_url: undefined,
right_link_class: undefined,
right_button_title: undefined,
right_button_icon: undefined,
right_button_name: undefined
var gadget = this,
state = {
"error": options.error || false
},
klass,
sub_header_list = [],
i;
// Main title
if (options.hasOwnProperty("page_title")) {
state.title_text = options.page_title;
}
if (options.hasOwnProperty("page_icon")) {
state.title_icon = options.page_icon;
// if a new page title is specified then we are displaying different
// view so we force-reload all menu buttons
state.main_link = {};
state.right_link = {};
state.right_button = {};
state.left_button = {};
}
// Main title
if (options.hasOwnProperty("page_title") || options.hasOwnProperty("page_icon")) {
state.main_link = {
"title": options.page_title || gadget.state.main_link.title,
"icon": options.page_icon || gadget.state.main_link.icon,
"url": ''
};
for (i = 0; i < possible_main_link_list.length; i += 1) {
if (options.hasOwnProperty(possible_main_link_list[i][0])) {
state.title_icon = possible_main_link_list[i][2];
state.title_url = options[possible_main_link_list[i][0]];
state.main_link.icon = possible_main_link_list[i][2];
state.main_link.url = options[possible_main_link_list[i][0]];
}
}
}
// Left button
for (i = 0; i < possible_left_button_list.length; i += 1) {
if (options.hasOwnProperty(possible_left_button_list[i][0])) {
state.left_button_title = possible_left_button_list[i][1];
state.left_button_icon = possible_left_button_list[i][2];
state.left_button_name = possible_left_button_list[i][3];
state.left_button = {
"title": possible_left_button_list[i][1],
"icon": possible_left_button_list[i][2],
"name": possible_left_button_list[i][3]
};
}
}
// Handle right link
for (i = 0; i < possible_right_link_list.length; i += 1) {
if (options.hasOwnProperty(possible_right_link_list[i][0])) {
klass = "";
state.right_link = {
"title": possible_right_link_list[i][1],
"icon": possible_right_link_list[i][2],
"url": options[possible_right_link_list[i][0]],
"class": ""
};
if (!options[possible_right_link_list[i][0]]) {
klass = "ui-disabled";
state.right_link["class"] = "ui-disabled";
}
state.right_link_title = possible_right_link_list[i][1];
state.right_link_icon = possible_right_link_list[i][2];
state.right_link_url = options[possible_right_link_list[i][0]];
state.right_link_class = klass;
state.right_button = {}; // because right link and button are exclusive
}
}
for (i = 0; i < possible_right_button_list.length; i += 1) {
if (options.hasOwnProperty(possible_right_button_list[i][0])) {
state.right_button_title = possible_right_button_list[i][1];
state.right_button_icon = possible_right_button_list[i][2];
state.right_button_name = possible_right_button_list[i][3];
state.right_button = {
"title": possible_right_button_list[i][1],
"icon": possible_right_button_list[i][2],
"name": possible_right_button_list[i][3]
};
state.right_link = {}; // because right link and button are exclusive
}
}
......@@ -208,10 +212,10 @@
klass = "ui-disabled";
}
sub_header_list.push({
title: possible_sub_header_list[i][1],
icon: possible_sub_header_list[i][2],
url: options[possible_sub_header_list[i][0]],
class: klass
"title": possible_sub_header_list[i][1],
"icon": possible_sub_header_list[i][2],
"url": options[possible_sub_header_list[i][0]],
"class": klass
});
}
}
......@@ -222,19 +226,16 @@
.onStateChange(function (modification_dict) {
var gadget = this,
right_link,
right_button,
default_title_icon = "",
default_right_icon = "",
title_link,
main_link,
promise_list = [];
// Main title
// insert "title" HTML text promise into promise_list[0]
if (modification_dict.hasOwnProperty('error') ||
modification_dict.hasOwnProperty('loaded') ||
modification_dict.hasOwnProperty('submitted') ||
modification_dict.hasOwnProperty('title_text') ||
modification_dict.hasOwnProperty('title_icon') ||
modification_dict.hasOwnProperty('title_url')) {
modification_dict.hasOwnProperty('main_link')) {
if (gadget.state.error) {
default_title_icon = "exclamation";
} else if (!gadget.state.loaded) {
......@@ -243,74 +244,59 @@
default_title_icon = "spinner";
}
// Updating globally the page title. Does not follow RenderJS philosophy, but, it is enough for now
document.title = gadget.state.title_text;
title_link = {
title: gadget.state.title_text,
icon: default_title_icon || gadget.state.title_icon,
url: gadget.state.title_url
document.title = gadget.state.main_link.title;
// Update icon in case an action in process (keep the original in state.title_icon)
main_link = {
"title": gadget.state.main_link.title,
"icon": default_title_icon || gadget.state.main_link.icon,
"url": gadget.state.main_link.url
};
if (title_link.url === undefined) {
promise_list.push(gadget.translateHtml(header_title_template(title_link)));
if (main_link.url) {
promise_list.push(gadget.translateHtml(header_title_link_template(main_link)));
} else {
promise_list.push(gadget.translateHtml(header_title_link_template(title_link)));
promise_list.push(gadget.translateHtml(header_title_template(main_link)));
}
} else {
promise_list.push(null);
}
// Left button
if (modification_dict.hasOwnProperty('left_button_title') ||
modification_dict.hasOwnProperty('left_button_icon') ||
modification_dict.hasOwnProperty('left_button_name')) {
if (gadget.state.left_button_title === undefined) {
// insert "left button" HTML text promise into promise_list[1]
if (modification_dict.hasOwnProperty('left_button')) {
if (gadget.state.left_button.title === undefined) {
promise_list.push("");
} else {
promise_list.push(gadget.translateHtml(header_button_template({
title: gadget.state.left_button_title,
icon: gadget.state.left_button_icon,
name: gadget.state.left_button_name
})));
promise_list.push(
gadget.translateHtml(
header_button_template(gadget.state.left_button)
)
);
}
} else {
promise_list.push(null);
}
// Handle right link
// insert "left link" HTML text promise into promise_list[2]
if (modification_dict.hasOwnProperty('loaded') ||
modification_dict.hasOwnProperty('submitted') ||
modification_dict.hasOwnProperty('modified') ||
modification_dict.hasOwnProperty('right_link_title') ||
modification_dict.hasOwnProperty('right_link_icon') ||
modification_dict.hasOwnProperty('right_link_url') ||
modification_dict.hasOwnProperty('right_link_class') ||
modification_dict.hasOwnProperty('right_button_title') ||
modification_dict.hasOwnProperty('right_button_icon')) {
modification_dict.hasOwnProperty('right_link') ||
modification_dict.hasOwnProperty('right_button')) {
// find the right right icon
if (gadget.state.modified) {
default_right_icon = "warning";
} else if (gadget.state.error || !gadget.state.loaded || !gadget.state.submitted) {
default_right_icon = "ui-disabled";
}
if (gadget.state.right_link_title !== undefined) {
right_link = {
title: gadget.state.right_link_title,
icon: gadget.state.right_link_icon,
url: gadget.state.right_link_url,
class: gadget.state.right_link_class
};
}
if (gadget.state.right_button_title !== undefined) {
right_button = {
title: gadget.state.right_button_title,
icon: default_right_icon || gadget.state.right_button_icon,
name: gadget.state.right_button_name
};
if (gadget.state.error || !gadget.state.loaded || !gadget.state.submitted) {
right_button.class = "ui-disabled";
}
}
if (right_button !== undefined) {
promise_list.push(gadget.translateHtml(header_button_template(right_button)));
} else if (right_link !== undefined) {
promise_list.push(gadget.translateHtml(header_link_template(right_link)));
// render the right right thing
if (gadget.state.right_button.title) {
promise_list.push(gadget.translateHtml(header_button_template({
"title": gadget.state.right_button.title,
"icon": default_right_icon || gadget.state.right_button.icon,
"name": gadget.state.right_button.name
})));
} else if (gadget.state.right_link.title) {
promise_list.push(gadget.translateHtml(header_link_template(gadget.state.right_link)));
} else {
promise_list.push("");
}
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_header_js.xml
View file @ 1f812acb
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.19028.47293.9045</string> </value>
<value> <string>961.62417.49864.24661</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1502270945.98</float>
<float>1504876524.45</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