diff --git a/app/assets/images/arrowdown_sprite.png b/app/assets/images/arrowdown_sprite.png index ec3a4550..1353452d 100755 Binary files a/app/assets/images/arrowdown_sprite.png and b/app/assets/images/arrowdown_sprite.png differ diff --git a/app/assets/images/arrowperms_sprite.png b/app/assets/images/arrowperms_sprite.png new file mode 100644 index 00000000..eff00341 Binary files /dev/null and b/app/assets/images/arrowperms_sprite.png differ diff --git a/app/assets/images/arrowright_sprite.png b/app/assets/images/arrowright_sprite.png index f0242bfb..5fb67803 100755 Binary files a/app/assets/images/arrowright_sprite.png and b/app/assets/images/arrowright_sprite.png differ diff --git a/app/assets/images/synapse32sprite.png b/app/assets/images/synapse32_sprite.png similarity index 100% rename from app/assets/images/synapse32sprite.png rename to app/assets/images/synapse32_sprite.png diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 534e538e..685f46cb 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -19,4 +19,9 @@ //= require ./metamaps/Metamaps.GlobalUI //= require ./metamaps/Metamaps.Router //= require ./metamaps/Metamaps.Backbone -//= require ./metamaps/Metamaps.Views \ No newline at end of file +//= require ./metamaps/Metamaps.Views +//= require ./librariesForMapPages/cloudcarousel +//= require ./librariesForMapPages/socket.io +//= require ./metamaps/JIT +//= require ./metamaps/Metamaps +//= require ./metamaps/Metamaps.JIT \ No newline at end of file diff --git a/app/assets/javascripts/compileMapPages.js b/app/assets/javascripts/compileMapPages.js deleted file mode 100644 index 24a98f84..00000000 --- a/app/assets/javascripts/compileMapPages.js +++ /dev/null @@ -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 \ No newline at end of file diff --git a/app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js b/app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js deleted file mode 100644 index 85d9aa08..00000000 --- a/app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! Embedly jQuery - v3.1.1 - 2013-06-05 - * https://github.com/embedly/embedly-jquery - * Copyright (c) 2013 Sean Creeley - * Licensed BSD - */ -(function(t){var e={key:null,endpoint:"oembed",secure:null,query:{},method:"replace",addImageStyles:!0,wrapElement:"div",className:"embed",batch:20,urlRe:null},i=/(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,r=function(t){return null===t||void 0===t},n=function(e,i){var r=[],n=[];return t.each(e,function(t,e){n.push(e),n.length===i&&(r.push(n),n=[])}),0!==n.length&&r.push(n),r},s=function(e){return r(e)?[]:t.isArray(e)?e:[e]},o=function(e){return t.map(e[0],function(i,r){return[t.map(e,function(t){return t[r]})]})},a=function(t,e,i){this.init(t,e,i)};a.prototype={init:function(e){this.urls=e,this.count=0,this.results={},this._deferred=t.Deferred()},notify:function(e){if(this.results[e.original_url]=e,this.count++,this._deferred.notify.apply(this._deferred,[e]),this.count===this.urls.length){var i=this,r=t.map(this.urls,function(t){return i.results[t]});this._deferred.resolve(r)}return this},state:function(){return this._deferred.state.apply(this._deferred,arguments)}},window.Keeper=a;var l=function(){};l.prototype={defaults:{},log:function(t,e){r(window.console)||r(window.console[t])||window.console[t].apply(window.console,[e])},build:function(e,i,n){n=r(n)?{}:n;var s=n.secure;r(s)&&(s="https:"===window.location.protocol?!0:!1);var o=(s?"https":"http")+"://api.embed.ly/"+("objectify"===e?"2/":"1/")+e,a=r(n.query)?{}:n.query;return a.key=n.key,o+="?"+t.param(a),o+="&urls="+t.map(i,encodeURIComponent).join(",")},ajax:function(l,h,u){if(u=t.extend({},e,t.embedly.defaults,"object"==typeof u&&u),r(u.key))return this.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly"),null;h=s(h);var d,p=new a(h),c=[],f=[];t.each(h,function(t,e){d=!1,i.test(e)&&(d=!0,null!==u.urlRe&&u.urlRe.test&&!u.urlRe.test(e)&&(d=!1)),d===!0?c.push(e):f.push({url:e,original_url:e,error:!0,invalid:!0,type:"error",error_message:'Invalid URL "'+e+'"'})});var y=n(c,u.batch),m=this;return t.each(y,function(e,i){t.ajax({url:m.build(l,i,u),dataType:"jsonp",success:function(e){t.each(o([i,e]),function(t,e){var i=e[1];i.original_url=e[0],i.invalid=!1,p.notify(i)})}})}),f.length&&setTimeout(function(){t.each(f,function(t,e){p.notify(e)})},1),p._deferred},oembed:function(t,e){return this.ajax("oembed",t,e)},preview:function(t,e){return this.ajax("preview",t,e)},objectify:function(t,e){return this.ajax("objectify",t,e)},extract:function(t,e){return this.ajax("extract",t,e)}};var h=function(){};h.prototype={build:function(e,i,n){n=t.extend({},t.embedly.defaults,"object"==typeof n&&n);var s=n.secure;r(s)&&(s="https:"===window.location.protocol?!0:!1);var o=(s?"https":"http")+"://i.embed.ly/"+("display"===e?"1/":"1/display/")+e,a=r(n.query)?{}:n.query;return a.key=n.key,o+="?"+t.param(a),o+="&url="+encodeURIComponent(i)},display:function(t,e){return this.build("display",t,e)},resize:function(t,e){return this.build("resize",t,e)},fill:function(t,e){return this.build("fill",t,e)},crop:function(t,e){return this.build("crop",t,e)}};var u=function(t,e,i){this.init(t,e,i)};u.prototype={init:function(e,i,r){this.elem=e,this.$elem=t(e),this.original_url=i,this.options=r,this.loaded=t.Deferred();var n=this;this.loaded.done(function(){n.$elem.trigger("loaded",[n])}),this.$elem.trigger("initialized",[this])},progress:function(e){t.extend(this,e),this.options.display?this.options.display.apply(this.elem,[this,this.elem]):"oembed"===this.options.endpoint&&this.display(),this.loaded.resolve(this)},imageStyle:function(){var t,e=[];return this.options.addImageStyles&&(this.options.query.maxwidth&&(t=isNaN(parseInt(this.options.query.maxwidth,10))?"":"px",e.push("max-width: "+this.options.query.maxwidth+t)),this.options.query.maxheight&&(t=isNaN(parseInt(this.options.query.maxheight,10))?"":"px",e.push("max-height: "+this.options.query.maxheight+t))),e.join(";")},display:function(){if("error"===this.type)return!1;this.style=this.imageStyle();var t;"photo"===this.type?(t="",t+=""+this.title+""):"video"===this.type||"rich"===this.type?t=this.html:(this.title=this.title||this.url,t=this.thumbnail_url?"":"",t+=""+this.title+"",t+=this.provider_name?""+this.provider_name+"":"",t+=this.description?'
'+this.description+"
":""),this.options.wrapElement&&(t="<"+this.options.wrapElement+' class="'+this.options.className+'">'+t+""),this.code=t,"replace"===this.options.method?this.$elem.replaceWith(this.code):"after"===this.options.method?this.$elem.after(this.code):"afterParent"===this.options.method?this.$elem.parent().after(this.code):"replaceParent"===this.options.method&&this.$elem.parent().replaceWith(this.code),this.$elem.trigger("displayed",[this])}},t.embedly=new l,t.embedly.display=new h,t.fn.embedly=function(i){if(void 0===i||"object"==typeof i){if(i=t.extend({},e,t.embedly.defaults,"object"==typeof i&&i),r(i.key))return t.embedly.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly"),this.each(t.noop);var n={},s=function(e){if(!t.data(t(e),"embedly")){var r=t(e).attr("href"),s=new u(e,r,i);t.data(e,"embedly",s),n.hasOwnProperty(r)?n[r].push(s):n[r]=[s]}},o=this.each(function(){r(t(this).attr("href"))?t(this).find("a").each(function(){r(t(this).attr("href"))||s(this)}):s(this)}),a=t.embedly.ajax(i.endpoint,t.map(n,function(t,e){return e}),i).progress(function(e){t.each(n[e.original_url],function(t,i){i.progress(e)})});return i.progress&&a.progress(i.progress),i.done&&a.done(i.done),o}},t.expr[":"].embedly=function(e){return!r(t(e).data("embedly"))},t.fn.display=function(i,n){if(r(i)&&(i="display"),void 0===n||"object"==typeof n){if(n=t.extend({},e,t.embedly.defaults,"object"==typeof n&&n),r(n.key))return t.embedly.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly/display"),this.each(t.noop);var s=function(e){var r=t(e);if(!r.data("display")){var s=r.data("src")||r.attr("href"),o={original_url:s,url:t.embedly.display.build(i,s,n)};r.data("display",o),r.trigger("initialized",[e]);var a="";r.is("a")?r.append(a):r.replaceWith(a)}},o=function(e){return r(t(e).data("src"))&&r(t(e).attr("href"))?!1:!0},a=this.each(function(){o(this)?s(this):t(this).find("img,a").each(function(){o(this)&&s(this)})});return a}},t.expr[":"].display=function(e){return!r(t(e).data("display"))}})(jQuery,window); \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/Metamaps.JIT.js b/app/assets/javascripts/metamaps/Metamaps.JIT.js index f0e1d876..5b9f7458 100644 --- a/app/assets/javascripts/metamaps/Metamaps.JIT.js +++ b/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, { - nodeFrom: edge.nodeFrom, - nodeTo: edge.nodeTo - }) || - _.findWhere(edges, { - nodeFrom: edge.nodeTo, - nodeTo: edge.nodeFrom - }); + if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) { + existingEdge = _.findWhere(edges, { + nodeFrom: edge.nodeFrom, + nodeTo: edge.nodeTo + }) || + _.findWhere(edges, { + nodeFrom: edge.nodeTo, + nodeTo: edge.nodeFrom + }); - if (existingEdge) { - // for when you're dealing with multiple relationships between the same two topics - if (Metamaps.Active.Map) { - mapping = s.getMapping(); - existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id); + if (existingEdge) { + // for when you're dealing with multiple relationships between the same two topics + if (Metamaps.Active.Map) { + mapping = s.getMapping(); + 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 diff --git a/app/assets/javascripts/metamaps/Metamaps.Router.js b/app/assets/javascripts/metamaps/Metamaps.Router.js index 50604f63..dadc3771 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Router.js +++ b/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').addClass('mapPage'); + $('.wrapper').removeClass('homePage explorePage 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); } }); diff --git a/app/assets/javascripts/metamaps/Metamaps.Views.js b/app/assets/javascripts/metamaps/Metamaps.Views.js index e63803c8..cb399c62 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Views.js +++ b/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); diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index 5ba821e5..9288d125 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/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: '
share
remove
', + linkActionsString: '
Remove
', 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+='
'; + addLinkDiv+='
'; addLinkDiv+='
'; addLinkDiv+='
'; $('.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 = $('', { + var embedlyEl = $('', { id: 'embedlyLink', + 'data-card-chrome': '0', + 'data-card-description': '0', href: text - }); - embedlyEl.embedly({ - query: {maxwidth: 300}, - key: '7983300f4c1f48569ca242e3d6bff1e9' - }); + }).html(text); + //embedlyEl.embedly({ + // query: {maxwidth: 300}, + // 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({ - query: {maxwidth: 300}, - key: '7983300f4c1f48569ca242e3d6bff1e9' - }); + //$('#embedlyLink').embedly({ + // query: {maxwidth: 300}, + // 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 s = $('.showcard').find('.scroll'); - s.height(s.height()).mCustomScrollbar('update'); - - var name = $(this).html(); - topic.set("name", Metamaps.Util.decodeEntities(name)); - Metamaps.Visualize.mGraph.plot(); + var name = Metamaps.Util.decodeEntities($(this).html()); + topic.set("name", name); }); $(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 = ''; + nodeValues.embeds = ''; nodeValues.embeds += topic.get('link'); nodeValues.embeds += ''; addAttachmentHidden='hidden'; nodeValues.attachments += self.linkActionsString; + nodeValues.hasAttachment = "hasAttachment"; } else { nodeValues.embeds = ''; + nodeValues.hasAttachment = ''; } nodeValues.attachments += '
'; - nodeValues.attachments+= ''; - nodeValues.attachments+= '
Upload a file
'; + nodeValues.attachments+= ''; + nodeValues.attachments+= '
Upload a file
'; 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); - - if (mapperm) { - self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); - self.socket.on('connect', function () { - console.log('socket connected'); - self.setupSocket(); - }); - } + self.socket = io.connect('http://localhost:5001'); + self.startActiveMap(); }, 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(); + $('
', { + 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 = '
  • '; mapperListItem += ''; mapperListItem += data.username; mapperListItem += '
    '; mapperListItem += '
    • '; - $('#mapper' + data.userid).remove(); $('.realtimeMapperList ul').append(mapperListItem); + // create a div for the collaborators compass + $('#compass' + data.userid).remove(); + $('
    ', { + 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 - if (Metamaps.Mappers.get(id) == undefined) { - if (!callback) { - var e = $.ajax({ - 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)); - } - }); + return $.ajax({ + url: "/users/" + id + ".json", + success: function (data) { + callback(new Metamaps.Backbone.Mapper(data)); } - } else { - if (!callback) { - return Metamaps.Mappers.get(id); - } else { - return callback(Metamaps.Mappers.get(id)); - } - } - }, + }); + } }; // end Metamaps.Mapper diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 2b6bbd4f..5459a53f 100644 --- a/app/assets/stylesheets/application.css +++ b/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; diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 07faaad4..60621130 100644 --- a/app/assets/stylesheets/base.css +++ b/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); - min-width: 16px; - padding:17px 0 17px 28px; + width: 24px; + padding:17px 0 17px 35px; +} +.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); - min-width: 16px; - padding:17px 0 17px 28px; + width: 24px; + padding:17px 0 17px 35px; +} +.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-size: 31px 25px; - background-position-x: 8px; + background-image: url(arrowperms_sprite.png); + background-position-x: -32px; cursor:pointer; } .showcard .yourTopic .mapPerm.minimize { - background-image: url(arrowcollapse.png) !important; - background-size: 31px 25px; -background-position-x: 8px; + background-image: url(arrowperms_sprite.png) !important; +background-position-x: 0px; cursor: pointer; } .mapPerm .permissionSelect { list-style: none; - width: 40px; - height: 80px; + width: 32px; + height: 64px; position: relative; - top: 40px; + top: 32px; } .mapPerm .permissionSelect li { - width: 40px; - height: 40px; + width: 32px; + height: 32px; background-repeat: no-repeat; - background-position: center center; - background-size: 27px 27px; - background-color: #F5F5F5; + background-position: 0 0; + background-image: url(permissions32_sprite.png); } .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; - height: 23px; - text-align: center; - padding-top: 25px; + width: 102px; + height: 12px; + text-align: left; + 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 { - float: left; +.attachmentIcon { + 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 { - height: 48px; - width: 48px; - cursor: pointer; +.addLink { + position: relative; } #addLinkInput { height: 32px; - width: 236px; - padding: 8px 16px 8px 0; + width: 268px; + padding: 8px 16px 8px 16px; position: relative; } #addLinkInput input{ -padding: 7px 31px 7px 31px; -height: 16px; -width: 172px; +padding: 9px 7px 9px 31px; +height: 12px; +width: 198px; margin: 0 0 0 0; border: 1px solid #BDBDBD; outline: none; -font-size: 16px; -line-height: 16px; +font-size: 12px; +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; diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index a19b20ed..4548ad71 100644 --- a/app/assets/stylesheets/clean.css +++ b/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; +} diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index 8e9ff38f..9f1e40ea 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -178,13 +178,15 @@ @@ -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); <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %> diff --git a/config/environments/production.rb b/config/environments/production.rb index fdf1495b..0707c5e7 100644 --- a/config/environments/production.rb +++ b/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 diff --git a/public/famous/main.js b/public/famous/main.js index 6d452939..364b5904 100644 --- a/public/famous/main.js +++ b/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(); }); \ No newline at end of file diff --git a/realtime/realtime-server.js b/realtime/realtime-server.js index b8515b8a..741f56b5 100644 --- a/realtime/realtime-server.js +++ b/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); + }); + }); }