`b576d25`

Restore pin modal checked ordering

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 2 days ago

SHA: b576d25c11e63a2097d57d0639aa00df302e2072
Parents: cedfc23
Tree: 2f1be87

1 changed file

Status	File	+	-
M	`internal/web/templates/_layout.html`	32	1

internal/web/templates/_layout.htmlmodified

      var openers = document.querySelectorAll("[data-pins-open]");
      var closeButton = modal.querySelector("[data-pins-close]");
      var filter = modal.querySelector("[data-pins-filter]");
++    var list = modal.querySelector("[data-pins-list]");
      var rows = Array.prototype.slice.call(modal.querySelectorAll("[data-pins-row]"));
      var checkboxes = Array.prototype.slice.call(modal.querySelectorAll("[data-pins-checkbox]"));
      var remaining = modal.querySelector("[data-pins-remaining]");
      var submit = modal.querySelector("[data-pins-submit]");
++    rows.forEach(function (row, index) {
++      row.setAttribute("data-pins-index", String(index));
++    });
++
      function checkedCount() {
        return checkboxes.filter(function (box) { return box.checked; }).length;
+     }
++    function rowCheckbox(row) {
++      return row.querySelector("[data-pins-checkbox]");
++    }
++
++    function rowIndex(row) {
++      return Number(row.getAttribute("data-pins-index") || "0");
++    }
++
++    function arrangeRows(query) {
++      if (!list) return;
++      var ordered = rows.slice();
++      ordered.sort(function (left, right) {
++        if (query === "") {
++          var leftChecked = !!(rowCheckbox(left) && rowCheckbox(left).checked);
++          var rightChecked = !!(rowCheckbox(right) && rowCheckbox(right).checked);
++          if (leftChecked !== rightChecked) return leftChecked ? -1 : 1;
++        }
++        return rowIndex(left) - rowIndex(right);
++      });
++      ordered.forEach(function (row) { list.appendChild(row); });
++    }
++
      function refreshPins() {
        var count = checkedCount();
        var left = Math.max(0, 6 - count);
      function applyFilter() {
        if (!filter) return;
        var query = filter.value.trim().toLowerCase();
++      arrangeRows(query);
        rows.forEach(function (row) {
          var haystack = (row.getAttribute("data-pins-search") || "").toLowerCase();
          row.hidden = query !== "" && haystack.indexOf(query) === -1;
      });
      if (filter) filter.addEventListener("input", applyFilter);
      checkboxes.forEach(function (box) {
--      box.addEventListener("change", refreshPins);
++      box.addEventListener("change", function () {
++        refreshPins();
++        applyFilter();
++      });
      });
      refreshPins();
    })();