Skip to content

erp5
erp5
Commit 44dfebe5 authored by Tomáš Peterka's avatar Tomáš Peterka
Browse files
Options

[erp5_web_renderjs_ui] Add noheader - an alternative header of RenderJS applications

parent a98c1060
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1258 additions and 0 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_noheader_css.css 0 → 100644
View file @ 44dfebe5
/*
Custom button to trigger panel instead of the one in header
*/
div[data-gadget-scope='header'] .ui-noheader > div {
position: absolute;
top: 15pt;
left: 15pt;
z-index: 2000;
}
div[data-gadget-scope='header'] .ui-noheader .ui-fixed {
position: fixed;
top: 0;
left: 0;
}
div[data-gadget-scope='header'] .ui-noheader button,
div[data-gadget-scope='header'] .ui-noheader a {
color: white;
background-color: rgba(32, 32, 32, 0.32);
font-size: 2em;
display: block;
padding: 0.2em 0.5em;
}
div[data-gadget-scope='header'] .ui-noheader > .ui-fixed button,
div[data-gadget-scope='header'] .ui-noheader > .ui-fixed a {
/* make it smaller */
font-size: 1.7em;
padding: 0.1em 0.4em;
}
/*
Compensate default panel behaviour - do not show panel on wide screen
*/
@media only screen and (min-width: 90em) {
div[data-gadget-scope='panel'] {
/* keep the panel hidden even if there is wnough space */
left: -186pt;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
}
div[data-gadget-scope='panel'].visible {
/* Allow to appear again */
transform: translate3d(186pt, 0, 0);
}
}
@media only screen and (min-width: 90em) {
div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"],
div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: initial;
}
}
@media only screen and (min-width: 90em) {
div[data-gadget-scope='header'] .ui-header {
margin-left: 0;
}
.gadget-content {
margin-left: 0;
}
}
/*
Compensate default editor behaviour
*/
@media only screen and (min-width: 90em) {
div[data-gadget-scope='editor_panel'] {
right: -186pt; /* Keep it hidden right even there is enough space*/
}
}
/*
Compensate gadget-content
*/
@media only screen and (max-width: 90em) {
.gadget-content {
padding-top: 66pt;
}
}
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_noheader_html.html 0 → 100644
View file @ 44dfebe5
<!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>ERP5 No-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="gadget_erp5_noheader.js" type="text/javascript"></script>
<!-- custom css -->
<link href="gadget_erp5_noheader.css" rel="stylesheet">
<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}}'></button></form>
</script>
</head>
<body>
<div data-role="header" data-theme="a" class="ui-noheader ui-bar-a" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-left">
</div>
</div>
</body>
</html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_noheader_js.js 0 → 100644
View file @ 44dfebe5
/*jslint nomen: true, indent: 2, maxerr: 6 */
/*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_button_template = Handlebars.compile(template_element
.getElementById("header-button-template")
.innerHTML);
gadget_klass
.setState({
loaded: false,
modified: false,
submitted: true,
error: false,
title_icon: undefined,
title_url: undefined
})
//////////////////////////////////////////////
// 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('render', function (options) {
var state = {
error: options.error || false,
button_icon: options.button_icon || 'bars',
button_name: options.button_name || 'panel',
button_class: options.button_class || undefined
};
return this.changeState(state);
})
.onStateChange(function (modification_dict) {
var gadget = this,
button,
default_button_icon = "",
promise_list = [];
// Change icon based on document state
if (modification_dict.hasOwnProperty('error') ||
modification_dict.hasOwnProperty('loaded') ||
modification_dict.hasOwnProperty('submitted')) {
if (gadget.state.error) {
default_button_icon = "exclamation";
} else if (!gadget.state.loaded) {
default_button_icon = "spinner";
} else if (!gadget.state.submitted) {
default_button_icon = "spinner";
}
}
button = {
icon: default_button_icon || gadget.state.button_icon,
name: gadget.state.button_name
};
return new RSVP.Queue()
.push(function () {
return gadget.translateHtml(header_button_template(button));
})
.push(function (rendered_template) {
gadget.element.querySelector(".ui-btn-left").innerHTML = rendered_template;
});
})
.declareService(function () {
var gadget = this,
button = gadget.element.querySelector(".ui-btn-left");
return window.loopEventListener(window, "scroll", false, function (event) {
if (window.scrollY > 20) {
if (!button.classList.contains("ui-fixed")) {
button.classList.add("ui-fixed");
}
} else {
if (button.classList.contains("ui-fixed")) {
button.classList.remove("ui-fixed");
}
}
});
})
//////////////////////////////////////////////
// handle button submit
//////////////////////////////////////////////
.onEvent('submit', function (evt) {
var name = evt.target[0].getAttribute("name");
if (name === "panel") {
return this.triggerPanel();
}
throw new Error("Unsupported button " + name);
});
}(window, rJS, Handlebars, document, RSVP));
\ No newline at end of file
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