Merge branch 'develop' of https://github.com/Connoropolous/metamaps_gen002 into new

app/assets/javascripts/metamaps/Metamaps.Backbone.js

@@ -30,7 +30,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
             name: this.get('name'),
             desc: this.get('desc'),
             username: this.getUser().get('name'),
-            mkPermission: this.get("permission").substring(0, 2),
+            mkPermission: this.get("permission") ? this.get("permission").substring(0, 2) : "commons",
             editPermission: this.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEdit' : 'cannotEdit',
             topicCount: this.getTopics().length,
             synapseCount: this.getSynapses().length,
@@ -52,8 +52,8 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
         a = a.get(this.sortBy);
         b = b.get(this.sortBy);
         if (this.sortBy === 'name') {
-            a = a.toLowerCase();
-            b = b.toLowerCase();
+            a = a ? a.toLowerCase() : "";
+            b = b ? b.toLowerCase() : "";
         }
         return a > b ? 1 : a < b ? -1 : 0;
     },

app/assets/javascripts/metamaps/Metamaps.Router.js

@@ -22,10 +22,12 @@
 
             // all this only for the logged in home page
             if (Metamaps.Active.Mapper) {
+                
+                Metamaps.Famous.yield.hide();
+                
                 Metamaps.Famous.explore.set('mine');
                 Metamaps.Famous.explore.show();
 
-                $('.yield').fadeOut(300);
                 $('.mapsWrapper').fadeIn(300);
 
                 Metamaps.GlobalUI.Search.open();
@@ -41,12 +43,14 @@
             }
             // logged out home page
             else {
+                
+                Metamaps.Famous.yield.show();
+                
                 Metamaps.Famous.explore.hide();
 
                 Metamaps.GlobalUI.Search.unlock();
                 Metamaps.GlobalUI.Search.close(0, true);
 
-                $('.yield').fadeIn(300);
                 $('.mapsWrapper').fadeOut(300);
             }
 
@@ -79,8 +83,9 @@
 
             Metamaps.GlobalUI.Search.open();
             Metamaps.GlobalUI.Search.lock();
-
-            $('.yield').fadeOut(300);
+            
+            Metamaps.Famous.yield.hide();
+            
             $('.mapsWrapper').fadeIn(300);
 
             Metamaps.Famous.explore.set(section);
@@ -103,9 +108,8 @@
             $('.wrapper').removeClass('homePage explorePage');
             $('.wrapper').addClass('mapPage');
 
-            $('.yield').fadeOut(300);
+            Metamaps.Famous.yield.hide();
             $('.mapsWrapper').fadeOut(300);
-
             Metamaps.Famous.explore.hide();
 
             // clear the visualization, if there was one, before showing its div again

app/assets/javascripts/metamaps/Metamaps.Views.js

@@ -46,6 +46,9 @@ Metamaps.Views.init = function () {
             this.listenTo(this.collection, 'errorOnFetch', this.handleError);
         },
         render: function () {
+            
+            Metamaps.Loading.loader.hide();
+            
             var that = this;
             this.$el.empty();
 
@@ -56,7 +59,6 @@ Metamaps.Views.init = function () {
             });
         },
         handleSuccess: function () {
-            Metamaps.Loading.loader.hide();
             this.render();
         },
         handleError: function () {

app/assets/javascripts/metamaps/Metamaps.js

@@ -1265,7 +1265,7 @@ Metamaps.Util = {
     // you may copy this code but please keep the copyright notice as well
     splitLine: function (st, n) {
         var b = '';
-        var s = st;
+        var s = st ? st : '';
         while (s.length > n) {
             var c = s.substring(0, n);
             var d = c.lastIndexOf(' ');
@@ -1332,7 +1332,7 @@ Metamaps.Realtime = {
         var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
 
         if (mapperm) {
-            self.socket = io.connect('http://localhost:5001');
+            self.socket = io.connect('http://localhost:5001'); 
             self.socket.on('connect', function () {
                 console.log('socket connected');
                 self.setupSocket();

app/assets/stylesheets/application.css

@@ -9,7 +9,6 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require_tree ../../../vendor/assets/stylesheets
  *= require_tree .
  *= require base
  *= require ForceDirected

app/assets/stylesheets/clean.css

@@ -22,7 +22,7 @@
   margin:0;
 }
 
-.yield {
+#yield {
     display:none;
 }
 
@@ -485,6 +485,65 @@
 
 /* end upperRightUI */
 
+
+/* homepage */
+
+.homeWrapper {
+    width: 560px;
+    margin: 0 auto;
+    color: #424242;
+}
+
+.homeTitle {
+    font-size: 48px;
+    line-height: 48px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.homeIntro {
+    font-size: 23px;
+    line-height: 26px;
+    text-align: justify;
+    margin-bottom: 20px;
+}
+
+.homeWrapper .green {
+    color: #4fc059;
+}
+
+.homeVideo {
+    margin-bottom: 20px;
+}
+
+.callToAction a {
+    display: block;
+    width: 220px;
+    height: 12px;
+    padding: 16px 0;
+    text-align: center;
+    border-radius: 2px;
+    font-size: 12px;
+    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
+    margin: 0 auto;
+    color: #FFFFFF;
+}
+.callToAction .requestInviteCTA {
+    background-color: #4fc059;
+    margin-bottom: 15px;
+}
+.callToAction .requestInviteCTA:hover {
+    background-color: #49ad4e;
+}
+.callToAction .exploreFeaturedCTA {
+    background-color: #a354cd;
+}
+.callToAction .exploreFeaturedCTA:hover {
+    background-color: #9150bc;
+}
+
+/* end home page */
+
 /* infoAndHelp */
 
 .infoAndHelp {

app/views/layouts/application.html.erb

@@ -34,7 +34,7 @@
 
         <!-- app code -->
         <script type="text/javascript">
-            require.config({baseUrl: '/assets/src/'});
+            require.config({baseUrl: '/famous/'});
             require(['main']);
         </script>
 </head>
@@ -61,7 +61,7 @@
             <%= render :partial => 'layouts/upperelements' %>
             <%= render :partial => 'layouts/exploremaps' %>
 
-            <div class="yield"><%= yield %></div>
+            <%= yield %>
 
             <!--<div class="mapElement" id="infovis"></div> <!-- where map visualizations get rendered -->
             <div class="showcard mapElement mapElementHidden" id="showcard"></div> <!-- the topic card -->

app/views/main/home.html.erb

@@ -5,100 +5,31 @@
   #%>  
   
 <% if !authenticated? %>
-
-<% content_for :title, "Home | Metamaps" %> 
-
-<div id="preloaded-images">
-   <img src="/assets/metacodes75ms300x300.gif" width="128 height="128" alt="Image 01" />
-</div>  
-  
-<div class="home_bg">
-
-<div class="home_content">
-<div class="home_desc">
-  <div class="welcomeTo">
-      Welcome to Metamaps
-  </div>
-  <img id="homeMapImage" src="/assets/metamap128x128.png" width="128" height="128" />
-  
-    <div class="metamapsIs">
-      a home on the web for <span class="swapWord">
-        <ul class="texts">
-        <li>building shared knowledge</li>
-        <li>learning</li>
-        <li>visioning</li>
-        <li>conversing</li>
-        <li>collaborating</li>
-        <li>sensemaking</li>
-        <li>innovating</li>
-        <li>designing</li>
-        <li>playing</li>
-        <li>exploring</li>
-        </ul>
-      </span>
-    </div>
-</div>
-<div class="clearfloat"></div>
-
-<p class="contact">
-    <a href="/request" class="request button" data-bypass="true">Request Invite</a>
-    <a href="/explore/featured" class="learnmore button">Explore Featured</a>
-  <div class="featuredMaps">
-      explore featured maps from our community
-  </div>
-</p>
-
-<div class="centeredProfile">
-  <div id="homeMap">
-    <figure id="homeFigure">
-    <% @maps.each_with_index do |map, index| %>
-      <% first = index == 0 ? true : false %>
-      <%= render :partial => 'main/homemap', :locals => { :map => map, :first => first } %>
-    <% end %>
-    </figure>
-  </div>
-</div>
-</div>
-<div class="clearfloat"></div>
-</div>
-                         
-<script>
-
-  Metamaps.currentSection = "";
-  Metamaps.currentPage = "";
-
-$(document).ready(function() {
-  // flip through these words on the homepage
-  $('.swapWord').textillate({ 
-       in: { effect: 'fadeIn', delay: 20 },
-       out: { effect: 'fadeOut', sync: true }, 
-       loop: true,
-       minDisplayTime: 2000
-  });
-  
-  $('#homeMapImage').hover(function() {
-    $(this).attr('src','/assets/metacodes75ms300x300.gif');
-  }, function() {
-    $(this).attr('src','/assets/metamap128x128.png');
-  });
-                         
-  $('#homeMap .desc').each(function() {
-    $(this).height($(this).height()).mCustomScrollbar({
-      mouseWheelPixels: 200
-    });
-  });
-
-});
-</script>
-
+    <% content_for :title, "Home | Metamaps" %> 
+    <div id="yield">
+        <div class="homeWrapper">
+            <div class="homeTitle">EXPERIENCE METAMAPS</div>
+            <div class="homeIntro">
+            <span class="green">metamaps.cc</span> is a free and open source platform. It enables individuals, communities, and organizations to build and visualize their shared knowledge and unlock their collective intelligence...
+            </div>
+            <iframe class="homeVideo" src="//player.vimeo.com/video/100118167" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+            <div class="callToAction">
+                <a href="/request" class="requestInviteCTA" data-bypass="true">REQUEST INVITE</a>
+                <a href="/explore/featured" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
+            </div>
+        </div>
+    </div><!-- end yield -->                        
+    <script>
+    Metamaps.currentSection = "";
+    Metamaps.currentPage = "";
+    </script>
 <% elsif authenticated? %>
-  <% content_for :title, "My Maps | Metamaps" %> 
-
-  <script>
+    <% content_for :title, "My Maps | Metamaps" %> 
+    <script>
     Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
     Metamaps.currentSection = "";
     Metamaps.currentPage = "";
     Metamaps.GlobalUI.Search.isOpen = true;
     Metamaps.GlobalUI.Search.lock();
-  </script>
+    </script>
 <% end %>

app/views/main/requestinvite.html.erb

@@ -6,11 +6,12 @@
 
 <% content_for :title, "Request Invite | Metamaps" %>   
   
+<div id="yield">
 <iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+</div>
 
 <script>
 $(document).ready(function() {
   $('.requestInvite').height( (parseInt($('body').height()) - 40) ); 
 });
-
 </script>

config/application.rb

@@ -53,7 +53,7 @@ module Metamaps
     # Enable the asset pipeline
     config.assets.enabled = true
     config.assets.initialize_on_precompile = false
-
+      
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '2.0'
   end

public/famous/main.js

@@ -56,6 +56,56 @@ define(function(require, exports, module) {
     };
     f.mainContext.add(f.viz.mod).add(f.viz.surf);
 
+    
+    // CONTENT / OTHER PAGES
+    f.yield = {};
+    f.yield.surf = new Surface({
+        size: [true, true],
+        classes: [],
+        properties: {
+            display: 'none'
+        }
+    });
+    var loadYield = function () {
+            f.loadYield();
+            f.yield.surf.removeListener('deploy',loadYield);
+    };
+    if (!(Metamaps.currentSection === "map" ||
+            Metamaps.currentSection === "explore" ||
+            (Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
+        f.yield.surf.on('deploy', loadYield);
+    }
+    f.yield.mod = new Modifier({
+        origin: [0.5, 0.5],
+        opacity: 0
+    });
+    f.yield.show = function () {
+        f.yield.surf.setProperties({ "display":"block" });
+        f.yield.mod.setOpacity(
+            1,
+            { duration: 300 }
+        );
+    };
+    f.yield.hide = function () {
+        f.yield.mod.setOpacity(
+            0, 
+            { duration: 300 }, 
+            function() {
+                f.yield.surf.setProperties({"display": "none"});
+            }
+        );
+    };
+    f.mainContext.add(f.yield.mod).add(f.yield.surf);
+    
+    f.loadYield = function () {
+        Metamaps.Loading.loader.hide();
+        var yield = document.getElementById('yield').innerHTML;
+        f.yield.surf.setContent(yield);
+        f.yield.surf.deploy(f.yield.surf._currTarget);
+        f.yield.show();
+    };
+    
+    
     // EXPLORE MAPS BAR
     f.explore = {};
     f.explore.surf = new Surface({

public/famous/templates.js

@@ -13,7 +13,6 @@ t.logoContent += '</ul>';
 /* logged out explore maps bars */
 t.activeContent = '<div class="exploreMapsMenu">';
   t.activeContent += '<div class="exploreMapsCenter">';
-        t.activeContent += '<a href="/">My Maps</a>';
         t.activeContent += '<a href="/explore/active" class="active">Recently Active</a>';
         t.activeContent += '<a href="/explore/featured">Featured</a>';
         t.activeContent += '<a href="/explore/new">New</a>';
@@ -23,7 +22,6 @@ t.activeContent += '</div>';
 
 t.featuredContent = '<div class="exploreMapsMenu">';
   t.featuredContent += '<div class="exploreMapsCenter">';
-        t.featuredContent += '<a href="/">My Maps</a>';
         t.featuredContent += '<a href="/explore/active">Recently Active</a>';
         t.featuredContent += '<a href="/explore/featured" class="active">Featured</a>';
         t.featuredContent += '<a href="/explore/new">New</a>';
@@ -33,7 +31,6 @@ t.featuredContent += '</div>';
 
 t.newContent = '<div class="exploreMapsMenu">';
   t.newContent += '<div class="exploreMapsCenter">';
-        t.newContent += '<a href="/">My Maps</a>';
         t.newContent += '<a href="/explore/active">Recently Active</a>';
         t.newContent += '<a href="/explore/featured">Featured</a>';
         t.newContent += '<a href="/explore/new" class="active">New</a>';
@@ -83,4 +80,4 @@ t.newAuthContent = '<div class="exploreMapsMenu">';
 t.newAuthContent += '</div>';
 
     module.exports = t;
-});
+});