Added agenda on front page and sections.

content/css/agenda.css

@@ -0,0 +1,123 @@
+:root {
+  --tes-agenda-event-combaillaux-color: #0cc;
+  --tes-agenda-event-troupe-color: #e00;
+}
+
+.tes-agenda-front {
+  --tes-agenda-day-width: var(--tes-agenda-front-day-width);
+  --tes-agenda-x-padding: var(--tes-agenda-front-x-padding);
+  background-color: var(--card-back-color);
+  color: var(--card-fore-color);
+  margin: var(--universal-margin);
+}
+
+.tes-agenda-side {
+  --tes-agenda-day-width: var(--tes-agenda-side-day-width);
+  --tes-agenda-x-padding: var(--tes-agenda-side-x-padding);
+}
+
+.tes-agenda-side .tes-agenda-controls {
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--universal-padding) var(--tes-agenda-x-padding) var(--universal-padding) var(--tes-agenda-x-padding);
+  width: calc(9 * var(--tes-agenda-day-width));
+}
+
+.tes-agenda-controls {
+  text-align: center;
+}
+
+.tes-agenda-controls .date {
+  font-weight: 500;
+}
+
+.tes-agenda-details article {
+  display: list-item;
+  list-style: none;
+  margin-bottom: 1rem !important;
+}
+
+.tes-agenda-details article:before {
+  content: "\25A0";
+  float: left;
+  margin-left: -2em;
+  width: 1em;
+}
+
+.tes-agenda-details-combaillaux:before {
+  color: var(--tes-agenda-event-combaillaux-color);
+}
+
+.tes-agenda-details-troupe:before {
+  color: var(--tes-agenda-event-troupe-color);
+}
+
+.tes-agenda-details article h3 {
+  margin-bottom: 0 !important;
+}
+
+.tes-agenda-details article .date {
+  font-size: 1rem;
+  font-weight: 300;
+  margin: 0;
+}
+
+.tes-agenda-details article p {
+  margin: 0;
+  padding-top: 0;
+}
+
+.tes-agenda-event-combaillaux {
+  background-color: var(--tes-agenda-event-combaillaux-color) !important;
+  color: #ddd;
+  font-weight: 900;
+}
+
+.tes-agenda-event-troupe {
+  background-color: var(--tes-agenda-event-troupe-color) !important;
+  color: #ddd;
+  font-weight: 900;
+}
+
+.days-container {
+  margin-left: auto;
+  margin-right: auto;
+  padding: var(--universal-padding) var(--tes-agenda-x-padding) var(--universal-padding) var(--tes-agenda-x-padding);
+  width: calc(7 * var(--tes-agenda-day-width));
+}
+
+.day, .day-header {
+  display: inline-block;
+  padding: var(--universal-padding) 0;
+  text-align: center;
+  width: var(--tes-agenda-day-width);
+}
+
+.day-header {
+  background-color: #eb291a;
+  color: #fff;
+  font-weight: 600;
+}
+
+.day {
+  background-color: #eb8d89;
+  color: var(--card-fore-color);
+  float: left;
+}
+
+.calendar-dow-0 {
+  clear: left;
+}
+
+.adjacent-month {
+  color: #ccc;
+}
+
+.event .tooltip {
+  width: 100%;
+}
+
+.today {
+  background-color: #ddd;
+  font-weight: 900;
+}

content/css/style-desktop.css

@@ -1,4 +1,11 @@
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 800px) {
+
+  :root {
+    --tes-agenda-front-day-width: 65px;
+    --tes-agenda-front-x-padding: 50px;
+    --tes-agenda-side-day-width: 35px;
+    --tes-agenda-side-x-padding: 0;
+  }
 
   .container {
     width: 1200px;
@@ -116,6 +123,22 @@
     margin-bottom: 0;
   }
 
+  /*
+   * Calendar
+   */
+
+  .tes-agenda-front .tes-agenda-noevent {
+    padding-top: 2em;
+  }
+
+  .tes-agenda-front .tes-agenda-controls .date {
+    font-size: 1.5rem;
+  }
+
+  .tes-agenda-details article h3 a {
+    font-size: 2rem;
+  }
+
   /*
    * Footer
    */

content/css/style-mobile.css

@@ -1,4 +1,12 @@
 @media screen and (max-width: 768px) {
+
+  :root {
+    --tes-agenda-front-day-width: 30px;
+    --tes-agenda-front-x-padding: 50px;
+    --tes-agenda-side-day-width: 30px;
+    --tes-agenda-side-x-padding: 0;
+  }
+
   .page-content {
     padding-top: 1rem;
   }
@@ -21,6 +29,18 @@
     margin: 0;
   }
 
+  /*
+   * Calendar
+   */
+
+  .tes-agenda-front .tes-agenda-controls .date {
+    font-size: 1rem;
+  }
+
+  .tes-agenda-details article h3 a {
+    font-size: 1em;
+  }
+
   /*
    * Footer
    */

content/css/style.css

@@ -53,6 +53,11 @@ h1 > small {
   text-align: center;
 }
 
+#sidebar section {
+  clear: both;
+  padding-top: 1em;
+}
+
 #sidebar h3 {
   font-variant: small-caps;
 }

content/js/agenda.js

@@ -0,0 +1,164 @@
+var extend_object = function (delegate, generator) {
+  return Object.assign(Object.create(delegate), generator())
+}
+
+var AgendaControler = {
+  init: function (template, data) {
+    this.data = data
+    this.container = $(template
+                       .replace('{{month}}', data.month)
+                       .replace('{{year}}', data.year))
+    this.days_container = this.container.find('.days')
+  },
+
+  insert_days_header: function () {
+    var header = $('<div class="headers">')
+
+    this.data.daysOfTheWeek.forEach(function (d) {
+      header.append($('<div class="day-header">' + d + '</div>'))
+    })
+    this.days_container.append(header)
+  }
+}
+
+var OpenAgendaControler = extend_object(AgendaControler, function () {
+  return {
+    setup: function (data) {
+      var template = '' +
+          '<div class="row">' +
+          '  <div class="col-sm-12 col-md-6">' +
+          '    <div class="days-container"><div class="days"></div></div>' +
+          '  </div>' +
+          '  <div class="col-sm-12 col-md-6">' +
+          '    <div class="tes-agenda-controls">' +
+          '      <button class="clndr-previous-button">&lt;</button>' +
+          '      <span class="date">{{month}} {{year}}</span>' +
+          '      <button class="clndr-next-button">&gt;</button>' +
+          '    </div>' +
+          '    <div class="tes-agenda-details"></div>' +
+          '  </div>' +
+          '</div>'
+      this.init(template, data)
+      this.events_container = this.container.find('.tes-agenda-details')
+      return this
+    },
+
+    render: function () {
+      this.insert_days_header()
+
+      this.data.days.forEach((day_data) => {
+        this.days_container.append(this.build_day(day_data))
+      })
+
+      if (this.data.eventsThisMonth.length != 0)
+        this.events_container.append(this.build_events(this.data.eventsThisMonth))
+      else
+        $('<p class="tes-agenda-noevent">Aucun événement pour ce mois-ci.</p>.').appendTo(this.events_container)
+
+      return this.container
+    },
+
+    build_day: function (data) {
+      var classes = data.classes
+      var content = data.day
+
+      data.events.forEach(function (event_data) {
+        classes += ' tes-agenda-event-' + event_data.section
+        content = '<a href="' + event_data.url + '">' + data.day + '</a>'
+      })
+      return $('<div class="' + classes + '">' + content + '</div>')
+    },
+
+    build_events: function (events) {
+      var articles = []
+      var url_sorted_events = {}
+
+      events.forEach(function (event_data) {
+        var a = url_sorted_events[event_data.url]
+
+        if (a === undefined) {
+          var desc = $('<p/>')
+
+          if (event_data.author != null)
+            desc.append('de ' + event_data.author)
+          if (event_data.company != null)
+            desc.append(' par ' + event_data.company)
+
+          a = $('<article class="tes-agenda-details-' + event_data.section + '"><div></div></article>')
+          a.append($('<h3><a href="' + event_data.url + '">' + event_data.title + '</a></h3>'))
+          a.append(desc)
+          articles.push(a)
+          url_sorted_events[event_data.url] = a
+        }
+
+        a.children(":first").append($('<p><span class="date">' + moment(event_data.date).format('LL') + '</span>, ' + event_data.place + '</p>'))
+      })
+      return articles
+    }
+  }
+})
+
+var SideAgendaControler = extend_object(AgendaControler, function () {
+  return {
+    setup: function (data, container) {
+      var template = '' +
+          '<section>' +
+          '  <div class="tes-agenda-controls">' +
+          '    <button class="clndr-previous-button">&lt;</button>' +
+          '    <span class="date">{{month}} {{year}}</span>' +
+          '    <button class="clndr-next-button">&gt;</button>' +
+          '  </div>' +
+          '  <div class="days-container"><div class="days"></div></div>' +
+          '  </div>' +
+          '</section>'
+      this.init(template, data)
+      this.section = container.data('section')
+      return this
+    },
+
+    render: function () {
+      this.insert_days_header()
+      this.data.days.forEach((day_data) => {
+        this.days_container.append(this.build_day(day_data))
+      })
+      return this.container
+    },
+
+    build_day: function (data) {
+      var classes = data.classes
+      var content = data.day
+
+      data.events.forEach((event_data) => {
+        if (event_data.section == this.section)
+          classes += ' tes-agenda-event-' + event_data.section
+        content = '<a href="' + event_data.url + '">' + data.day + '</a>'
+      })
+      return $('<div class="' + classes + '">' + content + '</div>')
+    }
+  }
+})
+
+$(document).ready(function () {
+  moment.locale('fr');
+  $.ajax({
+    url: "/agenda-events.json"
+  }).done(function (data) {
+    $('.tes-agenda').each(function () {
+      var parent = $(this)
+      var format = parent.data('format')
+      var renderer = null
+
+      if (format == 'open')
+        renderer = OpenAgendaControler
+      else
+        renderer = SideAgendaControler
+
+      parent.clndr({
+        events: data,
+        render: function (clndr_data) {
+          return Object.create(renderer).setup(clndr_data, parent).render()
+        }
+      })
+    })
+  })
+})

layouts/combaillaux.njk

@@ -3,26 +3,41 @@
 {% set site_section = "combaillaux" %}
 {% set date = moment().subtract(1, 'year') %}
 
+{% block scripts %}
+  <link rel="stylesheet" href="/css/agenda.css" />
+  <script src="/js/moment-with-locales.min.js"></script>
+  <script src="/js/jquery.min.js"></script>
+  <script src="/js/clndr.min.js"></script>
+  <script src="/js/agenda.js"></script>
+{% endblock %}
+
 {% block header %}
   <h1>Spectacles à Combaillaux</h1>
 {% endblock %}
 
 {% block main %}
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12 col-md-8">
-      <section>
-        {{ macros.iterate_shows(collections, "combaillaux", {
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12 col-md-8">
+        <section>
+          {{ macros.iterate_shows(collections, "combaillaux", {
             'after': date, 'render': macros.expose_show })
-        }}
-      </section>
-    </div>
+          }}
+        </section>
+      </div>
 
-    <div id="sidebar" class="col-sm-12 col-md-4">
-     <section>
-	     <div>
-		     <h2>Archives</h2>
-	     </div>
+      <div id="sidebar" class="col-sm-12 col-md-4">
+        <section>
+          <div>
+		        <h2>Agenda</h2>
+	        </div>
+          <div class="tes-agenda tes-agenda-side" data-format="side" data-section="combaillaux"></div>
+        </section>
+
+        <section>
+	        <div>
+		        <h2>Archives</h2>
+	        </div>
        {{ macros.iterate_shows(collections, "combaillaux", {
            'before': date, 'render': macros.expose_archive })
        }}

layouts/front.njk

@@ -2,32 +2,48 @@
 {% import "macros.njk" as macros %}
 {% set site_section = "intro" %}
 
+{% block scripts %}
+  <link rel="stylesheet" href="/css/agenda.css" />
+  <script src="/js/moment-with-locales.min.js"></script>
+  <script src="/js/jquery.min.js"></script>
+  <script src="/js/clndr.min.js"></script>
+  <script src="/js/agenda.js"></script>
+{% endblock %}
+
 {% block header %}
   <h1>Tous en Scène</h1>
 {% endblock %}
 
 {% block main %}
-<section class="container">
-  {{ contents | safe }}
-</section>
+  <section class="container">
+    {{ contents | safe }}
+  </section>
 
-<div class="container">
-  <div class="homepage-section-title col-sm">
-		<h2>Dernières Créations</h2>
-	</div>
-  <div class="row">
-    <div class="col-sm-12 col-md-6">
-      <section class="homepage-show card fluid">
-        {{ macros.expose_poster(collections['troupe_shows'][0]) }}
-      </section>
+  <section class="container">
+    <div class="homepage-section-title col-sm">
+		  <h2>Agenda</h2>
+	  </div>
+    <div class="tes-agenda tes-agenda-front" data-format="open"></div>
+  </section>
+
+  <section class="container">
+    <div class="homepage-section-title col-sm">
+		  <h2>Dernières Créations</h2>
+	  </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-6">
+        <section class="homepage-show card fluid">
+          {{ macros.expose_poster(collections['troupe_shows'][0]) }}
+        </section>
+      </div>
+      <div class="col-sm-12 col-md-6">
+        <section class="homepage-show card fluid">
+          {{ macros.expose_poster(collections['troupe_shows'][1]) }}
+        </section>
+      </div>
     </div>
-    <div class="col-sm-12 col-md-6">
-      <section class="homepage-show card fluid">
-        {{ macros.expose_poster(collections['troupe_shows'][1]) }}
-      </section>
-    </div>
-  </div>
-</div>
+  </section>
+
 <!-- <div class="container">
      <header class="col-sm">
 		 <h2>Actualités</h2>

layouts/troupe.njk

@@ -3,6 +3,14 @@
 {% set site_section = "troupe" %}
 {% set date = moment().subtract(1, 'year') %}
 
+{% block scripts %}
+  <link rel="stylesheet" href="/css/agenda.css" />
+  <script src="/js/moment-with-locales.min.js"></script>
+  <script src="/js/jquery.min.js"></script>
+  <script src="/js/clndr.min.js"></script>
+  <script src="/js/agenda.js"></script>
+{% endblock %}
+
 {% macro list_shows(show, config) %}
   <article>
     {{ macros.build_show_header(show, { 'display_date': show.creation }) }}
@@ -14,23 +22,30 @@
 {% endblock %}
 
 {% block main %}
-<div class="container">
-  <div class="row">
-    <div class="col-sm-12 col-md-8">
-      <div>
-		    <h2>Spectacles en cours</h2>
-      </div>
-      <div>
-        {{ macros.iterate_shows(collections, "troupe_shows", {
-          'no_display_date': true, 'after': date, 'render': macros.expose_show })
-        }}
-      </div>
-    </div>
-
-    <div id="sidebar" class="4u">
-      <section>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12 col-md-8">
         <div>
-		      <h2>Toutes les pièces</h2>
+		      <h2>Spectacles en cours</h2>
+        </div>
+        <div>
+          {{ macros.iterate_shows(collections, "troupe_shows", {
+            'no_display_date': true, 'after': date, 'render': macros.expose_show })
+          }}
+        </div>
+      </div>
+
+      <div id="sidebar" class="4u">
+        <section>
+          <div>
+		        <h2>Agenda</h2>
+	        </div>
+          <div class="tes-agenda tes-agenda-side" data-format="side" data-section="troupe"></div>
+        </section>
+
+        <section>
+          <div>
+		        <h2>Toutes les pièces</h2>
 	      </div>
         {{ macros.iterate_shows(collections, "troupe_creations", {
           'render': list_shows })