https://www.german-brand-award.com/_assets/665ac59dfe5eed79f1e772b10f3fd5c6/JavaScript/showmore.js?1790830239

1/** Showmore respects viewport (lazy loading) and focus (focus point) */
2(function() {
3    'use strict';
4    function Showmore (el) {
5        var self = this;
6        this.el = el; // showmore container
7        this.visibleItems = 0; // count visible items
8
9        // try to find a unique storage identifier
10        this.store = null;
11        let params = new URLSearchParams(window.location.search);
12        function findClosest(el, s) {
13            var dest = null;
14            do {
15                dest = el.querySelector(s);
16                if (dest) return dest;
17                el = el.parentElement || el.parentNode;
18            } while (el !== null && el.nodeType === 1);
19            return null;
20        }
21        // generate store name
22        this.store = window.location.pathname;
23        let id = el.id;
24        if (id) {
25            this.store = this.store + '/' + id;
26        }
27        let t, tab = findClosest(this.el, 'ul.tabsheets > li.tabsheet-item > .sheet-header');
28        if (tab) {
29            t = tab.innerHTML;
30            this.store = this.store + '/#' + t;
31        }
32        let q = params.get("tx_solr[q]");
33        if (q) {
34            this.store = this.store + '/' + q;
35        }
36        // get initialization values
37        this.step = parseInt(el.getAttribute('data-step'), 10); // load more step
38        if (isNaN(this.step)) {
39            this.step = 10; // default if no data-step is defined
40        }
41        // list works with showmore-trigger button
42        this.btn = this.el.lastElementChild; // show more button
43        if (this.btn) {
44            if (this.btn.dataset.type != 'showmore-trigger') {
45                this.btn = this.btn.querySelector("[data-type='showmore-trigger']");
46            }
47        }
48        if (this.btn) {
49            this.els = this.el.children; // show more items
50            this.len = this.els.length-1; // item counter
51            if (this.exists()) {
52               if (sessionStorage.getItem('showmore-' + this.store) == 0) {
53                   self.more();
54               }
55                // activate button to show more
56                this.btn.addEventListener("click", function (event) {
57                    document.activeElement.blur();
58                    self.more();
59                    event.preventDefault();
60                    event.stopPropagation();
61                });
62                this.btn.classList.remove('hidden');
63            } else {
64                // hide button if there are no hidden items to show
65                this.btn.classList.add('hidden');
66            }
67        }
68
69        // list works with input filter field
70        this.input = null; // filter input field
71        //find contentElement div
72        let node = this.el;
73        while (node && (node.id == '' || node.id.charAt(0) != 'c')) {
74            node = node.parentNode;
75        }
76        if (node && node.id != '' && node.id.charAt(0) == 'c') {
77            // search for filter input
78            let searchbox = node.querySelector("[data-type='showmore-searchbox']");
79            // add test input
80            if (!searchbox && this.el.dataset && this.el.dataset.options && this.el.dataset.options.indexOf('searchbox') !== -1) {
81                searchbox = document.createElement('div');
82                searchbox.dataset.type = 'showmore-searchbox';
83                searchbox.className = 'searchbox list-search-live';
84                node.insertBefore(searchbox, node.firstChild);
85            }
86            if (searchbox) {
87                let searchinputbox = document.createElement('span');
88                this.input = document.createElement('input');
89                this.input.className = 'searchinput';
90                this.input.type = 'text';
91                searchinputbox.appendChild(this.input);
92                searchbox.appendChild(searchinputbox);
93            }
94            if (this.input) {
95                this.input.addEventListener('keyup', function (event) {
96                    self.filter();
97                });
98                this.input.addEventListener('input', function (event) {
99                    self.filter();
100                });
101                this.input.value = sessionStorage.getItem('filter-' + this.store);
102                this.filter();
103            }
104        }
105    }
106    Showmore.prototype = {
107        // check if hidden items exists
108        exists: function () {
109            let c = sessionStorage.getItem('showmore-' + this.store) || 0; // load showmore storage value
110            for (let i = 0; i < this.len; i++) {
111                if (i < c) {
112                    // restore showmore storage state
113                    this.els[i].classList.remove('hidden');
114                } else if (this.els[i].classList.contains('hidden')) {
115                    // found first hidden item
116                    this.visibleItems = i;
117                    sessionStorage.setItem('showmore-' + this.store, this.visibleItems); // init showmore storage value
118                    return true;
119                }
120            }
121            return false;

122        },
123        // show more items
124        more: function () {
125            let c = 0;
126            this.btn.classList.add('hidden');
127            for (let i = 0; i < this.len; i++) {
128                // show more hidden items until counter has size of step
129                if (this.els[i].classList.contains('hidden') && (this.els[i].style.display != 'none')) {
130                    console.log(this.step);
131                    if (c < this.step) {
132                        this.els[i].classList.remove('hidden');
133                        // Set focus to first newly displayed list item. BAEK-
134                        if (c === 0) {
135                            let anchor = this.els[i].querySelector('a');
136                            if (anchor) {
137                                anchor.focus();
138                            }
139                        }
140                        c++;
141                    } else {
142                        this.btn.classList.remove('hidden');
143                        break;
144                    }
145                }
146            }
147            this.visibleItems = this.visibleItems + this.step;
148            sessionStorage.setItem('showmore-' + this.store, this.visibleItems); // set showmore storage value
149        },
150        // filter items
151        filter: function () {
152            let searchString = this.input.value.toLowerCase();
153            sessionStorage.setItem('filter-' + this.store, searchString);
154            let c = 0;
155            this.btn.classList.add('hidden');
156            for (let i = 0; i < this.len; i++) {
157                if (this.els[i].textContent.toLowerCase().indexOf(searchString) > -1) {
158                    c++;
159                    this.els[i].style.display = '';
160                } else {
161                    this.els[i].style.display = 'none';
162                }
163                if (c <= this.visibleItems) {
164                    this.els[i].classList.remove('hidden');
165                } else {
166                    this.els[i].classList.add('hidden');
167                    this.btn.classList.remove('hidden');
168                }
169            }
170        }
171    };
172
173    // get all showmore container
174    var i, els = document.querySelectorAll("[data-type='showmore']"), len = els.length;
175    for (i = 0; i < len; i++) {
176        // add an onclick eventlistener to loadmore button
177        // that handles the remove of hidden class of load more items
178        // this doesn't break viewport (lazy loading) and focus (focus point)
179        new Showmore(els[i]);
180    }
181
182    // expose constructor globally
183    window.Showmore = Showmore;
184
185})();