From: Philippe Barbosa <contact@philippebarbosa.com>
Date: Thu, 7 Apr 2016 09:24:26 +0000 (+0200)
Subject: Tabs for locations
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=2fb372f150976831f840be910da271ba6f0c0113;p=mezzo.git

Tabs for locations
---

diff --git a/app/festival/static/js/plugins/tabs.js b/app/festival/static/js/plugins/tabs.js
new file mode 100755
index 00000000..7b22f759
--- /dev/null
+++ b/app/festival/static/js/plugins/tabs.js
@@ -0,0 +1,84 @@
+(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/modules/push-calendar.scss b/app/festival/static/scss/modules/push-calendar.scss
new file mode 100644
index 00000000..5835e27d
--- /dev/null
+++ b/app/festival/static/scss/modules/push-calendar.scss
@@ -0,0 +1,7 @@
+.push__calendar {
+  margin-top: -2rem;
+}
+
+.push__calendar__item {
+  @extend .share__link__item;
+}
\ No newline at end of file
diff --git a/app/festival/static/scss/modules/tabs.scss b/app/festival/static/scss/modules/tabs.scss
new file mode 100755
index 00000000..3d5fe758
--- /dev/null
+++ b/app/festival/static/scss/modules/tabs.scss
@@ -0,0 +1,93 @@
+/**
+ * Tabs navigation
+ */
+.c-tabs-nav {
+  display: block;
+  float: left;
+  text-align: left;
+  width: 30%;
+}
+
+.c-tabs-nav__link {
+  // margin-right: 4px;
+  // padding: 12px;
+  color: $main_color;
+  display: block;
+  // background-color: #b3b3b3;
+  // text-align: center;
+  -webkit-transition: color 0.3s;
+          transition: color 0.3s;
+}
+
+.c-tabs-nav__link:last-child {
+  margin-right: 0;
+}
+
+.c-tabs-nav__link:hover {
+  // color: #6d6d6d;
+}
+
+.c-tabs-nav__link.is-active {
+  color: darken($main_color, 20);
+  // background-color: #e7e7e7;
+}
+
+.c-tabs-nav__link i,
+.c-tabs-nav__link span {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.c-tabs-nav__link i {
+  font-size: 18px;
+}
+
+.c-tabs-nav__link span {
+  display: none;
+  font-size: 18px;
+}
+
+@media all and (min-width: 720px) {
+  .c-tabs-nav__link i {
+    margin-bottom: 12px;
+    font-size: 22px;
+  }
+  .c-tabs-nav__link span {
+    display: block;
+  }
+}
+
+/**
+ * Tab
+ */
+.c-tab {
+  display: none;
+  // background-color: #e7e7e7;
+  float: left;
+  width: 70%;
+}
+
+.c-tab.is-active {
+  display: block;
+}
+
+.c-tab__content {
+  padding-left: .5rem;
+}
+
+/**
+ * Tabs no-js fallback
+ */
+.c-tabs.no-js .c-tabs-nav {
+  display: none;
+}
+
+.c-tabs.no-js .c-tab {
+  display: block;
+  margin-bottom: 1.5rem;
+}
+
+.c-tabs.no-js .c-tab:last-child {
+  margin-bottom: 0;
+}
\ No newline at end of file