started using react instead of famous

app/assets/javascripts/application.js

@@ -44,5 +44,5 @@
 //= require ./src/Metamaps.Import
 //= require ./src/Metamaps.JIT
 //= require_directory ./shims
-//= require_directory ./require
+// require_directory ./require
-//= require_directory ./famous
+// require_directory ./famous

app/assets/javascripts/orderedLibraries/react-dom.js

@@ -0,0 +1,42 @@
+/**
+ * ReactDOM v15.3.0
+ *
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
+;(function(f) {
+  // CommonJS
+  if (typeof exports === "object" && typeof module !== "undefined") {
+    module.exports = f(require('react'));
+
+  // RequireJS
+  } else if (typeof define === "function" && define.amd) {
+    define(['react'], f);
+
+  // <script>
+  } else {
+    var g;
+    if (typeof window !== "undefined") {
+      g = window;
+    } else if (typeof global !== "undefined") {
+      g = global;
+    } else if (typeof self !== "undefined") {
+      g = self;
+    } else {
+      // works providing we're not in "use strict";
+      // needed for Java 8 Nashorn
+      // see https://github.com/facebook/react/issues/3037
+      g = this;
+    }
+    g.ReactDOM = f(g.React);
+  }
+
+})(function(React) {
+  return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+});

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

@@ -56,18 +56,7 @@ $(document).ready(function () {
         }
     }
   }
-
-    // initialize the famous ui
-    var callFamous = function(){
-        if (Metamaps.Famous) {
-            Metamaps.Famous.build();
   init();
-        }
-        else {
-            setTimeout(callFamous, 100);
-        }
-    }
-    callFamous();
 });
 
 Metamaps.GlobalUI = {

app/assets/javascripts/src/react/app.js

@@ -0,0 +1,34 @@
+var signedIn = true
+
+var ExploreHeader = React.createClass({
+  render: function() {
+    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>
+    );
+  }
+});
+
+ReactDOM.render(
+  <ExploreHeader active="featured" />, document.getElementById('exploreMapsHeader')
+);

app/assets/stylesheets/clean.css.erb

@@ -606,22 +606,30 @@
 
 /* explore maps */
 
+#exploreMapsHeader {
+  position: absolute;
+  width: 100%;
+}
+
 .exploreMapsBar {
   z-index:2;
   background-color:#FAFAFA;
+  height: 42px;
+  padding-top: 52px;
 }
 
 .exploreMapsMenu {
   display: block;
   width: 100%;
-  margin-top:52px;
   height:42px;
   background-color:#EEEEEE;
   box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
 
 .exploreMapsCenter {
-    z-index: 3 !important;
+   margin: 0 auto;
+   display: block;
+   width: 419px;
 }
 
 .exploreMapsButton {

app/views/layouts/_head.html.erb

@@ -18,17 +18,13 @@
 
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
+  <script type="text/babel" src="<%= asset_path 'src/react/app.js' %>"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
 
   <!-- typekit for vinyl font -->
   <script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
-        <!-- app code -->
-        <script type="text/javascript">
-            require.config({baseUrl: '<%= "#{ asset_path '/famous/main.js' }".chomp('main.js') %>'});
-            require(['main']);
-        </script>
-
   <!--[if (IE)]>
     <style type="text/css">
       #lightbox_overlay {

app/views/layouts/application.html.erb

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

app/views/layouts/info.html.erb

@@ -99,6 +99,33 @@
     background-size: contain;
     height: 399px;
   }
+
+  .slack {
+    background: url(<%= asset_path 'slack.png' %>) no-repeat top right;
+    background-size: contain;
+    height: 399px;
+  }
+
+  h3 {
+    font-family: helvetica, sans-serif;
+    font-size: 30px;
+    text-align: center;
+    color: #565656;
+  }
+
+  .junto h3 {
+    width: 500px;
+  }
+
+  .slack h3 {
+    width: 400px;
+  }
+
+  .rich_media h3 {
+    width: 500px;
+    float: right;
+  }
+
 </style>
 
 <body>
@@ -110,20 +137,24 @@
       <button class="button--purple" href="/login">Log In</button>
     </div>
     <div class="section junto">
-    
+     <h3>capture all the ideas coming up in live video conversations</h3> 
     </div>
+    <h3>see for yourself how things are connected<br> and how connected things are</h3> 
     <div class="section connected">
-    
     </div>
     <div class="section rich_media">
-
+      <h3>attach links, images, audio, or video to your thoughts</h3> 
     </div>
+    <h3>zoom out and see the big picture</h3> 
     <div class="section graph">
-
     </div>
+    <div class="section slack">
+      <h3>use @metamapper (our slackbot) to capture thoughts from slack on your phone, web, or desktop</h3> 
+    </div>
+    <h3>want metamaps to do something different? we're open source, fork it.</h3> 
     <div class="section code">
-
     </div>
+    <h3>we won't tell you what to do with metamaps, get creative :)</h3>
   </div>
 </body>
 

config/initializers/assets.rb

@@ -0,0 +1 @@
+Rails.application.config.assets.precompile += %w( src/react/app.js )

public/famous/main.js

@@ -340,24 +340,24 @@ Metamaps.Famous.build = function () {
     // LOGO
     f.logo = {};
     f.logo.surf = new Surface({
-        size: [258, 30],
+        size: [30, 30],
         content: templates.logoContent,
         classes: ['footer']
     });
 
     f.logo.mod = new Modifier({
-        origin: [0.5, 0],
+        origin: [0, 1],
-        transform: Transform.translate(0, -40, 0)
+        transform: Transform.translate(-40, 40, 0)
     });
     f.logo.show = function () {
         f.logo.mod.setTransform(
-            Transform.translate(0, 10, 0), 
+            Transform.translate(20, -20, 0), 
             { duration: 300, curve: 'easeOut' }
         );
     };
     f.logo.hide = function () {
         f.logo.mod.setTransform(
-            Transform.translate(0, -40, 0), 
+            Transform.translate(-40, 40, 0), 
             { duration: 300, curve: 'easeIn' }
         );
     };

public/famous/templates.js

@@ -2,7 +2,7 @@ define(function(require, exports, module) {
     
 var t = {};
 
-t.logoContent = '<div class="logo">METAMAPS</div>';
+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>';