Last active
September 14, 2017 21:19
-
-
Save tosipaulo/75e59ae9be6b7c2093379645dffb8f48 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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