event.html

---
layout: default
---
<div class="event">

  {% if page.fb_event %}
  <a href="{{ page.fb_event }}" class="pull-right fb-event-box">
    <i class="fa fa-facebook-square"></i>
    <span id="fb-event-visit">Visit</span> this event on Facebook
  </a>
  {% endif %}

  <header class="event-header">
    <h1 class="event-title">{{ page.title }}</h1>
  </header>

  <article class="event-content">
    <section id="content" class="content">
      {{ content }}
    </section>

    <section id="map" class="map">
      {% if page.locations.size > 1 %}<h2>Locations</h2>{% else %}<h2>Location</h2>{% endif %}
      <div id="map-map" style="height: 300px"></div>
      <ul class="centered-blocks">
      {% for location in page.locations %}
        <li>
          <a href="{{ location.website }}">{{ location.name }}</a> at {{ location.address }}
          {% if location.date %}({{ location.date }}){% endif %}
        </li>
      {% endfor %}
      </ul>
    </section>

    {% if page.gdrive %}
    <section id="resources" class="content resources">
      <h2>
        Resources
        <span class="inline-add"><a href="{{ page.gdrive }}">(see all)</a></span>
      </h2>

      <iframe src="https://drive.google.com/embeddedfolderview?{{ page.gdrive | split:'?' | last | split:'#' | first }}#grid" style="height: 460px"></iframe>
    </section>
    {% endif %}

  </article>

  <script type="text/javascript" src="{{ site.baseurl }}/js/leaflet.min.js"></script>
  <script type="text/javascript" src="{{ site.baseurl }}/js/Control.Geocoder.js"></script>
  <script type="text/javascript"><!--
    //
    // Find locations and create the map
    //
    var map = L.map('map-map');
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    var markers = [
      {% for location in page.locations %}
      {name: "{{ location.name }}", url: "{{ location.website }}", address: "{{ location.address }}", date: "{{ location.date }}"},
      {% endfor %}
    ];

    var geocoder = new L.Control.Geocoder.Nominatim();
    for (var i in markers) {
      var marker = markers[i];
      geocoder.geocode(marker.address, function(data) {
        var result = data[0];
        var marker = this;
        var desc = "<h3><a href='"+marker.url+"'>"+marker.name+"</a></h3><div>"+marker.address+"</div>";
        if (marker.date != "") { desc += "<div>(" + marker.date + ")</div>"; }
        marker.ll = [result.center.lat, result.center.lng];
        L.marker(marker.ll).bindPopup(desc).addTo(map);
        // fit bounds to all points
        var pts = markers.map(function(m){ return m.ll; });
        map.fitBounds(L.latLngBounds(pts), {maxZoom: 12});
      }.bind(marker));
    }

    //
    // Turn "visit" into "join" when the event is in the future
    //
    if (Date.parse("{{ page.ends | date_to_rfc822 }}") >= Date.now()) {
      document.getElementById('fb-event-visit').innerHTML = "<strong>Join</strong>";
    }

  //--></script>
</div>