header.js

const Menu = (()=> {
  'use strict'
  
  const addEvent = ( event ) => ( element, action ) =>
    element.addEventListener( event, action(element) )
  
    const addClass = ( _class ) => ( element ) =>
    element.classList.add( _class );

  const removeClass = ( _class ) => ( element ) =>
    element.classList.remove( _class );

  const addEventClickIn = addEvent( 'click' )

  const addClassActiveFrom = addClass( 'active' )
  const addClassScrollFrom = addClass( 'scroll' )

  const removeClassActiveFrom = removeClass( 'active' )
  const removeClassScrollFrom = removeClass( 'scroll' )


  const api = new Api();
  const template = new Template();
  
  const $ = (el) => document.querySelector(el)
  const $All = (el) => document.querySelectorAll(el)
  const displayWidth = () => window.innerWidth
  const headerMenuFull = $('#container-menu');
 
  const renderTemplate = (data, element, templateMarkup) => {
    element.innerHTML = templateMarkup(data);
  }
 
  const initRenderMenu = () => {
    renderTemplate('', headerMenuFull, template.markupMenuFull)
    toogleMenu();
  }
  
  const _initRenderMenu = (res) => {
    initRenderMenu();
    return res.slice(0,10)
  }
  const _renderTemplate = (res) => 
    renderTemplate(res, $('#render-Menuchannel'), template.createMarkupMenu)  

  const fixMenu = (urlApi) => () => 
    api.get(`${urlApi.menu}/MenuDynamic/GetAll`).then((res) => {
      renderTemplate(res[0].programs, $('#menu-dynamic'), template.markupMenuDynamic)
      eventMenuMobile();
      fixedMenu();
    })

  const buscarMenu = (urlApi) => {
      api.get(`${urlApi.menu}/Menu/GetAll`)
          .then(_initRenderMenu)
          .then(_renderTemplate)
          .then(fixMenu(urlApi))
          .then(buscarLive(urlApi))
          .then(buscarWeather(urlApi))
  }
 
  const buscarLive = (urlApi) => () => {
    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 = (urlApi) => ( el = '#weather' ) => 
    api.get(`${urlApi.weather.api}?cid=${urlApi.weather.cidDefault}`)
      .then((res) => {
        renderTemplate(res, $(el), 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')
      
      removeClassActiveFrom( bgMenu )
      removeClassActiveFrom( menuChannel )
    })
 
  }
 
  const fixedMenu = ( el = '#menu-channel' ) =>
    window.addEventListener('scroll', function(e){
      const header = $('.l-header');
      const element = $(el)
      if(window.scrollY > 99){
        // header.classList.add('active')
        // element.classList.add('scroll')
        addClassActiveFrom( header )
        addClassScrollFrom( element )
      }else {
        // header.classList.remove('active')
        // element.classList.remove('scroll')
        removeClassActiveFrom( header )
        removeClassScrollFrom( element )
      }
    })

  const inMenu = (el) => (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 eventMenuMobile = ( el = '.m-menu__channelFull__title' ) => 
    $All(el).forEach((element) => {
      if(displayWidth() < 450){
        element.addEventListener('click', inMenu(element))
      }
    })
 
  const init = (urlApi) => buscarMenu(urlApi);
 
  return { init }
})()


const config = {
  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'
  }
}

Menu.init(config);