https://plancaldwell.com/Scripts/AlphabeticalSortModule.js

1function AlphabeticalSortModule(config) {
2  var that = this;
3
4  // set default values
5  var DEFAULTS = {
6    $navTarget: $(".alphabetical-sort-nav"),
7    letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split(""),
8    $container: $(".boards-committees-outer")
9  };
10
11  that.$container = config.$container;
12  that.config = $.extend({}, DEFAULTS, config);
13  that.nameElementSelector = config.nameElementSelector;
14  that.itemSelector = config.itemSelector;
15  that.$sortableItems = that.$container.find(config.itemSelector);
16  that.init();
17}
18
19AlphabeticalSortModule.prototype.init = function () {
20  var that = this;
21  that.populateSortAnchors();
22  that.initEventListeners();
23  that.buildUI();
24};
25
26AlphabeticalSortModule.prototype.buildUI = function () {
27  var that = this;
28
29  $.each(that.config.letters, function (i, letter) {
30    let $targetElement = that.$container.find(
31      `[data-alphabetical-sort="${letter}"]`
32    );
33    let cls = "";
34
35    if ($targetElement.length === 0) {
36      cls = "disable";
37    }
38
39    var $a = `<a data-letter="${letter}" class="link_huge ${cls}">${letter}</a>`;
40    that.config.$navTarget.append($a);
41  });
42};
43
44AlphabeticalSortModule.prototype.populateSortAnchors = function () {
45  var that = this;
46
47  $.each(that.$sortableItems, function (i, item) {
48    var $item = $(item);
49    var $title = $item.find(that.nameElementSelector);
50    var title = $title.text().trim();
51
52    if (title.length) {
53      var firstLetter = title.charAt(0);

54      var sortCharacter = "";
55
56      if (isNaN(firstLetter)) {
57        sortCharacter = firstLetter;
58      } else {
59        sortCharacter = "#";
60      }
61
62      var $sortAnchor = `<span data-alphabetical-sort="${sortCharacter}" class="sortAnchor"></span>`;
63      $($sortAnchor).insertBefore($item);
64    }
65  });
66};
67
68AlphabeticalSortModule.prototype.initEventListeners = function () {
69  var durationEasing = 2000;
70  var that = this;
71  that.$container.on("click", ".link_huge", function (e) {
72    that.$container.find(".link_huge").removeClass("active");
73    $(this).addClass("active");
74
75    let alphabet = $(this).attr("data-letter");
76    let $targetElement = that.$container.find(
77      `[data-alphabetical-sort="${alphabet}"]`
78    );
79
80    if (alphabet === "All") {
81      $("html, body").animate(
82        {
83          scrollTop: $(e.target).offset().top
84        },
85        durationEasing
86      );
87    } else if ($targetElement.length > 0) {
88      $targetElement[0].scrollIntoView({
89        behavior: "smooth",
90        block: "start",
91        inline: "end"
92      });
93    }
94  });
95};
96
97AlphabeticalSortModule.prototype.clearSort = function () {
98  var that = this;
99  that.$container.find(".link_huge.active").removeClass("active");
100};