adding tooltips, added maps topic appears on pages.

This commit is contained in:
Connor Turland 2014-02-20 17:22:13 -08:00
parent 144069f82a
commit d093ebeeba
16 changed files with 301 additions and 62 deletions

View file

@ -29,6 +29,77 @@ function selectEdgeOnClickHandler(adj, e) {
Mconsole.plot();
}//selectEdgeOnClickHandler
function selectEdgeOnRightClickHandler(adj, e) {
// the 'node' variable is a JIT node, the one that was clicked on
// the 'e' variable is the click event
e.preventDefault();
e.stopPropagation();
if (Mconsole.busy) return;
selectEdge(adj);
// delete old right click menu
$('.rightclickmenu').remove();
// create new menu for clicked on node
var rightclickmenu = document.createElement("div");
rightclickmenu.className = "rightclickmenu";
// add the proper options to the menu
var menustring = '<ul>';
if (userid != null) menustring += '<li class="rc-delete">Delete</li>';
if (mapid && userid != null) menustring += '<li class="rc-remove">Remove from Map</li>';
menustring += '<li class="rc-hide">Hide until refresh</li>';
menustring += '</ul>';
rightclickmenu.innerHTML = menustring;
// position the menu where the click happened
$(rightclickmenu).css({
left: e.clientX,
top: e.clientY
});
//add the menu to the page
$('#center-container').append(rightclickmenu);
// attach events to clicks on the list items
// delete the selected things from the database
$('.rc-delete').click(function() {
$('.rightclickmenu').remove();
var n = MetamapsModel.selectedNodes.length;
var e = MetamapsModel.selectedEdges.length;
var ntext = n == 1 ? "1 topic" : n + " topics";
var etext = e == 1 ? "1 synapse" : e + " synapses";
var text = "You have " + ntext + " and " + etext + " selected. ";
var r=confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
if (r == true) {
deleteSelectedEdges();
deleteSelectedNodes();
}
});
// remove the selected things from the map
$('.rc-remove').click(function() {
$('.rightclickmenu').remove();
removeSelectedEdges();
removeSelectedNodes();
});
// hide selected nodes and synapses until refresh
$('.rc-hide').click(function() {
$('.rightclickmenu').remove();
hideSelectedEdges();
hideSelectedNodes();
});
} //selectEdgeOnRightClickHandler
function synapseDoubleClickHandler(adj, e) {
editEdge(adj, e);
}
@ -194,8 +265,8 @@ function selectNodeOnClickHandler(node, e) {
// remove the selected things from the map
$('.rc-remove').click(function() {
$('.rightclickmenu').remove();
hideSelectedEdges();
hideSelectedNodes();
removeSelectedEdges();
removeSelectedNodes();
});
// hide selected nodes and synapses until refresh

View file

@ -134,6 +134,7 @@ function graphSettings(type, embed) {
}
else if (node && node.nodeFrom) { // the variable 'node' is actually an edge/adjacency
// open right click menu
selectEdgeOnRightClickHandler(node, e);
}
else {
// right click on open canvas, options here?

View file

@ -36,10 +36,13 @@ function generateShowcardHTML() {
<div class="linkItem contributor hoverForTip"> \
<div class="tip">Created by $_username_$ on $_date_$</div> \
</div> \
<div class="linkItem mapCount">$_map_count_$</div> \
<a href="/maps/topics/$_id_$" class="linkItem mapCount hoverForTip" \
title="Click to see which maps topic appears on" target="_blank"> \
$_map_count_$ \
</a> \
<div class="linkItem synapseCount">$_synapse_count_$</div> \
<div class="linkItem mapPerm $_mk_permission_$"></div> \
<a href="/topics/$_id_$" class="linkItem topicPopout" title="Open Topic in New Tab" target="_blank"></a>\
<a href="/topics/$_id_$" class="linkItem topicPopout" title="Open topic in new tab" target="_blank"></a>\
<div class="clearfloat"></div> \
</div> \
<div class="metacodeSelect">$_metacode_select_$</div> \
@ -230,15 +233,31 @@ function populateShowCard(node) {
}
});
// when you're typing a description, resize the scroll box to have space
$('.best_in_place_desc textarea').bind('keyup', function() {
var s = $('.showcard').find('.scroll');
s.height( s.height() ).mCustomScrollbar('update');
console.log('working');
});
//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();
node.name = name;
Mconsole.plot();
});
$(showCard).find('.best_in_place_desc').bind("ajax:success", function() {
this.innerHTML = this.innerHTML.replace(/\r/g, '')
$(showCard).find('.scroll').mCustomScrollbar("update");
var s = $('.showcard').find('.scroll');
s.height( s.height() ).mCustomScrollbar('update');
var desc = $(this).html();
node.setData("desc", desc);
});
@ -294,7 +313,5 @@ function populateShowCard(node) {
else if (permission == "private") el.html("pr");
node.setData("permission", permission);
});
$('.showcard').find('.scroll').mCustomScrollbar();
}

View file

@ -449,7 +449,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
});
$(".scroll").mCustomScrollbar();
//$(".scroll").mCustomScrollbar();
// initialize scroll bar for filter by metacode, then hide it and position it correctly again
$("#filter_by_metacode").mCustomScrollbar();
@ -568,7 +568,7 @@ function addHoverForSettings() {
// this is to save the layout of a map
function saveLayoutAll() {
$('.wandSaveLayout').html('Saving...');
$('.sidebarSave .tip').html('Saving...');
var coor = "";
if (gType == "arranged" || gType == "chaotic") {
Mconsole.graph.eachNode(function(n) {
@ -586,8 +586,8 @@ function saveLayout(id) {
$('#map_coordinates').val(n.getData("mappingid") + '/' + n.pos.x + '/' + n.pos.y);
$('#saveMapLayout').submit();
dragged = 0;
$('.wandSaveLayout').html('Saved!');
setTimeout(function(){$('.wandSaveLayout').html('Save Layout')},1500);
//$('.wandSaveLayout').html('Saved!');
//setTimeout(function(){$('.wandSaveLayout').html('Save Layout')},1500);
}
// this is to save your console to a map
@ -711,6 +711,8 @@ function openNodeShowcard(node) {
populateShowCard(node);
$('.showcard').fadeIn('fast');
var s = $('.showcard').find('.scroll');
s.height( s.height() ).mCustomScrollbar();
//node.setData('dim', 1, 'current');
MetamapsModel.showcardInUse = node.id;
}

View file

@ -657,6 +657,29 @@ cursor:pointer;
font-family: 'LatoLight', helvetica, sans-serif;
}
.sidebarFork .hoverForTip:hover .tip {
display:block;
}
.sidebarFork .tip {
display: none;
position: absolute;
background: white;
min-width: 180px;
max-width: 250px;
text-align: center;
top: 36px;
right: 0;
color: black;
border-radius: 4px;
font-size: 15px !important;
font-family: 'LatoLight';
line-height: 17px;
padding: 3px 5px 2px;
border: 1px solid black;
z-index: 100;
}
/* end Save To New Map */
/* Save Layout */
@ -695,6 +718,29 @@ cursor:pointer;
font-family: 'LatoLight', helvetica, sans-serif;
}
.sidebarSave .hoverForTip:hover .tip {
display:block;
}
.sidebarSave .tip {
display: none;
position: absolute;
background: white;
min-width: 180px;
max-width: 250px;
text-align: center;
top: 36px;
right: 0;
color: black;
border-radius: 4px;
font-size: 15px !important;
font-family: 'LatoLight';
line-height: 17px;
padding: 3px 5px 2px;
border: 1px solid black;
z-index: 100;
}
/* Filter */
.sidebarFilter {
@ -832,6 +878,29 @@ background-size: 26px 25px;
font-family: 'LatoLight', helvetica, sans-serif;
}
.sidebarCollaborate .hoverForTip:hover .tip {
display:block;
}
.sidebarCollaborate .tip {
display: none;
position: absolute;
background: white;
min-width: 180px;
max-width: 250px;
text-align: center;
top: 36px;
right: 0;
color: black;
border-radius: 4px;
font-size: 15px !important;
font-family: 'LatoLight';
line-height: 17px;
padding: 3px 5px 2px;
border: 1px solid black;
z-index: 100;
}
/* end collaborate */
/* search */
@ -1758,8 +1827,8 @@ font-family:arial;
}
.buttonWrapper {
margin: 10px auto 0;
width: 252px;
margin: 10px 0 0 131px;
width: 254px;
}
.onConsole .new_map button {

View file

@ -51,11 +51,14 @@
height:100%;
color:#000;
z-index: 25;
display:flex;
flex-direction:column;
}
.CardOnGraph .scroll {
display:block;
padding:5px 10px;
padding:5px 0 0 10px;
flex:1;
}
.CardOnGraph .type {
@ -75,6 +78,7 @@
padding:5px;
font-weight: bold;
text-align: center;
flex:none;
}
.best_in_place_name {
@ -138,6 +142,7 @@ font-family: 'LatoLight';
position:relative;
border-bottom: 1px solid #AAAAAA;
border-top: 1px solid #AAAAAA;
flex:none;
}
.linkItem {
@ -168,6 +173,7 @@ background-position: 0px center;
line-height: 40px;
min-width: 16px;
padding-left: 24px;
color:black;
}
.linkItem.synapseCount {
background-image: url(MMCCicon_synapse_black.png);
@ -275,8 +281,8 @@ float:left;
position: absolute;
background: white;
width: 155px;
bottom: 0;
left: 38px;
top: 35px;
left: 0;
color: black;
border-radius: 4px;
font-size:15px !important;
@ -289,28 +295,24 @@ float:left;
.CardOnGraph .link {
position:absolute;
bottom:5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex:1;
display:flex;
flex-direction:row;
border-top: 1px solid #AAAAAA;
padding-top:8px;
width:100%;
height:25px;
background: url(MMCCicon_link.png) no-repeat 6px 6px;
max-height:34px;
background: url(MMCCicon_link.png) no-repeat 6px 5px;
background-size:24px 24px;
}
.CardOnGraph .best_in_place_link {
width: 80%;
flex:1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
float: left;
padding-left: 40px;
padding-top:2px;
margin-left: 40px;
padding-top:9px;
font-size: 16px;
line-height: 16px;
}
@ -329,13 +331,12 @@ font-family: 'LatoLight';
}
.CardOnGraph .go-link {
position: absolute;
width: 34px;
height: 36px;
max-width: 34px;
height: 34px;
background: url(MMCCicon_go.png) no-repeat center center;
background-size: 20px 20px;
top: 0;
right: 12px;
flex:1;
margin-right:12px;
}
.cardSettings {
@ -422,10 +423,11 @@ font-family: 'LatoLight';
}
.mapCard {
display:block;
display:flex;
flex-direction:column;
position:relative;
width:100%;
height:100%;
height:320px;
color:#000;
z-index: 25;
}
@ -443,8 +445,13 @@ background-repeat: no-repeat;
.mapCard .scroll {
display:block;
padding:5px 10px;
flex:1;
overflow:hidden;
padding:5px 0 5px 10px;
}
.mCS_no_scrollbar {
padding-right: 5px;
}
.mapCard .type {
position: absolute;
@ -463,12 +470,14 @@ background-repeat: no-repeat;
padding:5px;
font-weight: bold;
text-align: center;
flex:none;
}
.mapCard .links {
position:relative;
border-bottom: 1px solid #AAAAAA;
border-top: 1px solid #AAAAAA;
flex:none;
}
.mapCard .icon {

View file

@ -20,27 +20,35 @@ class MapsController < ApplicationController
@user = nil
if request.path =="/maps/active"
@maps = Map.visibleToUser(@current, nil).sort! { |a,b| b.last_edited <=> a.last_edited }
@maps = @maps.slice(0,20)
@maps = Map.order("updated_at DESC").limit(20)
@request = "active"
elsif request.path =="/maps/featured"
@maps = Map.order("name ASC").find_all_by_featured(true)
@request = "featured"
elsif request.path =="/maps/new"
@maps = Map.visibleToUser(@current, nil).sort! { |a,b| b.created_at <=> a.created_at }
@maps = @maps.slice(0,20)
elsif request.path == "/maps/new"
@maps = Map.order("created_at DESC").limit(20)
@request = "new"
elsif params[:id] # looking for maps by a mapper
elsif request.path.index('/maps/mappers/') != nil # looking for maps by a mapper
@user = User.find(params[:id])
@maps = Map.order("name ASC").visibleToUser(@current, @user)
@maps = Map.order("name ASC").find_all_by_user_id(@user.id)
@request = "you" if authenticated? && @user == @current
@request = "other" if authenticated? && @user != @current
elsif request.path.index('/maps/topics/') != nil # looking for maps by a certain topic they include
@topic = Topic.find(params[:id]).authorize_to_show(@current)
if !@topic
redirect_to featuredmaps_url, notice: "Access denied." and return
end
@maps = @topic.maps
@request = "topic"
end
#read this next line as 'delete a map if its private and you're either 1. logged out or 2. logged in but not the map creator
@maps.delete_if {|m| m.permission == "private" && (!authenticated? || (authenticated? && @current.id != m.user_id)) }
respond_with(@maps, @request, @user)
end
@ -215,6 +223,8 @@ class MapsController < ApplicationController
# DELETE maps/:id
def destroy
@current = current_user
@map = Map.find(params[:id])
@mappings = @map.mappings
@ -226,7 +236,7 @@ class MapsController < ApplicationController
@map.delete
respond_to do |format|
format.js
format.html { redirect_to "/maps/mappers/" + @current.id.to_s }
end
end
end

View file

@ -74,8 +74,11 @@ end
end
@inmaps = Array.new
topic.maps.each do |map|
@mapsString = ""
topic.maps.each_with_index do |map, index|
@inmaps.push(map.id)
@mapsString += map.name
@mapsString += (index+1) == topic.maps.count ? "" : ", "
end
@topicdata = Hash.new
@ -83,6 +86,7 @@ end
@topicdata['$link'] = topic.link
@topicdata['$metacode'] = topic.metacode.name
@topicdata['$inmaps'] = @inmaps
@topicdata['$inmapsString'] = @mapsString
@topicdata['$synapseCount'] = topic.synapses.count
@topicdata['$userid'] = topic.user.id
@topicdata['$username'] = topic.user.name

View file

@ -71,8 +71,11 @@ belongs_to :metacode
def self_as_json
Jbuilder.encode do |json|
@inmaps = Array.new
self.maps.each do |map|
@mapsString = ""
self.maps.each_with_index do |map, index|
@inmaps.push(map.id)
@mapsString += map.name
@mapsString += (index+1) == self.maps.count ? "" : ", "
end
@topicdata = Hash.new
@ -80,6 +83,7 @@ belongs_to :metacode
@topicdata['$link'] = self.link
@topicdata['$metacode'] = self.metacode.name
@topicdata['$inmaps'] = @inmaps
@topicdata['$inmapsString'] = @mapsString
@topicdata['$synapseCount'] = self.synapses.count
@topicdata['$userid'] = self.user.id
@topicdata['$username'] = self.user.name
@ -94,8 +98,11 @@ belongs_to :metacode
def selfonmap_as_json(mapid)
Jbuilder.encode do |json|
@inmaps = Array.new
self.maps.each do |map|
@mapsString = ""
self.maps.each_with_index do |map, index|
@inmaps.push(map.id)
@mapsString += map.name
@mapsString += (index+1) == self.maps.count ? "" : ", "
end
@topicdata = Hash.new
@ -103,6 +110,7 @@ belongs_to :metacode
@topicdata['$link'] = self.link
@topicdata['$metacode'] = self.metacode.name
@topicdata['$inmaps'] = @inmaps
@topicdata['$inmapsString'] = @mapsString
@topicdata['$synapseCount'] = self.synapses.count
@topicdata['$userid'] = self.user.id
@topicdata['$username'] = self.user.name
@ -144,8 +152,11 @@ belongs_to :metacode
end
@inmaps = Array.new
topic.maps.each do |map|
@mapsString = ""
topic.maps.each_with_index do |map, index|
@inmaps.push(map.id)
@mapsString += map.name
@mapsString += (index+1) == topic.maps.count ? "" : ", "
end
@topicdata = Hash.new
@ -153,6 +164,7 @@ belongs_to :metacode
@topicdata['$link'] = topic.link
@topicdata['$metacode'] = topic.metacode.name
@topicdata['$inmaps'] = @inmaps
@topicdata['$inmapsString'] = @mapsString
@topicdata['$synapseCount'] = topic.synapses.count
@topicdata['$userid'] = topic.user.id
@topicdata['$username'] = topic.user.name
@ -165,8 +177,11 @@ belongs_to :metacode
elsif @topics.count == 1
json.array!(@topics) do |topic|
@inmaps = Array.new
topic.maps.each do |map|
@mapsString = ""
topic.maps.each_with_index do |map, index|
@inmaps.push(map.id)
@mapsString += map.name
@mapsString += (index+1) == topic.maps.count ? "" : ", "
end
@topicdata = Hash.new
@ -174,6 +189,7 @@ belongs_to :metacode
@topicdata['$link'] = topic.link
@topicdata['$metacode'] = topic.metacode.name
@topicdata['$inmaps'] = @inmaps
@topicdata['$inmapsString'] = @mapsString
@topicdata['$synapseCount'] = topic.synapses.count
@topicdata['$userid'] = topic.user.id
@topicdata['$username'] = topic.user.name

View file

@ -70,7 +70,7 @@
</li>
<li class="meta openLightbox" data-open="about">ABOUT</li>
<li class="tutorial openLightbox" data-open="tutorial">TUTORIAL</li>
<li class="exploreMaps"><%= link_to "EXPLORE MAPS", activemaps_url %></li>
<li class="exploreMaps"><%= link_to "EXPLORE MAPS", featuredmaps_url %></li>
</ul>
<div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
</div>

View file

@ -13,6 +13,9 @@
@map.contributors.each_with_index do |c, index|
comma = (index+1) == @map.contributors.count ? '' : ', '
contributorList += c.name + comma
end
if @map.contributors.count == 0
contributorList = 'No one has added anything yet.'
end %>
<div class="tip"><%= contributorList %></div>
</div>
@ -39,7 +42,7 @@
<div class="mapInfoDelete">
<% if @map.user == user %>
<%= link_to 'Delete', map_path(@map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete, :remote => true %>
<%= link_to 'Delete', map_path(@map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete %>
<% end %>
</div>
</div>

View file

@ -15,12 +15,18 @@
<% if @request == "other" %>
<a href="/maps/mappers/<%= @user.id %>" class="active">By <%= @user.name %></a> /
<% end %>
<% if @request == "topic" %>
<a href="/maps/topics/<%= @topic.id %>" class="active">Maps Containing Topic <%= @topic.id.to_s %>: "<%= @topic.name.truncate(30) %>"</a>
<% end %>
<% if @request != "topic" %>
<a href="/maps/active" class="<%= @request == "active" ? "active" : "" %>">Recently Active</a> /
<a href="/maps/featured" class="<%= @request == "featured" ? "active" : "" %>">Featured</a> /
<a href="/maps/new" class="<%= @request == "new" ? "active" : "" %>">Newest First</a>
<% if authenticated? %>
/ <a href="/maps/mappers/<%= @current.id %>" class="<%= @request == "you" ? "active" : "" %>">Yours</a>
<% end %>
<% end %>
</div>
<div class="clearfloat"></div>
</div>
@ -35,7 +41,23 @@
<script>
$(document).ready(function() {
$('.authenticated div.permission.canEdit .best_in_place').best_in_place();
$('.scroll').each(function(index) {
$(this).height( $(this).height() ).mCustomScrollbar();
});
// when you change the title, make sure that the description doesn't overflow
$('.best_in_place_name').bind('ajax:success', function() {
var p = $(this).parents('.mapCard').find('.scroll');
p.height( p.height() ).mCustomScrollbar('update');
});
// when you change the description, update the scroll box field
$('.best_in_place_desc').bind('ajax:success', function() {
var s = $(this).parents('.scroll');
s.height( s.height() ).mCustomScrollbar('update');
});
$('.maps').height( (parseInt($('body').height()) - 54) ); /*.mCustomScrollbar();*/
$('.maps').height( (parseInt($('body').height()) - 54) );
});
</script>

View file

@ -2,5 +2,5 @@
* @file
* Javascript executed when you save the layout of a map.
*/
$('.wandSaveLayout').html('Saved!');
setTimeout(function(){$('.wandSaveLayout').html('Save Layout')},1500);
$('.sidebarSave .tip').html('Saved!');
setTimeout(function(){ $('.sidebarSave .tip').html('Save Layout') },1500);

View file

@ -9,16 +9,22 @@
<% if authenticated? %>
<% if @map.permission == "commons" || @map.user == user %>
<div class="sidebarSave">
<div class="sidebarSaveIcon"></div>
<div class="sidebarSaveIcon hoverForTip">
<div class="tip">Save Layout</div>
</div>
<div class="sidebarSaveBox"></div>
</div>
<% end %>
<div class="sidebarFork">
<div class="sidebarForkIcon"></div>
<div class="sidebarForkIcon hoverForTip">
<div class="tip">Save To New Map</div>
</div>
<div class="sidebarForkBox"></div>
</div>
<div class="sidebarCollaborate">
<div class="sidebarCollaborateIcon"></div>
<div class="sidebarCollaborateIcon hoverForTip">
<div class="tip">Start Realtime Collaboration</div>
</div>
<div class="sidebarCollaborateBox">
</div>
@ -157,7 +163,12 @@
});
$(".sidebarCollaborateIcon").click(function(event) {
goRealtime = !goRealtime;
if (!goRealtime) {
$('.sidebarCollaborate .tip').html('Stop Realtime Collaboration');
} else {
$('.sidebarCollaborate .tip').html('Start Realtime Collaboration');
}
goRealtime = !goRealtime;
$(".sidebarCollaborateIcon").toggleClass("blue");
});
@ -169,7 +180,11 @@
maxHeight: 500,
maxWidth: 500,
minHeight: 320,
minWidth: 226
minWidth: 226,
resize: function( event, ui ) {
var p = $('#showcard').find('.scroll');
p.height( p.height() ).mCustomScrollbar('update');
}
}).css({
display: 'none',
top: '300px',

View file

@ -24,6 +24,4 @@ if (Mconsole != null) {
duration: 1000
});
Mconsole.graph.removeNode(<%= @mapping.topic_id %>);
Mconsole.labels.disposeLabel(<%= @mapping.topic_id %>);
delete Mconsole.labels.labels['<%= @mapping.topic_id %>']
}

View file

@ -26,6 +26,8 @@ ISSAD::Application.routes.draw do
match 'maps/featured', to: 'maps#index', via: :get, as: :featuredmaps
match 'maps/new', to: 'maps#index', via: :get, as: :newmaps
match 'maps/mappers/:id', to: 'maps#index', via: :get, as: :usermaps
match 'maps/topics/:id', to: 'maps#index', via: :get, as: :topicmaps
resources :maps, except: [:new, :edit]
match 'maps/:id/embed', to: 'maps#embed', via: :get, as: :embed