prototype stateful login/signup nav, ref #45

assets/_src/js/_sessionstate.js

@@ -0,0 +1,57 @@
+
+var SessionState = (function(w, d, $) {
+
+    'use strict'
+
+    var app, _private, _config
+
+    _config = {
+        url:             'https://www.ascribe.io/api/users/',
+        appLinksDefault: $('.app-links--default'),
+        appLinksActive:  $('.app-links--active')
+    }
+
+    _private = {
+        getCookie: function(name) {
+            var parts = document.cookie.split(';');
+
+            for(var i = 0; i < parts.length; i++) {
+                if(parts[i].indexOf(name + '=') > -1) {
+                    return parts[i].split('=').pop();
+                }
+            }
+        },
+        checkSession: function() {
+            $.ajax({
+                method: 'GET',
+                url: _config.url,
+                headers: {
+                    'csrf-token': _private.getCookie('csrftoken2') // be sure to NOT forget the `2` here!!!
+                }
+            }).done(function() {
+
+                _config.appLinksDefault.addClass('hide');
+                _config.appLinksActive.removeClass('hide');
+
+                console.log('active and valid session');
+
+            }).fail(function() {
+
+                _config.appLinksDefault.addClass('hide');
+                _config.appLinksActive.removeClass('hide');
+
+                console.log('no session active');
+                
+            });
+        }
+    }
+
+    app = {
+        init: function() {
+            _private.checkSession()
+        }
+    }
+
+    return app
+
+})(window, document, jQuery)

assets/_src/js/ascribe.js

@@ -1,6 +1,10 @@
 
+//=include _sessionstate.js
+
 $(document).ready(function(){
 
+    SessionState.init();
+
     slider();
     featuredFAQ();
     marketplaces();

assets/_src/less/ascribe/_header.less

@@ -176,6 +176,8 @@
             color: @pink;
         }
     }
+
+    nav { display: inline-block; }
 }
 
 .mobile-nav {

assets/_src/less/ascribe/_helpers.less

@@ -1,3 +1,14 @@
+
+
+.hide {
+    display: none !important;
+}
+
+.show {
+    display: block !important;
+}
+
+
 // CLEARFIX
 // Apply .clearfix to a non-floated container element with floated elements in it
 // to ensure the container has a height. Use .no-clearfix to reset a clearfix

assets/_src/less/ascribe/_hero.less

@@ -29,68 +29,6 @@
             }
         }
     }
-    nav {
-        float: left;
-        margin-top: 9px;
-        .tourNavText;
-
-        ul {
-            &:extend(.list-unstyled all);
-            padding: 0 35px;
-            position: absolute;
-
-            &.active {
-                li {
-                    display: block;
-                    &.current-menu-item {
-                        a {
-                            &:after {
-                                transform: rotate(180deg);
-                            }
-                        }
-                    }
-                }
-            }
-
-            li {
-                display: none;
-                text-align: right;
-
-                &.current-menu-item {
-                    display: block;
-
-                    a {
-                        position: relative;
-                        font-size: 25px;
-
-                        &:before {
-                            content: 'for ';
-                            display: inline-block;
-                            margin-right: 6px;
-                        }
-                        &:after {
-                            content: '';
-                            background-image: url(../../img/arrow.png);
-                            background-repeat: no-repeat;
-                            width: 10px;
-                            height: 8px;
-                            display: inline-block;
-                            position: absolute;
-                            top: 10px;
-                            right: -25px;
-                            font-size: 15px;
-                        }
-                    }
-                }
-                a {
-                    width: 100%;
-                    font-size: 20px;
-                }
-            }
-
-
-        }
-    }
     .description {
         clear: both;
         width: 80%;
@@ -157,3 +95,67 @@
         }
     }
 }
+
+
+.tour-switcher {
+    float: left;
+    margin-top: 9px;
+    .tourNavText;
+
+    ul {
+        &:extend(.list-unstyled all);
+        padding: 0 35px;
+        position: absolute;
+
+        &.active {
+            li {
+                display: block;
+                &.current-menu-item {
+                    a {
+                        &:after {
+                            transform: rotate(180deg);
+                        }
+                    }
+                }
+            }
+        }
+
+        li {
+            display: none;
+            text-align: right;
+
+            &.current-menu-item {
+                display: block;
+
+                a {
+                    position: relative;
+                    font-size: 25px;
+
+                    &:before {
+                        content: 'for ';
+                        display: inline-block;
+                        margin-right: 6px;
+                    }
+                    &:after {
+                        content: '';
+                        background-image: url(../../img/arrow.png);
+                        background-repeat: no-repeat;
+                        width: 10px;
+                        height: 8px;
+                        display: inline-block;
+                        position: absolute;
+                        top: 10px;
+                        right: -25px;
+                        font-size: 15px;
+                    }
+                }
+            }
+            a {
+                width: 100%;
+                font-size: 20px;
+            }
+        }
+
+
+    }
+}

template-blogheader.php

@@ -14,7 +14,9 @@ require 'controller/init.php';
         <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a>
         <a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
         <div class="app-links">
-            <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
+            <nav class="app-links--default"><a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a></nav>
+            <nav class="app-links--active hide"><a href="/app">Web App</a></nav>
+            
             <img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
         </div>
         <nav class="tour-switcher"><?php wp_nav_menu( array(

template-header.php

@@ -26,7 +26,9 @@ require 'controller/init.php';
                     class="logo phone-only">
             </a>
             <div class="app-links">
-                <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
+
+                <nav class="app-links--default"><a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a></nav>
+                <nav class="app-links--active hide"><a href="/app">Web App</a></nav>
 
                 <button class="hamburger phone-only">
                     <span></span>

template-tour.php

@@ -32,7 +32,8 @@ $controller     = new Controller();
             </a>
 
             <div class="app-links">
-                <a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
+                <nav class="app-links--default"><a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a></nav>
+                <nav class="app-links--active hide"><a href="/app">Web App</a></nav>
 
                 <button class="hamburger phone-only">
                     <span></span>