--- a/client/css/renkan.css Wed Sep 05 14:49:33 2012 +0200
+++ b/client/css/renkan.css Thu Sep 06 17:21:11 2012 +0200
@@ -182,14 +182,14 @@
}
.Rk-Editor label {
- display: inline-block; width: 80px;
+ display: inline-block; width: 70px;
}
a.Rk-Edit-Goto {
display: block; float: right; width: 18px; height: 17px; margin: 1px 0; border: none; background: url(../img/goto.png);
}
-.Rk-Edit-Title {
+.Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image {
font-size: 12px; width: 225px;
}
@@ -197,6 +197,11 @@
font-size: 12px; width: 205px;
}
+.Rk-Edit-ImgPreview {
+ border: 1px solid #666; margin: 5px 0; min-height: 10px; display: block;
+ max-width: 100% !important; max-height: 100px !important;
+}
+
.Rk-Editor textarea {
width: 225px; height: 120px; resize: none;
}
@@ -414,7 +419,7 @@
}
.Rk-Wikipedia-Icon {
- float: left; width: 52px; height: 47px; background: url(../img/wikipedia.png);
+ float: left; margin: 3px;
}
.Rk-Wikipedia-Title-Icon {
@@ -441,18 +446,14 @@
margin-left: 54px;
}
-.Rk-Ldt-Icon {
- float: left; width: 49px; background: url(../img/ldt-elements.png);
-}
-
-.Rk-Ldt-TagIcon {
- height: 19px;
+.Rk-Ldt-Tag-Icon {
+ float: left; margin: 0 2px 0 0;
}
-.Rk-Ldt-PointIcon {
- height: 29px; background-position: 0 -19px;
+.Rk-Ldt-Annotation-Icon {
+ float: left; margin: 3px;
}
-.Rk-Ldt-SegmentIcon {
- height: 29px; background-position: 0 -48px;
+.Rk-Clear {
+ clear: both;
}
--- a/client/data/test-data.json Wed Sep 05 14:49:33 2012 +0200
+++ b/client/data/test-data.json Thu Sep 06 17:21:11 2012 +0200
@@ -1,19 +1,19 @@
{
"users": [
{
- "id": "u-anonymous",
+ "_id": "u-anonymous",
"title": "anonymous",
"uri": "",
"description": "",
"color": "#dd00dd"
}, {
- "id": "u-cybunk",
+ "_id": "u-cybunk",
"title": "Samuel",
"uri": "http://twitter.com/cybunk",
"description": "",
"color": "#e00000"
}, {
- "id": "u-raphv",
+ "_id": "u-raphv",
"title": "Raphael",
"uri": "http://twitter.com/raphv",
"description": "",
@@ -22,7 +22,7 @@
],
"nodes": [
{
- "id": "node-2012-08-22-9da6eef6c6391d05-0001",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-0001",
"title": "Chocs technologiques et tâches de l’université...",
"uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_6C326EED-B91A-AEDF-032D-40D9A60AAD7E",
"description": "Bernard Stiegler:\nChocs technologiques et tâches de l’université. L'époque des digital studies\nベルナール・スティグレールによるプレゼンテーション『テクノロジーの衝撃と大学の諸課題――デジタル・スタディーズの時代』 (langue française フランス語)",
@@ -30,39 +30,43 @@
"x": 35.50145330596697,
"y": -79.8809523809524
},
+ "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png",
"created_by": "u-cybunk"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-0002",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-0002",
"title": "Wiki: ベルナール・スティグレール",
"uri": "http://ja.wikipedia.org/wiki/%E3%83%99%E3%83%AB%E3%83%8A%E3%83%BC%E3%83%AB%E3%83%BB%E3%82%B9%E3%83%86%E3%82%A3%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%AB",
"description": "|image_name = Bernard-Stiegler.jpg\n'''ベルナール・スティグレール'''（'''Bernard Stiegler''',[[1952年]][[4月1日]] - ）は、[[フランス]]の[[哲学者]]。\n",
"position": {
- "x": -196.21861947454883,
- "y": -149.00697345010028
+ "x": -212.89325104742056,
+ "y": -142.05921029473706
},
+ "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-0003",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-0003",
"title": "Wiki: Bernard Stiegler",
"uri": "http://fr.wikipedia.org/wiki/Bernard_Stiegler",
"description": "Bernard Stiegler, né le 1 | avril | 1952, est un philosophe français qui axe sa réflexion sur les enjeux des mutations actuelles — ... ",
"position": {
- "x": -203.78187077358191,
- "y": -298.3662919065874
+ "x": -199.613212880364,
+ "y": -297.6715155910511
},
+ "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-0004",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-0004",
"title": "Tag: Stiegler",
"uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/search/?search=Stiegler&field=all",
"description": "Tag 'Stiegler'",
"position": {
- "x": -82.30326393358813,
- "y": -220.3518547582561
+ "x": -68.40773762286169,
+ "y": -205.76155213199334
},
+ "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-tag.png",
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-0009",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-0009",
"title": "Wiki: Humanités numériques",
"uri": "http://fr.wikipedia.org/wiki/Humanit%C3%A9s_num%C3%A9riques",
"description": "une proposition de définition a été élaborée lors du THATCamp des 18 et 19 mai 2010 sous la forme d'un « Manifeste des digital humanities : ... ",
@@ -70,9 +74,10 @@
"x": -227.84295519248332,
"y": 91.1816115015538
},
+ "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-000a",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-000a",
"title": "Wiki: デジタル・ヒューマニティーズ",
"uri": "http://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%83%BB%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%8B%E3%83%86%E3%82%A3%E3%83%BC%E3%82%BA",
"description": "...（digital humanities）は、コンピューティングと人文科学（humanities）諸分野と間の接点に関して調査、研究、教育、および�\n* Centre for Computing in the Humanities\n",
@@ -80,19 +85,20 @@
"x": -221.48701615763574,
"y": 242.80740052545508
},
+ "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-000b",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-000b",
"title": "Digital studies",
"uri": "",
"description": "",
"position": {
- "x": -55.85113246487888,
- "y": 51.55194408866958
+ "x": -62.798895620242085,
+ "y": 32.09820725365255
},
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-9da6eef6c6391d05-000c",
+ "_id": "node-2012-08-22-9da6eef6c6391d05-000c",
"title": "Digital Humanities",
"uri": "",
"description": "",
@@ -102,7 +108,7 @@
},
"created_by": "u-raphv"
}, {
- "id": "node-2012-08-22-b778a9fc31296d6b-0008",
+ "_id": "node-2012-08-22-b778a9fc31296d6b-0008",
"title": "Les rétentions (Tweet)",
"uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=a924b90c-46a1-4f0a-9e13-bcf69f7b5de0-127750274034049024",
"description": "Tweet by Vincent Puig: #tfcem Les rétentions primaires (perception) s'aggrégent et forment des rétentions secondaires (mémoire), gravées sur rétentions tertiaires",
@@ -110,52 +116,57 @@
"x": 186.15055288633457,
"y": -184.66836073709257
},
+ "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
"created_by": "u-cybunk"
}, {
- "id": "node-2012-08-22-b778a9fc31296d6b-0009",
+ "_id": "node-2012-08-22-b778a9fc31296d6b-0009",
"title": "L'origine de la géométrie (Tweet)",
"uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=5b34ae61-ffb1-4535-a479-007cb0ef57e8-127752118743474177",
"description": "Tweet by Vincent Puig: #tfcem L'origine de la géométrie: l'écriture est processus long de transindividuation. Nos tweets quasi temps réel sont de même nature++",
"position": {
- "x": 109.36171738186508,
- "y": -322.7405203211109
+ "x": 87.82365160023906,
+ "y": -280.3591650733953
},
+ "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
"created_by": "u-cybunk"
}, {
- "id": "node-2012-08-22-b778a9fc31296d6b-000a",
+ "_id": "node-2012-08-22-b778a9fc31296d6b-000a",
"title": "Polemictweet : un outil Digital Studies (Tweet)",
"uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=4b34e895-221b-467b-a0f2-8ff4ae87cae4-127758736415666177",
"description": "Tweet by Vincent Puig:\n#tfcem Polemictweet : un outil Digital Studies pensé à l'IRI comme rétention tertiaire numérique avec les même armes que l'industrie",
"position": {
- "x": 174.8441677339912,
- "y": 69.79052957489553
+ "x": 168.59118089416432,
+ "y": 57.97933221077804
},
+ "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
"created_by": "u-cybunk"
}, {
- "id": "node-2012-08-22-b778a9fc31296d6b-000f",
+ "_id": "node-2012-08-22-b778a9fc31296d6b-000f",
"title": "Rétention (Définition AI)",
"uri": "http://arsindustrialis.org/vocabulaire-ars-industrialis/r%C3%A9tention",
"description": "Les rétentions sont ce qui est retenu ou recueilli par la conscience. Ce terme est emprunté à Husserl ; mais les rétentions tertiaires sont propres à la philosophie de Bernard Stiegler.\n\nLes rétentions sont des sélections : dans le flux de conscience que vous êtes vous ne pouvez pas tout retenir, ce que vous retenez est ce que vous êtes, mais ce que vous retenez dépend ce que vous avez déjà retenu.\n\nL’espèce humaine, étant originairement constituée par sa prothéticité, dispose d’une troisième mémoire, ni génétique, ni épigénétique : le milieu épiphylogénétique, comme ensemble des rétentions tertiaires formant des dispositifs rétentionels.",
"position": {
- "x": 240.98461723225768,
- "y": -53.794373087027985
+ "x": 276.41820932461013,
+ "y": -62.82646518900019
},
+ "image": "http://www.arsindustrialis.org/sites/default/files/userfiles/user3/Logovocabulairenoir.JPG",
"created_by": "u-cybunk"
}, {
- "id": "node-2012-08-22-5b349e49066c1b01-0001",
+ "_id": "node-2012-08-22-5b349e49066c1b01-0001",
"title": "Polemic Tweet",
"uri": "http://polemictweet.com/",
"description": "Polemic Tweet Web Site",
"position": {
- "x": 220.27339862010322,
- "y": 209.95821750254615
+ "x": 220.96817493563964,
+ "y": 196.75746750735607
},
+ "image": "http://www.polemictweet.com/images/ENMI_2010_logo.gif",
"created_by": "u-cybunk"
}
],
"edges": [
{
- "id": "edge-2012-08-22-9da6eef6c6391d05-0005",
+ "_id": "edge-2012-08-22-9da6eef6c6391d05-0005",
"title": "is about",
"uri": "",
"description": "",
@@ -163,7 +174,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-0004",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-9da6eef6c6391d05-0006",
+ "_id": "edge-2012-08-22-9da6eef6c6391d05-0006",
"title": "is about",
"uri": "",
"description": "",
@@ -171,7 +182,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-0004",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-9da6eef6c6391d05-0007",
+ "_id": "edge-2012-08-22-9da6eef6c6391d05-0007",
"title": "speech by",
"uri": "",
"description": "",
@@ -179,7 +190,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-0004",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-0001",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-0001",
"title": "is about",
"uri": "",
"description": "",
@@ -187,7 +198,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-000b",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-0002",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-0002",
"title": "Are related to",
"uri": "",
"description": "",
@@ -195,7 +206,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-000c",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-0003",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-0003",
"title": "is about",
"uri": "",
"description": "",
@@ -203,7 +214,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-000c",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-0004",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-0004",
"title": "is about",
"uri": "",
"description": "",
@@ -211,7 +222,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-000c",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-000b",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-000b",
"title": "is about",
"uri": "",
"description": "",
@@ -219,7 +230,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-000b",
"created_by": "u-raphv"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-000c",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-000c",
"title": "tweeted during",
"uri": "",
"description": "",
@@ -227,7 +238,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-0001",
"created_by": "u-cybunk"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-000d",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-000d",
"title": "tweeted during",
"uri": "",
"description": "",
@@ -235,7 +246,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-0001",
"created_by": "u-cybunk"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-000e",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-000e",
"title": "tweeted during",
"uri": "",
"description": "",
@@ -243,7 +254,7 @@
"to": "node-2012-08-22-9da6eef6c6391d05-0001",
"created_by": "u-cybunk"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-0011",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-0011",
"title": "is about",
"uri": "",
"description": "",
@@ -251,7 +262,7 @@
"to": "node-2012-08-22-b778a9fc31296d6b-000f",
"created_by": "u-cybunk"
}, {
- "id": "edge-2012-08-22-b778a9fc31296d6b-0012",
+ "_id": "edge-2012-08-22-b778a9fc31296d6b-0012",
"title": "is about",
"uri": "",
"description": "",
@@ -259,13 +270,29 @@
"to": "node-2012-08-22-b778a9fc31296d6b-000f",
"created_by": "u-cybunk"
}, {
- "id": "edge-2012-08-22-5b349e49066c1b01-0002",
+ "_id": "edge-2012-08-22-5b349e49066c1b01-0002",
"title": "is about",
"uri": "",
"description": "",
"from": "node-2012-08-22-b778a9fc31296d6b-000a",
"to": "node-2012-08-22-5b349e49066c1b01-0001",
"created_by": "u-cybunk"
+ }, {
+ "_id": "edge-2012-09-06-70cc0c2d5e1112d3-0001",
+ "title": "is an example of",
+ "uri": "",
+ "description": "",
+ "from": "node-2012-08-22-b778a9fc31296d6b-000a",
+ "to": "node-2012-08-22-9da6eef6c6391d05-000b",
+ "created_by": "u-anonymous"
+ }, {
+ "_id": "edge-2012-09-06-70cc0c2d5e1112d3-0002",
+ "title": "tool used",
+ "uri": "",
+ "description": "",
+ "from": "node-2012-08-22-5b349e49066c1b01-0001",
+ "to": "node-2012-08-22-b778a9fc31296d6b-000a",
+ "created_by": "u-anonymous"
}
]
}
\ No newline at end of file
Binary file client/img/ldt-elements.png has changed
Binary file client/img/ldt-point.png has changed
Binary file client/img/ldt-segment.png has changed
Binary file client/img/ldt-tag.png has changed
--- a/client/js/i18n.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/i18n.js Thu Sep 06 17:21:11 2012 +0200
@@ -7,6 +7,7 @@
edit_description: "Description:",
edit_from: "From:",
edit_to: "To:",
+ edit_image: "Image:",
full_screen: "Full Screen",
add_node: "Add Node",
add_edge: "Add Edge",
@@ -26,11 +27,12 @@
fr: {
edit_node: "Édition d’un nœud",
edit_edge: "Édition d’un lien",
- edit_title: "Titre:",
- edit_uri: "URI:",
+ edit_title: "Titre :",
+ edit_uri: "URI :",
edit_description: "Description :",
- edit_from: "De:",
- edit_to: "Vers:",
+ edit_from: "De :",
+ edit_to: "Vers :",
+ edit_image: "Image :",
full_screen: "Mode plein écran",
add_node: "Ajouter un nœud",
add_edge: "Ajouter un lien",
--- a/client/js/ldtjson-bin.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/ldtjson-bin.js Thu Sep 06 17:21:11 2012 +0200
@@ -3,13 +3,13 @@
Rkns.Ldt.ProjectBin = Rkns.Utils.inherit(Rkns._BaseBin);
Rkns.Ldt.ProjectBin.prototype.tagTemplate = Rkns._.template(
- '<li class="Rk-Bin-Item" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
- + '<div class="Rk-Ldt-Icon Rk-Ldt-TagIcon"></div><h4><%-title%></h4></li>'
+ '<li class="Rk-Bin-Item" data-image="img/ldt-tag.png" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
+ + '<img class="Rk-Ldt-Tag-Icon" src="img/ldt-tag.png" /><h4><%-title%></h4><div class="Rk-Clear"></div></li>'
);
Rkns.Ldt.ProjectBin.prototype.annotationTemplate = Rkns._.template(
- '<li class="Rk-Bin-Item" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
- + '<div class="Rk-Ldt-Icon Rk-Ldt-<%=type%>Icon"></div><h4><%-title%></h4><p><%-description%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p></li>'
+ '<li class="Rk-Bin-Item" data-image="<%=image%>" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+ + '<img class="Rk-Ldt-Annotation-Icon" src="<%=image%>"/><h4><%-title%></h4><p><%-description%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p><div class="Rk-Clear"></div></li>'
);
Rkns.Ldt.ProjectBin.prototype._init = function(_renkan, _opts) {
@@ -54,7 +54,12 @@
_html += Rkns._(_data.annotations).map(function(_annotation) {
var _description = _annotation.content.description,
_title = _annotation.content.title.replace(_description,""),
- _duration = _annotation.end - _annotation.begin;
+ _duration = _annotation.end - _annotation.begin,
+ _img = (
+ (_annotation.content && _annotation.content.img && _annotation.content.img.src)
+ ? _annotation.content.img.src
+ : ( _duration ? "img/ldt-segment.png" : "img/ldt-point.png" )
+ );
return _this.annotationTemplate({
ldt_platform: _this.ldt_platform,
title: _title,
@@ -64,7 +69,7 @@
duration: convertTC(_duration),
mediaid: _annotation.media,
annotationid: _annotation.id,
- type: _duration ? "Segment" : "Point"
+ image: _img
});
}).join("");
--- a/client/js/main.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/main.js Thu Sep 06 17:21:11 2012 +0200
@@ -166,7 +166,8 @@
_this.selected_bin_item = {
uri : $(_t).attr("data-uri"),
title : $(_t).attr("data-title"),
- description : $(_t).attr("data-description")
+ description : $(_t).attr("data-description"),
+ image: $(_t).attr("data-image")
}
return false;
}
--- a/client/js/models.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/models.js Thu Sep 06 17:21:11 2012 +0200
@@ -87,6 +87,7 @@
uri: this.get("uri"),
description: this.get("description"),
position: this.get("position"),
+ image: this.get("image"),
created_by: this.get("created_by").get("_id")
};
},
--- a/client/js/paper-renderer.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/paper-renderer.js Thu Sep 06 17:21:11 2012 +0200
@@ -2,9 +2,9 @@
_MARGIN_X: 80,
_MARGIN_Y: 50,
_MIN_DRAG_DISTANCE: 2,
- _NODE_RADIUS: 15,
- _NODE_BUTTON_INNER: 16,
- _NODE_BUTTON_OUTER: 50,
+ _NODE_RADIUS: 25,
+ _NODE_BUTTON_INNER: 26,
+ _NODE_BUTTON_OUTER: 60,
_EDGE_BUTTON_INNER: 1,
_EDGE_BUTTON_OUTER: 40,
_NODE_FONT_SIZE: 10,
@@ -205,7 +205,6 @@
this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, {});
this.link_button.node_representation = this;
this.title.paragraphStyle.justification = 'center';
- this.title.__representation = this;
}
Rkns.Renderer.Node.prototype.redraw = function() {
@@ -213,11 +212,43 @@
this.paper_coords = this.renderer.toPaperCoords(_model_coords);
this.circle.position = this.paper_coords;
this.title.content = this.model.get("title");
- this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
+ this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
this.circle.strokeColor = this.model.get("created_by").get("color");
this.edit_button.moveTo(this.paper_coords);
this.remove_button.moveTo(this.paper_coords);
this.link_button.moveTo(this.paper_coords);
+ var _img = this.model.get("image");
+ if (_img && _img !== this.img) {
+ var _image = new Image(),
+ _this = this;
+ _image.onload = function() {
+ if (_this.node_image) {
+ _this.node_image.remove();
+ }
+ _this.renderer.node_layer.activate();
+ var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );
+ var _raster = new paper.Raster(_image);
+ var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
+ _raster.scale(_ratio);
+ _this.node_image = new paper.Group(_clip, _raster);
+ _this.node_image.opacity = .9;
+ /* This is a workaround to allow clipping at group level */
+ _this.node_image.clipped = true;
+ _this.node_image.position = _this.paper_coords;
+ _this.node_image.__representation = _this;
+ paper.view.draw();
+ }
+ _image.src = _img;
+ }
+ this.img = _img;
+ if (this.node_image) {
+ if (!this.img) {
+ this.node_image.remove();
+ delete this.node_image;
+ } else {
+ this.node_image.position = this.paper_coords;
+ }
+ }
}
Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
@@ -236,7 +267,7 @@
this.renderer.removeRepresentationsOfType("editor");
var _editor = this.renderer.addRepresentation("NodeEditor",null);
_editor.node_representation = this;
- _editor.redraw();
+ _editor.draw();
}
Rkns.Renderer.Node.prototype.select = function() {
@@ -264,11 +295,17 @@
}
Rkns.Renderer.Node.prototype.highlight = function() {
- this.circle.fillColor = "#ffffc0";
+ this.circle.fillColor = "#ffff80";
+ if (this.node_image) {
+ this.node_image.opacity = .5;
+ }
}
Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) {
this.circle.fillColor = "#ffffff";
+ if (this.node_image) {
+ this.node_image.opacity = .9;
+ }
}
Rkns.Renderer.Node.prototype.mouseup = function(_event) {
@@ -285,6 +322,9 @@
this.link_button.destroy();
this.circle.remove();
this.title.remove();
+ if (this.node_image) {
+ this.node_image.remove();
+ }
}
/* */
@@ -309,7 +349,6 @@
fillColor: 'black'
};
this.text.paragraphStyle.justification = 'center';
- this.text.__representation = this;
this.text_angle = 0;
this.arrow_angle = 0;
this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, {});
@@ -360,7 +399,7 @@
this.renderer.removeRepresentationsOfType("editor");
var _editor = this.renderer.addRepresentation("EdgeEditor",null);
_editor.edge_representation = this;
- _editor.redraw();
+ _editor.draw();
}
Rkns.Renderer.Edge.prototype.select = function() {
@@ -503,41 +542,51 @@
+ '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
+ '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/><a class="Rk-Edit-Goto" href="<%=node.uri%>" target="_blank"></a></p>'
+ '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
+ + '<p><label><%=l10n.edit_image%></label><input class="Rk-Edit-Image" type="text" value="<%=node.image%>"/><img class="Rk-Edit-ImgPreview" src="<%=node.image%>" /></p>'
+ '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
);
-Rkns.Renderer.NodeEditor.prototype.redraw = function() {
- var _coords = this.node_representation.paper_coords,
- _model = this.node_representation.model;
+Rkns.Renderer.NodeEditor.prototype.draw = function() {
+ var _model = this.node_representation.model;
this.editor_$
.html(this.template({
node: {
title: _model.get("title"),
uri: _model.get("uri"),
description: _model.get("description"),
+ image: _model.get("image") || "",
created_by_color: _model.get("created_by").get("color"),
created_by_title: _model.get("created_by").get("title")
},
l10n: this.renderer.renkan.l10n
- }))
- .show();
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+ }));
+ this.redraw();
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
this.editor_$.find("input, textarea").bind("keyup change", function() {
- _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+ var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
+ _image = _this.editor_$.find(".Rk-Edit-Image").val();
+ _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
+ _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
var _data = {
title: _this.editor_$.find(".Rk-Edit-Title").val(),
description: _this.editor_$.find(".Rk-Edit-Description").val(),
- uri: _this.editor_$.find(".Rk-Edit-URI").val()
+ uri: _uri,
+ image: _image
}
_model.set(_data);
- paper.view.draw();
+ _this.redraw();
});
this.editor_$.find(".Rk-Edit-Title")[0].focus();
+}
+
+Rkns.Renderer.NodeEditor.prototype.redraw = function() {
+ var _coords = this.node_representation.paper_coords;
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+ this.editor_$.show();
paper.view.draw();
}
@@ -578,9 +627,8 @@
+ '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
);
-Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
- var _coords = this.edge_representation.paper_coords,
- _model = this.edge_representation.model;
+Rkns.Renderer.EdgeEditor.prototype.draw = function() {
+ var _model = this.edge_representation.model;
this.editor_$
.html(this.template({
edge: {
@@ -595,9 +643,8 @@
created_by_title: _model.get("created_by").get("title")
},
l10n: this.renderer.renkan.l10n
- }))
- .show();
- Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
+ }));
+ this.redraw();
var _this = this;
this.editor_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
@@ -610,8 +657,13 @@
uri: _this.editor_$.find(".Rk-Edit-URI").val()
}
_model.set(_data);
- paper.view.draw();
+ _this.redraw();
});
+}
+Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
+ var _coords = this.edge_representation.paper_coords;
+ Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
+ this.editor_$.show();
paper.view.draw();
}
@@ -1288,6 +1340,7 @@
uri: _newEl.uri,
title: _newEl.title,
description: _newEl.description,
+ image: _newEl.image,
position: {
x: _coords.x,
y: _coords.y
--- a/client/js/renkan-publish.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/renkan-publish.js Thu Sep 06 17:21:11 2012 +0200
@@ -125,6 +125,7 @@
uri: this.get("uri"),
description: this.get("description"),
position: this.get("position"),
+ image: this.get("image"),
created_by: this.get("created_by").get("_id")
}
},
@@ -291,7 +292,7 @@
_MARGIN_X: 80,
_MARGIN_Y: 50,
_MIN_DRAG_DISTANCE: 2,
- _NODE_RADIUS: 15,
+ _NODE_RADIUS: 20,
_NODE_FONT_SIZE: 10,
_EDGE_FONT_SIZE: 9,
_NODE_MAX_CHAR: 30,
@@ -408,6 +409,38 @@
this.title.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._NODE_MAX_CHAR);
this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
this.circle.strokeColor = this.model.get("created_by").get("color");
+ var _img = this.model.get("image");
+ if (_img && _img !== this.img) {
+ var _image = new Image(),
+ _this = this;
+ _image.onload = function() {
+ if (_this.node_image) {
+ _this.node_image.remove();
+ }
+ _this.renderer.node_layer.activate();
+ var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );
+ var _raster = new paper.Raster(_image);
+ var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
+ _raster.scale(_ratio);
+ _this.node_image = new paper.Group(_clip, _raster);
+ _this.node_image.opacity = .9;
+ /* This is a workaround to allow clipping at group level */
+ _this.node_image.clipped = true;
+ _this.node_image.position = _this.paper_coords;
+ _this.node_image.__representation = _this;
+ paper.view.draw();
+ }
+ _image.src = _img;
+ }
+ this.img = _img;
+ if (this.node_image) {
+ if (!this.img) {
+ this.node_image.remove();
+ delete this.node_image;
+ } else {
+ this.node_image.position = this.paper_coords;
+ }
+ }
}
Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
@@ -420,18 +453,24 @@
this.renderer.removeRepresentationsOfType("tooltip");
var _tooltip = this.renderer.addRepresentation("NodeTooltip",null);
_tooltip.node_representation = this;
- _tooltip.redraw();
+ _tooltip.draw();
}
Rkns.Renderer.Node.prototype.select = function() {
this.circle.strokeWidth = 3;
- this.circle.fillColor = "#ffffc0";
+ this.circle.fillColor = "#ffff80";
+ if (this.node_image) {
+ this.node_image.opacity = .5;
+ }
paper.view.draw();
}
Rkns.Renderer.Node.prototype.unselect = function() {
this.circle.strokeWidth = 1;
this.circle.fillColor = "#ffffff";
+ if (this.node_image) {
+ this.node_image.opacity = .9;
+ }
paper.view.draw();
}
@@ -441,6 +480,9 @@
Rkns.Renderer.Node.prototype.destroy = function(_event) {
this.circle.remove();
this.title.remove();
+ if (this.node_image) {
+ this.node_image.remove();
+ }
}
/* */
@@ -510,7 +552,7 @@
this.renderer.removeRepresentationsOfType("tooltip");
var _tooltip = this.renderer.addRepresentation("EdgeTooltip",null);
_tooltip.edge_representation = this;
- _tooltip.redraw();
+ _tooltip.draw();
}
Rkns.Renderer.Edge.prototype.select = function() {
@@ -571,9 +613,8 @@
+ '<p><%=description%></p>'
);
-Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
- var _coords = this.node_representation.paper_coords,
- _model = this.node_representation.model,
+Rkns.Renderer.NodeTooltip.prototype.draw = function() {
+ var _model = this.node_representation.model,
_title = _model.get("title"),
_uri = _model.get("uri");
this.tooltip_$
@@ -581,17 +622,18 @@
a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…')
}))
- .show();
- Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$);
+ this.redraw();
var _this = this;
this.tooltip_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
- this.tooltip_$.find("input, textarea").bind("keyup change", function() {
- _this.tooltip_$.find(".Rk-Edit-Goto").attr("href",_this.tooltip_$.find(".Rk-Edit-URI").val());
- });
- paper.view.draw();
+}
+
+Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
+ var _coords = this.node_representation.paper_coords;
+ Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 10, this.tooltip_$);
+ this.tooltip_$.show();
}
Rkns.Renderer.NodeTooltip.prototype.destroy = function() {
@@ -627,23 +669,27 @@
+ '<p><%=description%></p>'
);
-Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
- var _coords = this.edge_representation.paper_coords,
- _model = this.edge_representation.model,
+Rkns.Renderer.EdgeTooltip.prototype.draw = function() {
+ var _model = this.edge_representation.model,
_title = _model.get("title"),
_uri = _model.get("uri");
this.tooltip_$
.html(this.template({
a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1…')
- }))
- .show();
- Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
+ }));
+ this.redraw();
var _this = this;
this.tooltip_$.find(".Rk-CloseX").click(function() {
_this.renderer.removeRepresentation(_this);
paper.view.draw();
});
+}
+
+Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
+ var _coords = this.edge_representation.paper_coords;
+ Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
+ this.tooltip_$.show();
paper.view.draw();
}
--- a/client/js/twitter-bin.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/twitter-bin.js Thu Sep 06 17:21:11 2012 +0200
@@ -26,7 +26,7 @@
Rkns.Twitter.Bin.prototype.tweetTemplate = Rkns._.template(
'<li class="Rk-Twitter-Tweet Rk-Bin-Item" data-uri="http://twitter.com/<%=tweet.from_user%>/status/<%=tweet.id_str%>" '
- + 'data-title="Tweet by @<%=tweet.from_user%>" data-description="<%-tweet.text%>">'
+ + 'data-title="Tweet by @<%=tweet.from_user%>" data-description="<%-tweet.text%>" data-image="<%=tweet.profile_image_url%>">'
+ '<img class="Rk-Twitter-TwImage" src="<%=tweet.profile_image_url%>" />'
+ '<h4 class="Rk-Twitter-TwTitle"><a href="http://twitter.com/<%=tweet.from_user%>" target="_blank">@<%=tweet.from_user%></a> (<%=tweet.from_user_name%>)</h4>'
+ '<p class="Rk-Twitter-TwDate"><%=date%></p>'
--- a/client/js/wikipedia-bin.js Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/wikipedia-bin.js Thu Sep 06 17:21:11 2012 +0200
@@ -27,8 +27,8 @@
Rkns.Wikipedia.Bin.prototype.resultTemplate = Rkns._.template(
'<li class="Rk-Wikipedia-Result Rk-Bin-Item" data-uri="<%=wpurl%>" '
- + 'data-title="Wikipedia: <%=result.title%>" data-description="<%=wpdesc%>">'
- + '<div class="Rk-Wikipedia-Icon"></div><h4 class="Rk-Wikipedia-Title"><a href="<%=wpurl%>" target="_blank"><%=highlightedtitle%></a></h4>'
+ + 'data-title="Wikipedia: <%=result.title%>" data-description="<%=wpdesc%>" data-image="img/wikipedia.png">'
+ + '<img class="Rk-Wikipedia-Icon" src="img/wikipedia.png"></div><h4 class="Rk-Wikipedia-Title"><a href="<%=wpurl%>" target="_blank"><%=highlightedtitle%></a></h4>'
+ '<p class="Rk-Wikipedia-Snippet"><%=result.snippet%></p></li>'
);
--- a/client/render-test.html Wed Sep 05 14:49:33 2012 +0200
+++ b/client/render-test.html Thu Sep 06 17:21:11 2012 +0200
@@ -46,7 +46,7 @@
title: "LDT Project",
bin: Rkns.Ldt.ProjectBin,
project_id: "67280b1c-ff30-11e0-a82d-00145ea49a02",
- ldt_platform: "http://capsicum/pf/"
+ ldt_platform: "http://ldt.iri.centrepompidou.fr/"
}
],
search: [
