Skip to content

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