diff options
Diffstat (limited to 'gstudio/templates/gstudio/display.html')
| -rw-r--r-- | gstudio/templates/gstudio/display.html | 595 |
1 files changed, 595 insertions, 0 deletions
diff --git a/gstudio/templates/gstudio/display.html b/gstudio/templates/gstudio/display.html new file mode 100644 index 00000000..184b58de --- /dev/null +++ b/gstudio/templates/gstudio/display.html @@ -0,0 +1,595 @@ + +{% load i18n comments gstudio_tags %} +{% load gstudio_tags i18n %} +{% get_tags as nodetype_tags %} +{% load adminmedia grp_tags %} + + + + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xml:lang="{{ LANGUAGE_CODE }}" lang="{{ LANGUAGE_CODE }}" version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style type="text/css"> + .link { + stroke: #ccc; + } + .nodetext { + #pointer-events: none; + font: 10px Serif; + font-style:italic; + } + .mainnode{ + + font: 15px sans-serif; + fill:"red"; + border-width: 1px; + font-weight:bold; + border-color: gray; + + } + .relnode { + font: 10px sans-serif; + font-weight:bold; + fill:#000; + } + + + .node { + border-width: 1px; + border-color: gray; + fill:"green"; + font: 10px sans-serif; + } + body { + background-color: white; + display:block; + } + #chart { + height: 90%; + margin: 0 auto; + width: 90%; + display: block; + } + svg { + margin-left: 10%; + margin-right: 10%; + display: block; + position: absolute; + } + + </style> + <!-- the header lines from grappelli --> + {% block blockbots %} + <meta name="robots" content="NONE,NOARCHIVE" /> + {% endblock %} <!-- STYLESHEETS --> + {% block stylesheets %} + <link href="{% admin_media_prefix %}css/base.css" rel="stylesheet" type="text/css" /> + {% if LANGUAGE_BIDI %} + <link href="{% block stylesheet_rtl %}{% admin_media_prefix %}css/rtl.css{% endblock %}" rel="stylesheet" type="text/css" /> + {% endif %} + <link href="{% admin_media_prefix %}jquery/ui/css/custom-theme/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" media="screen" title="no title" charset="utf-8" /> + <link href="{% admin_media_prefix %}css/jquery-ui-grappelli-extensions.css" rel="stylesheet" type="text/css" /> + {% endblock %} <!-- EXTRASTYLES --> + {% block extrastyle %}{% endblock %} <!-- JAVASCRIPTS --> + {% block javascripts %} + <script type="text/javascript"> + // GLOBALS + var grappelli = {}, + // TODO: klemens: drop ADMIN_URL + ADMIN_URL = "{% url admin:index %}", + MODEL_URL_ARRAY = {% get_content_types %}, DATE_FORMAT = "{% get_date_format %}", TIME_FORMAT = "{% get_time_format %}", DATETIME_FORMAT = "{% get_datetime_format %}"; + </script> + <!-- jQuery, jQuery-UI --> + <script src="{% admin_media_prefix %}jquery/jquery-1.6.2.min.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}jquery/ui/js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script> + <!-- Grappelli Main JS --> + <script src="{% admin_media_prefix %}js/grappelli/grappelli.js" type="text/javascript"></script> + <!-- Grappelli jQuery Plugins, Widgets --> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_collapsible.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_collapsible_group.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_timepicker.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_related_fk.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_related_m2m.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_related_generic.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_autocomplete_fk.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_autocomplete_m2m.js" type="text/javascript"></script> + <script src="{% admin_media_prefix %}js/grappelli/jquery.grp_autocomplete_generic.js" type="text/javascript"></script> + <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery-1.5.1.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.core.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.widget.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.tabs.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery-ui-timepicker-0.2.9/include/jquery.ui.position.min.js"></script> + + <script type="text/javascript" src="{{STATIC_URL}}gstudio/js/jquery.ui.timepicker.js"></script> + + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + <script src="{{STATIC_URL}}gstudio/js/gstudio.js" type="text/javascript"></script> + <!-- EXTRAHEAD --> + {% block extrahead %}{% endblock %} + + {% endblock %} <!-- the header lines from gstudio --> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <meta http-equiv="cache-control" content="public" /> + <meta name="robots" content="follow, all" /> + <meta name="language" content="{{ LANGUAGE_CODE }}" /> + <meta name="description" content="{% block meta-description %}Demonstration of the Gstudio Blog application.{% endblock %}" /> + <meta name="keywords" content="{% block meta-keywords %}django, blog, gstudio, {{ nodetype_tags|join:", "}}{% endblock %}" /> + <meta name="author" content="gnowgi" /> + {% block meta %}{% endblock %} + <link rel="pingback" href="/xmlrpc/" /> + <link rel="shortcut icon" href="{{ STATIC_URL }}gstudio/img/favicon.ico" /> + <link rel="home" href="{% url gstudio_nodetype_archive_index %}" /> + <link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/grappelli_skin_default.css" /> + <link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/screen.css" /> + <link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/screen_gstudio.css" /> + <link rel="stylesheet" type="text/css" media="print" href="{{ STATIC_URL }}gstudio/css/print.css" /> + <!--[if lt IE 8]> + <link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}gstudio/css/ie.css" /> + <![endif]--> + {% block link %}{% endblock %} + {% block script %}{% endblock %} <title>Gnowledge Studio - {% block title %}{% endblock %}</title> + </head> + <body id="gstudio"> + <div class="body" > + <div class="content"> + <!-- + <div id="relation_type" class="ui-buttonset"> + <span>Relation type:</span> + <input checked="checked" value="follows" type="radio" id="follows" name="radio" class="ui-helper-hidden-accessible"><label for="follows" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="false" role="button" aria-disabled="false"><span class="ui-button-text">Followers</span></label> + <input value="mentions" type="radio" id="mentions" name="radio" class="ui-helper-hidden-accessible"><label for="mentions" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">Mentions</span></label> + <input value="hashtags" type="radio" id="hashtags" name="radio"/><label for="hashtags">Shared interests</label> + </div> + --> + <div id="chart"> + <svg width="960" height="700" style="opacity: 1; "> + </div> + <script type="text/javascript" src="/static/gstudio/js/jquery.min.js" ></script> + <script type="text/javascript" src="/static/gstudio/js/jquery-ui.js" ></script> + <script type="text/javascript" src="/static/gstudio/js/underscore.js" ></script> + <script type="text/javascript" src="/static/gstudio/js/d3.js"></script> + <script type="text/javascript" src="/static/gstudio/js/d3.layout.js"></script> + <script type="text/javascript" src="/static/gstudio/js/d3.geom.js"></script> + <!-- <script type="text/javascript" src="/static/gstudio/js/force.js"></script> + + Javascript for Object type force graph + --> + <script type="text/javascript" > + + var w = 700, + h = 300, + fill = d3.scale.category20(); + + var vis = d3.select("#chart") + .append("svg:svg") + .attr("width", w) + .attr("height", h); + + vis.append("svg:g").attr("class", "edges"); + vis.append("svg:g").attr("class", "nodes"); + +$(function() { + $.ajax({ + url: '/nodetypes/graphs/version_graph_json/{{ ssid }}', + //crossDomain: true, + dataType: 'json', + success : function(json) { + + //var node = NID.objects.get(slug='{{ slug }}'); + var force; + + // this contains all the nodes as a dict with _id as the key + + var nodes_by_id = _.reduce(json.node_metadata, function(acc, n) { + acc[n._id] = n; + return acc; + }, {}); + + var member_of = _(json.member_of).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'member_of'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var contains_subtypes = _(json.contains_subtypes).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'contains_subtypes'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + var contains_members = _(json.contains_members).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'contains_members'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var left_subjecttype_of = _(json.left_subjecttype_of).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'left_subjecttype_of'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var subjecttype_of = _(json.subjecttype_of).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'subjecttype_of'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + var plural = _(json.plural).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'plural'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var altnames = _(json.altnames).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'altnames'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + var content = _(json.content).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'content'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + var contains_members = _(json.contains_members).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'contains_members'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + + var type_of = _(json.type_of).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'type_of'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var right_subjecttype_of = _(json.right_subjecttype_of).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'right_subjecttype_of'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var follows_edges = _(json.is_followed_by).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'follows_edges'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + + var prior_nodes = _(json.prior_nodes).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'prior_node'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + var posterior_nodes = _(json.posterior_nodes).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'posterior_node'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + var mentions_edges = _(json.is_mentioned_by).chain().map(function(e) { + e.source = nodes_by_id[e.from]; + e.target = nodes_by_id[e.to]; + e.type = 'mentions_edges'; + return e; + }).filter(function(e){ + return nodes_by_id[e.from] && nodes_by_id[e.to] + }).value(); + + + nodes_by_id[{{ nt.id }}].x = w/2.0; + nodes_by_id[{{ nt.id }}].y = h/2.0; + + all_edges = new Array(); + all_edges = all_edges.concat(follows_edges, member_of, contains_members, contains_subtypes, mentions_edges, right_subjecttype_of, left_subjecttype_of, subjecttype_of, type_of,plural,altnames,contains_members,content, prior_nodes, posterior_nodes); + /* all_edges.concat(follows_edges); + all_edges.concat(member_of_metatype); + all_edges.concat(contains_members); + all_edges.concat(contains_subtypes); + all_edges.concat(mentions_edges); + + + document.getElementById('debugbox1').value= follows_edges; //member_of_metatype + document.getElementById('debugbox2').value= mentions_edges; + //document.getElementById('debugbox2').value= member_of_metatype; + document.getElementById('debugbox3').value= all_edges; + */ + var force = d3.layout.force() + .linkStrength(0.5) + .charge(-2000) + .friction(0.7) + .gravity(0.7) + .linkDistance(13) + .nodes([]) + .links([]) + .size([w, h]) + .start(); + + function update(edges){ + // for each func + _.each(nodes_by_id, function(n){n.added = false}); + // reduce the nodes list to have only those nodes for a given rel. + nodes = _.reduce(edges, function(acc, e) { + if(nodes_by_id[e.from] && !nodes_by_id[e.from].added){ + nodes_by_id[e.from].added = true; + acc.push(nodes_by_id[e.from]); + } + if(nodes_by_id[e.to] && !nodes_by_id[e.to].added){ + nodes_by_id[e.to].added = true; + acc.push(nodes_by_id[e.to]); + } + return acc; + }, []); + + force.nodes(nodes); + force.links(edges); + force.start(); + + link = d3.select("#chart g.edges").selectAll("line.link") + .data(edges, function(e){return e.from + "-" + e.to + "-" + e.type}); + + link.enter().append("svg:line") + .attr("class", "link") + .style("stroke-width", 2 /* function(d) { + return Math.sqrt(d.value); + } */ ) + .attr("x1", function(d) { + return d.source.x; + }) + .attr("y1", function(d) { + return d.source.y; + }) + .attr("x2", function(d) { + return d.target.x; + }) + .attr("y2", function(d) { + return d.target.y; + }) + .attr("text", function(d) { + return d.type; + }) + + .append("a") + .text(function(d) { return d.type; }); + + + var node = d3.select("#chart g.nodes").selectAll("g.node").data(nodes); + + var new_g = node.enter().append("svg:a") + .attr("class", function(d) { if (d._id=={{ nt.id }}) return "mainnode"; else if (isNaN(d._id)) return "relnode"; else if ((d._id)<0) return "nodetext"; else return "node"; }) + .attr("xlink:href",function(d){return d.url;}) + .call(force.drag); + + + + + new_g.append("svg:circle") + .attr("cx", function(d) { return d.x - w/2.0 + 15; }) + .attr("cy", function(d) { return d.y - h/2.0 + 15; }) + .attr("r", function(d) { if (d._id=={{ nt.id }}) return 8; else if (isNaN(d._id) || (d._id)<0) return 1; else return 7 }) + .style("fill", function color(d) { if (d._id=={{ nt.id }}) return "red"; else if (isNaN(d._id) || (d._id)<0) return "white" ; else return "green"}); + + + new_g.append("svg:text") + .attr("class",function(d) { if (d._id=={{ nt.id }}) return "mainnode"; else if (isNaN(d._id)) return "relnode"; else if ((d._id)<0) return "nodetext"; else return "node"; }) + .attr("dy", 20) + .attr("dx", 25) + .attr("text-anchor",function text(d) { if (isNaN(d._id) || (d._id)<0) return "middle" ; else return "left"}) + +// .attr("style",function text(d) { if (isNaN(d._id)) return "font-size:9.00pt;fill:#333;" ; else return "font-size:9.00pt;fill:black;"}) + + .text(function(d) { + return d.screen_name; + }); + + node.exit().remove(); + + + + force.on("tick", function() { + + var x_center = $("#chart").width() / 2; + var y_center = $("#chart").height() / 2; + + link.attr("x1", function(d) { return d.source.x; }) + .attr("y1", function(d) { return d.source.y; }) + .attr("x2", function(d) { return d.target.x; }) + .attr("y2", function(d) { return d.target.y; }); + + node.attr("transform", function(d) { return "translate(" + (d.x-16) + "," + (d.y-16) + ")"; }); + + }); + } + + update(all_edges); + vis.style("opacity", 1e-6) + .transition() + .duration(1000) + .style("opacity", 1); + + /* $('input#follows').change(function(){ + update(all_edges); + }); + */ + + /* $('input#mentions').change(function(){ + update(all_edges); + }); */ + } + }); + +// $("#relation_type").buttonset(); + +// $('input#mentions').change(function(){console.log(this)}); +// $('input#follows').change(function(){console.log(this)}); +}); + + +</script> + </div> +</div> +<div> + {% include "gstudio/_header.html" %} + <div id="breadcrumbs" class="span-24 last"> + / {% block breadcrumbs %}{% endblock %} + </div> + <div id="body" class="span-24 last" > + <div id="content" class="hfeed span-16 border"> + <h3>{% block content %} + {% block nodetype-content %} + <h2 class="nodetype-title"> + <a href="{{ nt.get_absolute_url }}" title="{{ nt.title }}" rel="bookmark">{{ ver_dict.title }} {{ nt.id }}.{{ cnt }} + </a> + </h2> + {% with nt.html_content|safe as object_content %} + <b>Name:<nbsp></b>{{ ver_dict.title }}<br/> + {% if ver_dict.altnames %} + <b> Alternate names:<nbsp></b>{{ ver_dict.altnames}} + <br/> + {% endif %} + {% if ver_dict.plural %} + <b> Plural Name:<nbsp></b>{{ ver_dict.plural }} <br/> + {% endif %} + {% if nt.get_rendered_nbh.authors %}<b>Authors: <nbsp> </b> + {% endif %} + {% for author in nt.authors.all %} + <span class="vcard author"> + <a href="{% url gstudio_author_detail author %}" class="fn nickname url" rel="author" + title="{% blocktrans with author as author %}Show {{ author }} nodetypes{% endblocktrans %}">{{ author }}</a> + </span>{% if not forloop.last %}, {% endif %} + {% endfor %} <br/> + {% endwith %} + {% endblock %} + {% endblock %} +</div> + + <div id="sidebar"> + {% block sidebar %} + + <div class="History"> + + <h3>{% trans "Versions" %}</h3> + <script type="text/javascript"> + function go_to_loc(sid) + { + + <!-- var len=document.history.group2.length --> + <!-- for(var i=0;i<len;i++) --> + <!-- { --> + <!-- var r=window.document.history.group2[i] --> + <!-- if(sid==r.) --> + <!-- { --> + <!-- r.disabled="false" --> + <!-- } --> + <!-- else --> + <!-- { --> + <!-- r.enabled="true" --> + <!-- } --> + <!-- } --> + + + } + </script> + + <form name="history" action="/nodetypes/display/showhistory/{{ ssid }}" > + <table cellspacing="0" border="2"> + <tr> + <td> <input type="radio" name="group1" value="{{ ssid }}" checked >{{ nt.id }}.{{ cnt }}</input></td> + <td></td></tr> + {% for sid in nt.get_ssid %} + {% ifnotequal forloop.counter cnt %} + <tr> + <td> + </td> + <td> + + <input type="radio" id="{{ sid }}"name="group2" value="{{ sid }}" >{{ nt.id }}.{{ forloop.counter }}</input> + </td>{% endifnotequal %} + {% endfor %}</tr></table> + <input type="submit" value="Compare" /> + </form> + + + </div> + + + {% endblock %} + </div> + + + <div id="footer" class="span-24 last" style="height: 5px; display:none; top: 51px; left: 88px; width: 1364px;"> + <p> + <a rel="license" + href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative + Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png"/></a> All material is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a> unless mentioned otherwise. + <br/> + Powered by <a href="http://www.djangoproject.com">Django</a> + and <a href="http://github.com/gnowgi/django-gstudio">Gstudio + {{ GSTUDIO_VERSION }}</a>. + </p> + </div> + </div> + </div> + </body> +</html> + + + + + + |