Follow standards for javascript "data-" attribute names

[jzohrab]

Currently, lute/templates/read/textitem.html has the following:

      tid="{{ item.text_id }}"
      lid="{{ item.lang_id }}"
      paraid="{{ item.para_id }}"
      seid="{{ item.se_id }}"
      data_text="{{ item.text }}"
      data_status_class="{{ item.status_class }}"
      data_order="{{ item.order }}"
{% if item.wo_id is not none %}
      data_wid="{{ item.wo_id }}"

This doesn't follow javascript standards, e.g outlined at https://dev.to/dev-harbiola/custom-data-attributes-in-html-a-guide-to-data--373.

These could be changed as follows:

tid => data-tid (or data-text-id)
lid => data-lid (or data-lang-id)
paraid => data-para-id
data-se-id or data-sentence-id
data-status-class
data-order
data-wid or data-word-id

I believe that these are only referenced in lute/static/lute.js:

(.venv) MacBook-Pro:lute-v3 jeff$ for t in tid lid paraid seid data_text data_status_class data_order data_wid; do
>   echo ------------------------------------
>   echo $t
>   inv search $t | grep lute.js    # limit search to only lute.js
> done
------------------------------------
tid
lute/static/js/lute.js:function prepareTextInteractions(textid) {
------------------------------------
lid
lute/static/js/lute.js:  elid = parseInt(el.attr('data_wid'));
lute/static/js/lute.js:    url: `/read/termpopup/${elid}`,
lute/static/js/lute.js:  const lid = parseInt(el.attr('lid'));
lute/static/js/lute.js:  const url = `/read/termform/${lid}/${sendtext}?${extras}`;
lute/static/js/lute.js:  const langid = firstel.attr('lid');
------------------------------------
paraid
lute/static/js/lute.js:    attr_name = 'paraid';
lute/static/js/lute.js:    attr_value = w.attr('paraid');
------------------------------------
seid
lute/static/js/lute.js:  let attr_name = 'seid';
lute/static/js/lute.js:  let attr_value = w.attr('seid');
------------------------------------
data_text
lute/static/js/lute.js:  let text = extra_args.textparts ?? [ el.attr('data_text') ];
------------------------------------
data_status_class
lute/static/js/lute.js: * Terms have data_status_class attribute.  If highlights should be shown,
lute/static/js/lute.js:/** Add the data_status_class to the term's classes. */
lute/static/js/lute.js:  el.addClass(el.attr("data_status_class"));
lute/static/js/lute.js:    el.removeClass(el.attr("data_status_class"));
lute/static/js/lute.js:    const st = nextword.attr('data_status_class');
lute/static/js/lute.js:  let update_data_status_class = function (e) {
lute/static/js/lute.js:        .attr('data_status_class',`${newClass}`);
lute/static/js/lute.js:  $('span.kwordmarked').each(update_data_status_class);
lute/static/js/lute.js:  $('span.wordhover').each(update_data_status_class);
------------------------------------
data_order
lute/static/js/lute.js:let save_curr_data_order = function(el) {
lute/static/js/lute.js:  LUTE_CURR_TERM_DATA_ORDER = parseInt(el.attr('data_order'));
lute/static/js/lute.js:  save_curr_data_order($(this));
lute/static/js/lute.js:  save_curr_data_order($(this));
lute/static/js/lute.js:  const first = parseInt(start_el.attr('data_order'))
lute/static/js/lute.js:  const last = parseInt(end_el.attr('data_order'));
lute/static/js/lute.js:    const ord = $(this).attr("data_order");
lute/static/js/lute.js:  save_curr_data_order(el);
lute/static/js/lute.js:    return $(a).attr('data_order') - $(b).attr('data_order');
lute/static/js/lute.js:  const i = words.toArray().findIndex(x => parseInt(x.getAttribute('data_order')) === LUTE_CURR_TERM_DATA_ORDER);
lute/static/js/lute.js:  save_curr_data_order(curr);
------------------------------------
data_wid
lute/static/js/lute.js:  elid = parseInt(el.attr('data_wid'));
(.venv) MacBook-Pro:lute-v3 jeff$ 

I don't know if this work is worth it ... following standards is good, but not critical. Is this make-work only?

[robby1066]

I don't know if this work is worth it ... following standards is good, but not critical. Is this make-work only?

I agree it's a judgement call.

In my opinion, using the interfaces that are specific to custom attributes ($(el).data(...) in jQuery and el.dataset... in vanilla JS ) clarify the code a fair bit. e.g. it's super clear that data-sentence-id is an attribute related to the app whereas seid could be some standard HTML attribute I just don't know about.

In case that's a change you want to make, I tested everything as best I could and submitted a PR.

[jzohrab]

Merged #79 .

[jzohrab]

Launched in 3.0.8.