Skip to content

erp5
erp5
Commit 0c945082 authored by Gabriel Monnerat's avatar Gabriel Monnerat
Browse files
Options

erp5_web_renderjs_ui: use more domsugar API instead of appendChild from DOM API

parent ffdc1a45
Show whitespace changes
Inline Side-by-side
Showing with 248 additions and 232 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html
View file @ 0c945082
......@@ -23,6 +23,7 @@
<link rel="http://www.renderjs.org/rel/interface" href="interface_erp5_form_content_provider.html">
<!-- renderjs -->
<script src="domsugar.js" type="text/javascript"></script>
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="jiodev.js" type="text/javascript"></script>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.xml
View file @ 0c945082
......@@ -224,7 +224,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>george</string> </value>
<value> <string>zope</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>986.65426.46809.56012</string> </value>
<value> <string>993.55171.44758.6877</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1601544175.96</float>
<float>1628545474.29</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js
View file @ 0c945082
/*jslint indent: 2, maxerr: 3, nomen: true */
/*global window, document, rJS, URI, RSVP, isEmpty, console*/
(function (window, document, rJS, URI, RSVP, isEmpty, console) {
/*global window, document, rJS, URI, RSVP, isEmpty, console, domsugar*/
(function (window, document, rJS, URI, RSVP, isEmpty, console, domsugar) {
"use strict";
var variable = {},
......@@ -85,102 +85,118 @@
{{/each}}
</tbody>
*/
var tbody_element = document.createElement('tbody'),
i,
var i,
j,
row,
cell,
tr_element,
td_element,
element_data,
sub_element,
a_element;
a_element,
sub_element_list,
td_element_list,
tr_element_list = [];
for (i = 0; i < options.row_list.length; i += 1) {
tr_element = document.createElement('tr');
td_element_list = [];
row = options.row_list[i];
if (options.show_anchor) {
td_element = document.createElement('td');
sub_element = document.createElement('a');
sub_element.setAttribute('class', 'ui-icon-carat-r ui-btn-icon-notext');
sub_element.href = row.jump;
sub_element.textContent = ' ';
td_element.appendChild(sub_element);
tr_element.appendChild(td_element);
td_element_list.push(domsugar('td', [
domsugar('a', {
"class": 'ui-icon-carat-r ui-btn-icon-notext',
"href": row.jump,
"text": ' '
})
]));
}
for (j = 0; j < row.cell_list.length; j += 1) {
cell = row.cell_list[j];
td_element = document.createElement('td');
sub_element_list = [];
if (options.show_line_selector || (options.form_id === 'form_dialog' && options.show_select)) {
if (j === 0) {
// If first cell, show a checkbox to select the line
sub_element = document.createElement('input');
sub_element.setAttribute('data-uid', row.uid);
sub_element.setAttribute('type', 'checkbox');
sub_element.setAttribute('class', 'hide_element');
sub_element.setAttribute('id', 'listbox_line_' + row.uid);
element_data = {
"data-uid": row.uid,
"type": "checkbox",
"class": "hide_element",
"id": 'listbox_line_' + row.uid
};
if (row.checked) {
sub_element.setAttribute('checked', 'checked');
element_data.checked = 'checked';
}
td_element.appendChild(sub_element);
// If first cell, show a checkbox to select the line
sub_element_list.push(domsugar('input', element_data));
}
element_data = {
"for": 'listbox_line_' + row.uid
};
// Create a label, to update the checkbox when clicking the text
sub_element = document.createElement('label');
sub_element.setAttribute('for', 'listbox_line_' + row.uid);
if (cell.type) {
sub_element.setAttribute('class', 'editable_div');
sub_element.setAttribute('data-column', cell.column);
sub_element.setAttribute('data-line', cell.line);
element_data["class"] = 'editable_div';
element_data['data-column'] = cell.column;
element_data['data-line'] = cell.line;
} else {
sub_element.textContent = cell.default;
element_data.text = cell["default"];
}
td_element.appendChild(sub_element);
sub_element_list.push(
domsugar('label', element_data)
);
} else {
if (cell.type) {
sub_element = document.createElement('div');
sub_element.setAttribute('class', 'editable_div');
sub_element.setAttribute('data-column', cell.column);
sub_element.setAttribute('data-line', cell.line);
sub_element = domsugar('div', {
'class': 'editable_div',
'data-column': cell.column,
'data-line': cell.line
});
if (cell.editable || !cell.href) {
td_element.appendChild(sub_element);
sub_element_list.push(sub_element);
} else {
a_element = document.createElement('a');
a_element.href = cell.href;
a_element.appendChild(sub_element);
td_element.appendChild(a_element);
a_element = domsugar('a', {
"href": cell.href
}, [sub_element]);
sub_element_list.push(a_element);
}
} else {
if (cell.href) {
sub_element = document.createElement('a');
sub_element.href = cell.href;
sub_element = domsugar('a', {
"href": cell.href,
"text": cell["default"]
});
} else {
sub_element = document.createElement('p');
sub_element = domsugar('p', {
"text": cell["default"]
});
}
sub_element.textContent = cell.default;
td_element.appendChild(sub_element);
sub_element_list.push(sub_element);
}
}
tr_element.appendChild(td_element);
td_element_list.push(
domsugar('td', sub_element_list)
);
}
if (row.line_icon) {
td_element = document.createElement('td');
sub_element = document.createElement('a');
sub_element.setAttribute('class', 'ui-btn-icon-right ui-icon-sign-in');
sub_element.href = row.jump;
td_element.appendChild(sub_element);
tr_element.appendChild(td_element);
td_element_list.push(
domsugar('td', [
domsugar('a', {
'class': 'ui-btn-icon-right ui-icon-sign-in',
'href': row.jump
})
])
);
}
tbody_element.appendChild(tr_element);
tr_element_list.push(
domsugar('tr', td_element_list)
);
}
return tbody_element;
return domsugar('tbody', tr_element_list);
}
function listbox_tfoot_template(options) {
......@@ -212,43 +228,55 @@
{{/each}}
</tfoot>
*/
var tfoot_element = document.createElement('tfoot'),
i,
var i,
j,
row,
cell,
tr_element,
td_element,
div_element;
sub_element_list,
tfoot_element_list = [],
div_element,
td_element_list,
td_data;
for (i = 0; i < options.row_list.length; i += 1) {
tr_element = document.createElement('tr');
td_element_list = [];
if (options.show_anchor) {
td_element = document.createElement('td');
td_element.textContent = 'Total';
tr_element.appendChild(td_element);
td_element_list.push(
domsugar('td', {
"text": 'Total'
})
);
}
row = options.row_list[i];
for (j = 0; j < row.cell_list.length; j += 1) {
sub_element_list = [];
td_data = {};
cell = row.cell_list[j];
td_element = document.createElement('td');
if (cell.type) {
div_element = document.createElement('div');
div_element.setAttribute('class', 'editable_div');
div_element.setAttribute('data-column', cell.column);
div_element.setAttribute('data-line', cell.line);
td_element.appendChild(div_element);
div_element = domsugar('div', {
'class': 'editable_div',
'data-column': cell.column,
'data-line': cell.line
});
sub_element_list.push(div_element);
} else {
if (cell.default) {
td_element.textContent = cell.default;
if (cell["default"]) {
td_data.text = cell["default"];
} else if ((!options.show_anchor) && (j === 0)) {
td_element.textContent = 'Total';
td_data.text = 'Total';
}
}
tr_element.appendChild(td_element);
td_element_list.push(
domsugar('td', td_data, sub_element_list)
);
}
tfoot_element.appendChild(tr_element);
tfoot_element_list.push(
domsugar('tr', td_element_list)
);
}
return tfoot_element;
return domsugar('tfoot', tfoot_element_list);
}
function renderSubField(gadget, element, sub_field_json) {
......@@ -582,30 +610,20 @@
</a>
</div>
*/
var container = gadget.element.querySelector(".document_table"),
div_element = document.createElement('div'),
a_element = document.createElement('a'),
span_element;
a_element.href = result_list[0];
span_element = document.createElement('span');
span_element.setAttribute('class', 'ui-info-error');
span_element.textContent = result_list[1][0];
a_element.appendChild(span_element);
span_element = document.createElement('span');
span_element.textContent = '-';
a_element.appendChild(span_element);
span_element = document.createElement('span');
span_element.textContent = result_list[1][1];
a_element.appendChild(span_element);
div_element.appendChild(a_element);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(div_element);
return domsugar(gadget.element.querySelector(".document_table"), [
domsugar('div', [
domsugar('a', {
"href": result_list[0]
}, [
domsugar('span', {
'class': 'ui-info-error',
'text': result_list[1][0]
}),
domsugar('span', {"text": '-'}),
domsugar('span', {"text": result_list[1][1]})
])
])
]);
});
}
......@@ -707,139 +725,142 @@
url_for_index = 0,
column,
current_sort,
fragment = document.createDocumentFragment(),
div_element = document.createElement('div'),
table_element = document.createElement('table'),
button_element,
h1_element = document.createElement('h1'),
span_element = document.createElement('span'),
tr_element,
th_element,
a_element;
div_element.setAttribute('class', 'ui-table-header ui-header');
div_element_list = [
domsugar('h1', {
// For an unknown reason, the title used to be translated previously,
// which is unexpected, as the value can't be hardcoded in the gadget
// <h1>{{title}} <span class="listboxloader ui-icon-spinner ui-btn-icon-left"></span></h1>
h1_element.textContent = gadget.state.title + ' ';
span_element.setAttribute('class', 'listboxloader ui-icon-spinner ui-btn-icon-left');
h1_element.appendChild(span_element);
div_element.appendChild(h1_element);
"text": gadget.state.title + ' '
}, [
domsugar('span', {
"class": 'listboxloader ui-icon-spinner ui-btn-icon-left'
})
])
],
table_element = domsugar('table', [
domsugar("thead", {"class": "thead"}, [
domsugar("tr")
]),
domsugar("tbody"),
domsugar("tfoot")
]),
th_element_list = [],
tr_element,
th_element;
if (gadget.state.show_select_action) {
for (k = 0; k < select_option_list.length; k += 1) {
// Add include button
// <button data-rel="hide" data-i18n="Include" name="IncludeRows" type="button" class="ui-icon-eye ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('data-select-action', select_option_list[k].action);
button_element.setAttribute('name', 'SelectAction');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-' + select_option_list[k].icon + ' ui-btn-icon-left');
button_element.textContent = select_option_list[k].title;
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'data-rel': 'hide',
'data-select-action': select_option_list[k].action,
'name': 'SelectAction',
'type': 'button',
'class': 'ui-icon-' + select_option_list[k].icon + ' ui-btn-icon-left',
'text': select_option_list[k].title
}));
}
// Add cancel button
// <button data-rel="cancel" data-i18n="Cancel" name="ExcludeRows" type="button" class="ui-icon-times ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('name', 'CancelSelect');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-times ui-btn-icon-left');
button_element.textContent = translation_list[4];
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'data-rel': 'hide',
'name': 'CancelSelect',
'type': 'button',
'class': 'ui-icon-times ui-btn-icon-left',
'text': translation_list[4]
}));
} else if (gadget.state.show_clipboard_action) {
for (k = 0; k < select_option_list.length; k += 1) {
// Add include button
// <button data-rel="hide" data-i18n="Include" name="IncludeRows" type="button" class="ui-icon-eye ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'clipboard');
button_element.setAttribute('data-clipboard-action', select_option_list[k].action);
button_element.setAttribute('name', 'ClipboardAction');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-' + select_option_list[k].icon + ' ui-btn-icon-left');
button_element.textContent = select_option_list[k].title;
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'data-rel': 'clipboard',
'data-clipboard-action': select_option_list[k].action,
'name': 'ClipboardAction',
'type': 'button',
'class': 'ui-icon-' + select_option_list[k].icon + ' ui-btn-icon-left',
'text': select_option_list[k].title
}));
}
// Add cancel button
// <button data-rel="cancel" data-i18n="Cancel" name="ExcludeRows" type="button" class="ui-icon-times ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('name', 'CancelSelect');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-times ui-btn-icon-left');
button_element.textContent = translation_list[4];
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'data-rel': 'hide',
'name': 'CancelSelect',
'type': 'button',
'class': 'ui-icon-times ui-btn-icon-left',
'text': translation_list[4]
}));
} else {
// Add Configure button
// <button {{disabled}} data-rel="configure_columns" data-i18n="Configure" name="Configure" type="button" class="ui-icon-wrench ui-btn-icon-left {{configure_class}}"></button>
button_element = document.createElement('button');
button_element.disabled = gadget.state.disabled;
button_element.setAttribute('data-rel', 'configure_columns');
button_element.setAttribute('name', 'Configure');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-wrench ui-btn-icon-left ' + gadget.state.configure_class);
button_element.textContent = translation_list[2];
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'disabled': gadget.state.disabled,
'data-rel': 'configure_columns',
'name': 'Configure',
'type': 'button',
'class': 'ui-icon-wrench ui-btn-icon-left ' + gadget.state.configure_class,
'text': translation_list[2]
}));
// Add Sort button
// <button {{disabled}} data-rel="Sort" data-i18n="Sort" name="Sort" type="button" class="ui-icon-sort-amount-desc ui-btn-icon-left {{sort_class}}"></button>
button_element = document.createElement('button');
button_element.disabled = gadget.state.disabled;
button_element.setAttribute('data-rel', 'Sort');
button_element.setAttribute('name', 'Sort');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-sort-amount-desc ui-btn-icon-left ' + gadget.state.sort_class);
button_element.textContent = translation_list[3];
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'disabled': gadget.state.disabled,
'data-rel': 'Sort',
'name': 'Sort',
'type': 'button',
'class': 'ui-icon-sort-amount-desc ui-btn-icon-left ' + gadget.state.sort_class,
'text': translation_list[3]
}));
// Add Do button
// <button {{disabled}} data-rel="hide" data-i18n="Select" name="Hide" type="button" class="ui-icon-check-square-o ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.setAttribute('data-rel', 'clipboard');
button_element.setAttribute('name', 'Clipboard');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-list-ul ui-btn-icon-left ');
button_element.textContent = translation_list[5];
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'disabled': gadget.state.disabled,
'data-rel': 'clipboard',
'name': 'Clipboard',
'type': 'button',
'class': 'ui-icon-list-ul ui-btn-icon-left ',
'text': translation_list[5]
}));
// Add Select button
// <button {{disabled}} data-rel="hide" data-i18n="Select" name="Hide" type="button" class="ui-icon-check-square-o ui-btn-icon-left {{hide_class}}"></button>
button_element = document.createElement('button');
button_element.disabled = gadget.state.disabled;
button_element.setAttribute('data-rel', 'hide');
button_element.setAttribute('name', 'Hide');
button_element.type = 'button';
button_element.setAttribute('class', 'ui-icon-check-square-o ui-btn-icon-left ' + gadget.state.hide_class);
button_element.textContent = translation_list[1];
div_element.appendChild(button_element);
div_element_list.push(domsugar('button', {
'disabled': gadget.state.disabled,
'data-rel': 'hide',
'name': 'Hide',
'type': 'button',
'class': 'ui-icon-check-square-o ui-btn-icon-left ' + gadget.state.hide_class,
'text': translation_list[1]
}));
}
fragment.appendChild(div_element);
table_element.innerHTML = '<thead class="thead"><tr></tr></thead><tbody></tbody><tfoot></tfoot>';
tr_element = table_element.querySelector('tr');
if (gadget.state.show_anchor) {
th_element = document.createElement('th');
th_element.textContent = translation_list[0];
tr_element.appendChild(th_element);
th_element_list.push(
domsugar('th', {
"text": translation_list[0]
})
);
}
for (k = 0; k < column_list.length; k += 1) {
column = column_list[k];
th_element = document.createElement('th');
th_element = domsugar('th');
current_sort = sort_list.find(hasSameFirstItem(column));
if (current_sort !== undefined) {
if (current_sort[1] === 'ascending') {
th_element.setAttribute('class', "ui-icon ui-icon-sort-amount-asc");
th_element.classList.add("ui-icon", "ui-icon-sort-amount-asc");
} else if (current_sort[1] === 'descending') {
th_element.setAttribute('class', "ui-icon ui-icon-sort-amount-desc");
th_element.classList.add("ui-icon", "ui-icon-sort-amount-desc");
}
}
......@@ -850,33 +871,34 @@
if (is_sortable_list[k]) {
// <th class="{{class_value}}"><a href="{{sort_link}}">{{text}}</a></th>
a_element = document.createElement('a');
a_element.textContent = column[1];
a_element.href = url_for_list[url_for_index];
th_element.appendChild(a_element);
domsugar(th_element, [
domsugar('a', {
"text": column[1],
"href": url_for_list[url_for_index]
})
]);
url_for_index += 1;
} else {
// <th class="{{class_value}}">{{text}}</th>
th_element.textContent = column[1];
}
}
tr_element.appendChild(th_element);
th_element_list.push(th_element);
}
if (gadget.state.line_icon) {
th_element = document.createElement('th');
tr_element.appendChild(th_element);
th_element_list.push(domsugar('th'));
}
fragment.appendChild(table_element);
fragment.appendChild(document.createElement('nav'));
domsugar(table_element.querySelector('tr'), th_element_list);
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(fragment);
domsugar(container, [
domsugar('div', {
"class": 'ui-table-header ui-header'
}, div_element_list),
table_element,
domsugar('nav')
]);
});
}
......@@ -1046,8 +1068,6 @@
next_url = url_list[1],
previous_classname = "ui-btn ui-icon-carat-l ui-btn-icon-left responsive ui-first-child",
next_classname = "ui-btn ui-icon-carat-r ui-btn-icon-right responsive ui-last-child",
fragment = document.createDocumentFragment(),
sub_element,
nav_element = gadget.element.querySelector('nav'),
from_index;
......@@ -1080,27 +1100,22 @@
// <a class="{{previous_classname}}" data-i18n="Previous" href="{{previous_url}}">Previous</a>
// <a class="{{next_classname}}" data-i18n="Next" href="{{next_url}}">Next</a>
// <span class="ui-disabled">{{record}}</span>
sub_element = document.createElement('a');
sub_element.setAttribute('class', previous_classname);
sub_element.href = previous_url;
sub_element.textContent = result_list[0][1];
fragment.appendChild(sub_element);
sub_element = document.createElement('a');
sub_element.setAttribute('class', next_classname);
sub_element.href = next_url;
sub_element.textContent = result_list[0][2];
fragment.appendChild(sub_element);
sub_element = document.createElement('span');
sub_element.setAttribute('class', 'ui-disabled');
sub_element.textContent = record;
fragment.appendChild(sub_element);
while (nav_element.firstChild) {
nav_element.removeChild(nav_element.firstChild);
}
nav_element.appendChild(fragment);
domsugar(nav_element, [
domsugar('a', {
'class': previous_classname,
'href': previous_url,
'text': result_list[0][1]
}),
domsugar('a', {
'class': next_classname,
'href': next_url,
'text': result_list[0][2]
}),
domsugar('span', {
'class': 'ui-disabled',
'text': record
})
]);
})
.push(function () {
var result_sum = (allDocs_result.sum || {}).rows || [], // render summary footer if available
......@@ -1424,4 +1439,4 @@
return;
});
}(window, document, rJS, URI, RSVP, isEmpty, console));
}(window, document, rJS, URI, RSVP, isEmpty, console, domsugar));
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml
View file @ 0c945082
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>990.17151.25214.12134</string> </value>
<value> <string>994.13949.44825.36573</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -258,7 +258,7 @@
</tuple>
<state>
<tuple>
<float>1614290750.17</float>
<float>1629394496.1</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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7