Feature/scripts improvements (#4)

* Improve how we open the sidebar by making the code more general

* Resize captcha only if the sidebar is open

* Close sidebar by clicking on an actual overlay element.

* Add sidebar opening feature inside Audiencias Interativas

Author: cfviotti

edem-navigation.html

@@ -20,10 +20,10 @@
     <nav class="actions">
       {# <a class="link">Fale conosco</a> #}
       {% if user.is_authenticated %}
-        <a class="link JS-openSidebar JS-showProfile">Menu</a>
+        <a class="link JS-openSidebar" data-sidebar-content="profile">Menu</a>
       {% else %}
-        <a class="link JS-openSidebar JS-showSignin">Entrar</a>
-        <a class="link -highlight JS-openSidebar JS-showSignup">Cadastrar</a>
+        <a class="link JS-openSidebar" data-sidebar-content="signin">Entrar</a>
+        <a class="link -highlight JS-openSidebar" data-sidebar-content="signup">Cadastrar</a>
       {% endif %}
     </nav>
   </div>

static/edem-navigation/js/edem-navigation.js

@@ -1,3 +1,20 @@
+function closeEdemSidebar() {
+  $('.JS-openSidebar').removeClass('-active');
+  $('body').removeClass('-sidebaropen');
+}
+
+function openEdemSidebar(option) {
+  var contentSelector = '.JS-' + option + 'Content';
+  var linkSelector = '.JS-openSidebar[data-sidebar-content="' + option + '"]';
+
+  $('body').addClass('-sidebaropen');
+  $('.JS-sidebarContent').removeClass('-show');
+  $('.JS-openSidebar').removeClass('-active');
+  $(linkSelector).addClass('-active');
+  $(contentSelector).addClass('-show');
+  resizeRecaptcha();
+}
+
 function resizeRecaptcha() {
   if (!$('.JS-signupContent').hasClass('JS-signupFinished')){ // Only run if signup is not completed
     var accessWidth = $('.JS-signUpForm')[0].getBoundingClientRect().width; // Get value with decimals
@@ -38,49 +55,31 @@ function showSuccessSignupMessage() {
 
 // Resize reCAPTCHA on window resize
 $(window).resize(function(){
-  resizeRecaptcha();
+  if ($('body').hasClass('-sidebaropen')) {
+    resizeRecaptcha();
+  }
 });
 
-// eDemocracia open sidebar and its contents
+// Create and append to body an overlay div for when the sidebar is opened
+$('<div/>', {class: 'edem-overlay'}).appendTo('body');
+
+// Open sidebar via the topbar
 $('.JS-openSidebar').click(function() {
   if ($(this).hasClass('-active')) {
-    $(this).removeClass('-active');
-    $('body').removeClass('-sidebaropen');
-
+    closeEdemSidebar();
   } else {
-    $('body').addClass('-sidebaropen')
-    $('.JS-sidebarContent').removeClass('-show');
-    $('.JS-openSidebar').removeClass('-active');
-    $(this).addClass('-active');
-
-    if ($(this).hasClass('JS-showSignin')) {
-      $('.JS-signinContent').addClass('-show');
-
-    } else if ($(this).hasClass('JS-showSignup')) {
-      $('.JS-signupContent').addClass('-show');
-      resizeRecaptcha();
-
-    } else if ($(this).hasClass('JS-showProfile')) {
-      $('.JS-profileContent').addClass('-show');
-    }
+    openEdemSidebar($(this).data('sidebarContent'));
   }
 });
 
 // eDemocracia sidebar close button
 $('.JS-closeSidebar').click(function(){
-  $('.JS-openSidebar').removeClass('-active');
-  $('body').removeClass('-sidebaropen');
+  closeEdemSidebar();
 });
 
-// Close sidebar if click is outside of sidebar or topbar
-document.addEventListener('click', function(e) {
-  var onEdemCore = $(e.target).closest('.edem-topbar, .edem-sidebar').length;
-  var sidebarOpen = $('body').hasClass('-sidebaropen');
-
-  if (!onEdemCore && sidebarOpen ) {
-    $('.JS-openSidebar').removeClass('-active');
-    $('body').removeClass('-sidebaropen');
-  }
+// Close sidebar if click on the overlay
+$('.edem-overlay').click(function(){
+  closeEdemSidebar();
 });
 
 // Detect when input is filled
@@ -195,3 +194,11 @@ $('.JS-signUpForm').submit(function(event) {
     });
   }
 });
+
+// XXX This should be exclusively on Audiencias Plugin whenever is possible
+if (location.href.match(/audiencias/)) {
+  $(document).on('click', 'a[href^="/home/?next="]', function(e){
+    e.preventDefault();
+    openEdemSidebar('signin');
+  });
+}

static/edem-navigation/scss/base/_unclassed.scss

@@ -3,18 +3,6 @@ body {
   position: relative;
   width: 100%;
   transition: margin-left 0.3s $swift-out;
-
-  &::after {
-    content: '';
-    position: fixed;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    top: 0;
-    background-color: $edem-color-primary;
-    z-index: 100000;
-    transition: opacity 0.3s ease, width 0s 0.3s, height 0s 0.3s;
-  }
 }
 
 // TODO Remove this after getting rid of Foundation!!

static/edem-navigation/scss/components/_edem-overlay.scss

@@ -0,0 +1,18 @@
+.edem-overlay {
+  position: fixed;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  top: 0;
+  background-color: $edem-color-primary;
+  z-index: 100000;
+  transition: opacity 0.3s ease, width 0s 0.3s, height 0s 0.3s;
+
+  body.-sidebaropen & {
+    width: 100%;
+    height: 100vh;
+    opacity: 0.8;
+    cursor: pointer;
+    transition: opacity 0.3s 0s ease, width 0s 0s, height 0s 0s;
+  }
+}

static/edem-navigation/scss/components/_edem-sidebar.scss

@@ -154,11 +154,4 @@
 body.-sidebaropen {
   margin-left: calc(#{$edem-sidebar-width} * -1); // Calc to give the variable in negative value
   overflow: hidden;
-  &::after {
-    width: 100%;
-    height: 100vh;
-    opacity: 0.8;
-    cursor: pointer;
-    transition: opacity 0.3s 0s ease, width 0s 0s, height 0s 0s;
-  }
 }

static/edem-navigation/scss/edem.scss

@@ -14,6 +14,7 @@
 // Components
 @import 'components/edem-topbar';
 @import 'components/edem-sidebar';
+@import 'components/edem-overlay';
 @import 'components/form-field';
 @import 'components/edem-button';
 @import 'components/edem-close-button';