Better support for modification of HTML of existing lists

[pdw-mb]

Modification of the HTML in existing lists is not currently well supported. The reIndex function will reinitialise the list from the current HTML, but this does not interact well with search or pagination functions, as whenever reIndex() is called, it will truncate the list to include only the visible rows.

This is discussed here: https://github.com/javve/list.js/issues/86#issuecomment-219276455

This PR provides an alternative approach.

addItem() allows you to provide the DOM object for an element that has been added which will be added to the list. refresh() will reload all existing rows from their corresponding HTML elements, which is useful of their content has been modified. sort() called with no arguments will re-apply the last search. This allows newly inserted or modified rows to be shown in the correct order.

[codecov-io]

Codecov Report

Merging #652 into master will decrease coverage by 1.59%. The diff coverage is 26.31%.

@@            Coverage Diff            @@
##           master     #652     +/-   ##
=========================================
- Coverage   94.74%   93.14%   -1.6%     
=========================================
  Files          19       19             
  Lines         799      817     +18     
  Branches      187      190      +3     
=========================================
+ Hits          757      761      +4     
- Misses         29       41     +12     
- Partials       13       15      +2

Impacted Files	Coverage Δ
src/index.js	95.37% <22.22%> (-4.02%)	:arrow_down:
src/sort.js	90.14% <28.57%> (-6.79%)	:arrow_down:
src/item.js	94.59% <33.33%> (-5.41%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 52afe2d...6740006. Read the comment docs.

[mauricekindermann]

This saved my life. I was banging my head against the wall trying to figure out how on earth I could work around the reIndex() issue when using a couple fairly complex filter() functions which are tied to other libraries.

I thought maybe select2 or swal were breaking my code, then I realised reIndex() was truncating my data, then I realised this is a known issue and has no fix in sight, untli I finally found the actual code here: https://github.com/javve/list.js/pull/652/commits/84a9ea1e9655aa6da3c92b03f365fee7745a5040

I'm intentionally leaving the link and a long winded expliation above incase someoen else finds themselves in my position

[vanboom]

Suggestion - refactor reIndex with this behavior rather than making another function. Imho, reIndex() should re-index the full HTML without the List.js specific filtering applied.

[vanboom]

Also for your consideration, your item reload function does not appear to load the new HTML. This logic will fetch the fresh HTML from the DOM, reload the values and achieve the desired result.

    this.reload = function() {
      // reload the items from source HTML (not the templater)
      var itemSource = document.getElementById(item.elm.id);
      if (itemSource) {
        var newItem = itemSource.cloneNode(true);
        this.elm = newItem;
        // reconstitute the values
        var values = list.templater.get(item, initValues);
        this.values(values);
      }
    };