glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

change in embedly

Browse source
This commit is contained in:
Connor Turland 2014-09-09 18:17:39 -04:00
parent 7c6b894888
commit d2760b8688
21 changed files with 320 additions and 2607 deletions

1778
app/assets/application-bkup.css
View file

File diff suppressed because it is too large Load diff

639
app/assets/base-bkup.css
View file

@ -1,639 +0,0 @@
#center-container {
position:relative;
height:100%;
width:100%;
/* background-color:#031924; */
color:#444;
}
.showcard {
position:absolute;
display:none;
top:100px;
left:100px;
width:300px;
min-height:360px;
background-color:#F5F5F5;
text-align: left;
overflow: visible;
z-index:14000;
color: #424242;
border-radius:2px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
}
.text {
margin: 7px;
}
#infovis {
width:100%;
height:100%;
}
.showcard .permission {
width:100%;
height:100%;
}
.CardOnGraph {
display:block;
position:relative;
width:100%;
height:100%;
z-index: 25;
}
.CardOnGraph .title {
font-size: 18px;
line-height: 22px;
display: block;
padding: 8px 16px;
height: 80px;
text-align: center;
font-family: 'din-regular', sans-serif;
}
.best_in_place_name {
}
.best_in_place_name textarea, .best_in_place_name input {
font-family: 'din-regular', sans-serif;
color: #424242;
font-size: 18px;
line-height: 22px;
height: 15px;
padding: 5px 0;
width: 100%;
margin: 0;
border: 0;
outline: none;
background: none;
text-align:center;
}
.CardOnGraph .scroll {
display:block;
padding: 8px 16px;
height: 152px;
font-size: 12px;
line-height:15px;
font-family: helvetica, sans-serif;
}
.CardOnGraph .best_in_place_desc textarea {
font-size: 12px;
line-height:15px;
font-family: helvetica, sans-serif;
color: #424242;
padding: 0;
width: 100%;
margin: 0;
border: 0;
outline: none;
font-size: 12px;
line-height: 15px;
background: none;
}
.CardOnGraph .desc h3 {
font-style:normal;
margin-top:5px;
}
.CardOnGraph .best_in_place_desc input {
float: right;
margin: 2px 0px 0px 2px;
padding: 1px 5px;
}
.CardOnGraph .best_in_place_desc {
display:block;
margin-top:2px;
}
#edit_synapse .best_in_place_desc {
width: auto;
}
.CardOnGraph .links {
position:relative;
border-bottom: 1px solid #BDBDBD;
border-top: 1px solid #BDBDBD;
}
.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;
font-size: 12px;
line-height:12px;
height:12px;
padding:17px 0;
}
.linkItem a {
color: #424242;
}
.CardOnGraph .icon {
position:absolute;
width:100%;
z-index:1;
padding: 0;
}
.linkItem.contributor {
background-image: url(MMCCicon_mapper_black.png);
margin-left:32px;
z-index:1;
padding:17px 0 17px 28px;
}
.linkItem.mapCount {
background-image: url(MMCCicon_map_black.png);
min-width: 16px;
padding:17px 0 17px 28px;
}
.linkItem.synapseCount {
background-image: url(MMCCicon_synapse_black.png);
min-width: 16px;
padding:17px 0 17px 28px;
}
.linkItem.mapPerm {
}
.linkItem.mapPerm.co {
background-image: url(MMCCicon_commons.png);
}
.linkItem.mapPerm.pu {
background-image: url(MMCCicon_public.png);
}
.linkItem.mapPerm.pr {
background-image: url(MMCCicon_private.png);
}
.showcard .yourTopic .mapPerm:hover {
background-image: url(/assets/MMCCicon_maximize_arrow_black.png);
background-size: 31px 25px;
background-position-x: 8px;
cursor:pointer;
}
.showcard .yourTopic .mapPerm.minimize {
background-image: url(MMCCicon_minimize_arrow_black.png) !important;
background-size: 31px 25px;
background-position-x: 8px;
cursor: pointer;
}
.mapPerm .permissionSelect {
list-style: none;
width: 40px;
height: 80px;
position: relative;
top: 40px;
}
.mapPerm .permissionSelect li {
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center center;
background-size: 27px 27px;
background-color: #F5F5F5;
}
.mapPerm .permissionSelect .commons {
background-image: url(MMCCicon_commons.png);
}
.mapPerm .permissionSelect .public {
background-image: url(MMCCicon_public.png);
}
.mapPerm .permissionSelect .private {
background-image: url(MMCCicon_private.png);
}
.mapPerm .permissionSelect .commons:hover {
background-image: url(MMCCicon_commons_black.png);
}
.mapPerm .permissionSelect .public:hover {
background-image: url(MMCCicon_public_black.png);
}
.mapPerm .permissionSelect .private:hover {
background-image: url(MMCCicon_private_black.png);
}
.CardOnGraph .metacodeTitle {
font-style: italic;
font-family: 'vinyl';
text-transform: uppercase;
position: absolute;
line-height: 24px;
height:24px;
font-size: 20px;
display: none;
width: 90%;
padding: 11px 0 11px 10%;
background-color: #64BC61;
color: #000;
}
.permission.canEdit .metacodeTitle {
cursor:pointer;
background-image: url(MMCCicon_maximize_arrow_black.png);
background-repeat:no-repeat;
background-position: right center;
}
.permission.canEdit .metacodeTitle.minimize {
background-image: url(MMCCicon_minimize_arrow_black.png);
}
.CardOnGraph .metacodeImage {
cursor:move;
width:46px;
height:46px;
position:absolute;
left:-23px;
top:0;
background-size:46px 46px;
background-position:0 0;
background-repeat:no-repeat;
}
#metacodeOptions {
display:none;
}
.CardOnGraph .metacodeSelect {
display:none;
width:100%;
z-index: 2;
position: absolute;
background: #EAEAEA;
height: 150px;
}
.CardOnGraph .metacodeSelect ul {
font-style: italic;
font-family: 'vinyl';
text-transform: uppercase;
position: absolute;
line-height: 36px;
font-size: 20px;
display:block;
width: 100%;
margin:0;
padding: 0;
list-style:none;
height:150px;
overflow:hidden;
}
.CardOnGraph .metacodeSelect ul li {
background-color: #EAEAEA;
width:100%;
border-bottom:1px solid #AAAAAA;
cursor:pointer;
}
.CardOnGraph .metacodeSelect ul li:hover {
background-color: #F8F8F8;
}
.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName {
float:left;
}
.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
display:block;
}
.CardOnGraph .tip, .mapCard .tip {
display:none;
position: absolute;
background: black;
top: 35px;
left: 0;
color: white;
border-radius: 4px;
font-size:15px !important;
font-family:'LatoRegular';
line-height:17px;
padding: 3px 5px 2px;
z-index:100;
}
.CardOnGraph .attachments {
border-top: 1px solid #BDBDBD;
width:100%;
height:47px;
}
.attachments a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
margin-left: 40px;
padding-top:9px;
font-size: 16px;
line-height: 16px;
}
.addAttachment div {
display: inline-block;
width: 150px;
height: 23px;
text-align: center;
padding-top: 25px;
font-size: 12px;
color: #9e9e9e;
cursor: pointer;
}
.addAttachment div:hover {
color: #616161;
}
.addLink div {
float: left;
}
#addLinkBack {
height: 48px;
width: 48px;
cursor: pointer;
}
#addLinkInput {
height: 32px;
width: 236px;
padding: 8px 16px 8px 0;
position: relative;
}
#addLinkInput input{
padding: 7px 31px 7px 31px;
height: 16px;
width: 172px;
margin: 0 0 0 0;
border: 1px solid #BDBDBD;
outline: none;
font-size: 16px;
line-height: 16px;
background: white;
color: black;
font-family: 'LatoLight';
}
#addLinkReset {
position: absolute;
top: 8px;
right: 16px;
width: 32px;
height: 32px;
cursor: pointer;
float:none;
}
.cardSettings {
position: absolute;
left: 12px;
top: 12px;
}
.editSettings {
background: #ddd;
border-radius: 10px;
padding: 5px 0 5px 5px;
position: relative;
left: 16px;
width: 175px;
opacity: 0.98;
box-shadow: 4px 4px 5px #888888;
border: 1px solid #AAA;
z-index: 5;
}
.editSettings span {
display: inline-block;
}
.permActivator {
width: 16px;
height: 16px;
background: url('settings.png') no-repeat 0 0;
overflow:hidden;
position: absolute;
left: 0px;
top: 30px;
}
#edit_synapse .mapPerm,
#edit_synapse .permActivator {
position: static;
display: inline-block;
color: #000;
}
#edit_synapse .mapPerm {
width: 20px;
height:20px;
background-repeat: no-repeat;
background-size: 20px 20px;
margin: 10px 12px 0 12px;
}
#edit_synapse .mapPerm.co {
background-image: url("/assets/MMCCicon_commons.png");
}
#edit_synapse .mapPerm.pu {
background-image: url("/assets/MMCCicon_public.png");
}
#edit_synapse .mapPerm.pr {
background-image: url("/assets/MMCCicon_private.png");
}
#edit_synapse .permActivator {
position: absolute;
margin-top: -1.3em;
}
#edit_synapse {
background: url("/assets/MMCCicon_synapse_black.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
border-radius: 5px;
padding: 5px 5px 5px 30px;
color: #000;
}
#edit_synapse_name {
margin-left: 0.4em;
border-bottom: 1px solid black;
text-align:center;
max-width: 160px;
}
#edgeUser {
display:inline-block;
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
height: 20px;
min-width: 20px;
position: relative;
background-image: url("MMCCicon_mapper_black.png");
margin: 10px 0 0 10px;
}
#edgeUser.hoverForTip:hover .tip {
display:block;
}
#edgeUser .tip {
background: none repeat scroll 0 0 #000000;
border-radius: 4px;
color: #FFFFFF;
display: none;
font-family: 'LatoRegular';
font-size: 15px !important;
line-height: 17px;
padding: 3px 5px 2px;
position: absolute;
left: 0;
text-align: center;
top: 23px;
z-index: 100;
}
#edit_synapse .click-to-edit {
margin-left: 0.3em;
}
#edit_synapse.yourEdge .mapPerm:hover {
background-image: url(/assets/MMCCicon_maximize_arrow_black.png);
background-size: 24px 17px;
background-position: 0px 2px;
cursor:pointer;
}
#edit_synapse.yourEdge .mapPerm.minimize {
background-image: url(MMCCicon_minimize_arrow_black.png) !important;
background-size: 24px 17px;
background-position: 0px 2px;
cursor: pointer;
}
#edit_synapse .mapPerm .permissionSelect {
list-style: none;
width: 26px;
height: 52px;
position: relative;
top: 20px;
left:-3px;
}
#edit_synapse .mapPerm .permissionSelect li {
width: 26px;
height: 26px;
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px;
background-color:white;
}
/* Map Cards */
.map {
float:left;
width:220px;
height:340px;
font-size: 12px;
text-align: left;
overflow: visible;
background: #424242;
border-radius:2px;
margin:0 12px 12px 0;
}
.mapCard {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
position:relative;
width:100%;
height:308px;
padding: 16px 0;
color:#F5F5F5;
}
.mapCard .title {
font-size:18px;
line-height:22px;
display:block;
padding: 0 16px;
text-align: center;
-webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: none; /* OLD - Firefox 19- */
-webkit-flex: none; /* Chrome */
-ms-flex: none; /* IE 10 */
flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */
font-family: 'din-regular', sans-serif;
}
.mapCard .mapScreenshot {
width: 188px;
height: 126px;
padding: 8px 16px;
}
.mapCard .mapScreenshot img {
width: 188px;
height: 126px;
}
.mapCard .scroll {
display:block;
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
overflow-y:auto;
padding:0 16px 8px;
font-family: helvetica, sans-serif;
font-style: italic;
font-size: 12px;
}
.mCS_no_scrollbar {
padding-right: 5px;
}
.mapCard .mapMetadata {
font-family: 'din-regular', sans-serif;
font-size: 12px;
position:relative;
border-top: 1px solid #BDBDBD;
-webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: none; /* OLD - Firefox 19- */
-webkit-flex: none; /* Chrome */
-ms-flex: none; /* IE 10 */
flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.mapCard .metadataSection {
padding: 8px 16px 0 16px;
width: 78px;
float: left;
}
.mapPermission {
font-family: 'din-medium', sans-serif;
}
.cCountColor {
font-family: 'din-medium', sans-serif;
color: #DB5D5D;
}
.tCountColor {
font-family: 'din-medium', sans-serif;
color: #4FC059;
}
.sCountColor {
font-family: 'din-medium', sans-serif;
color: #DAB539;
}

BIN
app/assets/images/arrowdown_sprite.png
View file

Binary file not shown.
Side by side Swipe

Before

(image error) Size: 289 B

After

(image error) Size: 331 B

BIN
app/assets/images/arrowperms_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 543 B

BIN
app/assets/images/arrowright_sprite.png
View file

Binary file not shown.
Side by side Swipe

Before

(image error) Size: 303 B

After

(image error) Size: 349 B

0
app/assets/images/synapse32sprite.png → app/assets/images/synapse32_sprite.png
View file

Side by side Swipe

Before

(image error) Size: 627 B

After

(image error) Size: 627 B

7
app/assets/javascripts/application.js
View file

@ -19,4 +19,9 @@
//= require ./metamaps/Metamaps.GlobalUI //= require ./metamaps/Metamaps.GlobalUI
//= require ./metamaps/Metamaps.Router //= require ./metamaps/Metamaps.Router
//= require ./metamaps/Metamaps.Backbone //= require ./metamaps/Metamaps.Backbone
//= require ./metamaps/Metamaps.Views //= require ./metamaps/Metamaps.Views
//= require ./librariesForMapPages/cloudcarousel
//= require ./librariesForMapPages/socket.io
//= require ./metamaps/JIT
//= require ./metamaps/Metamaps
//= require ./metamaps/Metamaps.JIT

20
app/assets/javascripts/compileMapPages.js
View file

@ -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

6
app/assets/javascripts/librariesForAllPages/jquery.embedly.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
app/assets/javascripts/metamaps/Metamaps.JIT.js
View file

@ -586,6 +586,10 @@ Metamaps.JIT = {
var node = eventInfo.getNode(); var node = eventInfo.getNode();
var edge = eventInfo.getEdge(); var edge = eventInfo.getEdge();
if (Metamaps.Active.Map && Metamaps.Realtime.status) {
Metamaps.Realtime.sendCoords(eventInfo.getPos());
}
//if we're on top of a node object, act like there aren't edges under it //if we're on top of a node object, act like there aren't edges under it
if (node != false) { if (node != false) {
if (Metamaps.Mouse.edgeHoveringOver) { if (Metamaps.Mouse.edgeHoveringOver) {

2
app/assets/javascripts/metamaps/Metamaps.Router.js
View file

@ -76,7 +76,7 @@
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] ); Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
if (Metamaps.Maps[capitalize].length === 0) { if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.loader.show(); Metamaps.Loading.show();
setTimeout(function(){ setTimeout(function(){
Metamaps.Maps[capitalize].getMaps(); // this will trigger an explore maps render 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 }, 300); // wait 300 milliseconds till the other animations are done to do the fetch

2
app/assets/javascripts/metamaps/Metamaps.Views.js
View file

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

166
app/assets/javascripts/metamaps/Metamaps.js
View file

@ -115,6 +115,12 @@ Metamaps.Backbone.init = function () {
} }
this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this); 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) { authorizeToEdit: function (mapper) {
if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true; if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
@ -627,7 +633,7 @@ Metamaps.Create = {
*/ */
Metamaps.TopicCard = { Metamaps.TopicCard = {
openTopicCard: null, //stores the JIT local ID of the topic with the topic card open 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 () { init: function () {
// initialize best_in_place editing // initialize best_in_place editing
@ -664,30 +670,31 @@ Metamaps.TopicCard = {
var self = Metamaps.TopicCard; var self = Metamaps.TopicCard;
var showCard = document.getElementById('showcard'); 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 // starting embed.ly
var addLinkFunc = function () { var addLinkFunc = function () {
var addLinkDiv =''; var addLinkDiv ='';
var addLinkDesc ='Enter or paste a link'; 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="addLinkInput"><input placeholder="' + addLinkDesc + '"></input>';
addLinkDiv+='<div id="addLinkReset"></div></div></div>'; addLinkDiv+='<div id="addLinkReset"></div></div></div>';
$('.addAttachment').hide(); $('.addAttachment').hide();
$('.attachments').append(addLinkDiv); $('.attachments').append(addLinkDiv);
$('.showcard #addLinkBack').click(backFunc);
$('.showcard #addLinkReset').click(resetFunc); $('.showcard #addLinkReset').click(resetFunc);
$('.showcard #addLinkInput input').bind("paste keyup",inputEmbedFunc); $('.showcard #addLinkInput input').bind("paste keyup",inputEmbedFunc);
$('#addLinkInput input').focus(); $('#addLinkInput input').focus();
}; };
var backFunc = function () { var resetFunc = function () {
$('.addLink').remove(); $('.addLink').remove();
$('.addAttachment').show(); $('.addAttachment').show();
}; };
var resetFunc = function () {
$('#addLinkInput input').val('');
$('#addLinkInput input').focus();
};
var inputEmbedFunc = function (event) { var inputEmbedFunc = function (event) {
var element = this; var element = this;
@ -700,23 +707,24 @@ Metamaps.TopicCard = {
topic.save({ topic.save({
link: text link: text
}); });
var embedlyEl = $('<a/>', { var embedlyEl = $('<a/>', {
id: 'embedlyLink', id: 'embedlyLink',
'data-card-chrome': '0',
'data-card-description': '0',
href: text href: text
}); }).html(text);
embedlyEl.embedly({ //embedlyEl.embedly({
query: {maxwidth: 300}, // query: {maxwidth: 300},
key: '7983300f4c1f48569ca242e3d6bff1e9' // key: '7983300f4c1f48569ca242e3d6bff1e9'
}); //});
$('.addLink').remove(); $('.addLink').remove();
$('.embeds').append(embedlyEl); $('.embeds').append(embedlyEl);
embedly('card', document.getElementById('embedlyLink'));
$('.CardOnGraph').addClass('hasAttachment');
$('.attachments').append(self.linkActionsString); $('.attachments').append(self.linkActionsString);
bindLinkActionListeners(); bindLinkActionListeners();
} }
}, 100); }, 100);
};
var shareLinkFunc = function () {
}; };
var removeLinkFunc = function () { var removeLinkFunc = function () {
topic.save({ topic.save({
@ -725,16 +733,17 @@ Metamaps.TopicCard = {
$('.embeds').empty(); $('.embeds').empty();
$('.linkActions').remove(); $('.linkActions').remove();
$('.addAttachment').show(); $('.addAttachment').show();
$('.CardOnGraph').removeClass('hasAttachment');
}; };
var bindLinkActionListeners = function () { var bindLinkActionListeners = function () {
$('#linkremove').click(removeLinkFunc); $('#linkremove').click(removeLinkFunc);
$('#linkshare').click(shareLinkFunc);
}; };
if (topic.get('link')) { if (topic.get('link')) {
$('#embedlyLink').embedly({ //$('#embedlyLink').embedly({
query: {maxwidth: 300}, // query: {maxwidth: 300},
key: '7983300f4c1f48569ca242e3d6bff1e9' // key: '7983300f4c1f48569ca242e3d6bff1e9'
}); //});
embedly('card', document.getElementById('embedlyLink'));
bindLinkActionListeners(); bindLinkActionListeners();
} }
$('.showcard #addlink').click(addLinkFunc); $('.showcard #addlink').click(addLinkFunc);
@ -836,21 +845,12 @@ Metamaps.TopicCard = {
//bind best_in_place ajax callbacks //bind best_in_place ajax callbacks
$(showCard).find('.best_in_place_name').bind("ajax:success", function () { $(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 () { $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
this.innerHTML = this.innerHTML.replace(/\r/g, '') this.innerHTML = this.innerHTML.replace(/\r/g, '')
var s = $('.showcard').find('.scroll');
s.height(s.height()).mCustomScrollbar('update');
var desc = $(this).html(); var desc = $(this).html();
topic.set("desc", desc); topic.set("desc", desc);
}); });
@ -902,18 +902,20 @@ Metamaps.TopicCard = {
nodeValues.attachments = ''; nodeValues.attachments = '';
if (topic.get('link') && topic.get('link')!=='') { 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 += topic.get('link');
nodeValues.embeds += '</a>'; nodeValues.embeds += '</a>';
addAttachmentHidden='hidden'; addAttachmentHidden='hidden';
nodeValues.attachments += self.linkActionsString; nodeValues.attachments += self.linkActionsString;
nodeValues.hasAttachment = "hasAttachment";
} }
else { else {
nodeValues.embeds = ''; nodeValues.embeds = '';
nodeValues.hasAttachment = '';
} }
nodeValues.attachments += '<div class="addAttachment ' +addAttachmentHidden+ '">'; 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.permission = topic.get("permission");
nodeValues.mk_permission = topic.get("permission").substring(0, 2); nodeValues.mk_permission = topic.get("permission").substring(0, 2);
@ -1281,7 +1283,7 @@ Metamaps.Visualize = {
self.mGraph.graph.empty(); self.mGraph.graph.empty();
} }
Metamaps.Loading.loader.hide(); Metamaps.Loading.hide();
// load JSON data, if it's not empty // load JSON data, if it's not empty
if (!self.loadLater) { if (!self.loadLater) {
//load JSON data. //load JSON data.
@ -1460,6 +1462,7 @@ Metamaps.Realtime = {
$(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn'); $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
self.status = true; self.status = true;
$(".sidebarCollaborateIcon").addClass("blue"); $(".sidebarCollaborateIcon").addClass("blue");
$(".collabCompass").show();
} }
}, },
turnOff: function () { turnOff: function () {
@ -1470,6 +1473,7 @@ Metamaps.Realtime = {
$(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff'); $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
self.status = false; self.status = false;
$(".sidebarCollaborateIcon").removeClass("blue"); $(".sidebarCollaborateIcon").removeClass("blue");
$(".collabCompass").hide();
} }
}, },
setupSocket: function () { setupSocket: function () {
@ -1500,6 +1504,9 @@ Metamaps.Realtime = {
socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator); socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator);
socket.on('maps-' + Metamaps.Active.Map.id, self.contentUpdate); socket.on('maps-' + Metamaps.Active.Map.id, self.contentUpdate);
// update mapper compass position
socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);
}, },
sendRealtimeOn: function () { sendRealtimeOn: function () {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -1536,6 +1543,7 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid] = { self.mappersOnMap[data.userid] = {
name: data.username, name: data.username,
image: data.userimage,
realtime: data.userrealtime realtime: data.userrealtime
}; };
@ -1552,6 +1560,14 @@ Metamaps.Realtime = {
$('#mapper' + data.userid).remove(); $('#mapper' + data.userid).remove();
$('.realtimeMapperList ul').append(mapperListItem); $('.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) { newPeerOnMap: function (data) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -1560,21 +1576,30 @@ Metamaps.Realtime = {
// data.userid // data.userid
// data.username // data.username
// data.userimage // data.userimage
// data.coords
self.mappersOnMap[data.userid] = { self.mappersOnMap[data.userid] = {
name: data.username, name: data.username,
realtime: true realtime: true
}; };
// create an item for them in the realtime box
var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">'; var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />'; mapperListItem += '<img src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
mapperListItem += data.username; mapperListItem += data.username;
mapperListItem += '<div class="littleJuntoIcon"></div>'; mapperListItem += '<div class="littleJuntoIcon"></div>';
mapperListItem += '</li>'; mapperListItem += '</li>';
$('#mapper' + data.userid).remove(); $('#mapper' + data.userid).remove();
$('.realtimeMapperList ul').append(mapperListItem); $('.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'); 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 // send this new mapper back your details, and the awareness that you've loaded the map
@ -1611,6 +1636,7 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid].realtime = true; self.mappersOnMap[data.userid].realtime = true;
$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn'); $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
$('#compass' + data.userid).show();
Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime'); Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
}, },
@ -1624,9 +1650,42 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid].realtime = false; self.mappersOnMap[data.userid].realtime = false;
$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff'); $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
$('#compass' + data.userid).hide();
Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime'); 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 update = {
usercoords: coords,
userid: Metamaps.Active.Mapper.id,
mapid: Metamaps.Active.Map.id
};
socket.emit('updateMapperCoords', update);
},
contentUpdate: function (data) { contentUpdate: function (data) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var socket = Metamaps.Realtime.socket; var socket = Metamaps.Realtime.socket;
@ -3167,30 +3226,11 @@ Metamaps.Mapper = {
// this function is to retrieve a mapper JSON object from the database // this function is to retrieve a mapper JSON object from the database
// @param id = the id of the mapper to retrieve // @param id = the id of the mapper to retrieve
get: function (id, callback) { 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 }; // end Metamaps.Mapper

29
app/assets/stylesheets/application.css
View file

@ -270,7 +270,6 @@ input[type="submit"]:active {
font-size: 25px; font-size: 25px;
line-height: 35px; line-height: 35px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
font-family: 'LatoLight';
} }
.openMetacodeSwitcher { .openMetacodeSwitcher {
display: block; display: block;
@ -291,7 +290,6 @@ input[type="submit"]:active {
width: 120px; width: 120px;
text-align: center; text-align: center;
margin-left: 90px; margin-left: 90px;
font-family: 'LatoRegular';
} }
/* synapse autocomplete */ /* synapse autocomplete */
@ -312,7 +310,6 @@ input[type="submit"]:active {
outline: none; outline: none;
font-size: 18px; font-size: 18px;
line-height: 35px; line-height: 35px;
font-family: 'LatoRegular';
} }
.new_synapse #synapse_desc { .new_synapse #synapse_desc {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
@ -331,7 +328,6 @@ input[type="submit"]:active {
outline: none; outline: none;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-family: 'LatoRegular';
} }
label, label,
select, select,
@ -402,7 +398,6 @@ label {
height: 30px; height: 30px;
background: none; background: none;
color: #717474; color: #717474;
font-family: 'LatoLight';
font-size: 17px; font-size: 17px;
border: none; border: none;
border-right: 1px solid #717474; border-right: 1px solid #717474;
@ -646,7 +641,6 @@ label[for="user_remember_me"] {
color: white; color: white;
border-radius: 4px; border-radius: 4px;
font-size: 15px !important; font-size: 15px !important;
font-family: 'LatoRegular';
line-height: 17px; line-height: 17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
z-index: 100; z-index: 100;
@ -926,7 +920,6 @@ float: left;
} }
#new_topic .tt-suggestion { #new_topic .tt-suggestion {
padding: 5px; padding: 5px;
font-family: 'LatoLight';
background: rgba(42, 52, 60, 0.9); background: rgba(42, 52, 60, 0.9);
; ;
} }
@ -976,7 +969,6 @@ float: left;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
font-size: 15px !important; font-size: 15px !important;
font-family: 'LatoRegular';
line-height: 15px; line-height: 15px;
padding: 2px 5px 2px; padding: 2px 5px 2px;
z-index: 100; z-index: 100;
@ -1001,7 +993,6 @@ float: left;
} }
#new_synapse .tt-suggestion { #new_synapse .tt-suggestion {
padding: 5px; padding: 5px;
font-family: 'LatoLight';
} }
#new_synapse .autocompleteSection { #new_synapse .autocompleteSection {
float: left; float: left;
@ -1049,7 +1040,6 @@ float: left;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
font-size: 15px !important; font-size: 15px !important;
font-family: 'LatoRegular';
line-height: 15px; line-height: 15px;
padding: 2px 5px 2px; padding: 2px 5px 2px;
z-index: 100; z-index: 100;
@ -1160,14 +1150,14 @@ float: left;
background-position: -32px 0; background-position: -32px 0;
} }
.yourMap .mapPermission:hover { .yourMap .mapPermission:hover {
background-image: url(arrowdown_sprite.png); background-image: url(arrowperms_sprite.png);
cursor: pointer; cursor: pointer;
background-position: center -11px; background-position: -32px 0;
} }
.yourMap .mapPermission.minimize { .yourMap .mapPermission.minimize {
background-image: url(arrowdown_sprite.png) !important; background-image: url(arrowperms_sprite.png) !important;
cursor: pointer; cursor: pointer;
background-position: center -11px; background-position: 0 0;
} }
.mapInfoBox .mapPermission .permissionSelect { .mapInfoBox .mapPermission .permissionSelect {
list-style: none; list-style: none;
@ -1427,13 +1417,12 @@ float: left;
#metacodeSwitchTabs { #metacodeSwitchTabs {
width: 100%; width: 100%;
font-family: LatoLight, Arial, Sans-Serif;
font-size: 17px; font-size: 17px;
line-height: 21px; line-height: 21px;
border: none; border: none;
} }
#metacodeSwitchTabs .setTitle { #metacodeSwitchTabs .setTitle {
font-family: Lato, Arial, sans-serif;
} }
#metacodeSwitchTabs .setDesc { #metacodeSwitchTabs .setDesc {
margin-bottom: 5px; margin-bottom: 5px;
@ -1474,7 +1463,6 @@ float: left;
background: none; background: none;
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
font-family: Lato;
} }
#metacodeSwitchTabs button.button { #metacodeSwitchTabs button.button {
width: auto !important; width: auto !important;
@ -1633,7 +1621,6 @@ float: left;
color: white; color: white;
border-radius: 4px; border-radius: 4px;
font-size: 15px !important; font-size: 15px !important;
font-family: 'LatoRegular';
line-height: 17px; line-height: 17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
z-index: 100; z-index: 100;
@ -1659,7 +1646,6 @@ float: left;
float: left; float: left;
margin-top: 5px; margin-top: 5px;
height: 40px; height: 40px;
font-family: 'LatoItalic';
font-size: 17px; font-size: 17px;
width: auto; width: auto;
padding: 0 30px; padding: 0 30px;
@ -1676,13 +1662,11 @@ float: left;
#cheatSheet { #cheatSheet {
width: 100%; width: 100%;
height: 350px; height: 350px;
font-family: LatoLight, Arial, Sans-Serif;
font-size: 17px; font-size: 17px;
line-height: 21px; line-height: 21px;
border: none; border: none;
} }
#cheatSheet .sectionTitle { #cheatSheet .sectionTitle {
font-family: Lato, Arial, sans-serif;
font-weight: bold; font-weight: bold;
} }
#cheatSheet .csItem { #cheatSheet .csItem {
@ -1695,7 +1679,7 @@ float: left;
margin: 0 2px; margin: 0 2px;
} }
#cheatSheet .csTitle { #cheatSheet .csTitle {
font-family: Lato, Arial, sans-serif;
} }
#cheatSheet .indented { #cheatSheet .indented {
margin-left: 15px; margin-left: 15px;
@ -1816,7 +1800,6 @@ float: left;
float: left; float: left;
margin-top: 5px; margin-top: 5px;
height: 40px; height: 40px;
font-family: 'LatoItalic';
font-size: 17px; font-size: 17px;
width: auto; width: auto;
padding: 0 30px; padding: 0 30px;

214
app/assets/stylesheets/base.css
View file

@ -12,7 +12,6 @@
top:100px; top:100px;
left:100px; left:100px;
width:300px; width:300px;
min-height:360px;
background-color:#F5F5F5; background-color:#F5F5F5;
text-align: left; text-align: left;
overflow: visible; overflow: visible;
@ -40,22 +39,27 @@
display:block; display:block;
position:relative; position:relative;
width:100%; width:100%;
height:100%; min-height:360px;
z-index: 25; z-index: 25;
} }
.CardOnGraph.hasAttachment {
min-height:0;
}
.CardOnGraph .title { .CardOnGraph .title {
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
display: block; display: table;
padding: 8px 16px; padding: 8px 16px;
height: 80px; height: 80px;
text-align: center; text-align: center;
font-family: 'din-regular', sans-serif; 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 { .best_in_place_name textarea, .best_in_place_name input {
@ -81,6 +85,9 @@ text-align:center;
line-height:15px; line-height:15px;
font-family: helvetica, sans-serif; font-family: helvetica, sans-serif;
} }
.CardOnGraph.hasAttachment .scroll {
height: auto;
}
.CardOnGraph .best_in_place_desc textarea { .CardOnGraph .best_in_place_desc textarea {
font-size: 12px; font-size: 12px;
@ -126,11 +133,7 @@ background: none;
.linkItem { .linkItem {
float:left; float:left;
min-width:46px;
height:46px; height:46px;
background-repeat: no-repeat;
background-position: 0 center;
background-size: 24px 24px;
z-index: 1; z-index: 1;
position: relative; position: relative;
color: #424242; color: #424242;
@ -150,78 +153,111 @@ background: none;
padding: 0; padding: 0;
} }
.linkItem.contributor { .linkItem.contributor {
background-image: url(MMCCicon_mapper_black.png);
margin-left:32px; margin-left:32px;
z-index:1; 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 { .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 { .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 { .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 { .linkItem.mapPerm.co {
background-image: url(CO32.png); background-position: 0 0;
} }
.linkItem.mapPerm.pu { .linkItem.mapPerm.pu {
background-image: url(PU32.png); background-position: -64px 0;
} }
.linkItem.mapPerm.pr { .linkItem.mapPerm.pr {
background-image: url(PR32.png); background-position: -32px 0;
} }
.showcard .yourTopic .mapPerm:hover { .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; cursor:pointer;
} }
.showcard .yourTopic .mapPerm.minimize { .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; cursor: pointer;
} }
.mapPerm .permissionSelect { .mapPerm .permissionSelect {
list-style: none; list-style: none;
width: 40px; width: 32px;
height: 80px; height: 64px;
position: relative; position: relative;
top: 40px; top: 32px;
} }
.mapPerm .permissionSelect li { .mapPerm .permissionSelect li {
width: 40px; width: 32px;
height: 40px; height: 32px;
background-repeat: no-repeat; 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 { .mapPerm .permissionSelect .commons {
background-image: url(CO32.png); background-position: 0 0;
} }
.mapPerm .permissionSelect .public { .mapPerm .permissionSelect .public {
background-image: url(PU32.png); background-position: -64px 0;
} }
.mapPerm .permissionSelect .private { .mapPerm .permissionSelect .private {
background-image: url(PR32.png); background-position: -32px 0;
} }
.mapPerm .permissionSelect .commons:hover { .mapPerm .permissionSelect .commons:hover {
background-image: url(CO32b.png); background-position: 0 -32px;
} }
.mapPerm .permissionSelect .public:hover { .mapPerm .permissionSelect .public:hover {
background-image: url(PU32b.png); background-position: -64px -32px;
} }
.mapPerm .permissionSelect .private:hover { .mapPerm .permissionSelect .private:hover {
background-image: url(PR32b.png); background-position: -32px -32px;
} }
.CardOnGraph .metacodeTitle { .CardOnGraph .metacodeTitle {
@ -311,7 +347,6 @@ float:left;
color: white; color: white;
border-radius: 4px; border-radius: 4px;
font-size:15px !important; font-size:15px !important;
font-family:'LatoRegular';
line-height:17px; line-height:17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
z-index:100; z-index:100;
@ -335,59 +370,111 @@ float:left;
line-height: 16px; line-height: 16px;
} }
.addAttachment div { #addlink, #addupload {
display: inline-block; 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; font-size: 12px;
color: #9e9e9e; color: #9e9e9e;
cursor: pointer; cursor: pointer;
position: relative;
} }
.addAttachment div:hover { #addlink:hover, #addupload:hover {
color: #616161; 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 { #addLinkInput {
height: 32px; height: 32px;
width: 236px; width: 268px;
padding: 8px 16px 8px 0; padding: 8px 16px 8px 16px;
position: relative; position: relative;
} }
#addLinkInput input{ #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; margin: 0 0 0 0;
border: 1px solid #BDBDBD; border: 1px solid #BDBDBD;
outline: none; outline: none;
font-size: 16px; font-size: 12px;
line-height: 16px; line-height: 12px;
background: white; background: white;
color: black; 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 { #addLinkReset {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 16px; right: 15px;
width: 32px; width: 32px;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
float:none; 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 { .cardSettings {
@ -485,7 +572,6 @@ font-family: 'LatoLight';
border-radius: 4px; border-radius: 4px;
color: #FFFFFF; color: #FFFFFF;
display: none; display: none;
font-family: 'LatoRegular';
font-size: 15px !important; font-size: 15px !important;
line-height: 17px; line-height: 17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;

10
app/assets/stylesheets/clean.css
View file

@ -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 { body a#barometer_tab:hover {
background-position: 0 -110px; background-position: 0 -110px;
} }
/* REALTIME */
.collabCompass {
position:fixed;
top:50%;
left:50%;
z-index: 4;
}

17
app/views/layouts/_templates.html.erb
View file

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

12
app/views/layouts/application.html.erb
View file

@ -14,7 +14,6 @@
<%= stylesheet_link_tag "application", :media => "all" %> <%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %> <%= javascript_include_tag "application" %>
<%= javascript_include_tag "compileMapPages" %>
<script type="text/javascript" src="//use.typekit.net/tki2nyo.js"></script> <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">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//use.typekit.net/obp7wss.js"></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.Metacodes = <%= Metacode.all.to_json.html_safe %>;
Metamaps.Loading = { 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.setColor('#4fb5c0'); // default is '#000000'
Metamaps.Loading.loader.setDiameter(28); // default is 40 Metamaps.Loading.loader.setDiameter(28); // default is 40
Metamaps.Loading.loader.setDensity(41); // default is 40 Metamaps.Loading.loader.setDensity(41); // default is 40
Metamaps.Loading.loader.setRange(0.9); // default is 1.3 Metamaps.Loading.loader.setRange(0.9); // default is 1.3
Metamaps.Loading.loader.show(); // Hidden by default 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> </script>
<%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %> <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>

2
config/environments/production.rb
View file

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

10
public/famous/main.js
View file

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

9
realtime/realtime-server.js
View file

@ -104,6 +104,15 @@ function start() {
socket.broadcast.emit('maps-' + data.mapid + '-lostrealtime', newUser); 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);
});
}); });
} }