Skip to content

S
slapos.core
Commit 78114c17 authored by Rafael Monnerat's avatar Rafael Monnerat
Browse files
Options

slapos_jio: Update slapos gadget header with erp5 gadget header updates 

Update the fork of slapos with ERP5 Code.
parent 9fec08b4
Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 85 deletions
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_header_html.html
View file @ 78114c17
...@@ -23,56 +23,42 @@ ...@@ -23,56 +23,42 @@
data-i18n=Previous data-i18n=Previous
data-i18n=Next data-i18n=Next
data-i18n=Loading data-i18n=Loading
data-i18n=Fast Input
data-i18n=Language
--> -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" /> <meta name="viewport" content="width=device-width" />
<title>ERP5 Header</title> <title>ERP5 Header</title>
<link rel="http://www.renderjs.org/rel/interface" href="interface_header.html">
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="gadget_global.js" type="text/javascript"></script> <script src="gadget_global.js" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="gadget_slapos_header.js" type="text/javascript"></script> <script src="gadget_slapos_header.js" type="text/javascript"></script>
<script id="header-title-link-template" type="text/x-handlebars-template"><a data-i18n="{{title}}" class="ui-btn ui-btn-icon-left ui-icon-{{icon}}" href="{{url}}" accesskey="u">{{title}}</a></script>
<script id="header-title-template" type="text/x-handlebars-template"><span data-i18n="{{title}}">{{title}}</span></script>
<script id="header-link-template" type="text/x-handlebars-template">
<a role="button" data-i18n="{{title}}" href="{{url}}" class="responsive ui-btn ui-icon-{{icon}} ui-btn-icon-left ui-first-child ui-last-child {{class}}">{{title}}</a>
</script>
<script id="header-button-template" type="text/x-handlebars-template">
<form><button name='{{name}}' data-i18n="{{title}}" type='submit' class='responsive ui-btn ui-icon-{{icon}} ui-btn-icon-left ui-first-child ui-last-child {{class}}'>{{title}}</button></form>
</script>
<script id="sub-header-template" type="text/x-handlebars-template">
{{#each sub_header_list}}
<li class="ui-block-{{block}}"><a href="{{url}}" data-i18n="{{title}}" class="ui-btn ui-btn-icon-top ui-icon-{{icon}} {{class}}">{{title}}</a></li>
{{/each}}
</script>
</head> </head>
<body> <body>
<div data-role="header" data-theme="a" class="ui-header ui-bar-a" data-position="fixed" data-tap-toggle="false"> <div data-role="header" data-theme="a" class="ui-header ui-bar-a" data-position="fixed" data-tap-toggle="false">
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left"> <div class="ui-btn-left">
<div class="ui-controlgroup-controls"> <div class="ui-controlgroup-controls">
</div> </div>
</div> </div>
<h1 class="ui-title"></h1> <h1></h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right"> <div class="ui-btn-right">
<div class="ui-controlgroup-controls"> <div class="ui-controlgroup-controls">
</div> </div>
</div> </div>
<div class="ui-navbar ui-subheader ui-grid-container ui-body-a" role="navigation"> <div class="ui-subheader">
<ul class="ui-grid-d"> <ul>
</ul> </ul>
</div> </div>
</div> </div>
......
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_header_html.xml
View file @ 78114c17
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>962.12897.5231.51353</string> </value> <value> <string>972.32024.53732.34406</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>1505834962.78</float> <float>1545648648.56</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_header_js.js
View file @ 78114c17
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS, Handlebars, document, RSVP */ /*global window, rJS, document, RSVP */
(function (window, rJS, Handlebars, document, RSVP) { (function (window, rJS, document, RSVP) {
"use strict"; "use strict";
///////////////////////////////////////////////////////////////// var possible_left_button_list = [
// Handlebars
/////////////////////////////////////////////////////////////////
// Precompile the templates while loading the first gadget instance
var gadget_klass = rJS(window),
template_element = gadget_klass.__template_element,
header_title_template = Handlebars.compile(template_element
.getElementById("header-title-template")
.innerHTML),
header_title_link_template = Handlebars.compile(template_element
.getElementById("header-title-link-template")
.innerHTML),
sub_header_template = Handlebars.compile(template_element
.getElementById("sub-header-template")
.innerHTML),
header_button_template = Handlebars.compile(template_element
.getElementById("header-button-template")
.innerHTML),
header_link_template = Handlebars.compile(template_element
.getElementById("header-link-template")
.innerHTML),
possible_left_button_list = [
['panel_action', 'Menu', 'bars', 'panel'] ['panel_action', 'Menu', 'bars', 'panel']
], ],
possible_main_link_list = [ possible_main_link_list = [
...@@ -39,7 +16,8 @@ ...@@ -39,7 +16,8 @@
possible_right_link_list = [ possible_right_link_list = [
['edit_url', 'Editable', 'pencil'], ['edit_url', 'Editable', 'pencil'],
['view_url', 'Viewable', 'eye'], ['view_url', 'Viewable', 'eye'],
['right_url', 'New', 'plus'] ['right_url', 'New', 'plus'],
['language_url', 'Language', 'flag']
], ],
possible_right_button_list = [ possible_right_button_list = [
['save_action', 'Save', 'check', 'submit'], ['save_action', 'Save', 'check', 'submit'],
...@@ -50,15 +28,16 @@ ...@@ -50,15 +28,16 @@
possible_sub_header_list = [ possible_sub_header_list = [
['tab_url', 'Views', 'eye'], ['tab_url', 'Views', 'eye'],
['jump_url', 'Jump', 'plane'], ['jump_url', 'Jump', 'plane'],
['delete_url', 'Delete', 'times'],
['export_url', 'Export', 'share-square-o'],
['actions_url', 'Actions', 'cogs'], ['actions_url', 'Actions', 'cogs'],
['cut_url', 'Cut', 'scissors'],
['add_url', 'Add', 'plus'], ['add_url', 'Add', 'plus'],
['export_url', 'Export', 'share-square-o'],
['delete_url', 'Delete', 'times'],
['cut_url', 'Cut', 'scissors'],
['fast_input_url', 'Fast Input', 'magic'],
['previous_url', 'Previous', 'carat-l'], ['previous_url', 'Previous', 'carat-l'],
['next_url', 'Next', 'carat-r'], ['next_url', 'Next', 'carat-r'],
['edit_content', 'Content', 'file-text'], ['upload_url', 'Upload', 'upload'],
['edit_properties', 'Properties', 'info'], ['download_url', 'Download', 'download'],
// Include SlapOS specific items // Include SlapOS specific items
['ticket_url', 'Add Ticket', 'ticket'], ['ticket_url', 'Add Ticket', 'ticket'],
['token_url', 'Token', 'key'], ['token_url', 'Token', 'key'],
...@@ -73,9 +52,40 @@ ...@@ -73,9 +52,40 @@
['transfer_url', 'Transfer', 'exchange'], ['transfer_url', 'Transfer', 'exchange'],
['accept_url', 'Accept', 'check-circle'], ['accept_url', 'Accept', 'check-circle'],
['reject_url', 'Reject', 'ban'] ['reject_url', 'Reject', 'ban']
]; ],
header_button_template = function (data) {
// <form><button name='{{name}}' data-i18n="{{title}}" type='submit' class='ui-icon-{{icon}} ui-btn-icon-left {{class}}'>{{title}}</button></form>
var form_element = document.createElement('form'),
button_element = document.createElement('button');
button_element.setAttribute('name', data.name);
button_element.setAttribute('data-i18n', data.title);
button_element.setAttribute('type', 'submit');
button_element.setAttribute('class', 'ui-icon-' + data.icon + ' ui-btn-icon-left ' + data.class);
form_element.appendChild(button_element);
return form_element.outerHTML;
},
sub_header_template = function (data) {
// {{#each sub_header_list}}
// <li><a href="{{url}}" data-i18n="{{title}}" class="ui-btn-icon-top ui-icon-{{icon}} {{class}}">{{title}}</a></li>
// {{/each}}
var fragment = document.createElement('div'),
li_element,
a_element,
i;
for (i = 0; i < data.sub_header_list.length; i += 1) {
li_element = document.createElement('li');
a_element = document.createElement('a');
a_element.setAttribute('href', data.sub_header_list[i].url);
a_element.setAttribute('data-i18n', data.sub_header_list[i].title);
a_element.setAttribute('class', 'ui-btn-icon-top ui-icon-' + data.sub_header_list[i].icon + ' ' + data.sub_header_list[i].class);
li_element.appendChild(a_element);
fragment.appendChild(li_element);
}
return fragment.innerHTML;
};
gadget_klass rJS(window)
.setState({ .setState({
loaded: false, loaded: false,
modified: false, modified: false,
...@@ -89,7 +99,7 @@ ...@@ -89,7 +99,7 @@
// ready // ready
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// Init local properties // Init local properties
.ready(function () { .ready(function ready() {
this.props = { this.props = {
element_list: [ element_list: [
this.element.querySelector("h1"), this.element.querySelector("h1"),
...@@ -106,50 +116,57 @@ ...@@ -106,50 +116,57 @@
.declareAcquiredMethod("translateHtml", "translateHtml") .declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("triggerSubmit", "triggerSubmit") .declareAcquiredMethod("triggerSubmit", "triggerSubmit")
.declareAcquiredMethod("triggerPanel", "triggerPanel") .declareAcquiredMethod("triggerPanel", "triggerPanel")
.declareAcquiredMethod("triggerMaximize", "triggerMaximize")
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// declared methods // declared methods
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
.declareMethod('notifyLoaded', function () { .declareMethod('notifyLoaded', function notifyLoaded() {
return this.changeState({ return this.changeState({
loaded: true loaded: true
}); });
}) })
.declareMethod('notifyLoading', function () { .declareMethod('notifyLoading', function notifyLoading() {
return this.changeState({ return this.changeState({
loaded: false loaded: false
}); });
}) })
.declareMethod('notifySubmitted', function () { .declareMethod('notifySubmitted', function notifySubmitted() {
return this.changeState({ return this.changeState({
submitted: true, submitted: true,
// Change modify here, to allow user to redo some modification and being correctly notified // Change modify here, to allow user to redo some modification and being correctly notified
modified: false modified: false
}); });
}) })
.declareMethod('notifySubmitting', function () { .declareMethod('notifySubmitting', function notifySubmitting() {
return this.changeState({ return this.changeState({
submitted: false submitted: false
}); });
}) })
.declareMethod('notifyError', function () { .declareMethod('notifyError', function notifyError() {
return this.changeState({ return this.changeState({
loaded: true, loaded: true,
submitted: true, submitted: true,
error: true error: true
}); });
}) })
.declareMethod('notifyChange', function () { .declareMethod('notifyChange', function notifyChange() {
return this.changeState({ return this.changeState({
modified: true modified: true
}); });
}) })
.declareMethod('setButtonTitle', function setButtonTitle(options) {
return this.changeState({
title_button_icon: options.icon,
title_button_name: options.action
});
})
/* /*
.declareMethod('notifyUpdate', function () { .declareMethod('notifyUpdate', function () {
return this.render(this.stats.options); return this.render(this.stats.options);
}) })
*/ */
.declareMethod('render', function (options) { .declareMethod('render', function render(options) {
var state = { var state = {
error: false, error: false,
title_text: '', title_text: '',
...@@ -174,15 +191,16 @@ ...@@ -174,15 +191,16 @@
if (options.hasOwnProperty("page_title")) { if (options.hasOwnProperty("page_title")) {
state.title_text = options.page_title; state.title_text = options.page_title;
} }
if (options.hasOwnProperty("page_icon")) {
state.title_icon = options.page_icon;
}
for (i = 0; i < possible_main_link_list.length; i += 1) { for (i = 0; i < possible_main_link_list.length; i += 1) {
if (options.hasOwnProperty(possible_main_link_list[i][0])) { if (options.hasOwnProperty(possible_main_link_list[i][0])) {
state.title_icon = possible_main_link_list[i][2]; state.title_icon = possible_main_link_list[i][2];
state.title_url = options[possible_main_link_list[i][0]]; state.title_url = options[possible_main_link_list[i][0]];
} }
} }
// Surcharge icon if the page want it
if (options.hasOwnProperty("page_icon")) {
state.title_icon = options.page_icon;
}
// 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) {
...@@ -196,9 +214,14 @@ ...@@ -196,9 +214,14 @@
// 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])) {
if (options.extra_class &&
options.extra_class.hasOwnProperty(possible_right_link_list[i][0])) {
klass = options.extra_class[possible_right_link_list[i][0]];
} else {
klass = ""; klass = "";
}
if (!options[possible_right_link_list[i][0]]) { if (!options[possible_right_link_list[i][0]]) {
klass = "ui-disabled"; klass += " ui-disabled";
} }
state.right_link_title = possible_right_link_list[i][1]; state.right_link_title = possible_right_link_list[i][1];
state.right_link_icon = possible_right_link_list[i][2]; state.right_link_icon = possible_right_link_list[i][2];
...@@ -234,21 +257,24 @@ ...@@ -234,21 +257,24 @@
return this.changeState(state); return this.changeState(state);
}) })
.onStateChange(function (modification_dict) { .onStateChange(function onStateChange(modification_dict) {
var gadget = this, var gadget = this,
right_link, right_link,
right_button, right_button,
default_title_icon = "", default_title_icon = "",
default_right_icon = "", default_right_icon = "",
title_link, title_link,
promise_list = []; title_button,
promise_list = [],
tmp_element;
// Main title // Main title
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('title_text') ||
modification_dict.hasOwnProperty('title_icon') || modification_dict.hasOwnProperty('title_icon') ||
modification_dict.hasOwnProperty('title_url')) { modification_dict.hasOwnProperty('title_url') ||
modification_dict.hasOwnProperty('title_button_name')) {
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) {
...@@ -257,16 +283,36 @@ ...@@ -257,16 +283,36 @@
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
if (modification_dict.hasOwnProperty('title_text')) {
// Be careful, this is CPU costly
document.title = gadget.state.title_text; document.title = gadget.state.title_text;
}
title_link = { title_link = {
title: gadget.state.title_text, title: gadget.state.title_text,
icon: default_title_icon || gadget.state.title_icon, icon: default_title_icon || gadget.state.title_icon,
url: gadget.state.title_url url: gadget.state.title_url
}; };
if (title_link.url === undefined) { if (gadget.state.title_button_name) {
promise_list.push(gadget.translateHtml(header_title_template(title_link))); title_button = {
title: gadget.state.title_text,
icon: default_title_icon || gadget.state.title_button_icon,
name: gadget.state.title_button_name
};
promise_list.push(gadget.translateHtml(header_button_template(title_button)));
} else if (title_link.url === undefined) {
// <span data-i18n="{{title}}" class="ui-btn-icon-left ui-icon-{{icon}}" >{{title}}</span>
tmp_element = document.createElement('span');
tmp_element.setAttribute('data-i18n', title_link.title);
tmp_element.setAttribute('class', 'ui-btn-icon-left ui-icon-' + title_link.icon);
promise_list.push(gadget.translateHtml(tmp_element.outerHTML));
} else { } else {
promise_list.push(gadget.translateHtml(header_title_link_template(title_link))); // <a data-i18n="{{title}}" class="ui-btn-icon-left ui-icon-{{icon}}" href="{{url}}" accesskey="u">{{title}}</a>
tmp_element = document.createElement('a');
tmp_element.setAttribute('data-i18n', title_link.title);
tmp_element.setAttribute('class', 'ui-btn-icon-left ui-icon-' + title_link.icon);
tmp_element.setAttribute('href', title_link.url);
tmp_element.setAttribute('accesskey', 'u');
promise_list.push(gadget.translateHtml(tmp_element.outerHTML));
} }
} else { } else {
promise_list.push(null); promise_list.push(null);
...@@ -324,7 +370,12 @@ ...@@ -324,7 +370,12 @@
if (right_button !== undefined) { if (right_button !== undefined) {
promise_list.push(gadget.translateHtml(header_button_template(right_button))); promise_list.push(gadget.translateHtml(header_button_template(right_button)));
} else if (right_link !== undefined) { } else if (right_link !== undefined) {
promise_list.push(gadget.translateHtml(header_link_template(right_link))); // <a data-i18n="{{title}}" href="{{url}}" class="ui-icon-{{icon}} ui-btn-icon-left {{class}}">{{title}}</a>
tmp_element = document.createElement('a');
tmp_element.setAttribute('data-i18n', right_link.title);
tmp_element.setAttribute('class', 'ui-icon-' + right_link.icon + ' ui-btn-icon-left ' + right_link.class);
tmp_element.setAttribute('href', right_link.url);
promise_list.push(gadget.translateHtml(tmp_element.outerHTML));
} else { } else {
promise_list.push(""); promise_list.push("");
} }
...@@ -358,7 +409,7 @@ ...@@ -358,7 +409,7 @@
////////////////////////////////////////////// //////////////////////////////////////////////
// handle button submit // handle button submit
////////////////////////////////////////////// //////////////////////////////////////////////
.onEvent('submit', function (evt) { .onEvent('submit', function submit(evt) {
var name = evt.target[0].getAttribute("name"); var name = evt.target[0].getAttribute("name");
if (name === "panel") { if (name === "panel") {
return this.triggerPanel(); return this.triggerPanel();
...@@ -366,7 +417,10 @@ ...@@ -366,7 +417,10 @@
if (name === "submit") { if (name === "submit") {
return this.triggerSubmit(); return this.triggerSubmit();
} }
if (name === "maximize") {
return this.triggerMaximize();
}
throw new Error("Unsupported button " + name); throw new Error("Unsupported button " + name);
}); });
}(window, rJS, Handlebars, document, RSVP)); }(window, rJS, document, RSVP));
\ No newline at end of file \ No newline at end of file
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_slapos_header_js.xml
View file @ 78114c17
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>969.11849.26888.59392</string> </value> <value> <string>972.32024.53732.34406</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>1533047690.52</float> <float>1545649159.32</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