| author | veltr |
| Wed, 22 Aug 2012 16:50:42 +0200 | |
| changeset 26 | 2fad193bae98 |
| parent 25 | b5ada3bb8e53 |
| child 27 | 6ec62ab8cb8d |
| child 28 | 805d85b3f390 |
--- a/client/css/renkan.css Tue Aug 21 18:49:41 2012 +0200 +++ b/client/css/renkan.css Wed Aug 22 16:50:42 2012 +0200 @@ -43,6 +43,11 @@ body { font-size: 10px; font-family: Arial, Helvetica, sans-serif; + background: #ffffff; color: #000000; +} + +a { + color: #6060c0; } .Rk-Bins { @@ -77,10 +82,18 @@ display: inline-block; width: 80px; } -.Rk-Editor input[type=text] { +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 { font-size: 12px; width: 225px; } +.Rk-Edit-URI { + font-size: 12px; width: 205px; +} + .Rk-Editor textarea { width: 225px; height: 120px; resize: none; } @@ -130,8 +143,37 @@ overflow: auto; } -.Rk-Twitter-Tweet, .Rk-Wikipedia-Result { - padding: 2px; background: #f8f8f8; border-bottom: 1px solid #cccccc; min-height: 55px; +.Rk-Bin-Item { + cursor: move; +} + +.Rk-Bin-Item:hover { + background: #d0d0d0; +} + +.Rk-Bin-Item.dragging { + background: #fff8f8; color: #660000; +} + +.Rk-Bin-Item.selected { + background: #ffffc0; +} + +.Rk-Bin-Main li { + padding: 2px; background: #f8f8f8; border-bottom: 1px solid #cccccc; + clear: both; +} + +.Rk-Bin-Main h3 { + font-size: 15px; font-style: italic; font-weight: bold; text-align: center; +} + +.Rk-Bin-Main h4 { + font-size: 13px; font-weight: bold; +} + +.Rk-Bin-Main p { + font-size: 12px; } .Rk-Twitter-TwImage { @@ -142,18 +184,42 @@ margin: 2px 0 2px 50px; } -.Rk-Twitter-TwTitle, .Rk-Wikipedia-Title { - font-size: 13px; font-weight: bold; -} - -.Rk-Twitter-TwDate { +p.Rk-Twitter-TwDate { font-size: 11px; font-style: italic; } -.Rk-Twitter-TwText, .Rk-Wikipedia-Snippet { - font-size: 12px; +p.Rk-Twitter-TwActions { + font-size: 11px; +} + +.Rk-Bin-Main .searchmatch { + background: #ffff80; +} + +.Rk-Wikipedia-Icon { + float: left; width: 52px; height: 47px; background: url(../img/wikipedia.png); +} + +.Rk-Wikipedia-Result { + min-height: 51px; } -.Rk-Wikipedia-Result .searchmatch, .Rk-Twitter-TwText .searchmatch { - background: #ffff80; +.Rk-Wikipedia-Result p, .Rk-Wikipedia-Result h4 { + margin-left: 54px; +} + +.Rk-Ldt-Icon { + float: left; width: 49px; background: url(../img/ldt-elements.png); } + +.Rk-Ldt-TagIcon { + height: 19px; +} + +.Rk-Ldt-PointIcon { + height: 29px; background-position: 0 -19px; +} + +.Rk-Ldt-SegmentIcon { + height: 29px; background-position: 0 -48px; +}
--- a/client/data/test-data.json Tue Aug 21 18:49:41 2012 +0200 +++ b/client/data/test-data.json Wed Aug 22 16:50:42 2012 +0200 @@ -1,112 +1,271 @@ { - "title": "Test Graph", - "creation_date": "2012-07-25T11:00:00.0Z", "users": [ { + "id": "u-anonymous", + "title": "anonymous", + "uri": "", + "description": "", + "color": "#dd00dd" + }, { "id": "u-cybunk", "title": "Samuel", "uri": "http://twitter.com/cybunk", + "description": "", "color": "#e00000" - }, - { + }, { "id": "u-raphv", "title": "Raphael", "uri": "http://twitter.com/raphv", + "description": "", "color": "#00a000" } ], "nodes": [ { - "id": "n-001", - "title": "連環 (Renkan)", - "uri": "http://ja.wikipedia.org/wiki/%E7%99%BE%E5%AD%A6%E9%80%A3%E7%92%B0", - "created_by": "u-cybunk", + "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 フランス語)", + "position": { + "x": 35.50145330596697, + "y": -79.8809523809524 + }, + "created_by": "u-cybunk" + }, { + "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 + }, + "created_by": "u-raphv" + }, { + "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": 0, - "y": 0 - } - }, - { - "id": "n-002", - "title": "Savoir", - "uri": "http://fr.wikipedia.org/wiki/Savoir", - "created_by": "u-raphv", + "x": -203.78187077358191, + "y": -298.3662919065874 + }, + "created_by": "u-raphv" + }, { + "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 + }, + "created_by": "u-raphv" + }, { + "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 : ... ", "position": { - "x": 200, - "y": 50 - } - }, - { - "id": "n-003", - "title": "Connaissance", - "uri": "http://fr.wikipedia.org/wiki/Connaissance", - "created_by": "u-raphv", + "x": -227.84295519248332, + "y": 91.1816115015538 + }, + "created_by": "u-raphv" + }, { + "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", + "position": { + "x": -221.48701615763574, + "y": 242.80740052545508 + }, + "created_by": "u-raphv" + }, { + "id": "node-2012-08-22-9da6eef6c6391d05-000b", + "title": "Digital studies", + "uri": "", + "description": "", "position": { - "x": 300, - "y": -50 - } - }, - { - "id": "n-004", - "title": "graphe", - "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes", - "created_by": "u-cybunk", + "x": -55.85113246487888, + "y": 51.55194408866958 + }, + "created_by": "u-raphv" + }, { + "id": "node-2012-08-22-9da6eef6c6391d05-000c", + "title": "Digital Humanities", + "uri": "", + "description": "", + "position": { + "x": -110.57020731070799, + "y": 160.92139209086253 + }, + "created_by": "u-raphv" + }, { + "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", + "position": { + "x": 186.15055288633457, + "y": -184.66836073709257 + }, + "created_by": "u-cybunk" + }, { + "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": -200, - "y": 0 - } - }, - { - "id": "n-005", - "title": "nœud", - "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes", - "created_by": "u-cybunk", + "x": 109.36171738186508, + "y": -322.7405203211109 + }, + "created_by": "u-cybunk" + }, { + "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": -350, - "y": 100 - } - }, - { - "id": "n-006", - "title": "lien", - "uri": "http://fr.wikipedia.org/wiki/Th%C3%A9orie_des_graphes", - "created_by": "u-cybunk", + "x": 174.8441677339912, + "y": 69.79052957489553 + }, + "created_by": "u-cybunk" + }, { + "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": -300, - "y": -100 - } + "x": 240.98461723225768, + "y": -53.794373087027985 + }, + "created_by": "u-cybunk" + }, { + "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 + }, + "created_by": "u-cybunk" } ], "edges": [ { - "id": "e-001", - "from": "n-001", - "to": "n-002", + "id": "edge-2012-08-22-9da6eef6c6391d05-0005", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-0002", + "to": "node-2012-08-22-9da6eef6c6391d05-0004", + "created_by": "u-raphv" + }, { + "id": "edge-2012-08-22-9da6eef6c6391d05-0006", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-0003", + "to": "node-2012-08-22-9da6eef6c6391d05-0004", + "created_by": "u-raphv" + }, { + "id": "edge-2012-08-22-9da6eef6c6391d05-0007", + "title": "speech by", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-0001", + "to": "node-2012-08-22-9da6eef6c6391d05-0004", "created_by": "u-raphv" - }, - { - "id": "e-002", - "from": "n-002", - "to": "n-003", + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-0001", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-0001", + "to": "node-2012-08-22-9da6eef6c6391d05-000b", + "created_by": "u-raphv" + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-0002", + "title": "Are related to", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-000b", + "to": "node-2012-08-22-9da6eef6c6391d05-000c", + "created_by": "u-raphv" + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-0003", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-0009", + "to": "node-2012-08-22-9da6eef6c6391d05-000c", + "created_by": "u-raphv" + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-0004", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-9da6eef6c6391d05-000a", + "to": "node-2012-08-22-9da6eef6c6391d05-000c", "created_by": "u-raphv" - }, - { - "id": "e-003", - "from": "n-001", - "to": "n-004", + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-000b", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-000a", + "to": "node-2012-08-22-9da6eef6c6391d05-000b", + "created_by": "u-raphv" + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-000c", + "title": "tweeted during", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-0009", + "to": "node-2012-08-22-9da6eef6c6391d05-0001", + "created_by": "u-cybunk" + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-000d", + "title": "tweeted during", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-0008", + "to": "node-2012-08-22-9da6eef6c6391d05-0001", "created_by": "u-cybunk" - }, - { - "id": "e-004", - "from": "n-004", - "to": "n-005", + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-000e", + "title": "tweeted during", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-000a", + "to": "node-2012-08-22-9da6eef6c6391d05-0001", + "created_by": "u-cybunk" + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-0011", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-0008", + "to": "node-2012-08-22-b778a9fc31296d6b-000f", "created_by": "u-cybunk" - }, - { - "id": "e-005", - "from": "n-004", - "to": "n-006", + }, { + "id": "edge-2012-08-22-b778a9fc31296d6b-0012", + "title": "is about", + "uri": "", + "description": "", + "from": "node-2012-08-22-b778a9fc31296d6b-000a", + "to": "node-2012-08-22-b778a9fc31296d6b-000f", + "created_by": "u-cybunk" + }, { + "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" } ] -} +} \ No newline at end of file
--- a/client/js/full-json.js Tue Aug 21 18:49:41 2012 +0200 +++ b/client/js/full-json.js Wed Aug 22 16:50:42 2012 +0200 @@ -23,7 +23,10 @@ }); } - var _thrSave = Rkns._.throttle(_save, 2000); + var _thrSave = Rkns._.throttle( + function() { + setTimeout(_save, 100) + }, 1000); _load(); _proj.on("add:nodes add:edges add:users", function(_model) { _model.on("change remove", function(_model) {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/js/ldtjson-bin.js Wed Aug 22 16:50:42 2012 +0200 @@ -0,0 +1,70 @@ +Rkns.Bins.LdtJson = Rkns.Utils.inherit(Rkns.Bins._Base); + +Rkns.Bins.LdtJson.prototype.tagTemplate = Rkns._.template( + '<li class="Rk-Bin-Item" data-uri="http://ldt.iri.centrepompidou.fr/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>' +); + +Rkns.Bins.LdtJson.prototype.annotationTemplate = Rkns._.template( + '<li class="Rk-Bin-Item" data-uri="http://ldt.iri.centrepompidou.fr/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>' +); + +Rkns.Bins.LdtJson.prototype._init = function(_renkan, _opts) { + this.proj_id = _opts.project_id; + this.title_$.html(_opts.title); + var _this = this; + function convertTC(_ms) { + function pad(_n) { + var _res = _n.toString(); + while (_res.length < 2) { + _res = '0' + _res; + } + return _res; + } + var _totalSeconds = Math.abs(Math.floor(_ms/1000)), + _hours = Math.floor(_totalSeconds / 3600), + _minutes = (Math.floor(_totalSeconds / 60) % 60), + _seconds = _totalSeconds % 60, + _res = ''; + if (_hours) { + _res += pad(_hours) + ':' + } + _res += pad(_minutes) + ':' + pad(_seconds); + return _res; + } + Rkns.$.getJSON( + 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/' + this.proj_id + '?callback=?', + function(_data) { + var _html = '<li><h3>Tags</h3></li>', + _projtitle = _data.meta["dc:title"]; + _this.title_$.html('LDT Project: "' + _projtitle + '"'); + _html += Rkns._(_data.tags).map(function(_tag) { + var _title = _tag.meta["dc:title"] + return _this.tagTemplate({ + title: _title, + encodedtitle : encodeURIComponent(_title) + }) + }).join(""); + _html += '<li><h3>Annotations</h3></li>'; + _html += Rkns._(_data.annotations).map(function(_annotation) { + var _description = _annotation.content.description, + _title = _annotation.content.title.replace(_description,""), + _duration = _annotation.end - _annotation.begin; + return _this.annotationTemplate({ + title: _title, + description: _description, + start: convertTC(_annotation.begin), + end: convertTC(_annotation.end), + duration: convertTC(_duration), + mediaid: _annotation.media, + annotationid: _annotation.id, + type: _duration ? "Segment" : "Point" + }); + }).join(""); + + _this.main_$.html(_html); + _renkan.resizeBins(); + } + ); +} \ No newline at end of file
--- a/client/js/main.js Tue Aug 21 18:49:41 2012 +0200 +++ b/client/js/main.js Wed Aug 22 16:50:42 2012 +0200 @@ -48,6 +48,7 @@ this.main_$ = Rkns.$('<div>') .addClass("Rk-Bin-Main") .appendTo(this.$); + this.title_$.html(_opts.title || '(new bin)'); this.renkan.resizeBins(); } } @@ -76,10 +77,10 @@ this.renderer = new Rkns.Renderer.Scene(this); this.tabs = []; this.selected_bin_item = undefined; - this.mousedown = false; var _this = this; this.$.mouseup(function() { _this.selected_bin_item = undefined; + _this.$.find(".Rk-Bin-Item.dragging").removeClass("dragging"); }); if (!_opts.search.length) { this.$.find(".Rk-Search-Form").detach(); @@ -112,6 +113,24 @@ }); } + Rkns._(_opts.bins).each(function(_bin) { + _this.tabs.push(new _bin.bin(_this, _bin)); + }) + + /* The bins are not yet populated, but we want to bind dragging functions + * here, as it will be easier than in the bins. Therefore, we bind to Rk-Bins + * and look where the click was. */ + function findItem(_event) { + var _t = Rkns.$(_event.target); + while (!_t.is(".Rk-Bins,.Rk-Bin-Item")) { + _t = _t.parent(); + } + if (_t.is(".Rk-Bin-Item")) { + return _t + } else { + return null; + } + } this.$.find(".Rk-Bins") .click(function(_e) { @@ -123,11 +142,9 @@ } } }).mousedown(function(_e) { - var _t = Rkns.$(_e.target); - while (!_t.is(".Rk-Bins,.Rk-Bin-Item")) { - _t = _t.parent(); - } - if (_t.is(".Rk-Bin-Item")) { + var _t = findItem(_e); + if (_t) { + _t.addClass("dragging"); _this.selected_bin_item = { uri : $(_t).attr("data-uri"), title : $(_t).attr("data-title"), @@ -135,6 +152,18 @@ } return false; } + }).mouseover(function(_e) { + var _t = findItem(_e); + if (_t && $(_t).attr("data-uri")) { + var _models = _this.project.get("nodes").where({ + uri: $(_t).attr("data-uri") + }); + Rkns._(_models).each(function(_model) { + _this.renderer.highlightModel(_model); + }); + } + }).mouseout(function() { + _this.renderer.unhighlightAll(); }); Rkns.$(window).resize(function() { _this.resizeBins(); @@ -149,8 +178,10 @@ Rkns.Renkan.prototype.resizeBins = function() { - var _titles = this.$.find(".Rk-Bin-Title"), - _d = _titles.length * _titles.outerHeight() + this.$.find(".Rk-Search-Form").outerHeight(); + var _d = + this.$.find(".Rk-Search-Form").outerHeight(); + this.$.find(".Rk-Bin-Title").each(function() { + _d += Rkns.$(this).outerHeight(); + }); this.$.find(".Rk-Bin-Main").css({ height: this.$.find(".Rk-Bins").height() - _d });
--- a/client/js/paper-renderer.js Tue Aug 21 18:49:41 2012 +0200 +++ b/client/js/paper-renderer.js Wed Aug 22 16:50:42 2012 +0200 @@ -154,6 +154,10 @@ Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {} +Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {} + +Rkns.Renderer._BaseRepresentation.prototype.unhighlight = function() {} + Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {} Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {} @@ -217,6 +221,13 @@ this.edit_button.show(); this.remove_button.show(); this.link_button.show(); + var _uri = this.model.get("uri"); + Rkns.$('.Rk-Bin-Item').each(function() { + var _el = Rkns.$(this); + if (_el.attr("data-uri") == _uri) { + _el.addClass("selected"); + } + }); } Rkns.Renderer.Node.prototype.unselect = function(_newTarget) { @@ -226,6 +237,15 @@ this.link_button.hide(); } this.circle.strokeWidth = 1; + Rkns.$('.Rk-Bin-Item').removeClass("selected"); +} + +Rkns.Renderer.Node.prototype.highlight = function() { + this.circle.fillColor = "#ffffc0"; +} + +Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) { + this.circle.fillColor = "#ffffff"; } Rkns.Renderer.Node.prototype.mouseup = function(_event) { @@ -237,6 +257,7 @@ Rkns.Renderer.Node.prototype.destroy = function(_event) { this.edit_button.destroy(); this.remove_button.destroy(); + this.link_button.destroy(); this.circle.remove(); this.title.remove(); } @@ -432,7 +453,7 @@ Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template( '<h2><span class="Rk-CloseX">×</span><%=l10n.edit_node%></span></h2>' + '<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%>"/></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.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>' ); @@ -460,6 +481,7 @@ 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 _data = { title: _this.editor_$.find(".Rk-Edit-Title").val(), description: _this.editor_$.find(".Rk-Edit-Description").val(), @@ -503,7 +525,7 @@ Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template( '<h2><span class="Rk-CloseX">×</span><%=l10n.edit_edge%></span></h2>' + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>' - + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/></p>' + + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/><a class="Rk-Edit-Goto" href="<%=edge.uri%>" target="_blank"></a></p>' + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_created_by_color%>;"></span><%=edge.from_title%></p>' + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_created_by_color%>;"></span><%=edge.to_title%></p>' + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>' @@ -850,15 +872,17 @@ ); Rkns.Renderer.Scene.prototype.autoScale = function() { - var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }), - _yy = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").y }), - _minx = Math.min.apply(Math, _xx), - _miny = Math.min.apply(Math, _yy), - _maxx = Math.max.apply(Math, _xx), - _maxy = Math.max.apply(Math, _yy); - this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny)); - this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale)); - this.redraw(); + if (this.renkan.project.get("nodes").length) { + var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }), + _yy = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").y }), + _minx = Math.min.apply(Math, _xx), + _miny = Math.min.apply(Math, _yy), + _maxx = Math.max.apply(Math, _xx), + _maxy = Math.max.apply(Math, _yy); + this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny)); + this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale)); + this.redraw(); + } } Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) { @@ -918,6 +942,19 @@ }); } +Rkns.Renderer.Scene.prototype.highlightModel = function(_model) { + var _repr = this.getRepresentationByModel(_model); + if (_repr) { + _repr.highlight(); + } +} + +Rkns.Renderer.Scene.prototype.unhighlightAll = function(_model) { + Rkns._(this.representations).each(function(_repr) { + _repr.unhighlight(); + }); +} + Rkns.Renderer.Scene.prototype.redraw = function() { Rkns._(this.representations).each(function(_representation) { _representation.redraw();
--- a/client/js/twitter-bin.js Tue Aug 21 18:49:41 2012 +0200 +++ b/client/js/twitter-bin.js Wed Aug 22 16:50:42 2012 +0200 @@ -15,7 +15,7 @@ Rkns.Bins.Twitter.prototype._init = function(_renkan, _opts) { this.search = _opts.search; - this.title_$.html('Twitter: "' + this.search + '"') + this.title_$.html('Twitter: "' + this.search + '"'); var _this = this; Rkns.$.getJSON( "http://search.twitter.com/search.json?q=" + encodeURIComponent(this.search) + "&callback=?", @@ -88,6 +88,7 @@ }); }).join(""); _this.main_$.html(_html); + _renkan.resizeBins(); } ); }
--- a/client/js/wikipedia-bin.js Tue Aug 21 18:49:41 2012 +0200 +++ b/client/js/wikipedia-bin.js Wed Aug 22 16:50:42 2012 +0200 @@ -3,14 +3,14 @@ Rkns.Bins.Wikipedia.prototype.resultTemplate = Rkns._.template( '<li class="Rk-Wikipedia-Result Rk-Bin-Item" data-uri="<%=wpurl%>" ' + 'data-title="Wikipedia: <%=result.title%>" data-description="<%=wpdesc%>">' - + '<h4 class="Rk-Wikipedia-Title"><a href="<%=wpurl%>" target="_blank"><%=highlightedtitle%></a></h4>' + + '<div class="Rk-Wikipedia-Icon"></div><h4 class="Rk-Wikipedia-Title"><a href="<%=wpurl%>" target="_blank"><%=highlightedtitle%></a></h4>' + '<p class="Rk-Wikipedia-Snippet"><%=result.snippet%></p></li>' ); Rkns.Bins.Wikipedia.prototype._init = function(_renkan, _opts) { this.search = _opts.search; this.lang = _opts.lang || "en"; - this.title_$.html(_opts.title + ': "' + this.search + '"') + this.title_$.html(_opts.title + ': "' + this.search + '"'); var _this = this; Rkns.$.getJSON( "http://" + _this.lang + ".wikipedia.org/w/api.php?action=query&list=search&srsearch=" + encodeURIComponent(this.search) + "&format=json&callback=?", @@ -25,6 +25,7 @@ }); }).join(""); _this.main_$.html(_html); + _renkan.resizeBins(); } ); } \ No newline at end of file
--- a/client/render-test.html Tue Aug 21 18:49:41 2012 +0200 +++ b/client/render-test.html Wed Aug 22 16:50:42 2012 +0200 @@ -19,12 +19,37 @@ <script src="js/random-data.js"></script> <script src="js/twitter-bin.js"></script> <script src="js/wikipedia-bin.js"></script> + <script src="js/ldtjson-bin.js"></script> <script src="js/paper-renderer.js"></script> <script type="text/javascript"> var _proj; $(function() { _renkan = new Rkns.Renkan({ url: "data/simple-persist.php", + bins: [ + { + title: "English Wikipedia", + bin: Rkns.Bins.Wikipedia, + lang: "en", + search: "Digital Humanities" + }, + { + title: "Japanese Wikipedia", + bin: Rkns.Bins.Wikipedia, + lang: "ja", + search: "Digital Humanities" + }, + { + title: "Twitter", + bin: Rkns.Bins.Twitter, + search: "Digital Humanities" + }, + { + title: "LDT Project", + bin: Rkns.Bins.LdtJson, + project_id: "67280b1c-ff30-11e0-a82d-00145ea49a02" + } + ], search: [ { title: "French Wikipedia", @@ -39,7 +64,7 @@ { title: "Japanese Wikipedia", bin: Rkns.Bins.Wikipedia, - lang: "jp" + lang: "ja" }, { title: "Twitter", bin: Rkns.Bins.Twitter @@ -55,15 +80,10 @@ </script> <link rel="stylesheet" href="css/renkan.css" /> <style type="text/css"> - #topbar { position: absolute; left: 0; top: 0; right: 0; height: 40px; background: #f8f8f8; font-size: 20px; color: #a0a0a0; } - #renkan { - position: absolute; left: 0; top: 40px; width: 200px; bottom: 0; - } </style> </head> <body> - <div id="topbar">Renkan Top Bar</div> <div id="renkan"></div> </body>
