Skip to content

E
erp5
Commit 6cea93ba authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Panel: remove handlebars dependency

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