changed the home view
This commit is contained in:
Connor Turland
parent
7d45a83776
commit
5784828931
8 changed files with 105 additions and 56 deletions
|
|
@ -10,22 +10,11 @@ var labelType, useGradients, nativeTextSupport, animate, json;
|
|||
//I'm setting this based on the fact that ExCanvas provides text support for IE
|
||||
//and that as of today iPhone/iPad current text support is lame
|
||||
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
|
||||
console.log(labelType);
|
||||
nativeTextSupport = labelType == 'Native';
|
||||
useGradients = nativeCanvasSupport;
|
||||
animate = !(iStuff || !nativeCanvasSupport);
|
||||
})();
|
||||
|
||||
var Log = {
|
||||
elem: false,
|
||||
write: function(text){
|
||||
if (!this.elem)
|
||||
this.elem = document.getElementById('log');
|
||||
this.elem.innerHTML = text;
|
||||
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
var imgArray = new Object();
|
||||
|
||||
imgArray['Group'] = new Image(); imgArray['Group'].src = '/assets/group.png';
|
||||
|
|
@ -183,13 +172,13 @@ function init(){
|
|||
// This is done by traversing the clicked node connections.
|
||||
var html = '<div class="item" id="item_' + node.id + '"><p class="type">' + node.getData("itemcatname") + '</p><img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" /><a href="http://localhost:3000/items/' + node.id + '" class="title">' + node.name + '</a><div class="desc"><p>' + node.getData('desc') + '</p></div><a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a></div>';
|
||||
//append connections information
|
||||
$jit.id('inner-details').innerHTML = html;
|
||||
$jit.id('showcard').innerHTML = html;
|
||||
}
|
||||
},
|
||||
//Number of iterations for the FD algorithm
|
||||
iterations: 200,
|
||||
//Edge length
|
||||
levelDistance: 130,
|
||||
levelDistance: 150,
|
||||
// Add text to the labels. This method is only triggered
|
||||
// on label creation and only for DOM labels (not native canvas ones).
|
||||
onCreateLabel: function(domElement, node){
|
||||
|
|
@ -257,7 +246,7 @@ function init(){
|
|||
// This is done by traversing the clicked node connections.
|
||||
var html = '<div class="item" id="item_' + node.id + '"><p class="type">' + node.getData("itemcatname") + '</p><img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" /><a href="http://localhost:3000/items/' + node.id + '" class="title">' + node.name + '</a><div class="desc"><p>' + node.getData('desc') + '</p></div><a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a></div>';
|
||||
//append connections information
|
||||
$jit.id('inner-details').innerHTML = html;
|
||||
$jit.id('showcard').innerHTML = html;
|
||||
};
|
||||
},
|
||||
// Change node styles when DOM labels are placed
|
||||
|
|
@ -280,10 +269,8 @@ function init(){
|
|||
iter: 40,
|
||||
property: 'end',
|
||||
onStep: function(perc){
|
||||
Log.write(perc + '% loaded...');
|
||||
},
|
||||
onComplete: function(){
|
||||
Log.write('done');
|
||||
fd.animate({
|
||||
modes: ['linear'],
|
||||
transition: $jit.Trans.Elastic.easeOut,
|
||||
|
|
|
|||
|
|
@ -1,45 +1,32 @@
|
|||
#center-container {
|
||||
position:relative;
|
||||
height:500px;
|
||||
width:70%;
|
||||
float:left;
|
||||
height:800px;
|
||||
width:95%;
|
||||
/* background-color:#031924; */
|
||||
color:#ccc;
|
||||
max-width:900px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
height:500px;
|
||||
width:29%;
|
||||
#showcard{
|
||||
width:auto;
|
||||
height:auto;
|
||||
color:#FFF;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#right-container h4{
|
||||
font-size:16px;
|
||||
line-height:18px;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:10px;
|
||||
margin-top:-150px;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
#inner-details {
|
||||
}
|
||||
|
||||
#log {
|
||||
font-size:1.0em;
|
||||
font-weight:bold;
|
||||
color:#23A4FF;
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
#infovis {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:500px;
|
||||
height:800px;
|
||||
margin:0 0 0 50px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ class ItemsController < ApplicationController
|
|||
def show
|
||||
@item = Item.find(params[:id])
|
||||
|
||||
@relatives = @item.as_json.html_safe
|
||||
@relatives = @item.map_as_json.html_safe
|
||||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@item) }
|
||||
|
|
|
|||
|
|
@ -6,9 +6,14 @@ class MainController < ApplicationController
|
|||
def home
|
||||
@current_user = current_user
|
||||
|
||||
@all = Item.all
|
||||
@item = Item.all.first
|
||||
|
||||
respond_with(@all)
|
||||
@alljson = @item.all_as_json.html_safe
|
||||
|
||||
respond_to do |format|
|
||||
format.html { respond_with(@item) }
|
||||
format.json { respond_with(@alljson) }
|
||||
end
|
||||
end
|
||||
|
||||
def userobjects
|
||||
|
|
|
|||
|
|
@ -1,2 +1,11 @@
|
|||
module ItemsHelper
|
||||
|
||||
def network(node)
|
||||
|
||||
@test = Array.new
|
||||
@test.push(node)
|
||||
|
||||
end
|
||||
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -17,11 +17,64 @@ has_many :items2, :through => :synapses1, :source => :item2
|
|||
|
||||
belongs_to :item_category
|
||||
|
||||
def as_json
|
||||
def self_as_json
|
||||
Jbuilder.encode do |json|
|
||||
@single = Array.new
|
||||
@single.push(self)
|
||||
#@items = @single + self.relatives
|
||||
|
||||
json.array!(@single) do |item|
|
||||
json.adjacencies item.synapses2.delete_if{|synapse| not @items.include?(Item.find_by_id(synapse.node1_id))} do |json, synapse|
|
||||
json.nodeTo synapse.node1_id
|
||||
json.nodeFrom synapse.node2_id
|
||||
|
||||
@synapsedata = Hash.new
|
||||
@synapsedata['$desc'] = synapse.desc
|
||||
@synapsedata['$category'] = synapse.category
|
||||
json.data @synapsedata
|
||||
end
|
||||
|
||||
@itemdata = Hash.new
|
||||
@itemdata['$desc'] = item.desc
|
||||
@itemdata['$link'] = item.link
|
||||
@itemdata['$itemcatname'] = item.item_category.name
|
||||
json.data @itemdata
|
||||
json.id item.id
|
||||
json.name item.name
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def map_as_json
|
||||
Jbuilder.encode do |json|
|
||||
@single = Array.new
|
||||
@single.push(self)
|
||||
@items = @single + self.relatives
|
||||
|
||||
json.array!(@items) do |item|
|
||||
json.adjacencies item.synapses2.delete_if{|synapse| not @items.include?(Item.find_by_id(synapse.node1_id))} do |json, synapse|
|
||||
json.nodeTo synapse.node1_id
|
||||
json.nodeFrom synapse.node2_id
|
||||
|
||||
@synapsedata = Hash.new
|
||||
@synapsedata['$desc'] = synapse.desc
|
||||
@synapsedata['$category'] = synapse.category
|
||||
json.data @synapsedata
|
||||
end
|
||||
|
||||
@itemdata = Hash.new
|
||||
@itemdata['$desc'] = item.desc
|
||||
@itemdata['$link'] = item.link
|
||||
@itemdata['$itemcatname'] = item.item_category.name
|
||||
json.data @itemdata
|
||||
json.id item.id
|
||||
json.name item.name
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def all_as_json
|
||||
Jbuilder.encode do |json|
|
||||
|
||||
@items = Item.all
|
||||
|
||||
json.array!(@items) do |item|
|
||||
|
|
|
|||
|
|
@ -18,13 +18,10 @@
|
|||
<div class="clearfloat nodemargin"></div>
|
||||
|
||||
<div class="relatives" id="container">
|
||||
<div class="divider"><%= @item.name %> is connected to these items</div>
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
<div id="right-container">
|
||||
<div id="log"></div>
|
||||
<div id="inner-details"></div>
|
||||
<div id="showcard">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
<div class="everything" id="everything">
|
||||
<% @all.each do |object| %>
|
||||
<%= render object %>
|
||||
<% end %>
|
||||
<% if @all.empty? %>
|
||||
<p><br>Shucks, there is nothing in metamaps.<p>
|
||||
<% end %>
|
||||
<% unless @item.nil? %>
|
||||
<div class="home" id="home">
|
||||
<div id="center-container">
|
||||
<div id="infovis"></div>
|
||||
</div>
|
||||
<div id="showcard">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
<script>
|
||||
json = <%= @alljson %>;
|
||||
console.log(json);
|
||||
$(document).ready(function() {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
<% end %>
|
||||
<% if @item.nil? %>
|
||||
<p><br>Shucks, there is nothing in metamaps.<p>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue