https://www.brick-tracker.de/js/script.js?v=547

1function btGetBaseUrl() {
2    const host = window.location.host || "";
3    const protocol = window.location.protocol || "https:";
4
5    if (host.includes("localhost") || host.includes("127.0.0.1")) {
6        return protocol + "//" + host + "/www.brick-tracker.de";
7    }
8
9    return "https://www.brick-tracker.de";
10}
11
12//getting all required elements
13const searchWrapper = document.querySelector(".search-input");
14const inputBox = searchWrapper.querySelector("input");
15const suggBox = searchWrapper.querySelector(".autocom-box");
16const KEY_ARROW_UP = "ArrowUp";
17const KEY_ARROW_DOWN = "ArrowDown";
18const KEY_ENTER = "Enter";
19//if user press any key and release
20let activeSuggestionIndex = 0;//Index der aktuell hervorgehobenen Suggestion in der Suggbox
21// BT dynamische Themenliste für die globale Header-Suche:
22// Standardmäßig bleibt eine kleine Fallback-Liste vorhanden.
23// Sobald der User die Suche fokussiert oder tippt, lädt script.js einmalig
24// die aktuellen Themen aus database_rel.php?bt_themenbereiche=1.
25// Dadurch bleibt der Dateiname script.js global gleich und neue Themen
26// wachsen automatisch in die Suche hinein.
27let alleThemenbereicheListeFallback = [
28    "star wars",
29    "technic",
30    "architecture",
31    "animal crossing",
32    "art",
33    "avatar",
34    "brickheadz",
35    "city",
36    "classic",
37    "creator expert",
38    "creator-3-in-1",
39    "disney",
40    "dots",
41    "dreamzzz",
42    "duplo",
43    "education",
44    "fortnite",
45    "friends",
46    "harry potter",
47    "ideas",
48    "icons",
49    "indiana jones",
50    "jurassic world",
51    "marvel",
52    "minecraft",
53    "minifiguren",
54    "minions",
55    "monkie kid",
56    "ninjago",
57    "powered up",
58    "sonic the hedgehog",
59    "sonstiges",
60    "speed champions",
61    "super heroes",
62    "super mario",
63    "vidiyo",
64    "wednesday"
65];
66
67let alleThemenbereicheListe = [];
68let btThemenbereicheLoadingPromise = null;
69
70function btNormalizeThemeValue(value) {
71    return String(value || "").toLocaleLowerCase().replace(/\s/g, "");
72}
73
74function btSetThemenbereicheListe(list) {
75    const sourceList = Array.isArray(list) && list.length ? list : alleThemenbereicheListeFallback;
76    const seen = {};
77
78    alleThemenbereicheListe = sourceList
79        .map((value) => String(value || "").trim())
80        .filter((value) => value.length > 0)
81        .filter((value) => {
82            const key = btNormalizeThemeValue(value);
83            if (seen[key]) {
84                return false;
85            }
86
87            seen[key] = true;
88            return true;
89        });
90}
91
92function btLoadThemenbereicheListe() {
93    if (btThemenbereicheLoadingPromise) {
94        return btThemenbereicheLoadingPromise;
95    }
96
97    btThemenbereicheLoadingPromise = fetch("database_rel.php?bt_themenbereiche=1", {
98        method: "GET",
99        cache: "force-cache",
100        credentials: "same-origin"
101    })
102        .then((response) => response.ok ? response.json() : [])
103        .then((data) => {
104            if (Array.isArray(data) && data.length) {
105                btSetThemenbereicheListe(data);
106            }
107
108            return alleThemenbereicheListe;
109        })
110        .catch(() => {
111            btSetThemenbereicheListe(alleThemenbereicheListeFallback);
112            return alleThemenbereicheListe;
113        });
114
115    return btThemenbereicheLoadingPromise;
116}
117
118btSetThemenbereicheListe(window.BT_THEMENBEREICHE || alleThemenbereicheListeFallback);
119
120inputBox.addEventListener("focus", () => {
121    btLoadThemenbereicheListe();
122});
123inputBox.onkeyup = (e)=>{
124
125    //console.log(e.target.value);
126    let userData = e.target.value; //user entered Data
127    let emptyArray = [];
128    if(userData){//Wenn userdata nicht leer ist
129        emptyArray = suggestions.filter((data)=>{
130            //filtering array value and user char to lowercase and return only those words/sentc witch 
131            //are starts with user entered word
132            //return data.toLocaleLowerCse().startsWith(userData.toLocaleLowerCase()); // Dies ist youtube
133           
134            return data.toLocaleLowerCase().replace(/\s/g, '').includes(userData.toLocaleLowerCase().replace(/\s/g, ''));
135        });

136        btLoadThemenbereicheListe();
137
138        const normalizedUserData = btNormalizeThemeValue(userData);
139        const normalizedThemenbereicheListe = alleThemenbereicheListe.map((value) => btNormalizeThemeValue(value));
140
141        if(normalizedThemenbereicheListe.includes(normalizedUserData)){
142            const exactThemeIndex = normalizedThemenbereicheListe.indexOf(normalizedUserData);
143            const exactTheme = alleThemenbereicheListe[exactThemeIndex] || userData;
144            emptyArray.unshift("<span class='show_all_deals_span'>Alle Deals zum Thema <strong class='thema'>"+exactTheme+"</strong> anzeigen.</span>");
145        }else if(userData.length >=3){//Wenn der eingegebene String >= 3 ist, soll geprüft werden, ob es einen Themenbereich gibt, der die ähnlichen Buchstaben enthält. Z.B. star => starwars, tec => technic etc.
146            let thema = ""
147            alleThemenbereicheListe.forEach((value)=>{
148                if(btNormalizeThemeValue(value).includes(normalizedUserData) && thema === ""){
149                    thema = value;
150                }
151            })
152            if(thema.length>=3){
153                emptyArray.unshift("<span class='show_all_deals_span'>Alle Deals zum Thema <strong class='thema'>"+thema+"</strong> anzeigen.</span>");
154            }
155        }
156        emptyArray = emptyArray.map((data, index)=>{
157            let suggestionLimit = 50;//Limitiert die Anzahl der Suchvorschläge
158            if(index < suggestionLimit){
159                let suggestionLi = document.createElement("li");
160                suggestionLi.setAttribute("onclick","select(this)");
161                
162                if(data.includes("<") && data.includes(">")){
163                    suggestionLi.innerHTML = data;
164                    return data = suggestionLi;
165                }
166                let suggestionText = document.createTextNode(data);
167                suggestionLi.appendChild(suggestionText);
168                console.log(typeof getSetnummer(data));
169                //TODO: eventuell muss der imagepfad (src attribut) geändert werden zu 'https://www.brick-tracker.de/img_text/"+ getSetnummer(data) +"n.png'
170                
171                suggestionLi.innerHTML = " <img src='img_text/"+ getSetnummer(data) +"n.png' alt=''/>" +  suggestionLi.innerHTML;
172                
173                return data = suggestionLi;
174            }
175           
176        })
177        searchWrapper.classList.add("active"); //show autocomplete box
178        showSuggestions(emptyArray);
179        let allList = suggBox.querySelectorAll("li");
180        /*!!!!!!!!!for (let i = 0; i < allList.length; i++){
181            //adding onclick attribute in all li tag
182
183            allList[i].setAttribute("onclick","select(this)");
184        }*/
185
186    }else{
187        searchWrapper.classList.remove("active"); //hide autocomplete box
188    }
189
190   
191    if(emptyArray.length > 0){//Man kann nur durch suggestions navigieren, wenn das array nicht leer ist
192        if(e.key === KEY_ARROW_DOWN || e.key === KEY_ARROW_UP){//navigate through suggestions
193            navigateSuggestions(e.key, emptyArray);
194        }else if(e.key === KEY_ENTER){//Wenn Enter geklickt wurde, wird der Inputfeld-Wert auf die activesuggestion gesetzt
195            inputBox.value = emptyArray[activeSuggestionIndex].textContent;
196            select(emptyArray[activeSuggestionIndex]);//gehighlightetes li-Element wird an select übergeben.
197        }else{
198            suggBox.scrollTop = 0;//Scrollposition und Aktive Suggestion werden zurückgesetzt.
199            activeSuggestionIndex = 0;
200        }
201    }
202 
203    
204}
205
206function select(element){//Wird aufgerufen, wenn Enter gedrückt oder auf eine Suggestion geklickt wurde.
207   console.log();
208   let selectUserData = element.textContent;
209   inputBox.value = selectUserData; //passing the user selected list item data in textfield
210   //window.location.replace("http://www.brick-tracker.de/"+ selectUserData + ".html"); //I
211   //window.open("http://www.brick-tracker.de/"+ selectUserData + ".html");
212   var set = selectUserData.trim();
213
214   if(element.querySelector(".show_all_deals_span") == null){//Wenn es kein kind element mit der klasse .show_all_deals_span hat
215    let parts = set.split(" - ");
216    const setnummer = parts.shift();
217    const name = parts.join(' - ');
218    const urlName = setnummer + ' - lego -'+name;
219   // alert(urlName)
220
221  //  alert(set) 
222     window.location.href = btGetBaseUrl() + "/preisvergleich.php?set=" + encodeURIComponent(urlName);
223   }else{
224    set = element.querySelector(".show_all_deals_span > .thema").textContent;
225    if(set !== null){
226        
227        let parts = set.split(" - ");
228        const setnummer = parts.shift();
229        const name = parts.join(' - ');
230        const urlName = setnummer + ' - lego -'+name;
231       // alert(urlName)
232    
233      //  alert(set) 
234         window.location.href = btGetBaseUrl() + "/top_deals.php?thema=" + encodeURIComponent(set);
235       // window.location.href = "https://www.brick-tracker.de/top_deals.php?themenbereich=" + set + "#deals_section";
236       // window.location.href = "/kunde/Brick%20Tracker%2020220903/top_deals.php?themenbereich=" + set + "#deals_section";
237    }
238   }
239   inputBox.value ="";
240}
241
242
243function showSuggestions(list){
244    let listData = [];
245    if(!list.length){
246        userValue = document.createTextNode(inputBox.value);
247        listData = document.createElement("li");
248        listData.appendChild(userValue);
249        listData = [listData]; //listdata muss ein Array sein, damit die foreach funktioniert
250    }else{
251       listData = list;
252    }
253   
254    listData[0].classList.add("activeSuggestion");//Oberste Suggestion ist automatisch active, kann mit Pfeiltasten geändert werden
255    suggBox.innerHTML = "";
256    listData.forEach(function(liElement) { // Als LI Elemente aus listdata auslesen und der suggbox hinzufügen
257       
258       
259        suggBox.appendChild(liElement);
260    });
261}
262function navigateSuggestions(key, list){//Wenn Pfeil nach oben oder unten gedrückt wurde, soll die gehighlightete suggestion geändert werden 
263    
264    list.forEach(function(liElement, index){//Zunächst alle Highlights entfernen
265        liElement.classList.remove("activeSuggestion");
266    })
267    if(key === KEY_ARROW_DOWN){//nächste Suggestion highlighten
268        activeSuggestionIndex++;
269        activeSuggestionIndex = (activeSuggestionIndex > list.length -1)?list.length-1:activeSuggestionIndex;
270    }else if(key === KEY_ARROW_UP){//vorherige Suggestion highlighten
271        activeSuggestionIndex--;
272        activeSuggestionIndex = (activeSuggestionIndex < 0)?0:activeSuggestionIndex;
273    }
274   //console.log(activeIndex);
275
276    list[activeSuggestionIndex].classList.add("activeSuggestion");
277  
278    setScrollPositionOfSuggBox(key, list);
279}
280function setScrollPositionOfSuggBox(key, list){//Setzt die neue Scrollposition innerhalb der Suggbox
281    liElement = list[activeSuggestionIndex];
282    if(activeSuggestionIndex >=3 && key === KEY_ARROW_DOWN){//Die highlighted suggestion soll ungefähr in der Mitte sein, dann fängt es an automatisch zu scrollen
283        suggBox.scrollTop = suggBox.scrollTop + liElement.clientHeight;//In Abhängigkeit von der Höhe des aktiven Li-Elements, soll die Scrollposition entsprechend erhöht werden.
284    }else if(activeSuggestionIndex <= list.length-4 && key === KEY_ARROW_UP){
285        suggBox.scrollTop = suggBox.scrollTop - liElement.clientHeight;
286    }
287}
288
289function getSetnummer(data){
290    return +(data.split(" - ")[0]);
291}