-
-
Save tosipaulo/75e59ae9be6b7c2093379645dffb8f48 to your computer and use it in GitHub Desktop.
let Menu = (()=> { | |
'use strict' | |
const api = new Api(); | |
const template = new Template(); | |
const $ = (el) => document.querySelector(el) | |
const displayWidth = () => window.innerWidth | |
const headerMenuFull = $('#container-menu'); | |
const urlApi = { | |
menu : 'http://api-portalmenuhml.bandeirantes.com.br', | |
live: 'http://pubvideos-hml.bandeirantes.com.br', | |
weather: { | |
api : 'http://www.band.uol.com.br/api/tempo/previsao/', | |
name: 'somar', | |
token: 'XX14529933@@2017', | |
cidDefault: window.localStorage.getItem('ptCidade') || 'SaoPaulo-SP' | |
} | |
} | |
const renderTemplate = (data, element, templateMarkup) => { | |
const markup = templateMarkup(data) | |
element.innerHTML = markup; | |
} | |
const initRenderMenu = () => { | |
renderTemplate('', headerMenuFull, template.markupMenuFull) | |
toogleMenu(); | |
} | |
const buscarMenu = () => { | |
api.get(`${urlApi.menu}/Menu/GetAll`) | |
.then((res) => { | |
initRenderMenu(); | |
return res.slice(0,10) | |
}) | |
.then((res) => { | |
let menuContainer = $('#render-Menuchannel'); | |
renderTemplate(res, menuContainer, template.createMarkupMenu) | |
}) | |
.then(() => { | |
let menuDynamic = $('#menu-dynamic'); | |
api.get(`${urlApi.menu}/MenuDynamic/GetAll`).then((res) => { | |
renderTemplate(res[0].programs, menuDynamic, template.markupMenuDynamic) | |
eventMenuMobile(); | |
fixedMenu(); | |
}) | |
}) | |
.then(() => { | |
buscarLive(); | |
}) | |
.then(() => { | |
buscarWeather(); | |
}) | |
} | |
const buscarLive = () => { | |
let contanierLive = $('#on-air'); | |
api.get(`${urlApi.live}/Programa/Grade`) | |
.then((res) => { | |
let live = res.filter((item) => item.isLive) | |
if(live.length) { | |
renderTemplate(live, contanierLive, template.markupLive) | |
} | |
}) | |
} | |
const buscarWeather= () => { | |
let container = $('#weather'); | |
api.get(`${urlApi.weather.api}?cid=${urlApi.weather.cidDefault}`) | |
.then((res) => { | |
renderTemplate(res, container, template.markupWeather) | |
}) | |
} | |
const toogleMenu = () => { | |
let btnMenuChannel = $('#btn-menu-channel'); | |
let menuChannel = $('#menu-channel'); | |
let bgMenu = $('.l-header__channel__bg'); | |
btnMenuChannel.addEventListener('click', (event) => { | |
event.preventDefault(); | |
btnMenuChannel.classList.toggle('active') | |
menuChannel.classList.toggle('active'); | |
if(displayWidth() < 450) { | |
bgMenu.classList.toggle('active'); | |
if ('vibrate' in navigator) window.navigator.vibrate(100); | |
} | |
}) | |
bgMenu.addEventListener('click', (e) => { | |
event.preventDefault(); | |
btnMenuChannel.classList.toggle('active') | |
bgMenu.classList.remove('active'); | |
menuChannel.classList.remove('active'); | |
}) | |
} | |
const fixedMenu = () => { | |
let menuChannel = $('#menu-channel'); | |
window.addEventListener('scroll', function(e){ | |
const header = $('.l-header'); | |
if(window.scrollY > 99){ | |
header.classList.add('active') | |
menuChannel.classList.add('scroll') | |
}else { | |
header.classList.remove('active') | |
menuChannel.classList.remove('scroll') | |
} | |
}) | |
} | |
const eventMenuMobile = () => { | |
let btnMenuFull = document.querySelectorAll('.m-menu__channelFull__title'); | |
btnMenuFull.forEach((el) => { | |
if(displayWidth() < 450){ | |
el.addEventListener('click',(e) => { | |
e.preventDefault(); | |
el.nextElementSibling.classList.toggle('active'); | |
el.children[0].classList.toggle('fa-caret-up'); | |
el.children[0].classList.toggle('fa-caret-down'); | |
}) | |
} | |
}) | |
} | |
const init = () => { | |
buscarMenu(); | |
} | |
return { | |
init: init | |
} | |
})() | |
Menu.init(); |
Várias linhas faltam ;
no final, já pensou em usar um linter?
Tem uma razão pela qual você está separando em vários then()
? Porque aparentemente nenhum dado tá sendo jogado de um lado para o outro, você simplesmente, poderia retirar todos os then()
e chamar na mesma response.
Aliás, você está fazendo várias Promisses, já pensou em usar o https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Estou fazendo vários then()
porque um template depende do outro, criei um arquivo que só tem os template string, por sua vez o markupMenuFull precisa estar pronto para o createMarkupMenu e os demais templates sejam populado dentro dele! Não sei se estou fazendo isso com uma boa pratica!
https://gist.github.com/tosipaulo/80d6549b3fd182aecb6ad747dd29919e
Opa, os comentários eu já foi removido, sobre o código existe alguma possibilidade de refatorar? Estou usando muito then().