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

added realtime box

Browse source
This commit is contained in:
Connor Turland 2014-06-11 16:47:46 -04:00
parent ceb30ee5d6
commit 0a3f83ade9
11 changed files with 198 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

4
app/assets/javascripts/Jit/graphsettings-model.js
View file

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

4
app/assets/javascripts/jquery/AllMappingPages.js vendored
View file

@ -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 () {

75
app/assets/javascripts/jquery/AuthCanEditMapPage.js vendored
View file

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

17
app/assets/javascripts/jquery/AuthCanEditMappingPages.js vendored
View file

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

4
app/assets/javascripts/jquery/EveryPage.js vendored
View file

@ -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 () {

47
app/assets/javascripts/realtime/realtime.js
View file

@ -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 = '<li id="mapper' + data.userid + '" class="rtMapper littleRt' + onOff + '">' + data.username + '</li>';
$('.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 = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOff">' + data.username + '</li>';
$('.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) {

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

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

20
app/views/maps/show.html.erb
View file

@ -6,6 +6,11 @@
<% content_for :title, @map.name + " | Metamaps" %>
<div id="preloaded-images">
<img src="/assets/MMCCicon_realtime_blue.png" />
</div>
<% if authenticated? %>
<% if @map.permission == "commons" || @map.user == user %>
<div class="sidebarSave">
@ -23,11 +28,18 @@
</div>
<% if @map.permission == "commons" || @map.user == user %>
<div class="sidebarCollaborate">
<div class="sidebarCollaborateIcon hoverForTip">
<div class="tip">Start Realtime Collaboration</div>
</div>
<div class="sidebarCollaborateIcon"></div>
<div class="sidebarCollaborateBox">
<h3 class="realtimeBoxTitle">Realtime: </h3>
<span class="realtimeOnOff rtOff">OFF</span>
<div class="clearfloat"></div>
<div class="realtimeMapperList">
<ul>
<li class="rtMapper littleRtOff rtMapperSelf">
<%= user.name %> (me)
</li>
</ul>
</div>
</div>
</div>
<% end %>

3
realtime/realtime-server.js
View file

@ -44,7 +44,8 @@ function start() {
socket.on('updateNewMapperList', function (data) {
var existingUser = {
userid: data.userid,
username: data.username
username: data.username,
userrealtime: data.userrealtime
};
socket.broadcast.emit(data.userToNotify + '-' + data.mapid + '-UpdateMapperList', existingUser);
});