Commit 9f3496c4 authored by Roque Porchetto's avatar Roque Porchetto

Custom header without previous and next buttons.

parent 1a9ece02
......@@ -155,7 +155,9 @@
'gadget_html5_element.html',
'gadget_html5_element.js',
'fif_gadget_erp5_panel.html',
'fif_gadget_erp5_panel.js'
'fif_gadget_erp5_panel.js',
'fif_gadget_erp5_header.html',
'fif_gadget_erp5_header.js'
];
self.addEventListener('install', function (event) {
......
<!DOCTYPE html>
<html>
<head>
<!--
data-i18n=Front
data-i18n=Previous
data-i18n=Cancel
data-i18n=Back
data-i18n=Editable
data-i18n=Viewable
data-i18n=New
data-i18n=Save
data-i18n=Proceed
data-i18n=Add
data-i18n=Filter
data-i18n=Views
data-i18n=Jump
data-i18n=Delete
data-i18n=Export
data-i18n=Actions
data-i18n=Cut
data-i18n=Add
data-i18n=Previous
data-i18n=Next
data-i18n=Loading
-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>FIF Header</title>
<!-- renderjs -->
<script src="rsvp.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>
<!-- custom script -->
<script src="fif_gadget_erp5_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>
<body>
<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-controlgroup-controls">
</div>
</div>
<h1 class="ui-title"></h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
<div class="ui-controlgroup-controls">
</div>
</div>
<!--
<div class="ui-navbar ui-subheader ui-grid-container ui-body-a" role="navigation">
<ul class="ui-grid-d">
</ul>
</div>
-->
</div>
</body>
</html>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Page" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>fif_gadget_erp5_header.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>fif_gadget_erp5_header_html</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Page</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>FIF Gadget ERP5 Header</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
/*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, rJS, Handlebars, document, RSVP */
(function (window, rJS, Handlebars, document, RSVP) {
"use strict";
/////////////////////////////////////////////////////////////////
// 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']
],
possible_main_link_list = [
// ['menu_url', 'Menu', 'bars'],
['front_url', 'Front', 'arrow-up'],
['selection_url', 'Previous', 'arrow-up'],
['cancel_url', 'Cancel', 'times'],
['back_url', 'Back', 'times']
],
possible_right_link_list = [
['edit_url', 'Editable', 'pencil'],
['view_url', 'Viewable', 'eye'],
['right_url', 'New', 'plus']
],
possible_right_button_list = [
['save_action', 'Save', 'check', 'submit'],
['submit_action', 'Proceed', 'check', 'submit'],
['add_action', 'Add', 'check', 'submit'],
['filter_action', 'Filter', 'filter', 'submit']
],
possible_sub_header_list = [
['tab_url', 'Views', 'eye'],
['jump_url', 'Jump', 'plane'],
['delete_url', 'Delete', 'times'],
['export_url', 'Export', 'share-square-o'],
['actions_url', 'Actions', 'cogs'],
['cut_url', 'Cut', 'scissors'],
['add_url', 'Add', 'plus'],
['previous_url', 'Previous', 'carat-l'],
['next_url', 'Next', 'carat-r']
];
gadget_klass
.setState({
loaded: false,
modified: false,
submitted: true,
error: false,
title_text: '',
title_icon: undefined,
title_url: undefined
})
/////////////////////////////////////////////////////////////////
// ready
/////////////////////////////////////////////////////////////////
// Init local properties
.ready(function () {
this.props = {
element_list: [
this.element.querySelector("h1"),
this.element.querySelector(".ui-btn-left > div"),
this.element.querySelector(".ui-btn-right > div")
//this.element.querySelector(".ui-subheader").querySelector("ul")
]
};
})
//////////////////////////////////////////////
// acquired methods
//////////////////////////////////////////////
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("triggerSubmit", "triggerSubmit")
.declareAcquiredMethod("triggerPanel", "triggerPanel")
/////////////////////////////////////////////////////////////////
// declared methods
/////////////////////////////////////////////////////////////////
.declareMethod('notifyLoaded', function () {
return this.changeState({
loaded: true
});
})
.declareMethod('notifyLoading', function () {
return this.changeState({
loaded: false
});
})
.declareMethod('notifySubmitted', function () {
return this.changeState({
submitted: true,
// Change modify here, to allow user to redo some modification and being correctly notified
modified: false
});
})
.declareMethod('notifySubmitting', function () {
return this.changeState({
submitted: false
});
})
.declareMethod('notifyError', function () {
return this.changeState({
loaded: true,
submitted: true,
error: true
});
})
.declareMethod('notifyChange', function () {
return this.changeState({
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
},
klass,
sub_header_list = [],
i;
// Main title
if (options.hasOwnProperty("page_title")) {
state.title_text = options.page_title;
}
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]];
}
}
// 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];
}
}
// Handle right link
for (i = 0; i < possible_right_link_list.length; i += 1) {
if (options.hasOwnProperty(possible_right_link_list[i][0])) {
klass = "";
if (!options[possible_right_link_list[i][0]]) {
klass = "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;
}
}
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];
}
}
// Sub header
/*for (i = 0; i < possible_sub_header_list.length; i += 1) {
if (options.hasOwnProperty(possible_sub_header_list[i][0])) {
klass = "";
if (!options[possible_sub_header_list[i][0]]) {
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
});
}
}
state.sub_header_list = sub_header_list;
*/
return this.changeState(state);
})
.onStateChange(function (modification_dict) {
var gadget = this,
right_link,
right_button,
default_right_icon = "",
title_link,
promise_list = [];
// Main title
if (modification_dict.hasOwnProperty('title_text') ||
modification_dict.hasOwnProperty('title_icon') ||
modification_dict.hasOwnProperty('title_url')) {
// 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: gadget.state.title_icon,
url: gadget.state.title_url
};
if (title_link.url === undefined) {
promise_list.push(gadget.translateHtml(header_title_template(title_link)));
} else {
promise_list.push(gadget.translateHtml(header_title_link_template(title_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) {
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
})));
}
} else {
promise_list.push(null);
}
// Handle right link
if (modification_dict.hasOwnProperty('error') ||
modification_dict.hasOwnProperty('loaded') ||
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('submitted')) {
if (gadget.state.error) {
default_right_icon = "exclamation";
} else if (!gadget.state.loaded) {
default_right_icon = "spinner";
// Show default loading information
right_link = {
title: "Loading",
icon: default_right_icon,
url: "",
class: "ui-disabled ui-icon-spin"
};
} else if (!gadget.state.submitted) {
default_right_icon = "spinner";
} else if (gadget.state.modified) {
default_right_icon = "warning";
}
if (gadget.state.right_link_title !== undefined) {
right_link = {
title: gadget.state.right_link_title,
icon: default_right_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) {
right_button.class = "ui-disabled";
}
}
if (right_button !== undefined) {
if (right_button.icon === 'spinner') {
right_button.class = "ui-disabled ui-icon-spin";
}
promise_list.push(gadget.translateHtml(header_button_template(right_button)));
} else if (right_link !== undefined) {
if (right_link.icon === 'spinner') {
right_link.class = "ui-disabled ui-icon-spin";
}
promise_list.push(gadget.translateHtml(header_link_template(right_link)));
} else {
promise_list.push("");
}
} else {
promise_list.push(null);
}
// Handle sub header
/*if (modification_dict.hasOwnProperty('sub_header_list')) {
promise_list.push(gadget.translateHtml(sub_header_template({
sub_header_list: gadget.state.sub_header_list
})));
} else {
promise_list.push(null);
}*/
return new RSVP.Queue()
.push(function () {
return RSVP.all(promise_list);
})
.push(function (result_list) {
var j;
for (j = 0; j < result_list.length; j += 1) {
if (result_list[j] !== null) {
gadget.props.element_list[j].innerHTML = result_list[j];
}
}
});
})
//////////////////////////////////////////////
// handle button submit
//////////////////////////////////////////////
.onEvent('submit', function (evt) {
var name = evt.target[0].getAttribute("name");
if (name === "panel") {
return this.triggerPanel();
}
if (name === "submit") {
return this.triggerSubmit();
}
throw new Error("Unsupported button " + name);
});
}(window, rJS, Handlebars, document, RSVP));
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Web Script" module="erp5.portal_type"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_Access_contents_information_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Add_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Change_local_roles_Permission</string> </key>
<value>
<tuple>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_Modify_portal_content_Permission</string> </key>
<value>
<tuple>
<string>Assignee</string>
<string>Assignor</string>
<string>Manager</string>
</tuple>
</value>
</item>
<item>
<key> <string>_View_Permission</string> </key>
<value>
<tuple>
<string>Anonymous</string>
<string>Assignee</string>
<string>Assignor</string>
<string>Associate</string>
<string>Auditor</string>
<string>Manager</string>
<string>Owner</string>
</tuple>
</value>
</item>
<item>
<key> <string>content_md5</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>fif_gadget_erp5_header.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>fif_gadget_erp5_header_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
<value> <string>en</string> </value>
</item>
<item>
<key> <string>portal_type</string> </key>
<value> <string>Web Script</string> </value>
</item>
<item>
<key> <string>short_title</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>FIF Gadget ERP5 Header JS</string> </value>
</item>
<item>
<key> <string>version</string> </key>
<value> <string>001</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
......@@ -19,6 +19,7 @@
data-gadget-scope="form_view"
data-gadget-sandbox="public">
</div>
<div style="margin-top: 40px;"> </div>
<div>
IT'S SUPPOSSED TO SHOW THE JSON META DATA HERE
</div>
......
......@@ -16,8 +16,6 @@
// declared methods
/////////////////////////////////////////////////////////////////
.allowPublicAcquisition('updateHeader', function (argument_list) {
console.log("header arguments:");
console.log(argument_list);
var header_dict = {
page_title: "File : " + this.state.document_title,
selection_url: argument_list[0].selection_url,
......
......@@ -343,9 +343,7 @@
</item>
<item>
<key> <string>configuration_header_gadget_url</string> </key>
<value>
<none/>
</value>
<value> <string>fif_gadget_erp5_header.html</string> </value>
</item>
<item>
<key> <string>configuration_jio_gadget_url</string> </key>
......@@ -602,7 +600,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>958.64691.44760.18824</string> </value>
<value> <string>958.64694.25501.22562</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -620,7 +618,7 @@
</tuple>
<state>
<tuple>
<float>1493386943.29</float>
<float>1493827958.29</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