From ee76f2f91fa626d0a24530efebf59ad35d6ebd44 Mon Sep 17 00:00:00 2001
From: Philippe Barbosa <contact@philippebarbosa.com>
Date: Wed, 6 Apr 2016 18:45:57 +0200
Subject: [PATCH] Location style, to be updated

---
 app/festival/static/css/index.css             | 97 +++++++++++++++++++
 app/festival/static/js/index.js               | 12 +++
 app/festival/static/js/plugins.js             | 85 ++++++++++++++++
 app/festival/static/scss/index.scss           |  1 +
 app/templates/agenda/event_location_list.html | 45 +++++----
 5 files changed, 221 insertions(+), 19 deletions(-)

diff --git a/app/festival/static/css/index.css b/app/festival/static/css/index.css
index dcc7877f..95c34531 100755
--- a/app/festival/static/css/index.css
+++ b/app/festival/static/css/index.css
@@ -3473,6 +3473,92 @@ th {
   color: #555;
 }
 
+/**
+ * Tabs navigation
+ */
+/* line 4, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav {
+  display: block;
+  float: left;
+  text-align: left;
+  width: 30%;
+}
+
+/* line 11, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav__link {
+  color: #d2ba88;
+  display: block;
+  transition: color 0.3s;
+}
+
+/* line 22, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav__link:last-child {
+  margin-right: 0;
+}
+
+/* line 30, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav__link.is-active {
+  color: #b18d43;
+}
+
+/* line 35, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav__link i,
+.c-tabs-nav__link span {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+/* line 42, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav__link i {
+  font-size: 18px;
+}
+
+/* line 46, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs-nav__link span {
+  display: none;
+  font-size: 18px;
+}
+
+/**
+ * Tab
+ */
+/* line 64, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tab {
+  display: none;
+  float: left;
+  width: 70%;
+}
+
+/* line 71, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tab.is-active {
+  display: block;
+}
+
+/* line 75, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tab__content {
+  padding-left: .5rem;
+}
+
+/**
+ * Tabs no-js fallback
+ */
+/* line 82, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs.no-js .c-tabs-nav {
+  display: none;
+}
+
+/* line 86, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs.no-js .c-tab {
+  display: block;
+  margin-bottom: 1.5rem;
+}
+
+/* line 91, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+.c-tabs.no-js .c-tab:last-child {
+  margin-bottom: 0;
+}
+
 /* line 1, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/user.scss */
 .user__panel {
   margin: 1rem auto;
@@ -3481,6 +3567,17 @@ th {
   color: #000;
   text-transform: uppercase;
 }
+@media all and (min-width: 720px){
+  /* line 52, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+  .c-tabs-nav__link i{
+    margin-bottom: 12px;
+    font-size: 22px;
+  }
+  /* line 56, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/modules/tabs.scss */
+  .c-tabs-nav__link span{
+    display: block;
+  }
+}
 @media (min-width: 769px){
   /* line 137, /Users/philippebarbosa/Sites/ircam-manifeste/app/festival/static/scss/base/_forms.scss */
   .sticked-form{
diff --git a/app/festival/static/js/index.js b/app/festival/static/js/index.js
index e2569fd4..ef5fa0ee 100644
--- a/app/festival/static/js/index.js
+++ b/app/festival/static/js/index.js
@@ -126,4 +126,16 @@ $(function() {
 
     $("#instafeed").length && t.run();
 
+    /**
+     *
+     */
+
+     var myTabs = tabs({
+        el: '#tabs',
+        tabNavigationLinks: '.c-tabs-nav__link',
+        tabContentContainers: '.c-tab'
+     });
+
+     myTabs.init();
+
 });
\ No newline at end of file
diff --git a/app/festival/static/js/plugins.js b/app/festival/static/js/plugins.js
index c6ac99b2..4aa6875f 100755
--- a/app/festival/static/js/plugins.js
+++ b/app/festival/static/js/plugins.js
@@ -1531,3 +1531,88 @@
  */
 
 (function(){"use strict";function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,s=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if(e instanceof RegExp){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;t<e.length;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),s="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(s?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;t<e.length;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,s=this.getListenersAsObject(e);for(r in s)s.hasOwnProperty(r)&&(i=t(s[r],n),-1!==i&&s[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,s=e?this.removeListener:this.addListener,o=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)s.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?s.call(this,i,r):o.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if(e instanceof RegExp)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,s,o,h=this.getListenersAsObject(e);for(s in h)if(h.hasOwnProperty(s))for(n=h[s].slice(0),r=n.length;r--;)i=n[r],i.once===!0&&this.removeListener(e,i.listener),o=i.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,i.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=s,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:r.EventEmitter=e}).call(this),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter"],function(n){return t(e,n)}):"object"==typeof module&&module.exports?module.exports=t(e,require("wolfy87-eventemitter")):e.imagesLoaded=t(e,e.EventEmitter)}(window,function(e,t){function n(e,t){for(var n in t)e[n]=t[n];return e}function i(e){var t=[];if(Array.isArray(e))t=e;else if("number"==typeof e.length)for(var n=0;n<e.length;n++)t.push(e[n]);else t.push(e);return t}function r(e,t,s){return this instanceof r?("string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=i(e),this.options=n({},this.options),"function"==typeof t?s=t:n(this.options,t),s&&this.on("always",s),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new r(e,t,s)}function s(e){this.img=e}function o(e,t){this.url=e,this.element=t,this.img=new Image}var h=e.jQuery,a=e.console;r.prototype=Object.create(t.prototype),r.prototype.options={},r.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},r.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),this.options.background===!0&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&u[t]){for(var n=e.querySelectorAll("img"),i=0;i<n.length;i++){var r=n[i];this.addImage(r)}if("string"==typeof this.options.background){var s=e.querySelectorAll(this.options.background);for(i=0;i<s.length;i++){var o=s[i];this.addElementBackgroundImages(o)}}}};var u={1:!0,9:!0,11:!0};return r.prototype.addElementBackgroundImages=function(e){var t=getComputedStyle(e);if(t)for(var n=/url\((['"])?(.*?)\1\)/gi,i=n.exec(t.backgroundImage);null!==i;){var r=i&&i[2];r&&this.addBackground(r,e),i=n.exec(t.backgroundImage)}},r.prototype.addImage=function(e){var t=new s(e);this.images.push(t)},r.prototype.addBackground=function(e,t){var n=new o(e,t);this.images.push(n)},r.prototype.check=function(){function e(e,n,i){setTimeout(function(){t.progress(e,n,i)})}var t=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(t){t.once("progress",e),t.check()}):void this.complete()},r.prototype.progress=function(e,t,n){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emit("progress",this,e,t),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+n,e,t)},r.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emit(e,this),this.emit("always",this),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},s.prototype=Object.create(t.prototype),s.prototype.check=function(){var e=this.getIsImageComplete();return e?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},s.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},s.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("progress",this,this.img,t)},s.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},s.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},s.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},s.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},o.prototype=Object.create(s.prototype),o.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var e=this.getIsImageComplete();e&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},o.prototype.unbindEvents=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this)},o.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("progress",this,this.element,t)},r.makeJQueryPlugin=function(t){t=t||e.jQuery,t&&(h=t,h.fn.imagesLoaded=function(e,t){var n=new r(this,e,t);return n.jqDeferred.promise(h(this))})},r.makeJQueryPlugin(),r});
+
+(function() {
+
+  'use strict';
+
+  /**
+   * tabs
+   *
+   * @description The Tabs component.
+   * @param {Object} options The options hash
+   */
+  var tabs = function(options) {
+
+    var el = document.querySelector(options.el);
+    var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
+    var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
+    var activeIndex = 0;
+    var initCalled = false;
+
+    /**
+     * init
+     *
+     * @description Initializes the component by removing the no-js class from
+     *   the component, and attaching event listeners to each of the nav items.
+     *   Returns nothing.
+     */
+    var init = function() {
+      if (!initCalled) {
+        initCalled = true;
+        el.classList.remove('no-js');
+
+        for (var i = 0; i < tabNavigationLinks.length; i++) {
+          var link = tabNavigationLinks[i];
+          handleClick(link, i);
+        }
+      }
+    };
+
+    /**
+     * handleClick
+     *
+     * @description Handles click event listeners on each of the links in the
+     *   tab navigation. Returns nothing.
+     * @param {HTMLElement} link The link to listen for events on
+     * @param {Number} index The index of that link
+     */
+    var handleClick = function(link, index) {
+      link.addEventListener('click', function(e) {
+        e.preventDefault();
+        goToTab(index);
+      });
+    };
+
+    /**
+     * goToTab
+     *
+     * @description Goes to a specific tab based on index. Returns nothing.
+     * @param {Number} index The index of the tab to go to
+     */
+    var goToTab = function(index) {
+      if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
+        tabNavigationLinks[activeIndex].classList.remove('is-active');
+        tabNavigationLinks[index].classList.add('is-active');
+        tabContentContainers[activeIndex].classList.remove('is-active');
+        tabContentContainers[index].classList.add('is-active');
+        activeIndex = index;
+      }
+    };
+
+    /**
+     * Returns init and goToTab
+     */
+    return {
+      init: init,
+      goToTab: goToTab
+    };
+
+  };
+
+  /**
+   * Attach to global namespace
+   */
+  window.tabs = tabs;
+
+})();
\ No newline at end of file
diff --git a/app/festival/static/scss/index.scss b/app/festival/static/scss/index.scss
index b5642dc8..d09cbf5a 100755
--- a/app/festival/static/scss/index.scss
+++ b/app/festival/static/scss/index.scss
@@ -82,4 +82,5 @@
         'modules/share-links',
         'modules/push-calendar',
         'modules/calendar',
+        'modules/tabs',
         'modules/user';
\ No newline at end of file
diff --git a/app/templates/agenda/event_location_list.html b/app/templates/agenda/event_location_list.html
index 0d226e4f..8ff66638 100644
--- a/app/templates/agenda/event_location_list.html
+++ b/app/templates/agenda/event_location_list.html
@@ -28,27 +28,34 @@
 
 {% block main %}
 
-{% for location in object_list %}
-    {{ location.title }} <br>
-{% endfor %}
+<div id="tabs" class="c-tabs">
+  <div class="c-tabs-nav">
+    {% for location in object_list %}
+        <a href="#" class="c-tabs-nav__link">{{ location.title }}</a>
+    {% endfor %}
+  </div>
+  {% for location in object_list %}
+      <div class="c-tab">
+          <div class="c-tab__content">
+              <h3 style="margin-top: 0;">{{ location.title }}</h3>
+                  {% block event_detail_location %}
+                  {% editable event.location %}
+                  <p>
+                      {{ location.address }}<br />
+                      <a href="{{ location|google_nav_url }}" target="_blank" class="">
+                          Get Directions
+                      </a>
+                  </p>
+                  <a href="{{ location|google_nav_url }}" target="_blank" class="">
+                  {% google_static_map location 900 300 15 %}
+                  </a/>
+                  {% endeditable %}
+                  {% endblock %}
+          </div>
+      </div>
+  {% endfor %}
 
 
-{% for location in object_list %}
-    <h3>{{ location.title }}</h3>
-     {% block event_detail_location %}
-     {% editable event.location %}
-     <p>
-         {{ location.address|linebreaksbr }}<br />
-         <a href="{{ location|google_nav_url }}" target="_blank" class="">
-             Get Directions
-         </a>
-     </p>
-     <a href="{{ location|google_nav_url }}" target="_blank" class="">
-      {% google_static_map location 900 300 15 %}
-     </a/>
-     {% endeditable %}
-     {% endblock %}
-{% endfor %}
 
 {% endblock %}
 
-- 
2.39.5