gigs.html

---
title: Gigs
subtitle: |
  <a
    class='cal-subscribe'
    data-target='#calendar-subscribe-modal'
    data-toggle='modal'
    href='#'
    >
    <i
      class='fas fa-calendar-alt'
      ></i>
  </a>
---

<div
  class='gig-lists'
  >
  <ul
    id='future-gigs'
    ></ul>

  <hr>

  <h2>
    Archive

    <a
      class='collapsed'
       data-toggle='collapse'
       href='#gig-archive'
       aria-expanded='false'
       aria-controls='gig-archive'
      >
      <span
        class='show-ctrl'
        >
        Show
        <i
          class='fa fa-arrow-circle-down'
        ></i>
      </span>
      <span
        class='hide-ctrl'
        >
        Hide
        <i
          class='fa fa-arrow-circle-up'
          ></i>
      </span>
    </a>
  </h2>
  <ul
    class='gig-archive collapse'
    id='gig-archive'
    ></ul>
</div>

<hr>

{% include modals/calendar-subscribe-modal.html %}
{% include fragments/book-the-band.html %}

<script>
nothingPlanned = true
height = window.innerHeight

$.getJSON('/gigs.json', function(data) {
  $.each(data.gigs, function(index, gig) {
    date = fancyDate(gig.date)

    item = `
    <li
      id='${ gig.date }'
      >
      <span
        class='gig-date'
        >${ date }:</span>
      <a
        href='${ gig.url.split('{{ site.url }}')[1] }'
        title='${ gig.title }, ${ date }'
        >
          ${ gig.title }
        </a>
      </li>`

    if (isFuture(gig.date)) {
      nothingPlanned = false
      target = '#future-gigs'
      $(target).prepend(item)
    } else {
      target = '#gig-archive'
      $(target).append(item)
      initialTop = $('#gig-archive > li')[0].getBoundingClientRect().bottom
      opacify($(`#${ gig.date }`))
    }
  })

  if (nothingPlanned) {
    $('#future-gigs').append(`
    <li>
      Nothing in the calendar. Why not
      <a
        href='/book-the-band/'
        >book us?</a>
    </li>
    `)
  }
})

element = '#gig-archive > li'
$(window).on({
  'scroll': function(e) {
    fadeOut(element)
  }
})
</script>