https://www.hologic.es/themes/custom/hologic/global/js/eol.js?tm4wcr

1(function ($) {
2  'use strict';
3
4  if ($(".eol_component").length) {
5    createDropdownFilter();
6    showItemOrderedByCat();
7    showItemOrderedByName();
8    filter();
9  }
10
11  // - - - Create the dropdown Filter - - -
12  function createDropdownFilter() {
13    $(".eol_component").closest("#layout-container").find(".region-highlighted").append("<section class='eol__filter-component'><div class='eol__filter'><div class='filter__wrapper'><label for='filter'>Sort by</label><div class='filter__select-wrapper'><div class='custom-select-wrapper'><span class='select-value'>Categories</span><ul class='custom-select'><li value='categories'>Categories</li><li value='chronological'>Chronological</li></ul></div></div></div></div></section>");
14    $(".eol_component").closest("#layout-container").find(".region-highlighted").addClass("has-eol-filter")
15  }
16
17  // - - - Display the list according the selected filter - - -
18  function filter() {
19
20    $('.select-value').on("click", function() {
21
22      var $ul = $(this).next('ul');
23      var $filterWrapper = $(".filter__select-wrapper");
24
25      // Show or hide the custom dropdown
26      if (!$ul.hasClass("expanded")) {
27        $ul.addClass('expanded');
28        $filterWrapper.addClass("open");
29        $ul.stop().slideDown();
30      } else {
31        $ul.removeClass('expanded');
32        $filterWrapper.removeClass("open");
33        $ul.stop().slideUp();
34      }
35
36      $ul.find('li').on('click', function () {
37
38        // Show or hide the EOL list
39        var val = $(this).attr("value");
40        var $eolList = $(".eol__list");
41        $eolList.removeClass("hide");
42
43        $eolList.each(function() {
44          if (!$(this).hasClass(val)) {
45            $(this).addClass("hide");
46          }
47        })
48
49        // Display the selected value
50        var liText = $(this).text();
51        $(this).closest('.custom-select-wrapper').find('.select-value').text(liText);
52
53        // Hide the custom dropdown
54        $ul.stop().slideUp().removeClass('expanded');
55        $filterWrapper.removeClass("open");
56      })
57    })
58
59    // Slide up custom select if clicked outside the select container
60    $('body').on('click', function (e) {
61      var target = $(e.target);
62      if (!target.is('.select-value')) {
63        $('.custom-select').stop().slideUp().removeClass('expanded');
64        $(".filter__select-wrapper").removeClass("open");
65      }
66    })
67  }
68
69  // - - - Show all items orderer by Cat - - -
70  function showItemOrderedByCat() {
71    var allEOL = JSON.parse($(".eol__data").text());
72
73    var groupByCat = allEOL.reduce(function (r, a) {
74      r[a.field_eol_category] = r[a.field_eol_category] || [];
75      r[a.field_eol_category].push(a);
76      return r;
77    }, Object.create(null));
78
79    groupByCat = Object.entries(groupByCat);
80
81    // Uppercase Cat first letter
82    groupByCat.map(function (cat) {
83      cat[0] = cat[0].charAt(0).toUpperCase() + cat[0].slice(1);
84    })
85
86    $(".eol_component .container").append("<div class='eol__list categories'></div>");
87
88    groupByCat.map(function(group, i) {
89
90      var catSlug = group[0].replace(/\s+/g, '-').toLowerCase();
91      $(".eol__list.categories").append("<div class='eol__group " + catSlug + "'><h3>" + group[0] + "</h3><ul class='eol__items'>");
92
93      $(".eol__list.categories .eol__group").each(function (index) {
94        var that = $(this);
95
96        if (index == i) {
97          group[1].map(function(item) {
98
99            var cleanTitle = item.field_eol_title.charAt(0).toUpperCase() + item.field_eol_title.slice(1);
100            var date = new Date(item.field_publishing_date);
101            var month = '' + (date.getMonth() + 1);
102            var day = '' + date.getDate();
103            var year = date.getFullYear();
104            month = month.length < 2 ? '0' + month : month;
105            day = day.length < 2 ? '0' + day : day;
106            var cleanDate  = year + "/" + month + "/" + day;
107
108            that.find($(".eol__items")).append("<li><a target='_blank' href='" + item.field_resource + "'>" + cleanTitle + "</a> - <span class='item__date'>" + cleanDate + "</span></li>");
109          })
110        }
111      })
112      $(".eol__list.categories").append("</ul></div>");
113    })
114  }
115
116  function showItemOrderedByName() {
117    var allEOL = JSON.parse($(".eol__data").text());
118
119    // Uppercase the first letter for each EOL Title in order to be well ordered.
120    allEOL.map(function(eol) {

121      eol.field_eol_title = eol.field_eol_title.charAt(0).toUpperCase() + eol.field_eol_title.slice(1);
122      eol.field_publishing_date = new Date(eol.field_publishing_date);
123    })
124
125    var groupByDate = allEOL.reduce(function (r, a) {
126      a.field_publishing_year = new Date(a.field_publishing_date).getFullYear();
127      r[a.field_publishing_year] = r[a.field_publishing_year] || [];
128      r[a.field_publishing_year].push(a);
129      return r;
130    }, Object.create(null));
131
132    groupByDate = Object.entries(groupByDate);
133
134    // Order by date, then reverse it to have the newest first
135    var orderedGroup = _.sortBy(groupByDate, 'field_publishing_year').reverse();
136
137    $(".eol_component .container").append("<div class='eol__list chronological hide'></div>");
138
139    orderedGroup.map(function(group, i) {
140      var dateSlug = group[0];
141      
142      $(".eol__list.chronological").append("<div class='eol__group " + dateSlug + "'><h3>" + group[0] + "</h3><ul class='eol__items'>");
143
144      $(".eol__list.chronological .eol__group").each(function (index) {
145        var that = $(this);
146
147        if (index == i) {
148
149          // Order by date, then reverse it to have the newest first
150          var orderedSubGroup = _.sortBy(group[1], 'field_publishing_date').reverse();
151
152          orderedSubGroup.map(function(item) {
153
154            var date = new Date(item.field_publishing_date);
155            var month = '' + (date.getMonth() + 1);
156            var day = '' + date.getDate();
157            var year = date.getFullYear();
158            month = month.length < 2 ? '0' + month : month;
159            day = day.length < 2 ? '0' + day : day;
160            var cleanDate = year + "/" + month + "/" + day;
161
162            that.find($(".eol__items")).append("<li><a target='_blank' href='" + item.field_resource + "'>" + item.field_eol_title + "</a> - <span class='item__date'>" + cleanDate + "</span></li>");
163          })
164        }
165      })
166
167      $(".eol__list.chronological").append("</ul></div>");
168    });
169
170  }
171
172})(jQuery);