Commit 6cea93ba authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Panel: remove handlebars dependency

parent 76a7427d
......@@ -7,15 +7,30 @@
<link rel="http://www.renderjs.org/rel/interface" href="interface_panel.html">
<!--
data-i18n=Editable
data-i18n=Home
data-i18n=Modules
data-i18n=Worklists
data-i18n=History
data-i18n=Search
data-i18n=Preferences
data-i18n=Logout
data-i18n=Views
data-i18n=Workflows
data-i18n=Actions
-->
<!-- 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>
<script id="panel-template-header" type="text/x-handlebars-template">
<!-- custom script -->
<script src="gadget_erp5_global.js" type="text/javascript"></script>
<script src="gadget_erp5_panel.js" type="text/javascript"></script>
</head>
<body>
<div>
<div data-role="header">
<div class="ui-btn-left">
<div class="ui-controlgroup-controls">
......@@ -26,9 +41,6 @@
<img alt="ERP5" src="gadget_erp5_panel.png?format=png"/>
</div>
</div>
</script>
<script id="panel-template-body" type="text/x-handlebars-template">
<div>
<form>
......@@ -39,51 +51,11 @@
</form>
<ul></ul>
<div data-gadget-url="gadget_erp5_field_checkbox.html"
<div data-gadget-url="gadget_erp5_field_multicheckbox.html"
data-gadget-scope="erp5_checkbox"
data-gadget-sandbox="public"></div>
<dl></dl>
</div>
</script>
<script id="panel-template-body-list" type="text/x-handlebars-template">
<li><a href="{{front_href}}" class="ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li>
<li><a href="{{module_href}}" class="ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>
<li><a href="{{worklist_href}}" class="ui-btn-icon-left ui-icon-tasks" data-i18n="Worklists" accesskey="w">Worklists</a></li>
<li><a href="{{history_href}}" class="ui-btn-icon-left ui-icon-history" data-i18n="History" accesskey="h">History</a></li>
<li><a href="{{search_href}}" class="ui-btn-icon-left ui-icon-search" data-i18n="Search" accesskey="s">Search</a></li>
<li><a href="{{preference_href}}" class="ui-btn-icon-left ui-icon-sliders" data-i18n="Preferences">Preferences</a></li>
<li><a href="{{logout_href}}" class="ui-btn-icon-left ui-icon-power-off" data-i18n="Logout" accesskey="o">Logout</a></li>
</script>
<script id="panel-template-body-desktop" type="text/x-handlebars-template">
<dt class="ui-btn-icon-left ui-icon-eye" data-i18n="Views">Views</dt>
{{#each view_list}}
<dd class="document-listview">
<a class="{{class_name}}" href="{{href}}">{{title}}</a>
</dd>
{{/each}}
<dt class="ui-btn-icon-left ui-icon-random" data-i18n="Workflows">Workflows</dt>
{{#each workflow_list}}
<dd class="document-listview">
<a class="{{class_name}}" href="{{href}}">{{title}}</a>
</dd>
{{/each}}
<dt class="ui-btn-icon-left ui-icon-cogs" data-i18n="Actions">Actions</dt>
{{#each action_list}}
<dd class="document-listview">
<a class="{{class_name}}" href="{{href}}">{{title}}</a>
</dd>
{{/each}}
</script>
<!-- custom script -->
<script src="gadget_erp5_global.js" type="text/javascript"></script>
<script src="gadget_erp5_panel.js" type="text/javascript"></script>
</head>
<body>
<div></div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>970.25260.56659.16554</string> </value>
<value> <string>971.20312.1477.42820</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1537454742.32</float>
<float>1540979971.49</float>
<string>UTC</string>
</tuple>
</state>
......
/*jslint nomen: true, indent: 2, maxerr: 3, unparam: true */
/*global window, document, rJS, Handlebars, RSVP, Node, URL, loopEventListener, asBoolean , ensureArray*/
(function (window, document, rJS, Handlebars, RSVP, Node, URL, loopEventListener, asBoolean, ensureArray) {
/*global window, document, rJS, RSVP, Node, asBoolean , ensureArray*/
(function (window, document, rJS, RSVP, Node, asBoolean, ensureArray) {
"use strict";
/////////////////////////////////////////////////////////////////
// temlates
/////////////////////////////////////////////////////////////////
// Precompile templates while loading the first gadget instance
var gadget_klass = rJS(window),
template_element = gadget_klass.__template_element,
panel_template_header = Handlebars.compile(template_element
.getElementById("panel-template-header")
.innerHTML),
panel_template_body = Handlebars.compile(template_element
.getElementById("panel-template-body")
.innerHTML),
panel_template_body_list = Handlebars.compile(template_element
.getElementById("panel-template-body-list")
.innerHTML),
panel_template_body_desktop = Handlebars.compile(template_element
.getElementById("panel-template-body-desktop")
.innerHTML);
function appendDt(fragment, dt_title, dt_icon,
action_list, href_list, index) {
// <dt class="ui-btn-icon-left ui-icon-eye">Views</dt>
// {{#each view_list}}
// <dd class="document-listview">
// <a class="{{class_name}}" href="{{href}}">{{title}}</a>
// </dd>
// {{/each}}
var dt_element = document.createElement('dt'),
dd_element,
a_element,
i;
dt_element.textContent = dt_title;
dt_element.setAttribute('class', 'ui-btn-icon-left ui-icon-' + dt_icon);
fragment.appendChild(dt_element);
for (i = 0; i < action_list.length; i += 1) {
dd_element = document.createElement('dd');
dd_element.setAttribute('class', 'document-listview');
a_element = document.createElement('a');
a_element.setAttribute('class', action_list[i].class_name);
a_element.href = href_list[index + i];
a_element.textContent = action_list[i].title;
dd_element.appendChild(a_element);
fragment.appendChild(dd_element);
}
}
gadget_klass
rJS(window)
.setState({
visible: false
})
......@@ -30,8 +38,7 @@
// acquired method
//////////////////////////////////////////////
.declareAcquiredMethod("getUrlForList", "getUrlForList")
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("translate", "translate")
.declareAcquiredMethod("getTranslationList", "getTranslationList")
.declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("getUrlParameter", "getUrlParameter")
......@@ -106,8 +113,7 @@
.onStateChange(function onStateChange(modification_dict) {
var context = this,
gadget = this,
queue = new RSVP.Queue(),
tmp_element;
queue = new RSVP.Queue();
if (modification_dict.hasOwnProperty("visible")) {
if (this.state.visible) {
......@@ -124,37 +130,13 @@
if (modification_dict.hasOwnProperty("global")) {
queue
.push(function () {
// XXX: Customize panel header!
return context.translateHtml(
panel_template_header() +
panel_template_body()
);
})
.push(function (my_translated_or_plain_html) {
tmp_element = document.createElement('div');
tmp_element.innerHTML = my_translated_or_plain_html;
return context.declareGadget('gadget_erp5_searchfield.html', {
scope: "erp5_searchfield",
element: tmp_element.querySelector('[data-gadget-scope="erp5_searchfield"]')
});
return context.getDeclaredGadget('erp5_searchfield');
})
.push(function (search_gadget) {
return search_gadget.render({
focus: false,
extended_search: ''
});
})
.push(function () {
return context.declareGadget('gadget_erp5_field_multicheckbox.html', {
scope: "erp5_checkbox",
element: tmp_element.querySelector('[data-gadget-scope="erp5_checkbox"]')
});
})
.push(function () {
context.element.querySelector("div").appendChild(tmp_element);
});
}
......@@ -162,53 +144,76 @@
queue
// Update the global links
.push(function () {
return context.getUrlForList([
{command: 'display', options: {page: "front"}},
{command: 'display', options: {page: "history"}},
{command: 'display', options: {page: "preference"}},
{command: 'display', options: {page: "logout"}},
{command: 'display_stored_state', options: {page: "search"}},
{command: 'display', options: {page: "worklist"}},
{command: 'display'}
return RSVP.all([
context.getUrlForList([
{command: 'display'},
{command: 'display', options: {page: "front"}},
{command: 'display', options: {page: "worklist"}},
{command: 'display', options: {page: "history"}},
{command: 'display_stored_state', options: {page: "search"}},
{command: 'display', options: {page: "preference"}},
{command: 'display', options: {page: "logout"}}
]),
context.getTranslationList([
'Editable',
'Home',
'Modules',
'Worklists',
'History',
'Search',
'Preferences',
'Logout'
]),
context.getDeclaredGadget("erp5_checkbox")
]);
})
.push(function (result_list) {
return context.translateHtml(
panel_template_body_list({
"module_href": result_list[0],
"history_href": result_list[1],
"preference_href": result_list[2],
"logout_href": result_list[3],
"search_href": result_list[4],
"worklist_href": result_list[5],
"front_href": result_list[6]
})
);
})
var editable_value = [],
i,
ul_fragment = document.createDocumentFragment(),
a_element,
li_element,
icon_and_key_list = [
'home', null,
'puzzle-piece', 'm',
'tasks', 'w',
'history', 'h',
'search', 's',
'sliders', null,
'power-off', 'o'
],
ul_element = context.element.querySelector("ul");
.push(function (result) {
context.element.querySelector("ul").innerHTML = result;
for (i = 0; i < result_list[0].length; i += 1) {
// <li><a href="URL" class="ui-btn-icon-left ui-icon-ICON" data-i18n="TITLE" accesskey="KEY"></a></li>
a_element = document.createElement('a');
li_element = document.createElement('li');
a_element.href = result_list[0][i];
a_element.setAttribute('class', 'ui-btn-icon-left ui-icon-' + icon_and_key_list[2 * i]);
if (icon_and_key_list[2 * i + 1] !== null) {
a_element.setAttribute('accesskey', icon_and_key_list[2 * i + 1]);
}
a_element.textContent = result_list[1][i + 1];
li_element.appendChild(a_element);
ul_fragment.appendChild(li_element);
}
while (ul_element.firstChild) {
ul_element.removeChild(ul_element.firstChild);
}
ul_element.appendChild(ul_fragment);
// Update the checkbox field value
return RSVP.all([
context.getDeclaredGadget("erp5_checkbox"),
context.translate("Editable")
]);
})
.push(function (result_list) {
var value = [],
search_gadget = result_list[0],
title = result_list[1];
if (context.state.editable) {
value = ['editable'];
editable_value = ['editable'];
}
return search_gadget.render({field_json: {
return result_list[2].render({field_json: {
editable: true,
name: 'editable',
key: 'editable',
hidden: false,
items: [[title, 'editable']],
default: value
items: [[result_list[1][0], 'editable']],
'default': editable_value
}});
});
}
......@@ -219,10 +224,7 @@
modification_dict.hasOwnProperty("action_list") ||
modification_dict.hasOwnProperty("view_list"))) {
if (this.state.view_list === undefined) {
queue
.push(function () {
gadget.element.querySelector("dl").textContent = '';
});
gadget.element.querySelector("dl").textContent = '';
} else {
queue
.push(function () {
......@@ -232,20 +234,20 @@
view_list = JSON.parse(gadget.state.view_list),
action_list = JSON.parse(gadget.state.action_list);
for (i = 0; i < workflow_list.length; i += 1) {
for (i = 0; i < view_list.length; i += 1) {
parameter_list.push({
command: 'change',
options: {
view: workflow_list[i].href,
view: view_list[i].href,
page: undefined
}
});
}
for (i = 0; i < view_list.length; i += 1) {
for (i = 0; i < workflow_list.length; i += 1) {
parameter_list.push({
command: 'change',
options: {
view: view_list[i].href,
view: workflow_list[i].href,
page: undefined
}
});
......@@ -259,46 +261,31 @@
}
});
}
return gadget.getUrlForList(parameter_list);
return RSVP.all([
gadget.getUrlForList(parameter_list),
gadget.getTranslationList(['Views', 'Workflows', 'Actions'])
]);
})
.push(function (result_list) {
var i,
result_workflow_list = [],
result_view_list = [],
result_action_list = [],
var dl_element,
dl_fragment = document.createDocumentFragment(),
workflow_list = JSON.parse(gadget.state.workflow_list),
view_list = JSON.parse(gadget.state.view_list),
action_list = JSON.parse(gadget.state.action_list);
for (i = 0; i < workflow_list.length; i += 1) {
result_workflow_list.push({
title: workflow_list[i].title,
class_name: workflow_list[i].class_name,
href: result_list[i]
});
}
for (i = 0; i < view_list.length; i += 1) {
result_view_list.push({
title: view_list[i].title,
class_name: view_list[i].class_name,
href: result_list[i + workflow_list.length]
});
}
for (i = 0; i < action_list.length; i += 1) {
result_action_list.push({
title: action_list[i].title,
class_name: action_list[i].class_name,
href: result_list[i + workflow_list.length + view_list.length]
});
appendDt(dl_fragment, result_list[1][0], 'eye',
view_list, result_list[0], 0);
appendDt(dl_fragment, result_list[1][1], 'random',
workflow_list, result_list[0], view_list.length);
appendDt(dl_fragment, result_list[1][2], 'cogs',
action_list, result_list[0],
view_list.length + workflow_list.length);
dl_element = gadget.element.querySelector("dl");
while (dl_element.firstChild) {
dl_element.removeChild(dl_element.firstChild);
}
return gadget.translateHtml(panel_template_body_desktop({
workflow_list: result_workflow_list,
view_list: result_view_list,
action_list: result_action_list
}));
})
.push(function (translated_html) {
gadget.element.querySelector("dl").innerHTML = translated_html;
dl_element.appendChild(dl_fragment);
});
}
}
......@@ -342,7 +329,7 @@
return;
})
.onEvent('submit', function submit(event) {
.onEvent('submit', function submit() {
var gadget = this,
search_gadget,
redirect_options = {
......@@ -381,4 +368,4 @@
}, /*useCapture=*/false, /*preventDefault=*/true);
}(window, document, rJS, Handlebars, RSVP, Node, URL, loopEventListener, asBoolean, ensureArray));
}(window, document, rJS, RSVP, Node, asBoolean, ensureArray));
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>971.19133.62867.18210</string> </value>
<value> <string>971.20534.9804.61201</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1540909039.27</float>
<float>1541603920.02</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