made the header more generic to serve other functions

app/assets/javascripts/application.js

@@ -42,7 +42,5 @@
 //= require ./src/Metamaps.Mapper
 //= require ./src/Metamaps.Admin
 //= require ./src/Metamaps.Import
+//= require ./src/Metamaps.Header
 //= require ./src/Metamaps.JIT
-//= require_directory ./shims
-// require_directory ./require
-// require_directory ./famous

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -61,23 +61,22 @@ $(document).ready(function () {
       Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
       if (Metamaps.currentPage === "mapper") {
           Metamaps.Views.exploreMaps.fetchUserThenRender();
+          Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, Metamaps.Maps.Mapper.mapperId)
       }
       else {
           Metamaps.Views.exploreMaps.render();
+          Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, Metamaps.currentPage)
       }
       Metamaps.GlobalUI.showDiv('#exploreMaps')
-      //f.explore.set(Metamaps.currentPage, Metamaps.Maps.Mapper.mapperId);
       Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
   }
-  else if (Metamaps.currentSection === "") {
+  else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) {
-      if (Metamaps.Active.Mapper) {
       Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
       Metamaps.Views.exploreMaps.render();
       Metamaps.GlobalUI.showDiv('#exploreMaps')
-          //f.explore.set('active');
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
       Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
   }
-  }
   else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
     Metamaps.Loading.show()
     Metamaps.JIT.prepareVizData()

app/assets/javascripts/src/Metamaps.Header.js

@@ -0,0 +1,22 @@
+var Metamaps = Metamaps || {}
+
+Metamaps.Header = {
+  init: function () {
+
+  },
+  fetchUserThenChangeSection: function (signedIn, mapperId) {
+    $.ajax({
+       url: '/users/' + mapperId + '.json',
+       success: function (response) {
+         Metamaps.Header.changeSection(signedIn, 'mapper', response.image, response.name)
+       },
+       error: function () {}
+    }); 
+  },
+  changeSection: function (signedIn, section, userAvatar, userName) {
+    ReactDOM.render(
+      React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }),
+      document.getElementById('exploreMapsHeader')
+    );
+  }
+}

app/assets/stylesheets/clean.css.erb

@@ -25,7 +25,8 @@
 }
 
 #yield {
-
+  position: absolute;
+  width: 100%;
 }
 
 #toast {

app/views/doorkeeper/applications/_script.html.erb

@@ -1,8 +1,8 @@
 <script type="text/javascript">
   Metamaps.Apps = {
     init: function () {
-      Metamaps.Famous.explore.setApps('registered');
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'registered');
-      Metamaps.Famous.explore.show();
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
       Metamaps.GlobalUI.Search.open();
       Metamaps.GlobalUI.Search.lock();
     }

app/views/doorkeeper/authorized_applications/_script.html.erb

@@ -1,8 +1,8 @@
 <script type="text/javascript">
   Metamaps.Apps = {
     init: function () {
-      Metamaps.Famous.explore.setApps('authorized');
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'authorized');
-      Metamaps.Famous.explore.show();
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
       Metamaps.GlobalUI.Search.open();
       Metamaps.GlobalUI.Search.lock();
     }

app/views/layouts/doorkeeper.html.erb

@@ -33,7 +33,7 @@
             <% end %>
             <%= render :partial => 'layouts/lowermapelements' %>
 
-            <div id="famousOverlay"></div>
+            <div id="exploreMapsHeader"></div>
             <div id="loading"></div>
         </div>
 

frontend/src/components/ExploreHeader.js

@@ -1,33 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-
-class ExploreHeader extends Component {
-  render = () => {
-    const signedIn = this.props.signedIn
-    return (
-      <div className="exploreMapsBar exploreElement">
-        <div className="exploreMapsMenu">
-          <div className="exploreMapsCenter">
-            {signedIn ? <a href="/explore/mine" className="myMaps exploreMapsButton">
-              <div className="exploreMapsIcon"></div>
-              My Maps
-            </a> : null }
-            {signedIn ? <a href="/explore/shared" className="sharedMaps exploreMapsButton">
-              <div className="exploreMapsIcon"></div>
-              Shared With Me
-            </a> : null }
-            <a href={signedIn ? "/" : "/explore/active"}  className="activeMaps exploreMapsButton">
-              <div className="exploreMapsIcon"></div>
-              Recently Active
-            </a>
-            {!signedIn ? <a href="/explore/featured" className="featuredMaps exploreMapsButton">
-              <div className="exploreMapsIcon"></div>
-              Featured Maps
-            </a> : null }
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default ExploreHeader

frontend/src/components/Header.js

@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react'
+
+class Header extends Component {
+  render = () => {
+    const signedIn = this.props.signedIn
+    const section = this.props.section
+    var activeClass = (title) => {
+      var forClass = "exploreMapsButton"
+      forClass += " " + title + "Maps"
+      if (title == "my" && section == "mine" ||
+          title == section) forClass += " active"
+      return forClass
+    }
+
+    const explore = section == "mine" || section == "active" || section == "shared" || section == "featured"
+    const mapper = section == "mapper"
+    const apps = section == "registered" || section == "authorized"
+
+    return (
+      <div className="exploreMapsBar exploreElement">
+        <div className="exploreMapsMenu">
+          <div className="exploreMapsCenter">
+            {signedIn && explore ? <a href="/explore/mine" className={activeClass("my")}>
+              <div className="exploreMapsIcon"></div>
+              My Maps
+            </a> : null }
+            {signedIn && explore ? <a href="/explore/shared" className={activeClass("shared")}>
+              <div className="exploreMapsIcon"></div>
+              Shared With Me
+            </a> : null }
+            {explore ? <a href={signedIn ? "/" : "/explore/active"}  className={activeClass("active")}>
+              <div className="exploreMapsIcon"></div>
+              Recently Active
+            </a> : null }
+            {!signedIn && explore ? <a href="/explore/featured" className={activeClass("featured")}>
+              <div className="exploreMapsIcon"></div>
+              Featured Maps
+            </a> : null }
+            {mapper ? <div className='exploreMapsButton active mapperButton'>
+                <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
+                <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
+                <div className='clearfloat'></div>
+              </div> : null }
+            {apps ? <a href="/oauth/applications" className={"activeMaps exploreMapsButton"  + (section == "registered" ? " active" : "")} data-bypass="true">
+              <div className="exploreMapsIcon"></div>
+              Registered Apps
+            </a> : null }
+            {apps ? <a href="/oauth/authorized_applications" className={"featuredMaps exploreMapsButton" + (section == "authorized" ? " active" : "")} data-bypass="true">
+              <div className="exploreMapsIcon"></div>
+              Authorized Apps
+            </a> : null }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Header

frontend/src/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import Backbone from 'backbone'
 import _ from 'underscore'
-import ExploreHeader from './components/ExploreHeader'
+import Header from './components/Header.js'
 
 // this is optional really, if we import components directly React will be
 // in the bundle, so we won't need a global reference
@@ -14,9 +14,5 @@ window._ = _
 
 window.Metamaps = window.Metamaps || {}
 window.Metamaps.ReactComponents = {
-  ExploreHeader
+  Header
 }
-
-ReactDOM.render(
-  <ExploreHeader signedIn={true} active="featured" />, document.getElementById('exploreMapsHeader')
-);

public/famous/main.js

@@ -1,36 +0,0 @@
-define(function(require, exports, module) {
-
-Metamaps.Famous = {};
-Metamaps.Famous.build = function () {
-    // import dependencies
-    var Engine = require('famous/core/Engine');
-    var Modifier = require('famous/core/Modifier');
-    var Transform = require('famous/core/Transform');
-    var Surface = require('famous/core/Surface');
-    var Timer = require('famous/utilities/Timer');
-    var Scrollview = require('famous/views/Scrollview');
-    var ContainerSurface = require('famous/surfaces/ContainerSurface');
-    var RenderNode = require('famous/core/RenderNode');
-
-    var templates = require('templates');
-
-    // create the main context
-    var famous = document.getElementById('famousOverlay');
-
-    var f = Metamaps.Famous;
-
-    f.mainContext = Engine.createContext(famous);
-    f.Surface = Surface;
-    f.Modifier = Modifier;
-    f.Transform = Transform;
-
-
-    // INFOVIS
-
-    //Metamaps.Views.exploreMaps.collection.getMaps();
-    f.loadMaps = function () {
-        
-    };
-
-}// build
-});

public/famous/templates.js

@@ -1,36 +0,0 @@
-define(function(require, exports, module) {
-    
-var t = {};
-
-t.logoContent = '<div class="logo">M</div>';
-
-/* logged out explore maps bars */
-  t.activeContent = '<a href="/explore/active" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active Maps</a>';
-  t.activeContent += '<a href="/explore/featured" class="featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured Maps</a>';
-
-  t.featuredContent = '<a href="/explore/active" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active Maps</a>';
-  t.featuredContent += '<a href="/explore/featured" class="active featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured Maps</a>';
-
-/* logged in explore maps bars */
-  t.mineAuthContent = '<a href="/explore/mine" class="active myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.mineAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
-  t.mineAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-
-  t.sharedAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.sharedAuthContent += '<a href="/explore/shared" class="active sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
-  t.sharedAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-
-  t.activeAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.activeAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
-  t.activeAuthContent += '<a href="/" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-
-
-/* apps bars */
-  t.registeredAppsContent = '<a href="/oauth/applications" class="active activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';
-  t.registeredAppsContent += '<a href="/oauth/authorized_applications" class="featuredMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Authorized Apps</a>';
-
-  t.authorizedAppsContent = '<a href="/oauth/applications" class="activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';
-  t.authorizedAppsContent += '<a href="/oauth/authorized_applications" class="active featuredMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Authorized Apps</a>';
-
-    module.exports = t;
-});