totalsport/public/assets/scripts/home.js

const clientes = {
  clientes: [],
  current: 0,
  rows: 2,
  cols: 6,
  decreaseClientes: function() {
    $('#img_clientes').find('.row').find('.column:last-child').remove()
    clientes.current -= clientes.rows
    if (clientes.current < - clientes.cols * clientes.rows) {
      clientes.current = clientes.clientes.length - (clientes.cols - 1) * clientes.rows
    }
    n = clientes.current
    if (n < 0) {
      n = clientes.clientes.length + n
    }
    $('#img_clientes').find('.row:first-child').prepend(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n])
    )
    $('#img_clientes').find('.row:last-child').prepend(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
    )
  },
  increaseClientes: function() {
    $('#img_clientes').find('.row').find('.column:first-child').remove()
    clientes.current += 2
    if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
      clientes.current = - (clientes.cols - 1) * clientes.rows
    }
    $('#img_clientes').find('.row:first-child').append(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + (clientes.cols - 1) * clientes.rows])
    )
    $('#img_clientes').find('.row:last-child').append(
      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
    )
  },
  setup: function() {
    $('.ci .icon').css('cursor', 'pointer').click(function() {
      if ($(this).attr('class').indexOf('left') != -1) {
        clientes.decreaseClientes()
        return
      }
      clientes.increaseClientes()
    })
  }
}
const eventos = {
  eventos: [],
  current_tab: 'none',
  base_url: '',
  changeEventos: (filter) => {
    let grid = $('#eventos_cards')
    grid.html('')
    $.each(eventos.eventos, function(i, el) {
      if (filter != 'none' && el.servicio != filter) {
        return
      }
      grid.append(
        $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
          $('<div></div>').attr('class', 'ui basic segment').append(
            $('<a></a>').attr('href', eventos.base_url + '/evento/' + i).append(
              $('<div></div>').attr('class', 'ui image').append(el.image)
            ).append(
              $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
                $('<br />')
              ).append(el.empresa)
            )
          )
        )
      )
    })
  },
  changeTab: (filter) => {
    $('.servicio.active').removeClass('active')
    $(".servicio[data-filter='" + filter + "']").addClass('active')
    eventos.current_tab = filter
  },
  resizeThumbs: () => {
    let thumbs = $('#eventos_cards .image img')
    thumbs.each((i, el) => {
      let src = $(el).attr('src')
      if (src == '#') {
        return
      }
      let w = el.width
      let h = el.height
      let parent = $(el).parent()
      let r = w / h
      if (r > 1) {
        $(el).height(parent.height())
        $(el).width(parent.height() * r)
      } else {
        $(el).width(parent.width())
        $(el).height(parent.width() / r)
      }
    })
  },
  setup: () => {
    eventos.resizeThumbs()
    $('.servicio').click(function(e) {
      e.preventDefault()
      let filter = $(this).attr('data-filter')
      if (filter == eventos.current_tab) {
        return
      }
      eventos.changeTab(filter)
      eventos.changeEventos(filter)
    })
  }
}
const testimonios = {
  testimonios: [],
  current_testimonio: 0,
  cambiar: (id) => {
    if (id == testimonios.current_testimonio) {
      return
    }
    $('#testimonio').html('').append(
      $('<p></p>').html(testimonios.testimonios[id].contenido)
    ).append(
      $('<div></div>').attr('class', 'ui header').html(testimonios.testimonios[id].emisor)
    )
    $('#marcador').find(".icon[data-id='" + testimonios.current_testimonio + "']").addClass('outline')
    $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
    $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
    testimonios.current_testimonio = id
  },
  setup: () => {
    $('#marcador').find('.icon').click(function() {
      let id = $(this).attr('data-id')
      testimonios.cambiar(id)
    })
    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
  }
}
const galeria = {
  id: '',
  galeria_id: '',
  galeria: [],
  base_url: '',
  setup: function() {
    $('.servicio').click((e) => {
      this.changeTab(e.target)
    })
  },
  changeTab: function(tab) {
    this.drawTabs(tab)
    $(this.galeria_id).html('')
    const servicio = $(tab).attr('data-filter')
    const grid = $(this.galeria_id)
    $.each(this.galeria, (i, el) => {
      if (servicio != 'none' && el.servicio != servicio) {
        return
      }
      grid.append(this.drawCard(i, el))
    })
  },
  drawTabs: function(active) {
    $(this.id).find('.servicio.active').removeClass('active')
    $(active).addClass('active')
  },
  drawCard: function(key, item) {
    /*
    <div class="eight wide tablet four wide computer column">
      <div class="ui basic segment">
        <a href="{{$urls->base}}/evento/{{$i}}">
          <div class="ui image">
            {!!$evento->imagen!!}
          </div>
          <div class="ui center aligned header">
            {{$evento->titulo}}
            <br />
            {{$evento->empresa}}
          </div>
        </a>
      </div>
    </div>
    */
   return $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
     $('<div></div>').attr('class', 'ui basic segment').append(
       $('<a></a>').attr('href', this.base_url + '/evento/' + key).append(
         $('<div></div>').attr('class', 'ui image').html(item.image)
       ).append(
         $('<div></div>').attr('class', 'ui center aligned header').html(item.titulo + '<br />' + item.empresa)
       )
     )
   )
  }
}