diff --git a/app/assets/images/MMCCicon_realtime_blue.png b/app/assets/images/MMCCicon_realtime_blue.png
index e821e243..98bd1982 100644
Binary files a/app/assets/images/MMCCicon_realtime_blue.png and b/app/assets/images/MMCCicon_realtime_blue.png differ
diff --git a/app/assets/images/MMCCicon_realtime_junto.png b/app/assets/images/MMCCicon_realtime_junto.png
index 4f687b4d..587065b4 100644
Binary files a/app/assets/images/MMCCicon_realtime_junto.png and b/app/assets/images/MMCCicon_realtime_junto.png differ
diff --git a/app/assets/javascripts/Jit/graphsettings-model.js b/app/assets/javascripts/Jit/graphsettings-model.js
index 3416be8c..5877e47b 100644
--- a/app/assets/javascripts/Jit/graphsettings-model.js
+++ b/app/assets/javascripts/Jit/graphsettings-model.js
@@ -9,6 +9,10 @@ var MetamapsModel = new Object();
MetamapsModel.embed = false;
+// if you're on a map, this will be an object that has a reference to each user that has loaded the map, and whether they are
+// in realtime or not
+MetamapsModel.mappersOnMap = {};
+
MetamapsModel.metacodeScrollerInit = false; // indicates whether the scrollbar in the custom metacode set space has been init
diff --git a/app/assets/javascripts/jquery/AllMappingPages.js b/app/assets/javascripts/jquery/AllMappingPages.js
index c4077c4d..c3f519d3 100644
--- a/app/assets/javascripts/jquery/AllMappingPages.js
+++ b/app/assets/javascripts/jquery/AllMappingPages.js
@@ -56,9 +56,9 @@ $(document).ready(function () {
// hide the other two
$('.sidebarAccountBox').hide();
- $('.sidebarWandBox').hide();
+ $('.sidebarCollaborateBox').hide();
$('.sidebarAccountIcon').css('background-color', '#0F1519');
- $('.sidebarWandIcon').css('background-color', '#0F1519');
+ $('.sidebarCollaborateIcon').css('background-color', '#0F1519');
$('.sidebarFilterIcon').css('background-color', '#000');
$('.sidebarFilterBox').fadeIn(200, function () {
diff --git a/app/assets/javascripts/jquery/AuthCanEditMapPage.js b/app/assets/javascripts/jquery/AuthCanEditMapPage.js
index 0800caec..6c79ffb3 100644
--- a/app/assets/javascripts/jquery/AuthCanEditMapPage.js
+++ b/app/assets/javascripts/jquery/AuthCanEditMapPage.js
@@ -7,28 +7,91 @@
$(document).ready(function () {
+ function bindRealtimeHover() {
+
+ var realtimeIsOpen = false
+
+ // controls the sliding hover of the bottom left menu
+ var sliding1 = false;
+ var lT;
+
+ var closeRealtime = function () {
+ lT = setTimeout(function () {
+ if (!sliding1) {
+ sliding1 = true;
+ $('.sidebarCollaborateIcon').css('background-color', '#0F1519');
+ $('.sidebarCollaborateBox').fadeOut(200, function () {
+ sliding1 = false;
+ realtimeIsOpen = false;
+ });
+ }
+ }, 300);
+ }
+
+ var openRealtime = function () {
+ clearTimeout(lT);
+ if (!sliding1) {
+ sliding1 = true;
+
+ // hide the other two
+ $('.sidebarFilterBox').hide();
+ $('.sidebarAccountBox').hide();
+ $('.sidebarFilterIcon').css('background-color', '#0F1519');
+ $('.sidebarAccountIcon').css('background-color', '#0F1519');
+
+ $('.sidebarCollaborateIcon').css('background-color', '#000');
+ $('.sidebarCollaborateBox').fadeIn(200, function () {
+ sliding1 = false;
+ realtimeIsOpen = true;
+ });
+ }
+ }
+ // bind the hover events
+ $(".sidebarCollaborate").hover(openRealtime, closeRealtime);
+ } // end bindRealtimeHover
+
+ function bindSaveHover() {
+ var closeSave = function () {
+
+ }
+
+ var openSave = function () {
+ // hide the other three
+ $('.sidebarFilterBox, .sidebarAccountBox, .sidebarCollaborateBox').hide();
+ $('.sidebarFilterIcon, .sidebarAccountIcon, .sidebarCollaborateIcon').css('background-color', '#0F1519');
+ }
+ // bind the hover events
+ $(".sidebarSave").hover(openSave, closeSave);
+ } // end bindSaveHover
+
+ // bind hover events
+ bindRealtimeHover();
+ bindSaveHover();
+
// because anyone who can edit the map can collaborate on it in realtime
- $(".sidebarCollaborateIcon").click(function (event) {
+ $(".realtimeOnOff").click(function (event) {
if (!goRealtime) {
window.realtime.sendRealtimeOn();
- $('.sidebarCollaborate .tip').html('Stop Realtime Collaboration');
+ $(this).html('ON').removeClass('rtOff').addClass('rtOn');
+ $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
} else {
window.realtime.sendRealtimeOff();
- $('.sidebarCollaborate .tip').html('Start Realtime Collaboration');
+ $(this).html('OFF').removeClass('rtOn').addClass('rtOff');
+ $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
}
goRealtime = !goRealtime;
$(".sidebarCollaborateIcon").toggleClass("blue");
});
-
+
// because anyone who can edit the map can save a new map layout
$('.sidebarSave').click(function () {
saveLayoutAll();
});
-
+
// because anyone who can edit the map can change the map title
$('.mapInfoName .best_in_place_name').bind("ajax:success", function () {
var name = $(this).html();
$('.mapName').html(name);
});
-
+
}); // end document.ready
\ No newline at end of file
diff --git a/app/assets/javascripts/jquery/AuthCanEditMappingPages.js b/app/assets/javascripts/jquery/AuthCanEditMappingPages.js
index e952e338..ba9794a9 100644
--- a/app/assets/javascripts/jquery/AuthCanEditMappingPages.js
+++ b/app/assets/javascripts/jquery/AuthCanEditMappingPages.js
@@ -9,6 +9,23 @@ this code adds required jQuery for creating, or pulling in, topics and synapses
$(document).ready(function () {
+ function bindForkHover() {
+ var closeFork = function () {
+
+ }
+
+ var openFork = function () {
+ // hide the other three
+ $('.sidebarFilterBox, .sidebarAccountBox, .sidebarCollaborateBox').hide();
+ $('.sidebarFilterIcon, .sidebarAccountIcon, .sidebarCollaborateIcon').css('background-color', '#0F1519');
+ }
+ // bind the hover events
+ $(".sidebarFork").hover(openFork, closeFork);
+ } // end bindForkHover
+
+ // bind hover events
+ bindForkHover();
+
//////
//////
//// TOPIC CREATION
diff --git a/app/assets/javascripts/jquery/EveryPage.js b/app/assets/javascripts/jquery/EveryPage.js
index 1d9ade1f..2898883d 100644
--- a/app/assets/javascripts/jquery/EveryPage.js
+++ b/app/assets/javascripts/jquery/EveryPage.js
@@ -371,9 +371,9 @@ $(document).ready(function () {
// hide the other two
$('.sidebarFilterBox').hide();
- $('.sidebarWandBox').hide();
+ $('.sidebarCollaborateBox').hide();
$('.sidebarFilterIcon').css('background-color', '#0F1519');
- $('.sidebarWandIcon').css('background-color', '#0F1519');
+ $('.sidebarCollaborateIcon').css('background-color', '#0F1519');
$('.sidebarAccountIcon').css('background-color', '#000');
$('.sidebarAccountBox').fadeIn(200, function () {
diff --git a/app/assets/javascripts/realtime/realtime.js b/app/assets/javascripts/realtime/realtime.js
index 2428e3f3..a63126ca 100644
--- a/app/assets/javascripts/realtime/realtime.js
+++ b/app/assets/javascripts/realtime/realtime.js
@@ -26,6 +26,17 @@ window.realtime.setupSocket = function () {
socket.on(userid + '-' + mapid + '-UpdateMapperList', function (data) {
// data.userid
// data.username
+ // data.userrealtime
+
+ MetamapsModel.mappersOnMap[data.userid] = {
+ name: data.username,
+ realtime: data.userrealtime
+ };
+
+ var onOff = data.userrealtime ? "On" : "Off";
+ var mapperListItem = '' + data.username + '';
+ $('.realtimeMapperList ul').append(mapperListItem);
+
//alert(data.username + ' is already online');
});
@@ -33,6 +44,14 @@ window.realtime.setupSocket = function () {
socket.on('maps-' + mapid + '-newmapper', function (data) {
// data.userid
// data.username
+
+ MetamapsModel.mappersOnMap[data.userid] = {
+ name: data.username,
+ realtime: false
+ };
+
+ var mapperListItem = '' + data.username + '';
+ $('.realtimeMapperList ul').append(mapperListItem);
window.realtime.notifyUser(data.username + ' just joined the map');
@@ -41,15 +60,32 @@ window.realtime.setupSocket = function () {
userToNotify: data.userid,
username: username,
userid: userid,
+ userrealtime: goRealtime,
mapid: mapid
};
socket.emit('updateNewMapperList', update);
});
+ // receive word that a mapper left the map
+ socket.on('maps-' + mapid + '-lostmapper', function (data) {
+ // data.userid
+ // data.username
+
+ delete MetamapsModel.mappersOnMap[data.userid];
+
+ $('#mapper' + data.userid).remove();
+
+ window.realtime.notifyUser(data.username + ' just left the map');
+ });
+
// receive word that there's a mapper turned on realtime
socket.on('maps-' + mapid + '-newrealtime', function (data) {
// data.userid
// data.username
+
+ MetamapsModel.mappersOnMap[data.userid].realtime = true;
+
+ $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
window.realtime.notifyUser(data.username + ' just turned on realtime');
});
@@ -59,16 +95,13 @@ window.realtime.setupSocket = function () {
// data.userid
// data.username
+ MetamapsModel.mappersOnMap[data.userid].realtime = false;
+
+ $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
+
window.realtime.notifyUser(data.username + ' just turned off realtime');
});
- socket.on('maps-' + mapid + '-lostmapper', function (data) {
- // data.userid
- // data.username
-
- window.realtime.notifyUser(data.username + ' just left the map');
- });
-
socket.on('maps-' + mapid, function (data) {
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 2d84e310..88fbee2a 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -887,17 +887,15 @@ h3.filterByMetacode {
position: absolute;
width: 35px;
height: 35px;
- background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
+ background-image: url('MMCCicon_realtime_junto.png');
background-size: 36px 36px;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: #0F1519;
cursor: pointer;
}
-.sidebarCollaborateIcon:hover,
-.sidebarCollaborateIcon.blue:hover {
- background-color: black;
-}
.sidebarCollaborateIcon.blue {
- background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
- background-size: 26px 25px;
+ background-image: url('MMCCicon_realtime_blue.png');
}
.sidebarCollaborateBox {
position: absolute;
@@ -905,30 +903,55 @@ h3.filterByMetacode {
height: auto;
width: auto;
background: #000;
- top: 36px;
+ top: 35px;
right: 0;
padding: 10px;
border: 1px solid black;
- min-width: 120px;
+ min-width: 135px;
font-family: 'LatoLight', helvetica, sans-serif;
}
-.sidebarCollaborate .hoverForTip:hover .tip {
- display: block;
+h3.realtimeBoxTitle {
+ margin-bottom: 10px;
+ text-align: left;
+ float: left;
+ font-family: 'Lato', helvetica, sans-serif;
}
-.sidebarCollaborate .tip {
- display: none;
- position: absolute;
- background: black;
+.sidebarCollaborateBox .realtimeOnOff {
+ float: left;
+ padding: 4px;
+ border-radius: 2px;
+ margin-left: 12px;
+ cursor: pointer;
+ width: 31px;
text-align: center;
- top: 36px;
- right: 0;
+}
+.sidebarCollaborateBox .rtOff {
+ background: white;
+ color: black;
+}
+.sidebarCollaborateBox .rtOff:hover {
+ padding: 3px;
+ border: 1px solid #15bad4;
+}
+.sidebarCollaborateBox .rtOn {
+ background: #15bad4;
color: white;
- border-radius: 4px;
- font-size: 15px !important;
- font-family: 'LatoRegular';
- line-height: 17px;
- padding: 3px 5px 2px;
- z-index: 100;
+}
+.realtimeMapperList .rtMapper {
+ list-style-type: none;
+ white-space: nowrap;
+ padding: 2px 5px 2px 30px;
+ display: block;
+ background-size: 26px 26px;
+ background-repeat: no-repeat;
+ background-position: 4px center;
+ margin-bottom: 5px;
+}
+.realtimeMapperList .littleRtOff {
+ background-image: url('/assets/MMCCicon_realtime_junto.png');
+}
+.realtimeMapperList .littleRtOn {
+ background-image: url('/assets/MMCCicon_realtime_blue.png');
}
/* end collaborate */
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
index 6fd4daf9..474a6c1a 100644
--- a/app/views/maps/show.html.erb
+++ b/app/views/maps/show.html.erb
@@ -6,6 +6,11 @@
<% content_for :title, @map.name + " | Metamaps" %>
+
+
+