https://www.kromionline.com/js/monedasNavigation.js

1var monedaContainer = document.querySelector('.monedaContainer')
2var header_new      = document.querySelector('#header_new')
3var monedaButton    = document.querySelector('#monedaButton')
4var responsiveMonedas = document.querySelector('.responsiveMonedas');
5var menuMonedasR = document.querySelector('.menuMonedasR')
6var menuBarResponsive_Moneda = document.querySelector('.menuBarResponsive_Moneda')
7var nombreRMoneda = document.querySelector('#nombreRMoneda')
8fetch('./includes/QueryPHP/Index/GetMonedas.php')
9.then((response)=>{
10    return response.json();
11}).then((responseJson)=>{
12    if(!responseJson.error){
13        var content = '';
14        var contentResponsive = '';
15        var contentResponsiveNavigation = '';
16        var monedaSelected = '';
17        var nombreMonedaSelectedResponsive = '';
18        responseJson.items.forEach(moneda => {
19            monedaSelected = moneda.selected == true ? 'monedaSelected' : '';
20            content += moneda.descripcion == 'Bs.' ? '<div class="monedaSelection"><span onclick="selectMoneda(\''+moneda.codigo+'\')">Bolívares</span></div>' : '<div class="monedaSelection"><span onclick="selectMoneda(\''+moneda.codigo+'\')">'+moneda.descripcion+'</span></div>'
21            contentResponsive += moneda.descripcion == 'Bs.' ? '<div class="header_new_responsive_link" onclick="selectMoneda(\''+moneda.codigo+'\')">Bolívares</div>' : '<div class="header_new_responsive_link" onclick="selectMoneda(\''+moneda.codigo+'\')">'+moneda.descripcion+'</div>'
22            contentResponsiveNavigation += moneda.descripcion == 'Bs.' ? '<div class="menuMonedasROption '+monedaSelected+'" onclick="selectMoneda(\''+moneda.codigo+'\')">Bolívares</div>' : '<div class="menuMonedasROption '+monedaSelected+'" onclick="selectMoneda(\''+moneda.codigo+'\')">'+moneda.descripcion+'</div>' 
23            if(moneda.selected){
24                nombreMonedaSelectedResponsive = moneda.descripcion;
25            }
26        });
27        monedaContainer.innerHTML = content
28        responsiveMonedas.innerHTML = contentResponsive;
29        menuMonedasR.innerHTML = contentResponsiveNavigation;
30        if(nombreMonedaSelectedResponsive != ''){
31            nombreRMoneda.innerHTML = nombreMonedaSelectedResponsive;
32        }
33    }
34})
35const openMonedasNavigation = () =>{
36    if(monedaContainer.style.display == 'block'){
37        closeMonedasNavigation()
38    }else{
39        monedaContainer.style.display = 'block'
40        monedaContainer.style.top = header_new.offsetHeight+window.scrollY+'px'
41    }
42}
43const closeMonedasNavigation = () =>{
44    monedaContainer.style.display = 'none'
45}
46const selectMoneda = (codMoneda) =>{
47    var formData = new FormData();
48    formData.append('codMoneda', codMoneda);
49    fetch('./includes/QueryPHP/Index/SelectMoneda.php',{
50        method: 'POST',
51        cache: 'no-cache',
52        body: formData
53    }).then((response)=>{
54        return response.json();
55    }).then((responseJson)=>{
56        if(!responseJson.error){
57            window.location.reload();
58        }
59    })
60}
61
62//Responsive
63
64menuBarResponsive_Moneda.addEventListener('click', (e)=>{
65    if(menuMonedasR.style.display == 'flex'){
66        menuMonedasR.style.display = 'none';
67        setTimeout(() => {
68            menuMonedasR.style.bottom = '0px';
69        });
70        menuBarResponsive_Moneda.style.filter = 'grayscale(.8)';
71    }else{
72        menuMonedasR.style.display = 'flex';
73        setTimeout(() => {
74            menuMonedasR.style.bottom = '60px';
75        });
76        menuBarResponsive_Moneda.style.filter = 'grayscale(0)';
77    }
78})
79
80// Know where the click goes
81document.addEventListener('click', function(e){
82    var monedaElems = [...monedaButton.childNodes]
83    monedaElems.push(monedaButton)
84    if( monedaElems.indexOf(e.target) !== -1){
85        openMonedasNavigation()
86    }else{
87        closeMonedasNavigation()
88    }
89})
90// When scroll move the box
91window.addEventListener('scroll', (e)=>{
92    monedaContainer.style.top = header_new.offsetHeight+window.scrollY+'px';
93})