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
Pipeline #17121 failed with stage
    in 0 seconds
    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