From ede1dfb91c7216ecb0cdd76576f4103d095012d2 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 1 Aug 2016 15:33:41 -0400
Subject: [PATCH] made the header more generic to serve other functions

---
 app/assets/javascripts/application.js         |  4 +-
 .../javascripts/src/Metamaps.GlobalUI.js      | 17 +++---
 app/assets/javascripts/src/Metamaps.Header.js | 22 +++++++
 app/assets/stylesheets/clean.css.erb          |  3 +-
 .../doorkeeper/applications/_script.html.erb  |  4 +-
 .../authorized_applications/_script.html.erb  |  4 +-
 app/views/layouts/doorkeeper.html.erb         |  2 +-
 frontend/src/components/ExploreHeader.js      | 33 -----------
 frontend/src/components/Header.js             | 59 +++++++++++++++++++
 frontend/src/index.js                         |  8 +--
 public/famous/main.js                         | 36 -----------
 public/famous/templates.js                    | 36 -----------
 12 files changed, 99 insertions(+), 129 deletions(-)
 create mode 100644 app/assets/javascripts/src/Metamaps.Header.js
 delete mode 100644 frontend/src/components/ExploreHeader.js
 create mode 100644 frontend/src/components/Header.js
 delete mode 100644 public/famous/main.js
 delete mode 100644 public/famous/templates.js

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 65aadbbb..cb22ab95 100644
--- a/app/assets/javascripts/application.js
+++ b/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
diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js b/app/assets/javascripts/src/Metamaps.GlobalUI.js
index ecf78a6e..bacc0a94 100644
--- a/app/assets/javascripts/src/Metamaps.GlobalUI.js
+++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js
@@ -61,22 +61,21 @@ $(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 === "") {
-      if (Metamaps.Active.Mapper) {
-          Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
-          Metamaps.Views.exploreMaps.render();
-          Metamaps.GlobalUI.showDiv('#exploreMaps')
-          //f.explore.set('active');
-          Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
-      }
+  else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) {
+      Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
+      Metamaps.Views.exploreMaps.render();
+      Metamaps.GlobalUI.showDiv('#exploreMaps')
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
   }
   else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
     Metamaps.Loading.show()
diff --git a/app/assets/javascripts/src/Metamaps.Header.js b/app/assets/javascripts/src/Metamaps.Header.js
new file mode 100644
index 00000000..62ef5db9
--- /dev/null
+++ b/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')
+    );
+  }
+}
diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb
index 7f0ce77d..d47976f5 100644
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@@ -25,7 +25,8 @@
 }
 
 #yield {
-
+  position: absolute;
+  width: 100%;
 }
 
 #toast {
diff --git a/app/views/doorkeeper/applications/_script.html.erb b/app/views/doorkeeper/applications/_script.html.erb
index 970791d4..7f4a7944 100644
--- a/app/views/doorkeeper/applications/_script.html.erb
+++ b/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.Famous.explore.show();
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'registered');
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
       Metamaps.GlobalUI.Search.open();
       Metamaps.GlobalUI.Search.lock();
     }
diff --git a/app/views/doorkeeper/authorized_applications/_script.html.erb b/app/views/doorkeeper/authorized_applications/_script.html.erb
index 5e8bebda..cebf167b 100644
--- a/app/views/doorkeeper/authorized_applications/_script.html.erb
+++ b/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.Famous.explore.show();
+      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'authorized');
+      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
       Metamaps.GlobalUI.Search.open();
       Metamaps.GlobalUI.Search.lock();
     }
diff --git a/app/views/layouts/doorkeeper.html.erb b/app/views/layouts/doorkeeper.html.erb
index f6ae4e91..378ada04 100644
--- a/app/views/layouts/doorkeeper.html.erb
+++ b/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>
 
diff --git a/frontend/src/components/ExploreHeader.js b/frontend/src/components/ExploreHeader.js
deleted file mode 100644
index 66ac993e..00000000
--- a/frontend/src/components/ExploreHeader.js
+++ /dev/null
@@ -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
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
new file mode 100644
index 00000000..2ea3c755
--- /dev/null
+++ b/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
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 9615e5f2..1b61dac6 100644
--- a/frontend/src/index.js
+++ b/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')
-);
diff --git a/public/famous/main.js b/public/famous/main.js
deleted file mode 100644
index 5dec1fbf..00000000
--- a/public/famous/main.js
+++ /dev/null
@@ -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
-});
diff --git a/public/famous/templates.js b/public/famous/templates.js
deleted file mode 100644
index 644e1207..00000000
--- a/public/famous/templates.js
+++ /dev/null
@@ -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;
-});