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

app/assets/javascripts/application.js

@@ -20,3 +20,8 @@
 //= require ./metamaps/Metamaps.Router
 //= require ./metamaps/Metamaps.Backbone
 //= require ./metamaps/Metamaps.Views
+//= require ./librariesForMapPages/cloudcarousel
+//= require ./librariesForMapPages/socket.io
+//= require ./metamaps/JIT
+//= require ./metamaps/Metamaps
+//= require ./metamaps/Metamaps.JIT

app/assets/javascripts/compileMapPages.js

@@ -1,20 +0,0 @@
-// This is a manifest file that'll be compiled into map.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
-// GO AFTER THE REQUIRES BELOW.
-//
-//
-// can't use require directory because underscore needs to come before backbone
-//
-//= require ./librariesForMapPages/cloudcarousel
-//= require ./librariesForMapPages/socket.io
-//= require ./metamaps/JIT
-//= require ./metamaps/Metamaps
-//= require ./metamaps/Metamaps.JIT

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

@@ -1,4 +1,7 @@
 Metamaps.JIT = {
+    events: {
+        mouseMove: 'Metamaps:JIT:events:mouseMove'
+    },
     vizData: [], // contains the visualization-compatible graph
     /**
      * This method will bind the event handlers it is interested and initialize the class.
@@ -35,25 +38,27 @@ Metamaps.JIT = {
         Metamaps.Synapses.each(function (s) {
             edge = s.createEdge();
 
-            existingEdge = _.findWhere(edges, {
+            if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
-                nodeFrom: edge.nodeFrom,
+                existingEdge = _.findWhere(edges, {
-                nodeTo: edge.nodeTo
+                    nodeFrom: edge.nodeFrom,
-            }) ||
+                    nodeTo: edge.nodeTo
-                _.findWhere(edges, {
+                }) ||
-                    nodeFrom: edge.nodeTo,
+                    _.findWhere(edges, {
-                    nodeTo: edge.nodeFrom
+                        nodeFrom: edge.nodeTo,
-                });
+                        nodeTo: edge.nodeFrom
+                    });
 
-            if (existingEdge) {
+                if (existingEdge) {
-                // for when you're dealing with multiple relationships between the same two topics
+                    // for when you're dealing with multiple relationships between the same two topics
-                if (Metamaps.Active.Map) {
+                    if (Metamaps.Active.Map) {
-                    mapping = s.getMapping();
+                        mapping = s.getMapping();
-                    existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                        existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                    }
+                    existingEdge['$synapseIDs'].push(s.id);
+                } else {
+                    // for when you're dealing with a topic that has relationships to many different nodes
+                    nodes[edge.nodeFrom].adjacencies.push(edge);
                 }
-                existingEdge['$synapseIDs'].push(s.id);
-            } else {
-                // for when you're dealing with a topic that has relationships to many different nodes
-                nodes[edge.nodeFrom].adjacencies.push(edge);
             }
         });
         _.each(nodes, function (node) {
@@ -613,6 +618,9 @@ Metamaps.JIT = {
         if (!node && !edge) {
             $('canvas').css('cursor', 'default');
         }
+
+        var pos = eventInfo.getPos();
+        $(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
     }, // onMouseMoveHandler
     enterKeyHandler: function () {
         // this is to submit new topic creation

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

@@ -15,7 +15,7 @@
 
             Metamaps.currentSection = "";
             Metamaps.currentPage = "";
-            $('.wrapper').removeClass('mapPage');
+            $('.wrapper').removeClass('mapPage topicPage');
 
             var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
             $('.wrapper').addClass(classes);
@@ -59,6 +59,8 @@
             }
 
             Metamaps.Famous.viz.hide();
+            Metamaps.Map.end();
+            Metamaps.Topic.end();
             Metamaps.Active.Map = null;
             Metamaps.Active.Topic = null;
         },
@@ -68,7 +70,7 @@
             
             document.title = 'Explore ' + capitalize + ' Maps | Metamaps';
 
-            $('.wrapper').removeClass('homePage mapPage');
+            $('.wrapper').removeClass('homePage mapPage topicPage');
             $('.wrapper').addClass('explorePage');
             
             Metamaps.currentSection = "explore";
@@ -76,7 +78,7 @@
 
             Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
             if (Metamaps.Maps[capitalize].length === 0) {
-                Metamaps.Loading.loader.show();
+                Metamaps.Loading.show();
                 setTimeout(function(){
                     Metamaps.Maps[capitalize].getMaps(); // this will trigger an explore maps render
                 }, 300); // wait 300 milliseconds till the other animations are done to do the fetch 
@@ -96,6 +98,8 @@
             Metamaps.Famous.explore.show();
 
             Metamaps.Famous.viz.hide();
+            Metamaps.Map.end();
+            Metamaps.Topic.end();
             Metamaps.Active.Map = null;
             Metamaps.Active.Topic = null;
         },
@@ -106,7 +110,7 @@
             Metamaps.currentSection = "map";
             Metamaps.currentPage = id;
 
-            $('.wrapper').removeClass('homePage explorePage');
+            $('.wrapper').removeClass('homePage explorePage topicPage');
             $('.wrapper').addClass('mapPage');
 
             Metamaps.Famous.yield.hide();
@@ -120,11 +124,13 @@
                 Metamaps.JIT.centerMap();
             }
             Metamaps.Famous.viz.show();
+            Metamaps.Topic.end();
             Metamaps.Active.Topic = null;
 
             Metamaps.GlobalUI.Search.unlock();
             Metamaps.GlobalUI.Search.close(0, true);
 
+            Metamaps.Map.end();
             Metamaps.Map.launch(id);
         },
         topics: function (id) {
@@ -134,8 +140,8 @@
             Metamaps.currentSection = "topic";
             Metamaps.currentPage = id;
 
-            $('.wrapper').removeClass('homePage explorePage');
+            $('.wrapper').removeClass('homePage explorePage mapPage');
-            $('.wrapper').addClass('mapPage');
+            $('.wrapper').addClass('topicPage');
 
             Metamaps.Famous.yield.hide();
             Metamaps.Famous.maps.hide();
@@ -148,11 +154,13 @@
                 Metamaps.JIT.centerMap();
             }
             Metamaps.Famous.viz.show();
+            Metamaps.Map.end();
             Metamaps.Active.Map = null;
 
             Metamaps.GlobalUI.Search.unlock();
             Metamaps.GlobalUI.Search.close(0, true);
 
+            Metamaps.Topic.end();
             Metamaps.Topic.launch(id);
         }
     });

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

@@ -67,7 +67,7 @@ Metamaps.Views.init = function () {
                 }, 100);
             }
 
-            Metamaps.Loading.loader.hide();
+            Metamaps.Loading.hide();
             setTimeout(function(){
                 var path = Metamaps.currentSection == "" ? "" : "/explore/" + Metamaps.currentPage; 
                 Metamaps.Router.navigate(path);

app/assets/javascripts/metamaps/Metamaps.js

@@ -115,6 +115,12 @@ Metamaps.Backbone.init = function () {
             }
             
             this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this);
+
+            var updateName = function () {
+                if (this.get('node')) this.get('node').name = this.get('name');
+                if (Metamaps.Visualize) Metamaps.Visualize.mGraph.plot();
+            };
+            this.on('change:name', updateName, this);
         },
         authorizeToEdit: function (mapper) {
             if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
@@ -627,7 +633,7 @@ Metamaps.Create = {
  */
 Metamaps.TopicCard = {
     openTopicCard: null, //stores the JIT local ID of the topic with the topic card open
-    linkActionsString: '<div class="linkActions"><div id="linkshare">share</div><div id="linkremove">remove</div> </div>',
+    linkActionsString: '<div class="linkActions"><div id="linkremove">Remove</div></div>',
     init: function () {
 
         // initialize best_in_place editing
@@ -664,30 +670,31 @@ Metamaps.TopicCard = {
         var self = Metamaps.TopicCard;
         var showCard = document.getElementById('showcard');
 
+        // get mapper image
+        var setMapperImage = function (mapper) {
+            console.log(mapper);
+            $('.contributorIcon').attr('src', mapper.get('image'));
+        };
+        Metamaps.Mapper.get(topic.get('user_id'), setMapperImage)
 
         // starting embed.ly
         var addLinkFunc = function () {
             var addLinkDiv ='';
             var addLinkDesc ='Enter or paste a link';
-            addLinkDiv+='<div class="addLink"><div id="addLinkBack"></div>';
+            addLinkDiv+='<div class="addLink"><div id="addLinkIcon"></div>';
             addLinkDiv+='<div id="addLinkInput"><input placeholder="' + addLinkDesc + '"></input>';
             addLinkDiv+='<div id="addLinkReset"></div></div></div>';
             $('.addAttachment').hide();
             $('.attachments').append(addLinkDiv);
-            $('.showcard #addLinkBack').click(backFunc);
             $('.showcard #addLinkReset').click(resetFunc);
             $('.showcard #addLinkInput input').bind("paste keyup",inputEmbedFunc);
 
             $('#addLinkInput input').focus();
         };
-        var backFunc = function () {
+        var resetFunc = function () {
             $('.addLink').remove();
             $('.addAttachment').show();
         };
-        var resetFunc = function () {
-            $('#addLinkInput input').val('');
-            $('#addLinkInput input').focus();
-        };
         var inputEmbedFunc = function (event) {
             
             var element = this;
@@ -700,23 +707,24 @@ Metamaps.TopicCard = {
                     topic.save({
                         link: text
                     });
-                    var  embedlyEl = $('<a/>', {
+                    var embedlyEl = $('<a/>', {
                         id: 'embedlyLink',
+                        'data-card-chrome': '0',
+                        'data-card-description': '0',
                         href: text
-                    });
+                    }).html(text);
-                    embedlyEl.embedly({
+                    //embedlyEl.embedly({
-                        query: {maxwidth: 300},
+                    //    query: {maxwidth: 300},
-                        key: '7983300f4c1f48569ca242e3d6bff1e9'
+                    //    key: '7983300f4c1f48569ca242e3d6bff1e9'
-                    });
+                    //});
                     $('.addLink').remove();
                     $('.embeds').append(embedlyEl);
+                    embedly('card', document.getElementById('embedlyLink'));
+                    $('.CardOnGraph').addClass('hasAttachment');
                     $('.attachments').append(self.linkActionsString);
                     bindLinkActionListeners();
                 }
             }, 100);
-        };
-        var shareLinkFunc = function () {
-        
         };
         var removeLinkFunc = function () {
             topic.save({
@@ -725,16 +733,17 @@ Metamaps.TopicCard = {
             $('.embeds').empty();
             $('.linkActions').remove();
             $('.addAttachment').show();
+            $('.CardOnGraph').removeClass('hasAttachment');
         };
         var bindLinkActionListeners = function () {
             $('#linkremove').click(removeLinkFunc);
-            $('#linkshare').click(shareLinkFunc);
         };
         if (topic.get('link')) {
-            $('#embedlyLink').embedly({
+            //$('#embedlyLink').embedly({
-                query: {maxwidth: 300},
+            //    query: {maxwidth: 300},
-                key: '7983300f4c1f48569ca242e3d6bff1e9'
+            //    key: '7983300f4c1f48569ca242e3d6bff1e9'
-            });
+            //});
+            embedly('card', document.getElementById('embedlyLink'));
             bindLinkActionListeners();
         }
         $('.showcard #addlink').click(addLinkFunc);
@@ -836,21 +845,12 @@ Metamaps.TopicCard = {
 
         //bind best_in_place ajax callbacks
         $(showCard).find('.best_in_place_name').bind("ajax:success", function () {
-
+            var name = Metamaps.Util.decodeEntities($(this).html());
-            var s = $('.showcard').find('.scroll');
+            topic.set("name", name);
-            s.height(s.height()).mCustomScrollbar('update');
-
-            var name = $(this).html();
-            topic.set("name", Metamaps.Util.decodeEntities(name));
-            Metamaps.Visualize.mGraph.plot();
         });
 
         $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
             this.innerHTML = this.innerHTML.replace(/\r/g, '')
-
-            var s = $('.showcard').find('.scroll');
-            s.height(s.height()).mCustomScrollbar('update');
-
             var desc = $(this).html();
             topic.set("desc", desc);
         });
@@ -902,18 +902,20 @@ Metamaps.TopicCard = {
 
         nodeValues.attachments = '';
         if (topic.get('link') && topic.get('link')!=='') {
-            nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank">';
+            nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-chrome="0" data-card-description="0">';
             nodeValues.embeds += topic.get('link');
             nodeValues.embeds += '</a>';
             addAttachmentHidden='hidden';
             nodeValues.attachments += self.linkActionsString;
+            nodeValues.hasAttachment = "hasAttachment";
         }
         else {
             nodeValues.embeds = '';
+            nodeValues.hasAttachment = '';
         }
         nodeValues.attachments += '<div class="addAttachment ' +addAttachmentHidden+ '">';
-        nodeValues.attachments+= '<div id="addlink">Attach a link</div>';
+        nodeValues.attachments+= '<div id="addlink"><div id="linkIcon" class="attachmentIcon"></div>Attach a link</div>';
-        nodeValues.attachments+= '<div id="addupload">Upload a file</div> </div>';
+        nodeValues.attachments+= '<div id="addupload"><div id="uploadIcon" class="attachmentIcon"></div>Upload a file</div></div>';
 
         nodeValues.permission = topic.get("permission");
         nodeValues.mk_permission = topic.get("permission").substring(0, 2);
@@ -1281,7 +1283,7 @@ Metamaps.Visualize = {
             self.mGraph.graph.empty();
         }
 
-        Metamaps.Loading.loader.hide();
+        Metamaps.Loading.hide();
         // load JSON data, if it's not empty
         if (!self.loadLater) {
             //load JSON data.
@@ -1400,7 +1402,10 @@ Metamaps.Realtime = {
     init: function () {
         var self = Metamaps.Realtime;
 
-        $(".rtOn").click(self.turnOn);
+        var turnOn = function () {
+            self.turnOn(true);
+        }
+        $(".rtOn").click(turnOn);
         $(".rtOff").click(self.turnOff);
 
         $('.sidebarCollaborateIcon').click(self.toggleBox);
@@ -1409,15 +1414,8 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+        self.socket = io.connect('http://localhost:5001');  
-
+        self.startActiveMap();
-        if (mapperm) {
-            self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
-            self.socket.on('connect', function () {
-                console.log('socket connected');
-                self.setupSocket();
-            });
-        }
     },
     toggleBox: function (event) {
         var self = Metamaps.Realtime;
@@ -1452,14 +1450,43 @@ Metamaps.Realtime = {
             });
         }
     },
-    turnOn: function () {
+    startActiveMap: function () {
+        var self = Metamaps.Realtime;
+
+        var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        var start = function() {
+            if (mapperm) {
+                self.turnOn();
+                self.setupSocket();
+            }
+        }
+
+        if (!self.socket.connected) {
+            self.socket.socket.connect();
+        }
+        self.socket.on('connect', function () {
+            start();
+        });
+    },
+    endActiveMap: function () {
+        var self = Metamaps.Realtime;
+
+        $(document).off(Metamaps.JIT.events.mouseMove);
+        self.socket.disconnect();
+        self.socket.removeAllListeners();
+        $(".collabCompass").remove();
+        self.status = false;
+    },
+    turnOn: function (notify) {
         var self = Metamaps.Realtime;
 
         if (!self.status) {
-            self.sendRealtimeOn();
+            if (notify) self.sendRealtimeOn();
             $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
             self.status = true;
             $(".sidebarCollaborateIcon").addClass("blue");
+            $(".collabCompass").show();
         }
     },
     turnOff: function () {
@@ -1470,6 +1497,7 @@ Metamaps.Realtime = {
             $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
             self.status = false;
             $(".sidebarCollaborateIcon").removeClass("blue");
+            $(".collabCompass").hide();
         }
     },
     setupSocket: function () {
@@ -1500,6 +1528,14 @@ Metamaps.Realtime = {
         socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator);
 
         socket.on('maps-' + Metamaps.Active.Map.id, self.contentUpdate);
+
+        // update mapper compass position
+        socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);
+    
+        var sendCoords = function (event, coords) {
+            self.sendCoords(coords);
+        }
+        $(document).on(Metamaps.JIT.events.mouseMove, sendCoords);
     },
     sendRealtimeOn: function () {
         var self = Metamaps.Realtime;
@@ -1536,6 +1572,7 @@ Metamaps.Realtime = {
 
         self.mappersOnMap[data.userid] = {
             name: data.username,
+            image: data.userimage,
             realtime: data.userrealtime
         };
 
@@ -1552,6 +1589,14 @@ Metamaps.Realtime = {
 
         $('#mapper' + data.userid).remove();
         $('.realtimeMapperList ul').append(mapperListItem);
+
+        // create a div for the collaborators compass
+        $('#compass' + data.userid).remove();
+        $('<div/>', {
+            id: 'compass' + data.userid,
+            text: data.username,
+            class: 'collabCompass'
+        }).appendTo('#wrapper');
     },
     newPeerOnMap: function (data) {
         var self = Metamaps.Realtime;
@@ -1560,21 +1605,30 @@ Metamaps.Realtime = {
         // data.userid
         // data.username
         // data.userimage
+        // data.coords
 
         self.mappersOnMap[data.userid] = {
             name: data.username,
             realtime: true
         };
 
+        // create an item for them in the realtime box
         var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
         mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
         mapperListItem += data.username;
         mapperListItem += '<div class="littleJuntoIcon"></div>';
         mapperListItem += '</li>';
-
         $('#mapper' + data.userid).remove();
         $('.realtimeMapperList ul').append(mapperListItem);
 
+        // create a div for the collaborators compass
+        $('#compass' + data.userid).remove();
+        $('<div/>', {
+            id: 'compass' + data.userid,
+            text: data.username,
+            class: 'collabCompass'
+        }).appendTo('#wrapper');
+
         Metamaps.GlobalUI.notifyUser(data.username + ' just joined the map');
 
         // send this new mapper back your details, and the awareness that you've loaded the map
@@ -1598,6 +1652,7 @@ Metamaps.Realtime = {
         delete self.mappersOnMap[data.userid];
 
         $('#mapper' + data.userid).remove();
+        $('#compass' + data.userid).remove();
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
     },
@@ -1611,6 +1666,7 @@ Metamaps.Realtime = {
         self.mappersOnMap[data.userid].realtime = true;
 
         $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
+        $('#compass' + data.userid).show();
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
     },
@@ -1624,9 +1680,47 @@ Metamaps.Realtime = {
         self.mappersOnMap[data.userid].realtime = false;
 
         $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
+        $('#compass' + data.userid).hide();
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime');
     },
+    updatePeerCoords: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        var c = data.usercoords,
+            canvas = Metamaps.Visualize.mGraph.canvas,
+            s = canvas.getSize(),
+            p = canvas.getPos(),
+            ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY;
+        var pixels = {
+          x: (c.x / (1/sx)) + p.x + s.width/2 + ox,
+          y: (c.y / (1/sy)) + p.y + s.height/2 + oy
+        };
+        $('#compass' + data.userid).css({
+            left: pixels.x + 'px',
+            top: pixels.y + 'px'
+        });
+    },
+    sendCoords: function (coords) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        var map = Metamaps.Active.Map;
+        var mapper = Metamaps.Active.Mapper;
+
+        if (self.status && map.authorizeToEdit(mapper) && socket) {
+            var update = {
+                usercoords: coords,
+                userid: Metamaps.Active.Mapper.id,
+                mapid: Metamaps.Active.Map.id
+            };
+            socket.emit('updateMapperCoords', update);
+        }
+    },
     contentUpdate: function (data) {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
@@ -2617,6 +2711,13 @@ Metamaps.Topic = {
             success: start
         });
     },
+    end: function () {
+        if (Metamaps.Active.Topic) {
+            $('.rightclickmenu').remove();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+        }
+    },
     /*
      *
      *
@@ -2945,6 +3046,8 @@ Metamaps.Map = {
             Metamaps.Filter.checkMetacodes();
             Metamaps.Filter.checkSynapses();
             Metamaps.Filter.checkMappers();
+
+            Metamaps.Realtime.startActiveMap();
         }
 
         $.ajax({
@@ -2952,6 +3055,14 @@ Metamaps.Map = {
             success: start
         });
     },
+    end: function () {
+        if (Metamaps.Active.Map) {
+            $('.rightclickmenu').remove();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+            Metamaps.Realtime.endActiveMap();
+        }
+    },
     fork: function () {
         Metamaps.GlobalUI.openLightbox('forkmap');
 
@@ -3167,30 +3278,11 @@ Metamaps.Mapper = {
     // this function is to retrieve a mapper JSON object from the database
     // @param id = the id of the mapper to retrieve
     get: function (id, callback) {
-        // if the desired topic is not yet in the local topic repository, fetch it
+        return $.ajax({
-        if (Metamaps.Mappers.get(id) == undefined) {
+            url: "/users/" + id + ".json",
-            if (!callback) {
+            success: function (data) {
-                var e = $.ajax({
+                callback(new Metamaps.Backbone.Mapper(data));
-                    url: "/users/" + id + ".json",
-                    async: false
-                });
-                Metamaps.Mappers.add($.parseJSON(e.responseText));
-                return Metamaps.Mappers.get(id);
-            } else {
-                return $.ajax({
-                    url: "/users/" + id + ".json",
-                    success: function (data) {
-                        Metamaps.Mappers.add(data);
-                        callback(Metamaps.Mappers.get(id));
-                    }
-                });
             }
-        } else {
+        });
-            if (!callback) {
+    }
-                return Metamaps.Mappers.get(id);
-            } else {
-                return callback(Metamaps.Mappers.get(id));
-            }
-        }
-    },
 }; // end Metamaps.Mapper

app/assets/stylesheets/application.css

@@ -270,7 +270,6 @@ input[type="submit"]:active {
     font-size: 25px;
     line-height: 35px;
     color: rgba(255, 255, 255, 0.7);
-    font-family: 'LatoLight';
 }
 .openMetacodeSwitcher {
     display: block;
@@ -291,7 +290,6 @@ input[type="submit"]:active {
     width: 120px;
     text-align: center;
     margin-left: 90px;
-    font-family: 'LatoRegular';
 }
 /* synapse autocomplete */
 
@@ -312,7 +310,6 @@ input[type="submit"]:active {
     outline: none;
     font-size: 18px;
     line-height: 35px;
-    font-family: 'LatoRegular';
 }
 .new_synapse #synapse_desc {
     color: rgba(255, 255, 255, 0.7);
@@ -331,7 +328,6 @@ input[type="submit"]:active {
     outline: none;
     font-size: 16px;
     line-height: 20px;
-    font-family: 'LatoRegular';
 }
 label,
 select,
@@ -402,7 +398,6 @@ label {
     height: 30px;
     background: none;
     color: #717474;
-    font-family: 'LatoLight';
     font-size: 17px;
     border: none;
     border-right: 1px solid #717474;
@@ -646,7 +641,6 @@ label[for="user_remember_me"] {
     color: white;
     border-radius: 4px;
     font-size: 15px !important;
-    font-family: 'LatoRegular';
     line-height: 17px;
     padding: 3px 5px 2px;
     z-index: 100;
@@ -917,7 +911,6 @@ float: left;
 }
 #new_topic .tt-suggestion {
     padding: 5px;
-    font-family: 'LatoLight';
     background: rgba(42, 52, 60, 0.9);
     ;
 }
@@ -958,7 +951,6 @@ float: left;
     white-space: nowrap;
     border-radius: 4px;
     font-size: 15px !important;
-    font-family: 'LatoRegular';
     line-height: 15px;
     padding: 2px 5px 2px;
     z-index: 100;
@@ -983,7 +975,6 @@ float: left;
 }
 #new_synapse .tt-suggestion {
     padding: 5px;
-    font-family: 'LatoLight';
 }
 #new_synapse .autocompleteSection {
     float: left;
@@ -1022,7 +1013,6 @@ float: left;
     white-space: nowrap;
     border-radius: 4px;
     font-size: 15px !important;
-    font-family: 'LatoRegular';
     line-height: 15px;
     padding: 2px 5px 2px;
     z-index: 100;
@@ -1133,14 +1123,14 @@ float: left;
     background-position: -32px 0;
 }
 .yourMap .mapPermission:hover {
-    background-image: url(arrowdown_sprite.png);
+    background-image: url(arrowperms_sprite.png);
     cursor: pointer;
-    background-position: center -11px;
+    background-position: -32px 0;
 }
 .yourMap .mapPermission.minimize {
-    background-image: url(arrowdown_sprite.png) !important;
+    background-image: url(arrowperms_sprite.png) !important;
     cursor: pointer;
-    background-position: center -11px;
+    background-position: 0 0;
 }
 .mapInfoBox .mapPermission .permissionSelect {
     list-style: none;
@@ -1422,13 +1412,12 @@ float: left;
 
 #metacodeSwitchTabs {
     width: 100%;
-    font-family: LatoLight, Arial, Sans-Serif;
     font-size: 17px;
     line-height: 21px;
     border: none;
 }
 #metacodeSwitchTabs .setTitle {
-    font-family: Lato, Arial, sans-serif;
+    
 }
 #metacodeSwitchTabs .setDesc {
     margin-bottom: 5px;
@@ -1469,7 +1458,6 @@ float: left;
     background: none;
     font-size: 14px;
     line-height: 14px;
-    font-family: Lato;
 }
 #metacodeSwitchTabs button.button {
     width: auto !important;
@@ -1680,13 +1668,11 @@ float: left;
 #cheatSheet {
     width: 100%;
     height: 350px;
-    font-family: LatoLight, Arial, Sans-Serif;
     font-size: 17px;
     line-height: 21px;
     border: none;
 }
 #cheatSheet .sectionTitle {
-    font-family: Lato, Arial, sans-serif;
     font-weight: bold;
 }
 #cheatSheet .csItem {
@@ -1699,7 +1685,7 @@ float: left;
     margin: 0 2px;
 }
 #cheatSheet .csTitle {
-    font-family: Lato, Arial, sans-serif;
+
 }
 #cheatSheet .indented {
     margin-left: 15px;
@@ -1820,7 +1806,6 @@ float: left;
     float: left;
     margin-top: 5px;
     height: 40px;
-    font-family: 'LatoItalic';
     font-size: 17px;
     width: auto;
     padding: 0 30px;

app/assets/stylesheets/base.css

@@ -12,7 +12,6 @@
     top:100px;
     left:100px;
     width:300px;
-    min-height:360px;
     background-color:#F5F5F5;
     text-align: left;
     overflow: visible;
@@ -40,22 +39,27 @@
   display:block;
   position:relative;
   width:100%;
-  height:100%;
+  min-height:360px;
   z-index: 25;
 }
+.CardOnGraph.hasAttachment {
+  min-height:0;
+}
 
 .CardOnGraph .title {
   font-size: 18px;
   line-height: 22px;
-  display: block;
+  display: table;
   padding: 8px 16px;
   height: 80px;
   text-align: center;
   font-family: 'din-regular', sans-serif;
+  width: 268px;
 }
 
-.best_in_place_name {
+.CardOnGraph .titleWrapper {
-  
+  display: table-cell;
+  vertical-align: middle;
 }
 
 .best_in_place_name textarea, .best_in_place_name input {
@@ -81,6 +85,9 @@ text-align:center;
    line-height:15px;
    font-family: helvetica, sans-serif;
 }
+.CardOnGraph.hasAttachment .scroll {
+  height: auto;
+}
 
 .CardOnGraph .best_in_place_desc textarea {
   font-size: 12px;
@@ -126,11 +133,7 @@ background: none;
 
 .linkItem {
   float:left;
-  min-width:46px;
   height:46px;
-  background-repeat: no-repeat;
-  background-position: 0 center;
-  background-size: 24px 24px;
   z-index: 1;
   position: relative;
   color: #424242;
@@ -150,78 +153,111 @@ background: none;
   padding: 0;
 }
 .linkItem.contributor {
-  background-image: url(MMCCicon_mapper_black.png);
   margin-left:32px;
   z-index:1;
-  padding:17px 0 17px 28px;
+  padding:17px 16px 17px 40px;
+  position: relative;
+}
+.contributor .contributorIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  border-radius: 16px;
 }
 .linkItem.mapCount {
-  background-image: url(metamap32.png);
+  width: 24px;
-  min-width: 16px;
+  padding:17px 0 17px 35px;
-  padding:17px 0 17px 28px;
+}
+.linkItem.mapCount .mapCountIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  background-image: url(map32_sprite.png);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+}
+.linkItem.mapCount:hover .mapCountIcon {
+  background-position: 0 -32px;
 }
 .linkItem.synapseCount {
-  background-image: url(synapse32tmcard.png);
+  width: 24px;
-  min-width: 16px;
+  padding:17px 0 17px 35px;
-  padding:17px 0 17px 28px;
+}
+.linkItem.synapseCount .synapseCountIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  background-image: url(synapse32_sprite.png);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+}
+.linkItem.synapseCount:hover .synapseCountIcon {
+  background-position: 0 -32px;
 }
 .linkItem.mapPerm {
-
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  min-width: 32px;
+  margin-top: 8px;
+  background-image: url(permissions32_sprite.png);
+  background-position: 0 0;
 }
 .linkItem.mapPerm.co {
-  background-image: url(CO32.png);
+  background-position: 0 0;
 }
 .linkItem.mapPerm.pu {
-  background-image: url(PU32.png);
+  background-position: -64px 0;
 }
 .linkItem.mapPerm.pr {
-  background-image: url(PR32.png);
+  background-position: -32px 0;
 }
 
 .showcard .yourTopic .mapPerm:hover {
-  background-image: url(arrowexpand.png);
+  background-image: url(arrowperms_sprite.png);
-  background-size: 31px 25px;
+  background-position-x: -32px;
-  background-position-x: 8px;
   cursor:pointer;
 }
 .showcard .yourTopic .mapPerm.minimize {
- background-image: url(arrowcollapse.png) !important;
+ background-image: url(arrowperms_sprite.png) !important;
- background-size: 31px 25px;
+background-position-x: 0px;
-background-position-x: 8px;
 cursor: pointer;
 }
 .mapPerm .permissionSelect {
   list-style: none;
-  width: 40px;
+  width: 32px;
-  height: 80px;
+  height: 64px;
   position: relative;
-  top: 40px;
+  top: 32px;
 }
 .mapPerm .permissionSelect li {
-  width: 40px;
+  width: 32px;
-  height: 40px;
+  height: 32px;
   background-repeat: no-repeat;
-  background-position: center center;
+  background-position: 0 0;
-  background-size: 27px 27px;
+  background-image: url(permissions32_sprite.png);
-  background-color: #F5F5F5;
 }
 .mapPerm .permissionSelect .commons {
-  background-image: url(CO32.png);
+  background-position: 0 0;
 }
 .mapPerm .permissionSelect .public {
-  background-image: url(PU32.png);
+  background-position: -64px 0;
 }
 .mapPerm .permissionSelect .private {
-  background-image: url(PR32.png);
+  background-position: -32px 0;
 }
 .mapPerm .permissionSelect .commons:hover {
-  background-image: url(CO32b.png);
+  background-position: 0 -32px;
 }
 .mapPerm .permissionSelect .public:hover {
-  background-image: url(PU32b.png);
+  background-position: -64px -32px;
 }
 .mapPerm .permissionSelect .private:hover {
-  background-image: url(PR32b.png);
+  background-position: -32px -32px;
 }
 
 .CardOnGraph .metacodeTitle {
@@ -311,7 +347,6 @@ float:left;
  color: white;
  border-radius: 4px;
  font-size:15px !important;
- font-family:'LatoRegular';
  line-height:17px;
  padding: 3px 5px 2px;
  z-index:100;
@@ -335,59 +370,111 @@ float:left;
   line-height: 16px;
 }
 
-.addAttachment div {
+#addlink, #addupload {
   display: inline-block;
-  width: 150px;
+  width: 102px;
-  height: 23px;
+  height: 12px;
-  text-align: center; 
+  text-align: left; 
-  padding-top: 25px;
+  padding: 18px 0 18px 48px;
   font-size: 12px;
   color: #9e9e9e;
   cursor: pointer;
+  position: relative;
 }
 
-.addAttachment div:hover {
+#addlink:hover, #addupload:hover {
   color: #616161;
 }
 
-.addLink div {
+.attachmentIcon {
-  float: left;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+#linkIcon {
+  background-image: url(link_sprite.png);
+}
+#uploadIcon {
+  background-image: url(upload_sprite.png);
+}
+#addlink:hover #linkIcon, #addupload:hover #uploadIcon {
+  background-position: 0 -24px;
 }
 
-#addLinkBack {
+.addLink {
-  height: 48px;
+  position: relative;
-  width: 48px;
-  cursor: pointer;
 }
 #addLinkInput {
   height: 32px;
-  width: 236px;
+  width: 268px;
-  padding: 8px 16px 8px 0;
+  padding: 8px 16px 8px 16px;
   position: relative;
 }
 
 #addLinkInput input{
-padding: 7px 31px 7px 31px;
+padding: 9px 7px 9px 31px;
-height: 16px;
+height: 12px;
-width: 172px;
+width: 198px;
 margin: 0 0 0 0;
 border: 1px solid #BDBDBD;
 outline: none;
-font-size: 16px;
+font-size: 12px;
-line-height: 16px;
+line-height: 12px;
 background: white;
 color: black;
-font-family: 'LatoLight';
+font-family: 'din-regular', helvetica, sans-serif;
+}
+#addLinkIcon {
+  position: absolute;
+  top: 12px;
+  left: 20px;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-image: url(link_sprite.png);
+  pointer-events: none;
+  z-index: 1;
 }
 
 #addLinkReset {
   position: absolute;
   top: 8px;
-  right: 16px;
+  right: 15px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   float:none;
+  background-image: url(remove.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.linkActions {
+  position: relative;
+}
+
+#linkremove {
+  height: 12px;
+  padding: 26px 0 10px;
+  font-size: 12px;
+  background-image: url(/assets/remove.png);
+  background-repeat: no-repeat;
+  background-position: center 8px;
+  width: 48px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  cursor: pointer;
+  color: #9E9E9E;
+}
+#linkremove:hover {
+  color: #616161;
 }
 
 .cardSettings {
@@ -453,7 +540,7 @@ font-family: 'LatoLight';
 }
 
 #edit_synapse {
-  background: url("synapse32tmcard.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
+  background: url("synapse32.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
   border-radius: 5px;
   padding: 5px 5px 5px 30px;
   color: #000;
@@ -485,7 +572,6 @@ font-family: 'LatoLight';
     border-radius: 4px;
     color: #FFFFFF;
     display: none;
-    font-family: 'LatoRegular';
     font-size: 15px !important;
     line-height: 17px;
     padding: 3px 5px 2px;

app/assets/stylesheets/clean.css

@@ -806,3 +806,13 @@ box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
 body a#barometer_tab:hover {
   background-position: 0 -110px;
 }
+
+
+/* REALTIME */
+
+.collabCompass {
+    position:fixed;
+    top:50%;
+    left:50%;
+    z-index: 4;
+}

app/views/layouts/_templates.html.erb

@@ -178,13 +178,15 @@
 
 
     <script type="text/template" id="topicCardTemplate">
-    <div class="CardOnGraph" id="topic_{{id}}">
+    <div class="CardOnGraph {{hasAttachment}}" id="topic_{{id}}">
         <span class="title"> 
+            <div class="titleWrapper">                                                 
               <span class="best_in_place best_in_place_name"                      
                     data-url="/topics/{{id}}"                                     
                     data-object="topic"                                           
                     data-attribute="name"                                         
                     data-type="textarea">{{name}}</span>
+            </div> 
         </span>
         <div class="links">
             <div class="linkItem icon">
@@ -192,15 +194,18 @@
                 <div class="metacodeImage" style="background-image:url({{imgsrc}});" title="click and drag to move card"></div>
             </div>
             <div class="linkItem contributor">
+                <img src="/assets/user.png" class="contributorIcon" width="32" height="32" />
                 {{username}}
             </div>
-            <a href="/expore/topics/{{id}}" class="linkItem mapCount hoverForTip" title="Click to see which maps topic appears on">                  
+            <a href="/explore/topics/{{id}}" class="linkItem mapCount" title="Click to see which maps topic appears on">                  
+                 <div class="mapCountIcon"></div>
                  {{map_count}}                                                 
                </a> 
             <a href="/topics/{{id}}" class="linkItem synapseCount" title="Click to see this topics synapses">
+              <div class="synapseCountIcon"></div>
               {{synapse_count}}
             </a>
-            <div class="linkItem mapPerm {{mk_permission}}"></div>
+            <div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
             <div class="clearfloat"></div>
         </div>
         <div class="metacodeSelect">{{{metacode_select}}}</div>

app/views/layouts/application.html.erb

@@ -14,7 +14,6 @@
 
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
-  <%= javascript_include_tag "compileMapPages" %>
   <script type="text/javascript" src="//use.typekit.net/tki2nyo.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <script type="text/javascript" src="//use.typekit.net/obp7wss.js"></script>
@@ -92,13 +91,22 @@
     Metamaps.Metacodes = <%= Metacode.all.to_json.html_safe %>;
 
     Metamaps.Loading = {
-        loader: new CanvasLoader('loading')
+        loader: new CanvasLoader('loading'),
+        hide: function () {
+          $('#loading').hide();
+        },
+        show: function () {
+          $('#loading').show();
+        }
     };
     Metamaps.Loading.loader.setColor('#4fb5c0'); // default is '#000000'
     Metamaps.Loading.loader.setDiameter(28); // default is 40
     Metamaps.Loading.loader.setDensity(41); // default is 40
     Metamaps.Loading.loader.setRange(0.9); // default is 1.3
     Metamaps.Loading.loader.show(); // Hidden by default
+
+    // embedly
+    !function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b,d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}}(document);
 </script>
 
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>

config/environments/production.rb

@@ -70,7 +70,7 @@ Metamaps::Application.configure do
   # config.action_controller.asset_host = "http://assets.example.com"
 
   # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
-  config.assets.precompile += %w( compileMapPages.js )
+  #config.assets.precompile += %w( )
 
   # Disable delivery errors, bad email addresses will be ignored
   # config.action_mailer.raise_delivery_errors = false

public/famous/main.js

@@ -18,6 +18,9 @@ define(function(require, exports, module) {
     var f = Metamaps.Famous;
 
     f.mainContext = Engine.createContext(famous);
+    f.Surface = Surface;
+    f.Modifier = Modifier;
+    f.Transform = Transform;
 
 
     // INFOVIS
@@ -102,7 +105,7 @@ define(function(require, exports, module) {
     f.mainContext.add(f.yield.mod).add(f.yield.surf);
     
     f.loadYield = function () {
-        Metamaps.Loading.loader.hide();
+        Metamaps.Loading.hide();
         var yield = document.getElementById('yield') ? document.getElementById('yield').innerHTML : false;
         if (yield) {
             f.yield.surf.setContent(yield);
@@ -192,7 +195,7 @@ define(function(require, exports, module) {
             f.explore.show();
         }
         else if (Metamaps.currentSection === "") {
-            Metamaps.Loading.loader.hide();
+            Metamaps.Loading.hide();
             if (Metamaps.Active.Mapper) {
 
                 Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Mine );
@@ -310,5 +313,8 @@ define(function(require, exports, module) {
     };
     f.mainContext.add(f.toast.mod).add(f.toast.surf);
 
+    // an object for the realtime mapper compasses surfaces
+    f.compasses = {};
+
     f.logo.show();
 });

realtime/realtime-server.js

@@ -104,6 +104,15 @@ function start() {
             socket.broadcast.emit('maps-' + data.mapid + '-lostrealtime', newUser);
         });
 
+        socket.on('updateMapperCoords', function (data) {
+            var peer = {
+                userid: data.userid,
+                usercoords: data.usercoords
+            };
+
+            socket.broadcast.emit('maps-' + data.mapid + '-updatePeerCoords', peer);
+        });
+
     });
 }