added hideAll showAll filters!
This commit is contained in:
parent
53ec317cd0
commit
b34962b4f5
10 changed files with 136 additions and 56 deletions
|
@ -74,3 +74,33 @@ function showCategory(g, category, duration) {
|
|||
duration: duration
|
||||
});
|
||||
}
|
||||
|
||||
function hideAll(g, duration) {
|
||||
if (duration == null) duration = 500;
|
||||
g.graph.eachNode( function (n) {
|
||||
n.setData('alpha', 0, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 0, 'end');
|
||||
});
|
||||
});
|
||||
g.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
});
|
||||
}
|
||||
|
||||
function showAll(g, duration) {
|
||||
if (duration == null) duration = 500;
|
||||
g.graph.eachNode( function (n) {
|
||||
n.setData('alpha', 1, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 1, 'end');
|
||||
});
|
||||
});
|
||||
g.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: duration
|
||||
});
|
||||
}
|
||||
|
|
|
@ -3114,8 +3114,8 @@ var Canvas;
|
|||
this.viz = viz;
|
||||
this.config = $.merge({
|
||||
idSuffix: '-bkcanvas',
|
||||
levelDistance: 100,
|
||||
numberOfCircles: 6,
|
||||
levelDistance: 200,
|
||||
numberOfCircles: 4,
|
||||
CanvasStyles: {},
|
||||
offset: 0
|
||||
}, options);
|
||||
|
|
|
@ -106,22 +106,26 @@
|
|||
);
|
||||
|
||||
var sliding4 = false;
|
||||
var lT;
|
||||
$(".legend").hover(
|
||||
function () {
|
||||
clearTimeout(lT);
|
||||
if (! sliding4) {
|
||||
sliding4 = true;
|
||||
$("#iconLegend ul").slideDown('slow', function() {
|
||||
sliding4 = false;
|
||||
});
|
||||
sliding4 = true;
|
||||
$("#iconLegend ul").slideDown('slow', function() {
|
||||
sliding4 = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
function () {
|
||||
if (! sliding4) {
|
||||
sliding4 = true;
|
||||
$("#iconLegend ul").slideUp('slow', function() {
|
||||
sliding4 = false;
|
||||
});
|
||||
}
|
||||
lT = setTimeout(function() {
|
||||
if (! sliding4) {
|
||||
sliding4 = true;
|
||||
$("#iconLegend ul").slideUp('slow', function() {
|
||||
sliding4 = false;
|
||||
});
|
||||
}
|
||||
},800);
|
||||
}
|
||||
);
|
||||
|
||||
|
@ -129,45 +133,90 @@
|
|||
$('.legend ul li').click(function(event) {
|
||||
obj = document.getElementById('container');
|
||||
|
||||
var category = $(this).children('img').attr('alt');
|
||||
var switchAll = $(this).attr('id');
|
||||
console.log(switchAll);
|
||||
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
switchVisible(fd, category);
|
||||
}
|
||||
else if (rg != null) {
|
||||
switchVisible(rg, category);
|
||||
}
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
console.log('test');
|
||||
if (categoryVisible[category] == true) {
|
||||
if (category.split(' ').length == 1) {
|
||||
$('#cards .' + category).fadeOut('slow');
|
||||
}
|
||||
else {
|
||||
$('#cards .' + category.split(' ')[0]).fadeOut('slow');
|
||||
}
|
||||
}
|
||||
else if (categoryVisible[category] == false) {
|
||||
if (category.split(' ').length == 1) {
|
||||
$('#cards .' + category).fadeIn('slow');
|
||||
}
|
||||
else {
|
||||
$('#cards .' + category.split(' ')[0]).fadeIn('slow');
|
||||
}
|
||||
}
|
||||
}
|
||||
// toggle the image and the boolean array value
|
||||
if (categoryVisible[category] == true) {
|
||||
$(this).addClass('toggledOff');
|
||||
categoryVisible[category] = false;
|
||||
if ( switchAll === "showAll" || switchAll === "hideAll") {
|
||||
if (switchAll == "showAll") {
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
showAll(fd);
|
||||
}
|
||||
else if (rg != null) {
|
||||
showAll(rg);
|
||||
}
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
console.log('rightone');
|
||||
$('.item').fadeIn('slow');
|
||||
}
|
||||
$('.legend ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
||||
for (var catVis in categoryVisible) {
|
||||
categoryVisible[catVis] = true;
|
||||
}
|
||||
}
|
||||
else if (switchAll == "hideAll") {
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
hideAll(fd);
|
||||
}
|
||||
else if (rg != null) {
|
||||
hideAll(rg);
|
||||
}
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
$('.item').fadeOut('slow');
|
||||
}
|
||||
$('.legend ul li').not('#hideAll, #showAll').addClass('toggledOff');
|
||||
for (var catVis in categoryVisible) {
|
||||
categoryVisible[catVis] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (categoryVisible[category] == false) {
|
||||
$(this).removeClass('toggledOff');
|
||||
categoryVisible[category] = true;
|
||||
else {
|
||||
var category = $(this).children('img').attr('alt');
|
||||
|
||||
// this means that we are on a map view
|
||||
if (obj != null) {
|
||||
if (fd != null) {
|
||||
switchVisible(fd, category);
|
||||
}
|
||||
else if (rg != null) {
|
||||
switchVisible(rg, category);
|
||||
}
|
||||
}
|
||||
// this means that we are on a card view
|
||||
else {
|
||||
if (categoryVisible[category] == true) {
|
||||
if (category.split(' ').length == 1) {
|
||||
$('#cards .' + category).fadeOut('slow');
|
||||
}
|
||||
else {
|
||||
$('#cards .' + category.split(' ')[0]).fadeOut('slow');
|
||||
}
|
||||
}
|
||||
else if (categoryVisible[category] == false) {
|
||||
if (category.split(' ').length == 1) {
|
||||
$('#cards .' + category).fadeIn('slow');
|
||||
}
|
||||
else {
|
||||
$('#cards .' + category.split(' ')[0]).fadeIn('slow');
|
||||
}
|
||||
}
|
||||
}
|
||||
// toggle the image and the boolean array value
|
||||
if (categoryVisible[category] == true) {
|
||||
$(this).addClass('toggledOff');
|
||||
categoryVisible[category] = false;
|
||||
}
|
||||
else if (categoryVisible[category] == false) {
|
||||
$(this).removeClass('toggledOff');
|
||||
categoryVisible[category] = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -144,7 +144,7 @@ cursor: pointer; }
|
|||
#iconLegend #filters-right { float:left; }
|
||||
|
||||
#iconLegend li.toggledOff {
|
||||
opacity: 0.2;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* --- styling feedback button ---*/
|
||||
|
|
|
@ -13,9 +13,8 @@
|
|||
text-align: left;
|
||||
overflow: auto;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
top:200px;
|
||||
left:10px;
|
||||
margin-top:-150px;
|
||||
}
|
||||
#showcard .contributor { font-size:14px; }
|
||||
|
||||
|
|
|
@ -72,6 +72,7 @@
|
|||
<div id="iconLegend">
|
||||
<h3>FILTERS</h3>
|
||||
<ul id="filters-left">
|
||||
<li id="showAll">Show All</li>
|
||||
<li><img src="/assets/action.png" alt="Action" /><p>action</p></li>
|
||||
<li><img src="/assets/activity.png" alt="Activity" /><p>activity</p></li>
|
||||
<li><img src="/assets/bizarre.png" alt="Bizarre" /><p>bizarre</p></li>
|
||||
|
@ -88,6 +89,7 @@
|
|||
<li><img src="/assets/location.png" alt="Location" /><p>location</p></li>
|
||||
</ul>
|
||||
<ul id="filters-right">
|
||||
<li id="hideAll">Hide All</li>
|
||||
<li><img src="/assets/openissue.png" alt="Open Issue" /><p>open issue</p></li>
|
||||
<li><img src="/assets/opinion.png" alt="Opinion" /><p>opinion</p></li>
|
||||
<li><img src="/assets/opportunity.png" alt="Opportunity" /><p>opportunity</p></li>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<%= select_tag :node1_id, options_from_collection_for_select(Item.order("name ASC").visibleToUser(user, nil), "id", "name") %>
|
||||
<% end %>
|
||||
<label for="item_category">Directionality of the Connection</label>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to', 'to-from']) %>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to']) %>
|
||||
<label for="item_desc">Describe The Connection</label>
|
||||
<%= form.text_field :desc, class: "description" %>
|
||||
<% if Item.visibleToUser(user, nil).count > 0 %>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<%= select_tag :node1_id, options_from_collection_for_select(Item.order("name ASC").visibleToUser(user, nil), "id", "name") %>
|
||||
<% end %>
|
||||
<label for="item_category">Directionality of the Connection</label>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to', 'to-from']) %>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to']) %>
|
||||
<label for="item_desc">Describe The Connection</label>
|
||||
<%= form.text_field :desc, class: "description" %>
|
||||
<% if Item.visibleToUser(user, nil).count > 0 %>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<%= select "node1_id", "node1", Item.order("name ASC").visibleToUser(user, nil).map {|p| [ p.name, p.id ] }, { :selected => @synapse.node1_id } %>
|
||||
<% end %>
|
||||
<label for="item_category">Directionality of the Connection</label>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to', 'to-from'], @synapse.category) %>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to'], @synapse.category) %>
|
||||
<label for="item_desc">Describe The Connection</label>
|
||||
<%= form.text_field :desc, class: "description" %>
|
||||
<% if Item.visibleToUser(user, nil).count > 0 %>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<%= select_tag :node1_id, options_from_collection_for_select(Item.order("name ASC").visibleToUser(user, nil), "id", "name") %>
|
||||
<% end %>
|
||||
<label for="item_category">Directionality of the Connection</label>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to', 'to-from']) %>
|
||||
<%= form.select :category, options_for_select(['none', 'both', 'from-to']) %>
|
||||
<label for="item_desc">Describe The Connection</label>
|
||||
<%= form.text_field :desc, class: "description" %>
|
||||
<% if Item.visibleToUser(user, nil).count > 0 %>
|
||||
|
|
Loading…
Reference in a new issue