changed topic exploration to move into fluid space.
This commit is contained in:
Connor Turland
parent
1727d95c4c
commit
43e1e12503
8 changed files with 200 additions and 55 deletions
|
|
@ -1,4 +1,7 @@
|
|||
function selectEdgeOnClickHandler(adj, e) {
|
||||
|
||||
if (Mconsole.busy) return;
|
||||
|
||||
//editing overrides everything else
|
||||
if (e.altKey) {
|
||||
editEdge(adj, e);
|
||||
|
|
@ -25,6 +28,9 @@ function selectEdgeOnClickHandler(adj, e) {
|
|||
}//selectEdgeOnClickHandler
|
||||
|
||||
function selectNodeOnClickHandler(node, e) {
|
||||
|
||||
if (Mconsole.busy) return;
|
||||
|
||||
//set final styles
|
||||
if (!e.shiftKey) {
|
||||
Mconsole.graph.eachNode(function (n) {
|
||||
|
|
|
|||
|
|
@ -123,9 +123,29 @@ function graphSettings(type) {
|
|||
} else if (node && !node.nodeFrom) {
|
||||
//node is actually a node :)
|
||||
if (!Mconsole.busy) {
|
||||
selectNodeOnClickHandler(node, e);
|
||||
Mconsole.onClick(node.id, {
|
||||
hideLabels: false
|
||||
hideLabels: false,
|
||||
onComplete: function() {
|
||||
selectNodeOnClickHandler(node, e);
|
||||
$('h1.index').html('Viewing Topic: ' + node.name);
|
||||
window.history.pushState(node.name, "Metamaps", "/topics/" + node.id);
|
||||
var myA = $.ajax({
|
||||
type: "Get",
|
||||
url: "/topics/" + node.id + "?format=json",
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
Mconsole.op.morph(data, {
|
||||
type: 'fade',
|
||||
duration: 1500,
|
||||
hideLabels: false,
|
||||
transition: $jit.Trans.Quart.easeOut
|
||||
});
|
||||
},
|
||||
error: function(){
|
||||
alert('failure');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
|
@ -277,6 +297,9 @@ var nodeSettings = {
|
|||
|
||||
|
||||
function onMouseMoveHandler(node, eventInfo, e) {
|
||||
|
||||
if (Mconsole.busy) return;
|
||||
|
||||
var node = eventInfo.getNode();
|
||||
var edge = eventInfo.getEdge();
|
||||
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ function initialize(type, loadLater){
|
|||
|
||||
// load JSON data.
|
||||
if (!loadLater) {
|
||||
Mconsole.busy = true;
|
||||
Mconsole.loadJSON(json);
|
||||
|
||||
// choose how to plot and animate the data onto the screen
|
||||
|
|
@ -97,7 +98,10 @@ function initialize(type, loadLater){
|
|||
|
||||
chooseAnimate = {
|
||||
modes:['polar'],
|
||||
duration: 2000
|
||||
duration: 2000,
|
||||
onComplete: function() {
|
||||
Mconsole.busy = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
else if ( type == "arranged" ) {
|
||||
|
|
@ -114,7 +118,10 @@ function initialize(type, loadLater){
|
|||
chooseAnimate = {
|
||||
modes: ['linear'],
|
||||
transition: $jit.Trans.Quad.easeInOut,
|
||||
duration: 2500
|
||||
duration: 2500,
|
||||
onComplete: function() {
|
||||
Mconsole.busy = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
else if ( type == "chaotic" ) {
|
||||
|
|
@ -124,7 +131,10 @@ function initialize(type, loadLater){
|
|||
chooseAnimate = {
|
||||
modes: ['linear'],
|
||||
transition: $jit.Trans.Elastic.easeOut,
|
||||
duration: 2500
|
||||
duration: 2500,
|
||||
onComplete: function() {
|
||||
Mconsole.busy = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,13 @@ function generateShowcardHTML() {
|
|||
height="50" \
|
||||
width="50" \
|
||||
src="$_imgsrc_$" /> \
|
||||
<div class="cardSettings"> \
|
||||
<div class="mapPerm" \
|
||||
title="$_permission_$"> \
|
||||
$_mk_permission_$ \
|
||||
</div> \
|
||||
$_edit_permission_$ \
|
||||
</div> \
|
||||
<span class="title"> \
|
||||
<span class="best_in_place best_in_place_name" \
|
||||
data-url="/topics/$_id_$" \
|
||||
|
|
@ -104,7 +111,7 @@ function generateShowcardHTML() {
|
|||
function replaceVariables(html, node) {
|
||||
//link is rendered differently if user is logged out or in
|
||||
var go_link, a_tag, close_a_tag;
|
||||
if (userid == null) {
|
||||
if (! authorizeToEdit(node)) {
|
||||
go_link = '';
|
||||
if (node.getData("link") != "") {
|
||||
a_tag = '<a href="' + node.getData("link") + '">';
|
||||
|
|
@ -145,7 +152,42 @@ function replaceVariables(html, node) {
|
|||
|
||||
var desc_nil = "<span class='gray'>Click to add description.</span>";
|
||||
var link_nil = "<span class='gray'>Click to add link.</span>";
|
||||
|
||||
|
||||
var edit_perm = '';
|
||||
if (userid == node.getData("userid")) {
|
||||
edit_perm = ' \
|
||||
<div class="permActivator"> \
|
||||
<div class="editSettings"> \
|
||||
<span>Permissions: </span> \
|
||||
<span title="Click to Edit"> \
|
||||
<span class="best_in_place best_in_place_permission" \
|
||||
id="best_in_place_topic_$_id_$_permission" \
|
||||
data-url="/topics/$_id_$" \
|
||||
data-object="topic" \
|
||||
data-collection=$_permission_choices_$ \
|
||||
data-attribute="permission" \
|
||||
data-type="select" \
|
||||
data-value="$_permission_$"> \
|
||||
$_permission_$ \
|
||||
</span> \
|
||||
</span> \
|
||||
<div class="clearfloat"></div> \
|
||||
</div> \
|
||||
</div>';
|
||||
}
|
||||
var permissions = ['commons','public','private'];
|
||||
var permission_choices = "'[";
|
||||
for (var i in permissions) {
|
||||
permission_choices += '["' + permissions[i] + '","' + permissions[i] + '"],';
|
||||
}
|
||||
//remove trailing comma and add ]
|
||||
permission_choices = permission_choices.slice(0, -1);
|
||||
permission_choices += "]'";
|
||||
edit_perm = edit_perm.replace(/\$_permission_choices_\$/g, permission_choices);
|
||||
|
||||
html = html.replace(/\$_edit_permission_\$/g, edit_perm);
|
||||
html = html.replace(/\$_permission_\$/g, node.getData("permission"));
|
||||
html = html.replace(/\$_mk_permission_\$/g, mk_permission(node));
|
||||
html = html.replace(/\$_id_\$/g, node.id);
|
||||
html = html.replace(/\$_metacode_\$/g, node.getData("metacode"));
|
||||
html = html.replace(/\$_imgsrc_\$/g, imgArray[node.getData("metacode")].src);
|
||||
|
|
@ -156,14 +198,14 @@ function replaceVariables(html, node) {
|
|||
html = html.replace(/\$_go_link_\$/g, go_link);
|
||||
html = html.replace(/\$_a_tag_\$/g, a_tag);
|
||||
html = html.replace(/\$_close_a_tag_\$/g, close_a_tag);
|
||||
if (node.getData("link") == "" && userid != null) {
|
||||
if (node.getData("link") == "" && authorizeToEdit(node)) {
|
||||
html = html.replace(/\$_link_\$/g, link_nil);
|
||||
} else {
|
||||
html = html.replace(/\$_link_\$/g, node.getData("link"));
|
||||
}
|
||||
|
||||
html = html.replace(/\$_desc_nil_\$/g, desc_nil);
|
||||
if (node.getData("desc") == "" && userid != null) {
|
||||
if (node.getData("desc") == "" && authorizeToEdit(node)) {
|
||||
//logged in but desc isn't there so it's invisible
|
||||
html = html.replace(/\$_desc_\$/g, desc_nil);
|
||||
} else {
|
||||
|
|
@ -235,6 +277,7 @@ function hideCard(node) {
|
|||
}
|
||||
|
||||
function bindCallbacks(showCard, nameContainer, node) {
|
||||
|
||||
// add some events to the label
|
||||
$(showCard).find('img.icon').click(function(){
|
||||
hideCard(node);
|
||||
|
|
@ -285,4 +328,51 @@ function bindCallbacks(showCard, nameContainer, node) {
|
|||
var link = $(this).html();
|
||||
$(showCard).find('.go-link').attr('href', link);
|
||||
});
|
||||
|
||||
var sliding2 = false;
|
||||
var lT1,lT2;
|
||||
$(showCard).find(".permActivator").bind('mouseover',
|
||||
function () {
|
||||
clearTimeout(lT2);
|
||||
that = this;
|
||||
lT1 = setTimeout(function() {
|
||||
if (! sliding2) {
|
||||
sliding2 = true;
|
||||
$(that).animate({
|
||||
width: '203px',
|
||||
height: '37px'
|
||||
}, 300, function() {
|
||||
sliding2 = false;
|
||||
});
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
$(showCard).find(".permActivator").bind('mouseout',
|
||||
function () {
|
||||
clearTimeout(lT1);
|
||||
that = this;
|
||||
lT2 = setTimeout(function() {
|
||||
if (! sliding2) {
|
||||
sliding2 = true;
|
||||
$(that).animate({
|
||||
height: '16px',
|
||||
width: '16px'
|
||||
}, 300, function() {
|
||||
sliding2 = false;
|
||||
});
|
||||
}
|
||||
},800);
|
||||
}
|
||||
);
|
||||
|
||||
//bind best_in_place ajax callbacks
|
||||
$(showCard).find('.best_in_place_permission').bind("ajax:success", function() {
|
||||
var permission = $(this).html();
|
||||
var el = $(this).parents('.cardSettings').find('.mapPerm');
|
||||
el.attr('title', permission);
|
||||
if (permission == "commons") el.html("co");
|
||||
else if (permission == "public") el.html("pu");
|
||||
else if (permission == "private") el.html("pr");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,10 @@
|
|||
function authorizeToEdit(obj) {
|
||||
if (userid && (obj.data.$permission == "commons" || obj.data.$userid == userid)) return true;
|
||||
else return false;
|
||||
}
|
||||
|
||||
function mk_permission(obj) {
|
||||
if (obj.getData("permission") == "commons") return "co";
|
||||
else if (obj.getData("permission") == "public") return "pu";
|
||||
else if (obj.getData("permission") == "private") return "pr";
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ function editEdge(edge, e) {
|
|||
$('#edit_synapse input').focus();
|
||||
$('#edit_synapse').show();
|
||||
}
|
||||
else if (! authorizeToEdit(edge)) {
|
||||
else if ((! authorizeToEdit(edge)) && userid) {
|
||||
alert("You don't have the permissions to edit this synapse.");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,51 +84,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
|
|||
}
|
||||
);
|
||||
|
||||
|
||||
// controls the sliding hover of the settings for cards
|
||||
var sliding2 = false;
|
||||
var lT1,lT2;
|
||||
$(".permActivator").hover(
|
||||
function () {
|
||||
clearTimeout(lT2);
|
||||
that = this;
|
||||
lT1 = setTimeout(function() {
|
||||
if (! sliding2) {
|
||||
sliding2 = true;
|
||||
$(that).animate({
|
||||
width: '203px',
|
||||
height: '37px'
|
||||
}, 300, function() {
|
||||
sliding2 = false;
|
||||
});
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
function () {
|
||||
clearTimeout(lT1);
|
||||
that = this;
|
||||
lT2 = setTimeout(function() {
|
||||
if (! sliding2) {
|
||||
sliding2 = true;
|
||||
$(that).animate({
|
||||
height: '16px',
|
||||
width: '16px'
|
||||
}, 300, function() {
|
||||
sliding2 = false;
|
||||
});
|
||||
}
|
||||
},800);
|
||||
}
|
||||
);
|
||||
//bind best_in_place ajax callbacks
|
||||
$('.best_in_place_permission').bind("ajax:success", function() {
|
||||
var permission = $(this).html();
|
||||
var el = $(this).parents('.cardSettings').find('.mapPerm');
|
||||
el.attr('title', permission);
|
||||
if (permission == "commons") el.html("co");
|
||||
else if (permission == "public") el.html("pu");
|
||||
else if (permission == "private") el.html("pr");
|
||||
});
|
||||
addHoverForSettings();
|
||||
|
||||
//bind best_in_place ajax callbacks
|
||||
$('.best_in_place_metacode').bind("ajax:success", function() {
|
||||
|
|
@ -147,6 +103,59 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
|
|||
|
||||
});
|
||||
|
||||
function addHoverForSettings() {
|
||||
// controls the sliding hover of the settings for cards
|
||||
$(".permActivator").unbind('mouseover');
|
||||
$(".permActivator").unbind('mouseout');
|
||||
var sliding2 = false;
|
||||
var lT1,lT2;
|
||||
$(".permActivator").bind('mouseover',
|
||||
function () {
|
||||
clearTimeout(lT2);
|
||||
that = this;
|
||||
lT1 = setTimeout(function() {
|
||||
if (! sliding2) {
|
||||
sliding2 = true;
|
||||
$(that).animate({
|
||||
width: '203px',
|
||||
height: '37px'
|
||||
}, 300, function() {
|
||||
sliding2 = false;
|
||||
});
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
$(".permActivator").bind('mouseout',
|
||||
function () {
|
||||
clearTimeout(lT1);
|
||||
that = this;
|
||||
lT2 = setTimeout(function() {
|
||||
if (! sliding2) {
|
||||
sliding2 = true;
|
||||
$(that).animate({
|
||||
height: '16px',
|
||||
width: '16px'
|
||||
}, 300, function() {
|
||||
sliding2 = false;
|
||||
});
|
||||
}
|
||||
},800);
|
||||
}
|
||||
);
|
||||
|
||||
$('.best_in_place_permission').unbind("ajax:success");
|
||||
//bind best_in_place ajax callbacks
|
||||
$('.best_in_place_permission').bind("ajax:success", function() {
|
||||
var permission = $(this).html();
|
||||
var el = $(this).parents('.cardSettings').find('.mapPerm');
|
||||
el.attr('title', permission);
|
||||
if (permission == "commons") el.html("co");
|
||||
else if (permission == "public") el.html("pu");
|
||||
else if (permission == "private") el.html("pr");
|
||||
});
|
||||
}
|
||||
|
||||
// this is to save the layout of a map
|
||||
function saveLayoutAll() {
|
||||
var coor = "";
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<% if @map.user == user %>
|
||||
<label for="map_perm">Permission</label>
|
||||
<%= form.select :permission, options_for_select(['commons', 'public', 'private'], @map.permission) %>
|
||||
<p>Topics and synapses you create newly on this map will be set by default to the permissions of your map.<br>Permissions of already created topics will not be changed to your new map permission.</p>
|
||||
<% end %>
|
||||
<%= form.submit "Update", class: "update" %>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue