--- a/src/jocondelab/static/jocondelab/css/front-common.css Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-common.css Fri Aug 16 15:28:40 2013 +0200
@@ -183,3 +183,25 @@
opacity: 1;
}
+/* DBPEDIA OVERLAY */
+
+.dbpedia-overlay {
+ position: absolute; width: 400px; background: #ffffff; border: 1px solid #999999; box-shadow: 5px 5px 10px rgba(0,0,0,.5);
+ display: none; z-index: 8;
+}
+
+.dbpedia-overlay h2 {
+ font-size: 16px; font-weight: 700; margin: 10px;
+}
+
+.dbpedia-abstract {
+ font-size: 12px; margin: 0 10px 10px;
+}
+
+.dbpedia-source {
+ color: #0063DC; font-size: 11px; margin: 0 10px 10px; clear: both;
+}
+
+.dbpedia-overlay img {
+ max-width: 200px; max-height: 180px; float: left; margin: 10px 10px 2px;
+}
--- a/src/jocondelab/static/jocondelab/css/front-search.css Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-search.css Fri Aug 16 15:28:40 2013 +0200
@@ -14,7 +14,7 @@
}
.notice-popin {
- position: absolute; padding: 10px;
+ position: absolute; padding: 10px; z-index: 1;
background: url('../img/background-pinstripe-yellow.png'); border: 1px solid #cccccc; box-shadow: 0 0 5px #333333;
}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/jocondelab/static/jocondelab/js/front-common.js Fri Aug 16 15:28:40 2013 +0200
@@ -0,0 +1,118 @@
+$(function() {
+
+ var lang = $("html").attr("lang"),
+ sparqlTpl = _.template(
+ 'select distinct * where { '
+ + '<<%= uri %>> rdfs:label ?l FILTER( lang(?l) = "<%- lang %>" ). '
+ + 'OPTIONAL { <<%= uri %>> dbpedia-owl:thumbnail ?t }. '
+ + 'OPTIONAL { <<%= uri %>> dbpedia-owl:abstract ?a FILTER( lang(?a) = "<%- lang %>" ) }. '
+ + 'OPTIONAL { <<%= uri %>> foaf:isPrimaryTopicOf ?w }. '
+ + 'OPTIONAL { <<%= uri %>> dbpedia-owl:wikiPageRedirects ?r }. '
+ + 'OPTIONAL { ?r dbpedia-owl:thumbnail ?tr }. '
+ + 'OPTIONAL { ?r dbpedia-owl:abstract ?ar FILTER( lang(?ar) = "fr" ) }. '
+ + '}'
+ ),
+ $overlay = $(".dbpedia-overlay"),
+ hovering = null,
+ $refdiv = null,
+ $win = $(window),
+ dbpediaCache = {},
+ $img = $overlay.find("img"),
+ $h2 = $overlay.find("h2"),
+ $abstract = $overlay.find(".dbpedia-abstract"),
+ $source = $overlay.find(".dbpedia-source a");
+
+ function moveDbpediaPopin() {
+ if (hovering && $refdiv) {
+ var refoff = $refdiv.offset(),
+ refw = $refdiv.outerWidth(),
+ refh = $refdiv.outerHeight(),
+ refx = refoff.left,
+ refy = refoff.top,
+ ovw = $overlay.outerWidth(),
+ ovh = $overlay.outerHeight(),
+ showAbove = (refy + refh + ovh) > ($win.height() + $win.scrollTop());
+ $overlay.css({
+ top: showAbove ? (refy - ovh) : (refy + refh),
+ left: Math.max(5, Math.min($win.width() - ovw - 5, refx + (refw / 2) - (ovw / 2)))
+ });
+ }
+ }
+
+ function showUriData(dbpediaUri) {
+ var uriData = dbpediaCache[dbpediaUri];
+ if (!uriData) {
+ return false;
+ }
+ if (hovering) {
+ $overlay.show().attr("data-dbpedia-uri", dbpediaUri);
+ if (uriData.t || uriData.tr) {
+ $img.load(moveDbpediaPopin).attr("src",uriData.t || uriData.tr).show();
+ } else {
+ $img.hide();
+ }
+ $h2.text(uriData.l || "");
+ $abstract.text((uriData.a || uriData.ar || "").replace(/^(.{240,260})\s.+$/,'$1…'));
+ $source.attr("href", uriData.w || "http://www.wikipedia.org/").show();
+ moveDbpediaPopin();
+ }
+ return true;
+ }
+
+ function getUriData(dbpediaUri) {
+ if (typeof dbpediaCache[dbpediaUri] !== "undefined") {
+ return;
+ }
+ var sparqlEndpoint = dbpediaUri.replace(/\/resource\/.*$/,'/sparql'),
+ query = sparqlTpl({uri: dbpediaUri, lang: lang});
+ dbpediaCache[dbpediaUri] = false;
+ $.getJSON(sparqlEndpoint, {
+ query: query,
+ format: "application/sparql-results+json"
+ }, function(data) {
+ if (!data.results || !data.results.bindings || !data.results.bindings.length) {
+ return;
+ }
+ var res = data.results.bindings[0], cacheData = {};
+ for (var k in res) {
+ if (res.hasOwnProperty(k)) {
+ cacheData[k] = res[k].value;
+ }
+ }
+ dbpediaCache[dbpediaUri] = cacheData;
+ if (hovering === dbpediaUri) {
+ showUriData(dbpediaUri);
+ }
+ });
+ }
+
+ function onDbpediaLeave() {
+ hovering = null;
+ setTimeout(function() {
+ if (!hovering) {
+ $overlay.hide();
+ }
+ }, 0);
+ }
+
+ $("body").on({
+ mouseenter: function(e) {
+ $refdiv = $(this);
+ var dbpediaUri = $refdiv.attr("data-dbpedia-uri");
+ hovering = dbpediaUri;
+ showUriData(dbpediaUri) || getUriData(dbpediaUri);
+ },
+ mouseleave: onDbpediaLeave
+ }, "a[data-dbpedia-uri]");
+
+ $overlay.hover(function() {
+ var $this = $(this),
+ dbpediaUri = $this.attr("data-dbpedia-uri");
+ if (dbpediaUri) {
+ hovering = dbpediaUri;
+ }
+ }, onDbpediaLeave);
+
+ $(window).resize(moveDbpediaPopin).scroll(moveDbpediaPopin);
+
+})
--- a/src/jocondelab/static/jocondelab/js/front-search.js Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-search.js Fri Aug 16 15:28:40 2013 +0200
@@ -3,12 +3,13 @@
* */
$(function() {
-
+
var $tblist = $(".notice-list"),
$tbparent = $tblist.parent(),
$win = $(window),
gridsize = $(".notice-item").width() || 160,
- $popin = null;
+ $popin = null,
+ $dbpOverlay = $(".dbpedia-overlay");
function removePopin() {
if ($popin) {
@@ -59,6 +60,8 @@
}
}
+ var hoverPopin = false;
+
$tblist.find(".notice-item").mouseenter(function() {
var $this = $(this);
removePopin();
@@ -70,9 +73,22 @@
$popin.find(".notice-image").css("margin", 0);
$("body").append($popin);
movePopin();
- $popin.mouseleave(removePopin);
+ $popin.hover(function() {
+ hoverPopin = true;
+ }, function() {
+ hoverPopin = false;
+ if ($dbpOverlay.is(":hidden")) {
+ removePopin();
+ }
+ });
});
+ $dbpOverlay.mouseleave(function() {
+ if (!hoverPopin) {
+ removePopin();
+ }
+ })
+
function adaptGrid() {
$tblist.css({
padding: "0 " + Math.floor($tbparent.width() % gridsize / 2) + "px"
--- a/src/jocondelab/templates/jocondelab/front_base.html Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_base.html Fri Aug 16 15:28:40 2013 +0200
@@ -12,7 +12,6 @@
<script type="text/javascript" src="{{STATIC_URL}}jocondelab/lib/underscore-min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}jocondelab/lib/jquery.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}jocondelab/lib/jquery-ui.min.js"></script>
- <script type="text/javascript" src="{{STATIC_URL}}jocondelab/js/front-common.js"></script>
{% endblock %}
{% block css_import %}
@@ -67,6 +66,12 @@
{% endblock %}
</footer>
</div>
+ <div class="dbpedia-overlay clearfix">
+ <img />
+ <h2></h2>
+ <p class="dbpedia-abstract"></p>
+ <p class="dbpedia-source"><a href="#">{% trans 'Source: Wikipedia' %}</a></p>
+ </div>
{% endblock %}
</body>
</html>
--- a/src/jocondelab/templates/jocondelab/front_notice.html Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_notice.html Fri Aug 16 15:28:40 2013 +0200
@@ -58,7 +58,7 @@
<ul class="datasheet-contents notice-term-list">
{% for termtype, terms in terms.items %}
{% for term in terms %}
- <li class="notice-term term-{{termtype}}"><a href="{% url 'multilingual_search' %}?q={{term.locale_label|urlencode}}">{{term.locale_label}}</a></li>
+ <li class="notice-term term-{{termtype}}" data-dbpedia-uri="{{term.dbpedia_uri}}"><a href="{% url 'multilingual_search' %}?q={{term.locale_label|urlencode}}">{{term.locale_label}}</a></li>
{% endfor %}
{% endfor %}
</ul>
--- a/src/jocondelab/templates/jocondelab/front_search.html Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_search.html Fri Aug 16 15:28:40 2013 +0200
@@ -27,7 +27,7 @@
<ul class="term-cloud">
{% for word in words %}
<li style="font-size: {{word.font_size|unlocalize}}em">
- <a href="{% url 'multilingual_search' %}?q={{word.label|urlencode}}">{{word.label}} <span class="term-frequency">({{word.notice_count}})</span></a>
+ <a href="{% url 'multilingual_search' %}?q={{word.label|urlencode}}" data-dbpedia-uri="{{word.uri}}">{{word.label}} <span class="term-frequency">({{word.notice_count}})</span></a>
</li>
{% endfor %}
</ul>
@@ -60,7 +60,7 @@
<h3>{% trans thesaurus %}{% trans ':' %}</h3>
<ul class="notice-term-list">
{% for term in terms %}
- <li class="notice-term"><a href="{% url 'multilingual_search' %}?q={{term.locale_label|urlencode}}">{{term.locale_label}}</a></li>
+ <li class="notice-term"><a href="{% url 'multilingual_search' %}?q={{term.locale_label|urlencode}}" data-dbpedia-uri="{{term.dbpedia_uri}}">{{term.locale_label}}</a></li>
{% endfor %}
</ul>
</li>
--- a/src/jocondelab/views/front_office.py Wed Aug 14 16:42:33 2013 +0200
+++ b/src/jocondelab/views/front_office.py Fri Aug 16 15:28:40 2013 +0200
@@ -58,7 +58,8 @@
for n in ns:
terms = [{
"locale_label": ts.dbpediaresource.translations.get(lang=lang).label,
- "thesaurus": ts.thesaurus.label
+ "thesaurus": ts.thesaurus.label,
+ "dbpedia_uri": ts.dbpediaresource.uri
} for ts in n.dbpedia_resources.filter(dbpediaresource__translations__lang=lang)]
termsbythesaurus = {}
for term in terms: